UI Challenge: the basic Citymapper userflow

For the @Ironhack pre-work UI project, I decided to take a look at the userflow of the Citymapper app.
Why? Probably because this app has saved my life so many many times. Maybe not my life. But loads of precious minutes & hours ❤
I love Citymapper emotionally but I also do have some rational arguments:
* I use it practically everyday.
* The usage of the app is extremely simple, there is no unnecessary clutter.
* It adapts to my travels and helps me not feel like a lost loser.
* It displays all the means of transport I’m interested in. Although I recently did sort of adopt the electric scooters (like the ones we had when we were kids) and Citymapper seems to boycott those.
* I get real solutions in real time.
* I don’t have to enter my work, gym, home, great aunt’s address every.single.time. I can store them easily.
* It remembers places I’ve already searched for or suggests places I looked up on google (a bit creepy but I’ll take the feature anyway).
* It genuinely helps me.
Surprisingly when I dug into the user flow I realised there were at least 5/6 steps — depending on your itinerary and n° of means of transport you’ll be using — while I could’ve sworn there were only 2 or 3. The app seems so fluid and everything is so easy, a full step can be executed in a second if the address is already inputted or suggested. I can’t get over how cool this app is.😅
So here is the user flow, sketching mode.

So quite basically, the userflow is about getting you from point A to point B.
Homepage/
You arrive on this contextual page that geolocates your position, proposes to ‘get you somewhere’, shows 8 different means of transport (to let you know they’ve got their sh*t covered) and a recent destination you looked up in case that’s exactly where you want to go.
Choose destination/
Point B. Once you’ve clicked on ‘get me somewhere’ they quite simply ask you, well, “were are you going?”. So either you tell them or you select a suggested destination based on your recent searches (in or out of the app). You also have the choice of a saved destination like “home” or “work” or whatever you saved as a favorite. But in this example I chose the first suggestion.
Choose transport/ (I now realise that I wrote ‘chose’ instead of choose in my sketched wireframes. mea culpa.)
Obviously the best options are put forward to get to your point B; with different means of transport, the time to get there and the price it will cost you. This enables you to take a quick and rational decision depending on your context. / ie. you are late to a meeting, you might be tempted to take an uber, but (thanks Citymapper) realise the subway is a much safer option.

Itinerary preview/
Ok so you have informed your point B & you have chosen how to get there. Even though writing it out feels like it has taken us precious minutes to finally get our itinerary, everything is very seamless on the app and it doesn’t take more than a few seconds (unless you don’t know where you’re going).
Now Citymapper will show you a preview of your itinerary on a map so you get a scale of the distance, a directional sense of your trip (really useful), and a recap of all the steps of your journey. You could stop here.
But if like me you are bad with directions and need to follow your gps, well you probably will want to click on the big juicy green “GO” button. Tempting & practical.
Itinerary GPS/
Click on GO and taddaaa, you get a real time GPS that indicates your position; so you don’t end up walking halfway up the wrong street before realising something isn’t right. Btw, the GPS feature on Citymapper is really well designed. It’s like “gps for dummies”, well zoomed in, the path to take is indicated with dotted lines, the direction you’re facing is a large green ray and it has a great sensitivity to movement.
Anyway, it gets you where you need to go, gives you step by step directions, and follows your progress which is helpful. Kind of like a real-time tutorial of how to get to where you are going.

I listed the UI elements that most came up during the userflow, and realised that they were mostly a mix of input controls (mostly buttons or text fields) and accordion lists to choose from. Which makes sense since it’s a sort of input once and then click sort of app. A few navigational features are also present to sooth the eye (icons) and demonstrate the step by step approach (sliders).
While analysing the flow, I looked outside and saw it was actually pouring rain and I think what could make this awesome app (maybe) awesomer could be a synchronisation with the weather in real-time. I don’t know about you guys, but it definitely impacts my relationship to transport. ☔
