Cap Metro: Reducing technology fatigue for bus riders
CapMetro app screens, showing glimpses of the mobile ticketing experience
Project Type: Side Project
My Role: UX/UI Designer
Tools: Affinity Designer, InVision, Procreate
Skills:
User Flow Mapping, Sketching, Wireframing, Prototyping
Context
When I moved to Austin, I started using the CapMetro app to make sure I was always able to get around via public transit.
But in my comings and goings, I was constantly confronted with
long load times,
cluttered screens,
confusing and excessive options, and
inconsistencies in design.
Riding the bus was the linchpin to me accomplishing my day. And every time I did so I had to complete a lengthy ritual of button taps before I could continue onward. My curious mind had to ask, what would it be like if this was better?
So I redesigned the CapMetro app, answering riders’ needs by elevating the most important aspects of user flow. The resulting app is effortless. With that ease, more people would be encouraged to ride and ride more often.
Problem
A wide variety of people rely on public transit for daily life. These riders are all ages and come from a broad range of backgrounds. But they all want to be able to use CapMetro to get around without being stressed in the process.
When you use an analog bus pass, you never need to think about it.
But using an app is different. Learning to make use of technology is similar to learning a new language. We learn the new mechanics of its use, how to integrate it into our lives, and how to manage the constant flow of information coming at us.
I set out to create a CapMetro app that is intuitive and stress-free, while serving as the primary way of paying for tickets.
Design Requirements
I envisioned this project for the frequent users of CapMetro who I see on my bus rides every day.
The new app needed to make boarding the bus easy and fast. It also had to be beautiful. If people are required to use this tool, especially repetitively, it should be nice.
🎯 Goals:
Give riders clear, linear steps to accomplish their goal.
Enable riders by focusing their attention without being overwhelming.
Give riders something beautifully designed to reduce the “grind” of their commute.
Deconstruction the existing app
While the existing app got the job done, it tried to do too many things at once. It looked and felt like an app developed off of a list of features, instead of based on user needs. Many of the features, like schedules, relied on web-views not designed for mobile.
Finding the critical path
With so much informational complexity in the existing app, it was a challenge to sort out and prioritize tasks and needs. So in approaching user flows, I set my sights on identifying the “critical path” for the CapMetro app.
Good product design embraces "form follows its function”. In this case, I treated “function” as the “critical path”— the primary function of the app.
The critical path can be used to establish a product’s base visual design. Additional features can be added more easily with the critical path and MVP in place.
How do you identify the critical path?
To prioritize flows, ideally I’d work with developers to implement feature tracking and common path tracking in the app. This would tell me what features are used by what portion of the population. It would also show what features are used in conjunction with other features (based on timing).
For example:
Does the user buy a ticket, then go to the map to see where the bus is, then use the ticket?
Does the user access the schedules when they use their tickets?
Solution
👏 Do one thing, right.
Improved purchasing flow for the CapMetro App
New, illustrated tickets
From puzzling to effortless
The new app requires little to no thought to “figure it out” because the interactions are kept solely to what’s necessary.
Moreover, each main “action” guides you to the next step until you complete it and find yourself back on the home screen. The home screen always shows the next action and makes it immediately available.
Promotional images showing a full home screen with activated ticket.
Opportunities for continued growth
Revisit how to provide bus schedules
Bus schedules are still a key way people identify patterns in public transit. They’re a great tool for planning, particularly for commuters with regular routines. How might schedules be designed for mobile in a way that puts the user first?
Support smart watches
Smart watches and wearables are becoming more ubiquitous every year. Future updates could include compatibility with wearables, like the Apple Watch. Watch notifications could let users know about delays and arrival times without having to pull out their phone.