Citymapper
SELF-INITIATED UI DESIGN
Background
Citymapper is an app that exists to instantly compare travel options in real-time across all transport modes and easily navigate cities with turn-by-turn directions for all trips.
Challenge
While this is the stated purpose of the app, I found myself not reaching for it. This is due to an interface that I found cluttered, making navigating directions difficult in those quick glances of navigating a new route.
Solution
I explored creating a simplified interface with myself as the user that feels more approachable and highlights the brand’s fun branding, while reinforcing the goal of the app.
Roles
UI Design
Team
Solo Initiative
Timeline
4 weeks
Discovery
Competitive Research
In analysing the market for competitors, I analysed Google Maps, Apple Maps, and Bolt. Google Maps and Apple maps offer more direct competition in terms of turn-by-turn directions but I also examined bolt in terms of branding.
What I found when comparing features was:
Competitors had more use of accordions
Competitors had overall less information than Citymapper, for example a lack of what car to get on and get off when using trains
Bolt, Google Maps, and Citymapper all use a light interface, while Apple maps has vied for dark
Overall, I found Bolt’s UI to be the most clean and similar to the Citymapper Branding
Bolt
Citymapper
Google Maps
Apple Maps
Citymapper Research
When researching Citymapper as a company, I found that they have a much more whimsical brand system than the current app suggests. They utilised the logo in illustrations, and had a clear favour for the brand green in use.
Delivery
High-Fidelity Mockup
A simplified interface that feels more approachable and highlights the brand’s fun branding, while reinforcing the goal of the app. It hides additional features in hamburgers and accordions so that they’re not cluttering up the main screens but are easily accessible should the user want more information or more customisation capabilities.
