Effortlessly plan across timezones with city times synced to your local clock for easy scheduling
ROLE
Product Designer
TOOLS
Figma
Visual Studio Code
TIMELINE
Nov-Dec 2024
DISCIPLINES
Prototyping
HTML
CSS
THE CHALLENGE
Having family in more than three different time zones makes it difficult to coordinate calls and stay in touch.
Having family in multiple time zones makes staying in touch surprisingly hard, not because of the distance, but because it’s easy to forget who’s available when. Without a shared view of everyone’s schedules, calls often fall through or get pushed to inconvenient times.
HMW
How Might We make it easier for families/friends in different time zones to coordinate and schedule calls without confusion?
THE SOLUTION
Interested? Test it yourself!
RESEARCH AND USER INTERVIEWS
How are people converting time zones today?
Talking to 5+ users and reviewing present day methods helped me gain insights. Users mentioned three ways to convert time zones, such as using online tools, spreadsheets, or mental calculations, each with pain points.
These approaches often lead to mistakes and frustration, making it especially difficult when it’s been awhile since connecting with family.
DESIGN DECISIONS
Using the rule of selective attention to prioritize understandability
I created lo-fi wireframes to map out a simple setup flow. The screens guide users through selecting a main city, adding other cities, and noting availabilities, making it easy to compare times and view them in the selected city’s timezone on the final screen.
DESIGN DECISIONS
Displaying city timezones horizontally
I designed the main page to focus on a base city (Taipei, Taiwan) and automatically convert all other cities' times to match it. This makes it easier for users to compare availability without doing the time conversions themselves.
I went through multiple iterations to make sure the design was as clear and easy to understand.
Testing V2 with usability testing
Before coding version 2 of my wireframes, I conducted usability testing and made several adjustments based on feedback. After exploring available JavaScript libraries and not finding one that fit my needs, I decided to build the graph myself using CSS grids to maintain flexibility and control over the design.
TAKEAWAYS
Don't be afraid to code 👩💻 When working on coding, it felt daunting because, while I’ve written simple programs like creating a triangle with asterisks in Python, I’d never coded anything I had designed before. This opportunity taught me to embrace challenges as chances to grow and to dive in, even when I’m unsure
Celebrate small wins 🎉 Celebrating these moments reminded me of the progress I’ve made and fueled me to keep moving forward.
To be continued 🫶 With my first end-to-end personal project, I hope to continue refining and expanding on this project.