UX/UI PROJECT

OVERVIEW:
Sprint duration: 2 weeks
‍Brief type: Concept Project, Mobile App
‍Deliverables: High-fidelity prototype
‍Tools used: Miro and Figma
‍Team: 4 junior UX designers, Helena Saez, Humraj Chadha, Fernando Echevarria Gianello and Lela Grzybowska.
‍My role: Conducting user interviews, usability testings and creating the prototype for the blog’s wireframes.
‍

WHO ARE CITYMAPPER?
‍
Citymapper is a public transit app and mapping service whose mission is to make cities usable. It displays transport options, usually with live timing, between any two locations in a supported city. It integrates data for all urban modes of transport, including walking, cycling and driving, in addition to public transport. It is free of charge to users, and is supported by a mobile app on devices such as mobile phones, and by an Internet website. 

DELIVERABLES:
‍
  The COVID-19 pandemic hit Citymapper very hard. With restrictions in movement and travel, Citymapper’s usership went down by 90% at the height of the pandemic Citymapper would like to start off by understanding the new commuter habits and routines and evaluate opportunities to add value in them. More workers are staying locally during their work days and weekends and Citymapper believe there might be opportunities to uncover solutions that help people commute locally. We needed to produce the below deliverables by the end of 2 weeks:


  • Research insight & findings concerning competitors, user types, and behaviour
  • Personas and scenarios
  • Experience map/User journeys
  • Sketches and Design studio
  • User flows
  • Wireframes
  • High fidelity mock-up and prototype of design
  • Usability testing and results

Research.

Conducted in depth Competitive and Comparative Research to better understand how travel apps and map services work. We put all the data into a feature inventory and the one interesting trend we noticed was that there was no loyalty scheme for any existing travel app. This is something that we could consider to differentiate ourselves to the existing apps out there.

‍

Synthesise.

Due to Covid there was a 95% decrease in people using Citymapper, many people staying local and reducing travel as fear of catching covid. We conducted user interviews to research peoples behaviour pre Covid and see how that affected how they travelled today. This gave us 4 main trends that we noticed.
‍

Define.

We created a persona called Bill with the insights that we discovered and formulated our problem statement.  Bill needs to find the motivation to rediscover his city and to stay active because he feels that staying at home has negatively impacted his mental wellbeing and caused a disruption in his daily routine. As a team we conducted a design studio session to start sketching some ideas.

In the design studio we time-boxed 20 minutes to come out with crazy 8 sketches. We then voted on the top ideas and tested our paper prototype. This led to iterations and starting on our mid-fidelity on Figma. Testing was key here, we conducted 8 usability tests focusing on each frame and asking users what they see.

"I feel like I am rating a product"

As we wanted qualititative and quantative data from the new feature we decided to change this to a text block and instead of stars add face emojis.

"Am I in a race?"

The Timer put pressure on users so we decided to take it out of our next iteration.

"What is a mystery crown?"

All users mentioned they did not understand the significance of the mystery crown, this led us to add coachmarks when users first click on the new feauture.

Deliver.

We iterated our wireframes and moved onto the final stage of the process to deliver our high fidelity prototype for the end of the 2 weeks. We kept the UI the same as the current app but decided from the user feedback that we needed to add coach marks to the new feature to really help users understand what the crowns signify and what the new feature ‘Buddy’ is about.

Next Steps.

For the next steps we would like to:

  • Do more testing, we would like to test the high fidelity prototype with more users.
  • Add local promotions to incorporate local business deals within the app.
  • Create a desktop version of the app and promote this new feature.
  • Review the data analytics of the new feature.

What I learned.

The biggest takeaways I got from this 2 week sprint were the following:
‍
The importance of allocating roles within the team- this was the biggest challenge for us as we did not do this at the start of the project so we all had different expectations and there was no decision maker assigned. I will definitely take this on board for all my future projects and make sure that there are daily standups where we can discuss what the plan of action is for the day and if we ourselves have any pain points we want to raise within the team. 

‍Clear communication- the second learning curve for me was the idea of communicating ideas within a team. Collaboration is an important aspect to any successful project. It was important to listen to each other and take ideas on board. The design studio and dot voting did help us make decisions and not lose time throughout the process however I will make an effort to discuss my opinions on certain decisions more openly in my future projects.

Revisiting the solution.

Build coach marks to explain how to use the new feature.

Bring elements of Gamification to motivate users.

Incorporate Live updates on specific route options.




Desktop Version.


Check out the Prototype below!