Citymapper: Case Study
iOS, early 2016 app version
Citymapper is a very popular navigation app. As a user myself, I decided to highlight some rough edges and propose solutions.
The Itinerary screen
Confusing
Misleading icon choices: a "Refresh" icon acts as "Set to Current Location" action, and the "Swap Start/Destination" icon rather looks like a sorting button, due to the vertical orientation and the positioning outside the input area.
Misleading icon choices: a "Refresh" icon acts as "Set to Current Location" action, and the "Swap Start/Destination" icon rather looks like a sorting button, due to the vertical orientation and the positioning outside the input area.
Clutter
The vertical separator and the Edit command are unnecessary, while the "Recalculate" and "Swap" buttons are not aligned to a grid, creating visual clutter.
The vertical separator and the Edit command are unnecessary, while the "Recalculate" and "Swap" buttons are not aligned to a grid, creating visual clutter.
The Journey screen
In the Journey screen the Time Of Arrival (green bar) disappears depending how far the user has scrolled, and the GO button covers important journey information without paying off in functionality.
The implementation of the GO button doesn't subvert Google's Design guidelines, but doesn't feel neatly implemented.
I would redesign the screen with a docking Time of Arrival bar, always visible.
Content would be readable or fully hidden, depending on scrolling, making the screen easier to glance.
Content would be readable or fully hidden, depending on scrolling, making the screen easier to glance.
As an added bonus, a left-handed user would have an easier time starting the navigation, if the bar was fully made into a control.
