How I would improve Citymapper’s home screen
An unauthorised re-design of my favourite app
I love using Citymapper. It has made my life so much easier. It’s the first thing I show to people when they need directions. I’ve even picked my next holiday based on the fact that Citymapper just launched there.
I listened to Azmat speak about Citymapper yesterday at #HNLondon, a regular event in London for the tech community to come together. I asked Azmat during the Q&A, how do you choose what features to build and how do you prioritise the visibility in the app.
I asked this because the home screen on Citymapper has become more and more bloated as new features have been added. A simple interaction with that app now makes me stop and think about what I should do.
Location Aware Home Screen
When I open Citymapper, I am somewhere. Sometimes, it is somewhere I know, other times it’s somewhere completely new. I’m not sure if I want to jump on a bus, a bike or get on the tube. Now, I can see what’s around me before I make a decision.
Of course, any of my favourites that are close to me should jump to the top of the list. Tapping on any item in the list expands additional information, such as lines, departures and other relevant details. You can quickly see how long it will take you to walk there as well.
“Omnibar” Super Router
At the moment, locations are scattered in the app. My home and work are on the home screen, my recent destinations are in search. This isn’t really a problem, as long as I can find what I’m looking for, but they are taking up some precious space on the home screen.
By moving all routing into one “omnibar”, you can tap a saved or recent location, or just start typing to find what you need. It also eliminates thinking about where a location is in the app — a single destination for all routes starts with the “omnibar”.
I also removed the name of the city and added back the Citymapper logo. If I don’t know what city I’m in, I have a whole other problem to deal with. I’ve merged the buttons to the profile and information screens/menus into one settings button, as the profile menu is rarely accessed (for now). I’ve moved away from “get me somewhere” to “I want to go to” for a more natural flow.
In conclusion. I will continue to use Citymapper and recommend it to everyone I know. You should too! I still get giddy when I read the change-log with each release. I’m sure I won’t be dissapointed in the future.
I used Sketch 3 and existing Citymapper assets to play around with the UX/UI. I spent a total of 3 hours (on a Friday evening :-/) from ideation to laying out and writing this summary. I suggest you also play with your favourite apps and think about how you would improve them. Like this article? Please share it with others.
I’m Shawn Zvinis and I work on product at Yoyo, a retail and financial technology startup. I previously founded Tab, which shut down a few months ago and I wrote a post-mortem you may have already read.
Follow me? @shawnzvinis