Andre Hitchman

Design Details: Citymapper for Android

The following details are best-viewed on a Mac or PC in Chrome or Safari.
1Main Screen

Greeted with a map of where you are currently positioned in the world. Swipe down to allow map to ⅔ of your screen. The contents of the screen as push down and hidden away though a smooth motion and replaced with a weather update. Pinch-in or pinch-out on the map, and you can view 5 minutes and 15 minutes circular walking radius. Very cool!

Hover + hold to play and loop the video
2Switch City

When you select the hamburger menu, in order to ‘switch city’ the app is based on, you’re greeted with a selection of cool illustrations that represent different cities to choose from. Swipe left and right to view the full selection. When you press to select a city, the app screen smoothly fades out from a circular progress indicator to a tick. And the screen transitions through a push-down motion (very quickly) - a little too quick, would be nice to see this effect last longer.

Hover + hold to play and loop the video
3Menu Bar

Subtle touch responses can make a UI feel great. In this case the menu buttons opacity fades on-press which gives users a nice tactile response. I also quite enjoy the swipe left/right to switch between app modes - the way the fixed navigation menu smoothly and slowly ebbs and shifts colors - like a wash of colours that ripple across the screen, is beautiful on the eye during the transition here; and definitely earns + points on UI feedback.

Hover + hold to play and loop the video
4Get me somewhere -> Results

Super subtle, this detail. There’s a tiny left, right motion of ellipses as a progress indicator when you’re waiting for details on your travel. The motion is almost like a pendulum swing, but without the visible wire/string attached. Nice (small) touch!

Hover + hold to play and loop the video

This is one of the more recent updates Citymapper introduced, that specifically provides the information that you need next on your journey. The interaction here is really nice and feels crisp to use. Move between each card to view a overview of the journey; the map automatically zooms in according to the journey description. Notice the colour schemes here, walking is blue, waiting is amber and ride is green. Intuitive detail here, easy to follow/pick-up.

Hover + hold to play and loop the video

I had to sit here and watch this video a good couple times before I saw what was actually going on here. There’s a subtle change going on here that adds a little life to the otherwise stale appearance of this screen. The small detail here – blinking live times icon, that indicates the arrival time for a particular mode of transport. There’s enough subtle motion here to grab a person’s eyes. Visual prompts +1.

Hover + hold to play and loop the video
7Stop! Reverse! Go-Back!

Continuity in app navigation is crucial to helping people understand where they are and where they’re going within a set of views or flows. Citymapper does a good job here of reversing their way through the “get me somewhere” flow if a user decides to backtrack.

Hover + hold to play and loop the video
8Tabbed Buttons

Here’s a subtle one, but I think this adds to the experience in Citymapper: when you are viewing the schedule for transport modes, toggling between updates for “now” and “this weekend” is quite delightful! - The effect is smooth, and shifts the button left/right at just the the right speed; content below then animates (appear/fade-in transition) showing full details of the refreshed content corresponding to the tab selection.

Hover + hold to play and loop the video

That’s the end – If you have any other details I may have missed, give a shout on Twitter.