Orbit
Time-zone mistakes are small but costly. A missed meeting, or a colleague dialing in at 3 a.m. Orbit is a world clock built to prevent them. Drag a single slider and every city's clock moves together, so you can find a time that works for everyone and book it straight into your calendar, Google Meet or Zoom. It's available as a Chrome extension and macOS app, with no account needed.
Role
Product Design
Duration
September 2026
Tools
AI coding tools, Xcode, SwiftUI, JavaScript
🖱️ Hover on the image to stop the slideshow!
why
As people travel, work, and connect across borders, accurate time coordination is essential. I created Orbit to make time-zone differences visible, so people can plan across cities with confidence.
How
Orbit uses a shared timeline and calendar that update every selected city at once. Clear date changes, day-and-night cues, and daylight saving information help users understand the same moment across locations.
What
A world-time planning tool for macOS and Chrome that combines synchronized city clocks, future-date planning, and searchable locations. It helps users find the right time before scheduling across time zones.
Understanding Problem Space
A clock answers now. Planning asks what if.
Every world clock answers the same, least interesting question: what time is it right now? But the moments that actually send people to a world clock are hypothetical: If we schedule the call at 5 PM Friday in Seoul, what is that for the team in San Francisco? Is London already in Saturday?
Existing tools make you do that math in your head, one city at a time. I wanted a tool where time itself is what you manipulate. Grab it, drag it, and watch every city respond at once.
Finding Opportunity
Move one time. See every city respond.
Rather than adding more clocks, I focused on making time itself explorable. Moving one shared moment would show how every selected city relates to it.
The goal was simple:
Help people explore a future time, understand each city’s local date, and return to Now without losing their place.
Design & Development Process
Start with the interaction, not the feature list.
I began with a macOS menu bar concept in September 2026: a prominent home city, world clocks, and a shared time control. Building a working prototype let me evaluate the feel of scrubbing time and the relationship between controls. I learned that an attractive screen is only the beginning; the behavior has to make the idea clear.
Design & Development Process
Adapt the idea to a browser popup.
While I was working on it, my mentor suggested me to create the Chrome extension version as well to see how it would turn out. I immediately started.
Chrome v1.0 brought Orbit into a tighter space (limitation of 600px in height). Heavy panels and separate Timeline/Calendar tabs competed with the city list. The v1.x iterations established the core experience, but showed that a second platform needed its own hierarchy, not a direct visual copy.
Design & Development Process
Make planning steady and correct.
During the process, I found out that prototype uses a fixed six-week calendar so month navigation stays in place. A separate Mac bug hid January’s first two dates: duplicate view identities, not date arithmetic, were the cause. Investigating and verifying the correction taught me that correctness is part of the design.
Design & Development Process
Help people recognize the right city.
Growing from 109 to 378 cities made search quality more important than catalog size.
I added clearer state labels, aliases, and accent-tolerant matching. An abbreviation-matching bug reinforced the need to balance forgiving input with precise results.
What I learned: more results are not automatically better results.
Design & Development Process
Refine the motion without breaking the structure.
As work and schedules change, the cities users need to monitor can change too. I added manual re-ordering so they can keep the most relevant locations at the top.
City dragging initially felt disconnected from the pointer. I refined reordering and edge scrolling, then restored the original row layout when an edit disrupted date alignment and the delete control. I also clarified when Back to Now should be active. Better interaction should preserve what already works.
Design & Development Process
Carry the selected time into Calendar, Google Meet, or Zoom, without recalculating it.
I added calendar and meeting handoffs so users could act immediately after finding the right time. Carrying the selected date, time, and city context into Calendar, Google Meet, or Zoom reduces repeated work and helps prevent scheduling mistakes.
Deliver & Shipping
Own the work beyond the interface.
I brought Orbit to the Chrome Web Store and Mac App Store. Shipping expanded the work into privacy disclosures, screenshots, signing, distribution, and review. I learned to treat release constraints as design inputs rather than handoff details.
Final Solution
One shared moment. Two platform experiences.
Orbit connects visual exploration with precise dates and city context. I adapted the same idea for native macOS controls and a compact browser popup, while refining search, layout stability, and recovery to Now. Archived product versions and calendar verification: the final two slides show the rendering bug and its corrected test view.
Reflection
AI accelerated the build. I owned the judgment.
I used AI coding tools to turn design intent into working software. My responsibility was deciding what to build, evaluating the result, identifying regressions, and knowing when to revise or revert. Over time, my instructions became more specific: preserve alignment, keep the planner open, test the date boundary. Shipping taught me to connect visual decisions to behavior and take responsibility for the whole product. I have updated newer macOS calendar handoffs add editable event titles and city/time-zone notes. Google Calendar and Zoom handoffs let people finish invitations and meeting setup in those services. This follow-on update is not part of the release shown above and is not direct Meet/Zoom meeting provisioning. The next step is broader usability validation.