Designing Catch

A bus app I wanted to use.

Catch stop details with bus numbers, next arrival times, and Leave now or Next one safer guidance — Bus timings, with a little help deciding which one to catch.

Context

I started Catch because I wanted a Singapore bus app I could read at a glance. The basic flow was simple: open the app, find my stop, and see when the next bus was coming. I designed it in Figma, used Mobbin as a reference, and implemented and tested it with Codex.

Problem

The first home screen tried to show nearby stops, arrival times, and whether I could make the bus. All three were useful, but they competed for attention.

I kept nearby stops and arrivals on the home screen, with “Can I catch it?” near the top to answer whether to leave now. Details that only mattered after choosing a stop moved into the stop view.

That gave me a rule for the home screen. It should help me choose where to go and whether to start walking. Once I’ve picked a stop, I can look through its buses and compare arrivals there.

Early Figma home screen with a large date, search field, greeting, destination shortcuts, nearby stop names, and bottom controls — My first home screen in Figma, and the current version.

Current Catch home screen with a Can I catch it card, saved destinations, nearby stops, walking times, and a Home Maps Settings navigation bar — My first home screen in Figma, and the current version.

Live Activities

I wanted to check my bus on the way to the stop without reopening Catch. The lock screen has less room, so I used it for three things: the bus number, when it would arrive, and whether to leave now.

Live Activities were part of the idea from the start. In the app I might compare a few buses, but on the way out I’m usually checking one. Keeping that bus on the lock screen lets me follow the decision I’ve already made with a glance.

Catch Live Activity on the lock screen showing bus 180, estimated arrival, and a Leave now prompt — The next bus, without opening Catch.

Finding stops on a map

The feedback board pointed to a gap in the list: a stop name doesn’t always tell you where it is. I added a map so you can look around, select a nearby stop, and see its arrivals. The list still works well when you know the stop you want.

Catch map around Joo Koon, with nearby bus stop markers and arrival details for a selected stop — The map, added after feedback.

App icon explorations

The bus was the constant across the icon explorations. I tried monochrome, brighter colours, and painted finishes to see how differently the same subject could read.

A few different versions of the Catch icon.

What testing revealed

When my brother entered “Yash,” the app still greeted him as “Adi.” I’d seen my own name so often during testing that I’d stopped questioning it.

Autocorrect turned “Summerdale” into “Summer sale.” That made a stronger case for choosing a real stop than for asking people to type its name exactly.

A shortcut exposed a different kind of issue. It worked when Catch was already open, then ran into problems when I launched it with the app fully closed. I’d been repeating the same test without changing the app’s starting state.

Those tests changed what I look for when a design becomes a working app. Next time, I’d bring people in earlier and test with different inputs and launch states before polishing the screens.