a website that helps to coordinate timezones to help schedule calls between friends and family
In six weeks, I designed and developed Bridge, a website that helps users coordinate calls across three time zones. Inspired by my own struggles scheduling family calls, Bridge simplifies time zone conversions, making it easier to stay connected with loved ones around the world.
ROLES
Product Designer
Developer
TOOLS
Figma
Visual Studio Code
TIMELINE
Nov ~ Dec 2024
DISCIPLINES
Interaction Design
Prototyping
HTML
CSS
JavaScript
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.
The Challenge
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!
Lo-fi wireframes
Prioritizing 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.
The core feature
Designing to display various city timezones
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.
A Few 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.