Matcha Time

Phase 1: End-to-end project, from ideation to research, design to launch

# 0→1
# Web
# Productivity
# On-going

Overview

Ever since I started my design journey, launching a product has always been an aspiration, driven by the belief that it would yield invaluable lessons. I wanted to solve a real-life problem by empathizing with users and focusing on a creative solution.

Note that this is an on-going project:

Phase 1: Context, Research, Design & Iterate, Launch

Phase 2 (Coming soon): User Feedback, Iteration

role
Product Designer, Product Owner
Duration
Phase 1: One Month (April 2024)
Tools
Figma, Notion
Output
macOS App
Links
context
The Problem: Lack of efficiency and convenience in aligning timezones between remote workers

Over the last few years, a common voice I was receiving was the challenge of matching timezones for remote teams that collaborate across countries and timezones.

I always struggle setting meetings because my teammates work from around the world, all in different timezones
Daylight savings got me confused and I ran into my meeting late
I don't know how many times I have to ask,
"What time is it over there again?
The Solution: Creating a desktop app so remote individuals can easily align timezones for multiple locations
What

An easy and simple desktop app (macOS) that doesn't interrupt the flow of their work

Target Users

Young professionals who are remotely contributing to teams and projects

Scope

Focus on simple designs and essential functions for a speedy launch

Responsibilities
Designer + Product Owner (myself)
Developer + Project Manager
Timeline

We went from ideation to launch in just 1 month:

w1

w2

w3

w4

design

Research
UI/UX Design & Quick Testing
Iterate
Finalize design

product owner

Discover & Define
Analyze & Implement
Prepare for submission
Execute

develop

Basic clock & slider function
Multi-city & Synchronization
Design Implementation & Testing
Bug fix & Deploy

project mgmt

Discover & Analyze
Define & Plan
Performance & Control
Launch
research
Competitors have multiple timezone view + 3 additional features, making their product unique in their own way

Through competitive research, it became clear that timezone viewers out there not only show multiple cities and corresponding local timezones but also have 3 additional features on top, making them unique in their own way.

Time Zone Converter and Clock

Clocker

Overlap by Moleskine Studio

Multiple timezones

Customize availability

Drag and drop timezones

Slider feature

Rename timezone

Navigation bar widget

Price

$4.99

Free

Free

Not a direct competitor, but Google Calendar also lets users display world city names and local timezones in 2 ways

Add a secondary timezone with custom names next to your day/week calendar view

Add world clocks in sidebar:

  • displays world city names and corresponding local times
  • adjusts accordingly when adding new meetings
Information Architecture and User Flow revealed 2 core features: personalized city list & timezone matching

By mapping out the user's interactions and experiences, I gained clarity and was able to filter out what's most crucial to the user's journey. This process ensured that the design remained user-centric, optimizing the app's functionality and enhancing the overall user experience.

Scroll sideways to see more!

Ultimate goal is to ensure an effective communication and collaboration

Alena Herwitz

bio

behaviors & habits

concerns

needs & goals

  • Works from home as she takes care of her son during the day
  • Likes getting her work done and dislikes getting interrupted
  • Often juggles multiple projects simultaneously, making it challenging to keep track of time differences
  • To efficiently manage her team's schedule to ensure effective communication and coordination

Abram Septimus

  • 35yo, PM
  • lives in SF with husband & son
  • 29yo, Senior Engineer
  • Lives in 1bed apt in Chicago, IL
  • Works hybrid: Mon/Fri from home, Tues/Wed/Thurs from office
  • Enjoys playing online video games with his online friends
  • Finds it difficult to set new meetings with stakeholders that live in different countries
  • Gets meeting invites that are outside of his business hours
  • To communicate more frequently with his team
design & iterate
Quick unmoderated testings revealed how blind I was about users' non-happy paths

Created low-fi wireframes and developed to mid-fi to conduct user testing. I ran 3 quick unmoderated usability testings, looking for 2 main aspects: usability and navigation. What stood out during the usability testings was that I was often too focused on the users' happy path (e.g. adding a new city to customize c list) and paying little attention to other potential paths (e.g. users wanting to remote newly added cities, users wanting to quit the app completely, or if there's a typo when city-searching) Glad this was caught early on as it could lead to major confusion if users can only add without the option to remove cities.

I know how to add cities, but how do I delete?
What if I want to close the app completely?
Say I mistype a city name, what would happen?

Scroll sideways to see more!

Love seeing my low-fi wireframes come to life based on user feedback and addition of UI

Based on quick user feedback, I iterated and improved on my designs, focusing on simplicity and clarity. I proceeded with refining the user interface (UI) to align with other existing widgets, prioritizing seamless navigation and intuitive comprehension. My aim was to create a design that not only integrated well with the Apple ecosystem but also provided ample space for future expansion and enhancement.

Something I've learned in other projects that I wanted to make sure to implement into this end-to-end project is to keep my design area clean and organized. Figma componenets are a great help, offering efficient organization and consistency throughout my design process.

Feedback, Iterate, Communicate, Iterate

Iterating my design process was a collaborative effort that involved frequent communication with the developer. We project managed and communicated both through Figma and Notion.

launch & Next
Just a couple of more steps and it's time to release!

Logo Design

For the logo design, I took inspiration from the main-view of the app: bubbles indicate the hours and the logo refers to the hours being matched!

Main View of App

We prepped all the information as required by Apple data submission, but at the same time, I wasn't expecting this to go through given it was my very first try. But wow! Within a few hours, our submission was accepted.

Comparing before/after timezone matching experiences
Before

need to check local timezone for every team member

interrupt the your focus and flow

google "what time is it there when it's this time here?"

back to work

Matcha Time

need to check local timezone for every team member

quickly check local timezones

and keep working without interruption

phase 1 takeaways
Lessons Learned
01
Wearing multiple hats

Taking on responsibilities of multiple key players is challenging but super rewarding as you get to oversee the product from the very start to the finish line and beyond. Having a comprehensive understanding of the entire process is inspiring, as it feels like a genuine opportunity to make a meaningful impact on users' experiences.

02
Iterative design process approach

Iteration allows for continuous refinement of the app, addressing usability issues and incorporating user feedback at each stage of development. Excited to see this app take off and grow!

phase 2 coming soon!
Currently in the works

Gather user feedback:

  • conduct usability testing

  • iteration

Design ideas in consideration are:

  • animation

  • dark mode
  • re-order city card in main view
Phase 2 of Matcha Time coming soon!
usability testing
Seeing users go from :/ to :D through self-navigation

What were some common user voices?

"What are those bubbles...? Ohh!! I can see what time it is there when it's this time here and vise versa!"
5 / 5 Users
"I like how the emojis are symbolic of each city"
2 / 5 Users
"Some cities didn't come up"
3 / 5 Users
"I didn't understand what +1 meant"
2 / 5 Users
"I want to re-order city cards"
5 / 5 Users
"I wish I could delete/add cities easier"
3 / 5 Users
iterate
Title

body

iterate
Title

body

iterate
Title

body

step 3
Title

body

step 4
Title
phase 2 takeaways
Title
01
takeaway 1

body

02
takeaway 2

body