November 04, 2017
Update 9/11/17: Citymapper’s head of mobile liked the feedback, having call tomorrow.
Update 10/11/17: Turns out Joe is the engineering lead for the web and mobile clients. He said that the post had been passed round the product team! I’ve been invited to meet them.
Update 23/11/17: I had a confidential chat with the Citymapper team and it was awesome to meet all of them. They’re super passionate about the future of urban travel and an awesome mix of data-driven/product-driven.
Been a big user since I saw V2 on the App Store.
You guys smashed it, prior to Citymapper there was no consensus on the best app for London transport. I’d have separate apps for tubes, buses and bikes and it was a big mess.
So in advance, thank you, getting around London is now super easy and I wouldn’t want to risk sounding unhappy when everything is amazing.
But the other day I was going for KFC with my friend Alex nearby Camden and I felt I had to give some feedback on your Search Results UI/UX.
Steps 4 and 5 are where the issues are.
Ok cool, User wants to go to a KFC in the Camden area so searches…
So the user presses Show on map >
Three things that would be cool here:
a. Use of colour to differentiate between the UI
b. Some connection between the Map View and the List View
c. Bring attention to the user that you’ve auto selected the top result.
Having a different colour for the map pins would be ideal, and Apple is here to back me up too:
Use expected pin colors. A pin identifies a point of interest on your map. People are familiar with the standard pin colors in the Maps app. Avoid redefining the meaning of these colors in your app. Use red for a destination, green for a starting location, and purple for a user-specified location.
In addition to the map pin colours being different to what user’s are used to in other mapping apps, they’re also the same colour as “Action” buttons on bottom of the UI. Having these be different would add some visual clarity.
How about numbering the results in the List View and having those numbers on the pins in the Map View.
You’ve chosen to auto-select the top result as the user’s destination. They didn’t ask for this, they clicked “Show on map”, I appreciate that it might be helpful some of the time, but it’s an action that the user never did themselves.
In the mockup below
Carrying on in the user story…
What would you press?
“When a new screen is displayed, a back button, often labeled with the title of the previous screen, appears on the left side of the bar. ”
Perhaps my suggested change breaks another navigation pattern in another part of the app. But perhaps review the current pattern/layout.
I don’t really have a qualified opinion since I don’t have your analytics data, but I’d be interested in how many users:
Search → Press Show on Map -> Press the Back Icon bringing them to the Home Screen → Do the same search again.
Thanks again for a great product, and hope you guys see this.
Thanks for reading! If you have any comments, questions or feedback please get in contact. Have a nice Thursday.
I'm Henry Moulton, a software design and development freelancer living in London, UK.
My portfolio will be online soon.