Time Zone Messenger Extension — UI/UX case study of scheduling meetings in different time zones
Thanks to our hyperconnected world we have friends, family and colleagues all over the world. Staying connected is fairly simple in 2017 using Skype, Google Hangouts, FaceTime or any other chat application.
However, finding the right time in different time zones to have a video call, that’s the real challenge.
Defining the Key Pain Points
Recently, I’ve been scheduling a lot of international virtual meetings with my friends/family and clients via Facebook Messenger.
By now, calculating time zones become my second nature. However, I’ve missed not one or two meetings, because of the incorrect time calculations in different time zones.
Constantly switching between different time zones and double checking our calendar events, while having a conversation at the same time is a painful thing to do.
The Challenge
The challenge is to create a simple way of scheduling events in different time zones with the following points in mind:
- during the scheduling process the users cannot leave the chat application
- besides the different time zones the users must have access to their calendars to quickly see the free slots where they can organize meetings
- the interface has to be easy-to-use with one hand on a larger phone as well
Execution: Design
I really like how we can create Plans in Messenger and get notifications before the meeting, although it would be great to have a little help in terms of choosing times in different time zones.
This is why I decided to build my concept on top of the Messenger Platform Design Kit.
In terms of selecting the right time zones, the Time Zone Messenger Extension would use the default location services of the Messenger app. If for some reason this feature is disabled by the user or the location information is not accurate, there is a way to manually modify the selected time zone.
Creating the calendar view I wanted to emphasize privacy while keeping convenience in mind. The sender would see his/her own calendar in the extension view with full details of the appointments. However, due to privacy reasons the recipient’s calendar events would only have a ‘Busy’ title instead of the actual event title.
This way both parties can easily agree on an available date and time when they both have free time without sharing their calendars entirely with each other.
In order to create an easy-to-use solution for one-handed use cases on big screens as well, I intentionally used only the lower third of the screen.
Execution: Prototyping
During the prototyping process my goal was to use quick and short animations to create a fast, responsive and realistic prototype.
Takeaways
I believe this solution would help to avoid a lot of miss-scheduled events especially in case of people from different time zones.
In a future exploration it would be a great idea to further develop this concept for groups of people, but this time I wanted to focus on one-on-one meetings first before scaling.
Thank you for reading! If you found this article useful let me know and I’ll write more in the future. :)
Follow me on Dribbble or Twitter to get notified when I publish something new. 🎉
