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.

I hadn’t used a bus app that felt well designed and easy on the eye. I wanted one I could open, find my stop, and check the next bus without having to look through too much. That’s where Catch started.

One thing I really wanted was to see the next bus timing without opening the app. I thought Live Activities would be useful for that, especially when I was already on my way to the stop.

I handled the product design in Figma, with Mobbin as a reference. I used Codex for implementation, then tested the app and worked through the changes it needed.

Simplifying the home screen

The first home screen was more cluttered. I was trying to show nearby stops, bus timings, and whether you could catch the bus, but there was too much competing for space.

I kept nearby stops and the next bus timings upfront, then moved the extra details into each stop. The “Can I catch it?” card stayed near the top so you could see whether you needed to leave now.

That helped me decide what belonged on the home screen. If something only mattered after you picked a stop, it could go inside that stop instead.

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.

Useful without opening the app

Live Activities were on my list from the start. I wanted to glance at my phone and see when the next bus was coming, without opening Catch again.

There wasn’t much room, so I focused on the bus number, its timing, and whether to leave now. Those were the things I’d want to check while heading out.

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

Adding the map

The map came from the feedback board. I wanted it to make nearby stops easier to find, especially when a stop name on its own didn’t tell you much about where it was.

The list is useful when you know what you’re looking for. The map gives you another way to look around and pick a stop, with its bus timings close by.

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

Trying a few icons

I also tried a few versions of the app icon. The bus stayed, but I played around with the colours and finishes, from black and white to the painted versions below.

A few different versions of the Catch icon.

What I learned while building it

My brother entered his name as Yash, but the app still greeted him as “Adi.” I’d been looking at my own name so often that I hadn’t noticed. Seeing him use it caught something I’d missed in my own testing.

Autocorrect was another one. “Summerdale” became “Summer sale” when entering a stop. It made me think more carefully about the input itself. Picking a real stop made more sense than expecting someone to type the name exactly.

I also had a shortcut that worked when Catch was already open, then ran into problems with the app fully closed. It reminded me to test it with the app fully closed too. I wouldn’t have found that just by repeating the same test.

Taking Catch from Figma into a working app taught me to look beyond the screens. Someone entering a different name, typing a stop, or launching a shortcut could expose a problem I hadn’t seen. Next time, I want to involve people earlier and give their feedback more time to shape the product.

Catch on the App Store