[Research] Transitions and user flows of Citymapper & Discord – Peggie Liew


Citymapper is a navigation app that makes traveling within various cities such as New York City, London, Tokyo, etc. easier. Enter a destination and the app will provide various routes to that destination, whether it be walking, train, Uber, etc., showing the amount of time it takes for commute. It also indicates the cost and time for the coming bus/train. This app is really easy to navigate and provides really useful information such as the arrival time of buses/trains.


  • Loading screen fades to the main screen which displays all public transit, a search bar, map & current location, subway&bus lines and maps. Users can scroll up&down the screen as there is a lot of information provided
  • Tap search bar, and a new (different color) search bar slides down, covering the top part of the screen. Previous searches/places that have been searched along with the keyboard slide up from the bottom of the screen
  • Enter the location, and the search screen fades to suggested routes, showing which subway/bus line to take, the price, how long it takes, along with other possible commutes (walking, biking, Uber).
  • Choose a route, and the screen slides to the left, displaying the map, the route and the time of the next train/bus. Tap the ‘GO’ button to begin navigation and then the screen slides to a zoomed-in version of the map and your current location. Directions are within slide boxes.

User Flow

Screen Shot 2018-02-05 at 11.28.19 AM.png


Discord is a voice and text chat app that was specifically designed for gameplay. Like other chat/call apps, it shows friends who are online/offline, and allows the user to enter voice channels within their friend groups. It’s sort of like Skype but without the video feature.


  • Loading screen fades to screen showing who is online, pending requests, suggestions, and blocked users
  • Tap the more icon, and a side bar slides from the left, showing private messages from friends along with circle, customizable icons of text & voice chScreen Shot 2018-02-05 at 2.19.28 PM.pngannels that you are included in
  • Tap a text channel and the screen automatically shows all the text channels.
  • Choose a text channel, and swipe the side bar to the left, the text channel slides to full screen consecutively, displaying all messages.
  • Like text channels, tap a voice channel, and it will show who is online and in the channel. Tap ‘Connect to Voice’ to enter in the voice call.Screen Shot 2018-02-05 at 10.29.41 AM.png

    User Flow

    Screen Shot 2018-02-05 at 2.19.28 PM.png

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s