More and more people are working from home, and some work remotely from around the world, especially during the pandemic. The app is called Zonely – a name chosen by the Community – and is focused on solving the problem of finding the best time to meet with family, friends, and colleagues.
Track timezones around the world and more
I led this project in the whole process - user research, user flow, prototyping, testing, visual design, promotions, and final documentation deliverables.
Our team regularly researches trends and finds what we can do to improve our lives. As the pandemic continued to shape the world, remote work became the norm for most individuals. During this time, we encountered a common challenge both at work and in our personal lives – coordinating calls across different time zones with colleagues, parents, and friends. With our diverse team spread across NYC, London, Hyderabad, and Taipei, this issue was a daily reality at OneLab. There are apps and services out there that solve this problem - albeit with unsatisfied design - but our roadmap of development should innovate on this simple idea and build tools for people to always find the best time to catch up.
I joined the ‘Open Ears Forum’ for the user interview to ask questions about how they manage their time and how they feel about the process.
- Users use Google Calendar, Notes, and other scheduling apps to make daily/weekly/monthly schedules and calculate, guess, and figure out a different time zone.
- Users like the color coding to categorize and features to make a schedule for the meeting and share the links.
- Users feel challenged and uncomfortable with event emails not syncing their calendars.
Based on the user research, we analyzed user needs and sat together to prioritize the features. Here are the key solution elements: Straight forward, Smart and Intuitive design, Seamless flow, Easy to use, and Cross-platform.
Based on these key solution elements, we created a persona.
Then, we built user scenarios of organizer, invitee, and checker, and then we made three teams and sketched key pages as a team of two.
After discussing which sketch feature will be shown on our final prototype, we decided to focus on a world clock function for phase 1 and then incorporate a scheduler feature for phase 2 to gain more users in our first launch.
In terms of a platform, to be utilized for multiple platforms, we decided to make a hybrid app that combines native apps and web solutions.
After brainstorming and ideation together, I started to create prototypes. To provide a more intuitive experience, I chose a colored time bar as a key feature so that users can swipe a time bar forward or back, and all cities’ times change automatically at the same time.
I explored three different directions - a tab style, a day and month picker, and a more illustrated date style.
I gathered the feedback from the team, and created explorations using OneLab design system, which I made before, to keep dev efforts minimal, while keeping the brand tone consistent.
Our team liked the visualized color coded time bar and the way to show user’s profile image next to it. I also tried to change the time bar color to b/w to make it more modernized and recognizable.
After we finished the design critiques in our internal design team, I conducted a user testing.
1. Color VS B/W: Most users said a B/W time bar is hard to understand and looks quite distinct and dominant.
2. Gradient VS Non-gradient: Users felt the non-gradient time bar looks clearer and easy to check the time.
3. Hard coded hour VS Dynamic hour: Most users said they don’t need this feature to schedule a meeting with others.
For the final design, I tested several colors and decided blue and yellow represent daytime and nighttime. After discussing with engineers and a product manager, I found a more straightforward way to use 'Awake time' instead of 'Sunrise' and 'Sunset'. It gives users more flexibility and personalized experience. In addition, I removed the space below the time bar and pulled out the vertical guideline to make it easy to distinguish between city cards.
How might we make it simple and easy to add people, and encourage users to invite other people?
I put a share link in the ‘Add cities & people’ to encourage users to invite others because it would be one of the most frequently used features. When you tap on the floating action button (FAB) in homepage, it allows you to choose a city and persons currently residing there.
After getting internal feedbacks, I made the page cleaner using the text button instead of the separate bottom sheet with the long text. So it's less complicated.
Prototype testing results
Overall ratings: 5.5/7
Positive
- Easy and simple to use
- Solve a pain point for people who need to connect with others in different time zones
- Multi-platform: have both desktop and mobile versions
Negative
- Confusion on the link to add people
I designed several variations for the bottom part, allowing you to easily add or remove individuals along with their corresponding email addresses. After an internal discussion, we decided to reorganize the lists and relocate the 'Share a link to add people' button to the Account page for better accessibility.
In terms of design,, we settled on the 5th one. It stands out as the most intuitive and straightforward approach, featuring a plus icon that clearly signifies 'add,' and a 'send' button within the box for sending emails.
OnePlus aimed to make a strong relationship with its community by empowering users to take ownership of the creative process. To achieve this, we shared our process, including key screens and various internally suggested names. Through a collaborative voting process, the community chose the name 'Zonely' for the project, signifying a truly collective effort in the brand's journey.
Here are the rest of the page design based on user feedback.
In the Zonely project, as a product designer and lead designer, I contributed to the entire product development process from ideation to execution. I conducted user and prototype tests, incorporating feedback to create a user-friendly experience for organizers, invitees, and checkers. Designing the UX and UI for all screens, I also developed a design system for efficiency. Community engagement and team collaboration were key, helping us overcome challenges and foster a sense of ownership.
