track time around the globe and connect anytime anywhere
UI Design | Utility & Efficiency
BACKGROUND
This is the second project I worked on during the study of Google UX Design Certificate program. One day my partner told me that she had to arrange a meeting with people she was working with on an exhibition but all of them are in different time zones. She had to ask all of them on what time they're available and find a time slot that works for everyone. I thought that a simple app showing other people's time while users can slide on the time bar and see its corresponding time in other places as well.
MY ROLE
Solo designer
TIMELINE
3 weeks
PROBLEM STATEMENT
When I need to work with people across the country or the globe, I want to be able to find common time slots that work for everyone in different time zones, so I can save time, and increase efficiency in communication.
USER RESEARCH
USER INTERVIEW
The user research took the form of online user interviews. Through indirect referrals from friends and LinkedIn searching, I managed to get contact with and interviewed four individuals originally from other countries, currently living, studying, or working at US.
Each of them has person or work relationship with others that are in different time zones and often communicate across time zones. Through understanding their concerns and frustrations, I learnt that the challenges are mainly about dealing with time differences among more than two places.
It led to a conclusion that the Sync App should focus on helping users manage, arrange, and plan cross-timezone schedules, and providing a visually clear representation of other people's status and schedule.
USER QUOTES
Every time I need to see what time is it for each team member and then calculate the overlapping range of availability.
It's easy when there're only two (time zones) to consider, but it's annoying when there are three or more different time zones to accommodate. I'd be too lazy to calculate and just ask them directly for their schedules, but it's tiring to ask one by one.
My parents can't remember my whole schedule. I don't want them to call me during a class or an exam, or when I'm sleeping.
I don't like the time zone converters online. They just show a bunch of time zone codenames and formulas. I'm too busy to read through all that and still have to calculate by myself.
It would be nice if I can easily tell what time is it for my best friends and families so that I can avoid calling or sending them messages in the middle of their nights.
OBJECTIVES
-
A quick and direct way to plan and schedule cross-timezone meetings
-
A simple and efficient way to solve time difference issues.
User Persona
After analyzing the user stories, I created a user persona that represents a comprehensive portrait of people who run into similar challenges in time zones and time differences.
Although it seems to be a small issue, but a creative solution could potentially simplify the unnecessary troubles in life and work.
DEFINE SCOPE
DESIGN DIRECTIONS
Starting the design phase, I looked back on my user persona and the key notes from the user interviews to extract key user journeys that help achieve users' goals. By laying out the information architecture, I wanted to include four primary features: current time display, world clock list, time zone converter, time map.
The current time display and world clock list are put in the primary features that are most accessible and most important to users. Users could not only see the time around the world but use the list to plan schedule across different time zones, show what time it is concurrently for multiple locations.
The time converter and time map are categorized into secondary features that are more advanced, allowing users to easily convert time zones, sync with friends, create personal schedules that can show your current status to selected users so that they know when not to disturb you.
LOW-FIDELITY DESIGNS
LOW-FIDELITY WIREFRAMES
I developed the wireframes to explore key features and key user journeys. The home page prioritizes the time display of user location and customized world clock. Due to its similar functional characteristics, the time zone converter is placed next to the customizable world clock. The world clock has a "view" mode and a "plan" mode. The "plan" mode can be used to plan schedules across time zones.
The final key feature, the Time Map, is a more social feature of the app. To differentiate from the utilitarian features, a map icon is placed on the top right corner to access. Users can sync with friends via shared links to share their time zones, schedules, and current status.
HIGH-FIDELITY DESIGNS
TYPOGRAPHY
Sync app is an app about time. So I want the time to be displayed in a retro style to represent the flowing time. I picked Arvo for its Serif style and clean edges. It's also a tool for utility and efficiency, so I used Outfit typeface for all other texts for its San Serif style and readability. It also gives the overall user experience a cleaner and futuristic look.
DESIGN SYSTEMS
Following the low-fidelity wireframes, I proposed two themes of design systems that the users can pick from for their preferences.
THE NATURAL THEME
Inspired by the vibrant, healing, and soothing birch wood color, the Natural theme uses the bright beige color to represent sunrise and day, dark brown color as the accent color to represent sunset and night, and wood texture as background color for display components.
THE DARK THEME
Inspired by the design of Clock app on IOS system and the tech feel of black and white, the Dark theme uses black as the main background color to represent sunset and night, light orange as the accent color to represent sunrise and day.
THE PRODUCT
1 - Time & World Clock Display
2 - Plan Cross-Time Zone Schedule
PICK time for your friends across ocean simple and easy
With Sync app, users can use the plan schedule feature to browse through the time bars of added locations, moving simultaneously when dragging one of them, saving time and energy for users when dealing with multiple time zones. If you want to plan a meeting ahead with colleagues from New York, LA, Shanghai, Tokyo and even more places, you can see all of the local time at the same time, easily finding the best time period that works for everyone on your team.
3 - Personal Status and Schedule Set Up
Create Your Schedule and Show Your Status to Your Friends
You can create your schedule or customize your current status to show to your selected friends, families, or colleagues in other time zones. so that they know when to reach you and when not to disturb you. There's no need to worry about calls coming in during an important exam or classes.
Future Directions
Shared Calendar
Lock Screen Component
Natural Theme
Thank You!
A Time Converter That Fits User Needs and Makes Your Job Easier
With Sync app, users can use the plan schedule feature to browse through the time bars of added locations, moving simultaneously when dragging one of them, saving time and energy for users when dealing with multiple time zones. If you want to plan a meeting ahead with colleagues from New York, LA, Shanghai, Tokyo and even more places, you can see all of the local time at the same time, easily finding the best time period that works for everyone on your team.
Dark Theme
PAUL
Game Streamer
Wants to:
Play games with friends in Europe & Asia
Frustrated About:
When I play with friends from more than two time zones, it's annoying to calculate the time differences between more than two places.
SHERRY
Designer
Wants to:
Work with team members living in different places in the globe
Frustrated About:
It's difficult to arrange meetings that fit everyone's schedule.
JUN
Student
Wants to:
Video call my parents and sister back home in China
Frustrated About:
They sometimes call me while I'm asleep or in class because they are not sure about what my schedule and current status is.
CHRISTINE
Engineer
Wants to:
Travel around the world while maintain contact with friends and family
Frustrated About:
Moving around the globe constantly makes it difficult to keep track of time differences.