Designing Race Yourself for a Glance
How designing a cycling app for one-second looks changed what goes on every screen.
- Published
- Reading
- 2 min read
- Tags
- Project notes, Mobile
Most interfaces assume you're sitting still and paying attention. Race Yourself can't: it's a cycling app that records your rides and lets you race your own previous times, and people use it on a moving bike.
Designing for the glance
A rider looks at the screen for a second, maybe less, between looking at the road. So every decision started with that glance: what does someone need to know in that moment?
Very little, it turns out. Speed, time, distance, and whether you're ahead of or behind your last ride. Those became large numerals on a dark screen with one bright accent. Everything else moved to before or after the ride: picking a route, comparing results, saving the ride.
A small system, set early
Working closely with the client, I set the visual direction early and built a lightweight design system around it, so new screens could come together quickly without drifting from that focus.
What I learned
Design for the hardest moment first. Controls that work on a bumpy road, few, big and well apart, are easier everywhere else too.
Decide what to leave out. The ride screens are mostly empty space, and that's exactly what makes them readable at speed.