My task was to create a prototype of a feature for the urban transportation application „Citymapper“.
The app already solves some of the main problems of the urban mobility but the user still has to purchase different public transport tickets. Very often buying different public transport tickets can be very annoying and things like pricing or purchasing the correct ticket can become a real pain when you are abroad.
To define real pain points and to find out what issues to solve I had to test the app and interview users. I wanted to know what the users were struggling with the most and if they were happy with the usability. What could have been different or easier to use within the app. To make the survey perfect I wanted to know how they experienced the visual design.
After the tests and interviews were done it was time to summarize all the findings and problems. Please find the biggest pain points listed below:
- Confusing menu
- To many different symbols and icons at once
- Hierarchy of elements in wrong order
- Not intuitive enough
- No prices visible
- No detailed ticket information
- No option or guidance for purchasing tickets
- Colorful and overloaded design
Allthough time was my biggest enemy the whole process went quite fast.
I wrote down some ideas and sketched a few mock ups, both at the same time. It felt like I had to put all those ideas into a mid-fi prototype, just to make it more understandable.
But what I found was, the main feature the app needs has to be an easy one or two click way to purchase all the tickets they need. At once!
A less confusing and more intuitive design to guide the user through the process, is to be considered as well.
As I mentioned before, the sketched prototype was just a preview for myself. To point out my idea in a better way I planned to design the mid-fi prototype with Figma.
What I improved
For the Prototype I focused on a simpler design, less fancy icons, intuitive structure and the Hierarchy of elements. Most importantly I designed an add on feature to book different tickets with litrally one click. For that, I have worked with CTA buttons aand a notification. After purchase the user will receive a list with the choosen route with detailed information about duration, where to change trains and a QR-Code to enter all Metro or Subway stations or show at ticket inspection.