Project overview
Understand what Citymapper needs
Brief deliverables
Define project goals and objectives
Establish design constraints
All businesses across the globe are at the mercy of the impact of Coronavirus. With restrictions imposed upon movement, the total number of Citymapper's users plummeted by approximately 90% at the peak of the pandemic in 2021.
Following the easing of COVID-19 restrictions, Citymapper is committed to designing multiple solutions to accommodate increased travel among individuals. With shifting behaviour patterns, Citymapper wants to:
Effectively incentivise individuals to resume their travel routines by choosing Citymapper as their travel companion, especially in light of the challenges posed by the ongoing global pandemic and shifting travel behaviours.
Actively seek and develop innovative strategies and initiatives that not only empower and support local retailers but also focus on the establishing and nurturing long-term and mutually beneficial business relationships between retailers based in the UK and Citymapper.
Our group were tasked to design a feature that would help Citymapper regain lost traction due to Covid-19 and find a solution to build business relationships between the Citymapper users and retailers in the UK. We began the project with the following goals in mind:
Attract customers to local retailers by creating a solution that incentivises people to travel and shop through our application.
Understand the core concerns of travel that people have.
Assess people’s travel behaviour before and after the Covid-19 pandemic.
Embarking on the design journey for CityMapper, we understood the significance of establishing design constraints. Our exploration involved in-depth research into Citymapper's design system, encompassing elements like color palettes, typography, and button sizes. These design considerations formed a robust framework, steering our team towards crafting an innovative and efficient solution uniquely tailored to the specific needs and aesthetics of Citymapper.
Small yet strategically placed, the CTA buttons grace the top right corner of the screen with a discreet yet purposeful presence. Their compact size, carefully measured for precision, seamlessly integrates into the overall user interface.
In late 2013 Citymapper switched to a comprehensive identity using Proxima Nova Soft. It was a major improvement over their previous logotype, and reinforced the modern, approachable tone of their brand. The simple line drawings used throughout Citymapper’s promotional material match the typeface’s strokes and style.
Following extensive research on Citymapper's website and self-service developer packs, it became evident that eight colours are extensively employed throughout Citymapper's interface design.
Perform competitor feature inventory analysis
Conduct user interviews and understand people’s travel behaviour
Synthesise initial user research by affinity mapping
We carried out a feature inventory analysis on Apple Maps, Google Maps and Citymapper. The feature inventory analysis helped us to establish key insights, which are summarised below:
Street view is featured both in Apple Maps and Google Maps, which provides an interactive panorama view of the streets. Citymapper currently has not incorporated this feature into their design.
This feature is only exclusive to Google Maps. Google uses aggregated and anonymised data from its users to highlight popular times, wait times and visit duration.
The only app that offers Go Trip stats is Citymapper. This feature allows users to see how many calories they have burned, how many trees they have saved from reduced Co2 emissions and how much money they have saved from each trip.
Citymapper is the only app that provides a ‘Main Roads’ feature as a result of the escalating number of violent street crimes in the UK.
What apps do you use for navigation and why ?
Whats your preferred means of travel and why ?
How would you describe your typical commute to work ?
How has Covid affected the way you travel ?
Do you check the progress of your journey while you are en route to your destination ?
What would you do to improve your daily commuting ?
You need to check the route to your destination, can you show me how you would check this ?
You need to check the best means of transport, can you show me how you check this ?
We created our initial affinity map on Figjam whiteboard to organise a large number of ideas and data from our 12 user interviews. This enabled us to broadly scope out the useful insights based on their natural relationships.
People in the UK are able to move freely without restriction. Yet, public travel is still significantly reduced due to the fear of Covid-19 infection. While the City of London’s local authority has called for the return of office workers, 75% of the interviewees said they still feel uncomfortable travelling on public transport out of fear of catching Covid-19.
User engagement signifies the overall “health” of the business. An excellent way to keep users coming back and increase the engagement rate is to incentivise users with a reward programme. Most of the interviewees stated that they need an incentive or motive to encourage them go out.
A summary of our interviewees' feedback on their personal user experience with Citymapper.
Most of the interviewed individuals use travel apps to proactively steer clear of travel disruptions during their journey and to plan their travel in advance.
The majority of users use navigation apps to ensure they arrive at their destinations on time.
A summary of our interviewees' opinions regarding potential opportunities to improve user experience on travel apps.
Define the target audience
Ideate rough draft of design solutions based on HMW statements
Formulate design hypothesis to inform design decisions
Create user flow to display a complete user experience path
Considering the significant amount of user data we gained from our interviews, we agreed that creating two personas to represent our users’ needs, wants, and pain points would help to portray the crucial narratives.
Lily Smith, a freelance designer residing in East London, used to enjoy socialising with friends, attending exhibitions, and exploring the city. However, with the advent of the pandemic, she now prioritises safety by spending more time at home. On occasion, she ventures out for a leisurely walk in her neighbourhood to enjoy some fresh air or meets up with nearby friends. During the lockdown, she developed a habit of supporting small and local businesses such as coffee shops and bakeries. While she's eager to discover new ones to try out, she faces challenges when attempting to locate them in unfamiliar areas.
I want to find more local coffee shops and help their businesses to grow post-pandemic.
I want to visit more art galleries.
Some travel apps do not suggest any nearby restaurants or new places of interest.
I sometimes need to see an image of my travel destination to know I am at the right place.
Sometimes, travel apps take me to dark and narrow streets at night.
Lily is seeking ways to increase the time she spends outdoors. She works from home Monday through Friday and experiences feelings of loneliness and demotivation.
Using the two 'How Might We' statements mentioned earlier as our foundation, we brainstormed potential solutions with the goal of discovering a practical means to encourage Lily to go out more. Subsequently, we collaboratively picked a set of ideas, drawing inspiration from Lydia's problem statement, which we intended to move forward for design development.
Making design hypotheses proved instrumental in our design process as it facilitated a focused approach to prioritising and selecting ideas that directly catered to the needs of our target personas. By formulating hypotheses, we were able to make informed decisions on which design concepts would yield the most significant benefits for our users. Two hypotheses are written below:
The implementation of the "discover" feature in Lily's Citymapper experience will encourage her to venture outside more frequently, exploring her local area with the app. We anticipate that this implementation will result in a notable uptick in user engagement and overall satisfaction. This assumption is grounded in the belief that providing Lily with a curated "discover" feature will inspire her to utilise Citymapper as a valuable tool for discovering and navigating her surroundings.
We posit that incentivising Lily with Citycoins upon each visit to a place of interest will instill a sense of accomplishment, motivating her to explore more actively and thereby elevating the overall user satisfaction rate. This assumption is based on the idea that integrating a rewards system, such as Citycoins, will create a positive feedback loop, encouraging Lily to engage more enthusiastically with the app.
Users would be able to see all places of interest, pin-pointed, in their vicinity within the “Discover” feature. This feature analyses users’ current geographic location and automatically delivers helpful information about the places of interest to users. We thought in doing this, users would increase their engagement with Citymapper.
Users would find the QR codes at places of interest. Upon clicking on the scanner icon and scanning the QR codes, they would be rewarded with a surprise. With this reward program in place, we believed that users would feel increasingly motivated to go out and explore more places.
We inserted a gamification element, Citycoin, into our design solutions as we believed that making the user experience fun by rewarding their loyalty would be an effective way to boost user retention and increase user lifetime value. Upon scanning the QR codes, users would be rewarded with a certain amount of Citycoins that present interesting information about the places of interest to learn.
Referring back to our brief, one of the goals is to design a solution for Citymapper that can not only increase user engagement rate, but also help local businesses grow. After earning a certain amount of Citycoins, users could redeem the coins for products at local retailers that are partnered with Citymapper.
Toby Rummer, who has recently embraced a new position as a sustainability consultant based in Farringdon, London, now faces frequent work-related travel. In some instances, he must make the journey to his clients' offices, making punctuality a top priority in his work, along with adhering to Covid-safe practices during his travels. Regrettably, achieving this isn't always straightforward, given the potential for disruptions and fluctuating schedules with TFL. As a result, he relies on precise travel information to guarantee he can meet his clients on time.
I need up-to-date and accurate information on transport to avoid running into any travel disruptions.
I want to minimise human contact on public transport to avoid catching Covid.
I sometimes do not receive notifications on travel disruptions and schedule changes.
I sometimes get too many travel route suggestions.
I do not know how busy the train I am going to take is.
Toby needs a way to ensure his safety while taking public transport, because he has regular face to face meetings with his clients and colleagues.
Drawing insights from Toby, our second persona, and understanding his frustrations and needs, we successfully crafted a design hypothesis that serves as a guiding framework for tailoring our design solution to address his specific requirements. By delving into Toby's challenges, we gained valuable insights that enabled us to articulate a hypothesis focused on improving his user experience.
We propose that providing Toby with real-time information regarding the crowd levels on selected public transportation will alleviate his anxieties about potential COVID-19 exposure during commuting. This, in turn, is expected to encourage Toby to use Citymapper more actively for direction checking and travel planning. By addressing Toby's specific concerns and providing him with pertinent information, we anticipate an increase in his confidence and engagement with the app for a safer and more informed commuting experience.
Inspired by the “busy status” feature from Google Maps, we introduced this feature to Citymapper as well. Toby would be able to see how busy the train/bus is each time before getting on to avoid being in close contact with the general public.
Moving on from our sketching exercise, we created a user flow to display a complete user experience path to demonstrate our ideas on a granular level.
Design low-fidelity prototype
Test low-fidelity prototype with a focus group
Create mid-fidelity prototype
With my expertise in figma, I was able to quickly translate concepts into interactive mockups, allowing us to gather valuable feedback from our users and iterate efficiently. By taking charge of the prototype development, I played a pivotal role in shaping the project's direction and ensuring a solid foundation for further design iterations.
100% of our testers found the re-design much clearer and easier to use. Currently, users can only personalise three addresses. Should users wish to personalise and save more, they must click on a “three dots” button to edit and switch. We thought users would be encumbered by only having access to three saved addresses at a time. Therefore, we re-designed the “Get Me Somewhere” button, allowing users to edit four addresses individually.
Users would be able to see all places of interest, pin-pointed, in their vicinity within the “Discover” feature. Users would find the QR codes at places of interest. Upon clicking on the scanner icon and scanning the QR codes, they would be rewarded with a surprise stored in your personal "piggy bank".
“Crowded, Busy, Calm, Empty” provides live updates about the public transport capacity to users. All interviewees were enamoured by this feature, as it addressed their concerns and enabled users to minimise social contact amid Covid-19.
66.6% said they were perplexed by the overall user experience. We thought an onboarding feature might be a good way to introduce users to the app.
Iterate usability testing on mid-fidelity prototype with a focus group
Revise and implement
Create high-fidelity prototype
After conducting usability testing on our low-fi prototype with users, we learned some valuable insights that helped us to create a mid-fi prototype. We then tested the mid-fi prototype with 12 users to observe their behaviour and feedback while using it.
An overwhelming majority of 91.6% found the location pins to be confusing, as they were unable to understand what each individual pin signifies. Our original idea was:
Green pin indicates the local retailers that are partnered with Citymapper.
Orange pin indicates the places of interest where users can scan the QR codes and gain citycoins.
The CTA button being small has presented several issues to our users. Low visibility: A small CTA button may be difficult for users to notice and locate within the user interface.
Clickability: Our users faced challenges when clicking or tapping on it. The small size can make it hard to target the button accurately.
66.6% said that the “Piggy Button” was not self-explanatory to the users, leaving them feeling confused.
58.3% said they could not recognise the purpose of these two buttons.
It became evident that there was a lack of comprehensive and guided information to introduce users to our new features effectively. Our users struggled to digest the vast amount of information presented on the onboarding all at once.
Based on the valuable insights and feedback gathered on our mid-fidelity prototype, we started the development of the high-fidelity prototype, incorporating the necessary improvements.
Almost everyone found the location pins confusing; they struggled to distinguish which pin represented places of interest and which one indicated local retailers. Pins are now re-designed with two faces.
Based on the results and feedback gathered during the usability testing sessions, it became evident that the two action buttons caused a significantly high click error rate, therefore the change was made below.
“Customise your dashboard by clicking on a category on the left to select the data you want to see” was changed to “Add widgets to your community dashboard by clicking on a subcategory on the left menu to select the data you want to see.” to reduce error rate.
Based on the feedback, it became clear that our users faced difficulties in understanding the overwhelming amount of information presented on the onboarding, so we split and spread the information into separate and concise pages.
The scan button is located in the upper right corner of the screen. Once you arrive at your destination, a quick tap on the button enables you to scan the QR code.
Within your vicinity, there are pins with yellow faces and pins with green faces. Yellow-faced pins signify locations of interest where you can gain knowledge and earn CityCoins, while green-faced pins represent local retailers partnered with Citymapper, where you can use your CityCoins.
Upon scanning the QR code, a swipe-up window will appear with engaging information about the place you are visiting, along with the choice to store your CityCoins in the CityWallet.
At Citymapper, we aimed to ensure the gamification experience is enjoyable. The reward library offers numerous missions and tasks, and completing one will earn you an exciting surprise.
Whether you are with friends or alone, remember to jump on the app while you are out to discover new places of interest and learn and earn.
QR codes are typically located outside the venue. If you have trouble finding them, don't worry – simply approach a staff member, and they will assist you.
Organise and build a design system
Conduct an effective design retrospective
Define next steps
– Button Structure
– State: Default
– State: Click
– Button Structure
– State: Default
– State: Click
– Button Structure
– State: Default
– State: Click
– Button Structure
– Gift icon is used within reward button
– State: Default
– State: Click
– Button Structure
– State: Uncompleted
– State: Completed
These pins indicate places where you can spend your city coins.
These pins indicate places of interest where both knowledge and rewards await. By visiting these places, you can earn city coins and experience the captivating history of the places.
In conclusion, We have carefully designed our solutions to match the specific needs and wants of our target users, who are represented by two personas: Lily and Toby. By understanding their goals, challenges, and preferences, we have created solutions that cater to their different scenarios and expectations.
Our next step is to further test the gamification feature. Users who successfully accomplish specific tasks within the gamification feature will be pleasantly surprised with a generous reward. Presently, we have chosen to grant users a range of retail discounts. We believe that providing these discounts has the potential to boost user retention rates.
I learnt that usability testing is an iterative process in which a product is frequently tested by users repeatedly at various phases of the design process. In our example, we conducted usability testing twice with users to refine our design solutions, which I found very helpful.
I learnt that testing our products gradually in ideation steps would allow us to identify challenges early on and adjust accordingly. Had we started testing our initial onboarding page with users sooner, we could have invested a lot more time into feature research.
Effective communication helped to ensure that every team member was working according to the agreed expectations. I have learnt the importance of understanding how people process information differently, such as the choice of words and tone of voice. To ensure that my team developed trust through effective communication, we needed to foster transparency and sincerity. Transparency meant that each team member should make their research available to everyone to prevent alienation within the group. By being sincere, we were able to provide positive and constructive feedback. We acknowledged everyone’s accomplishments and efforts to bring the group closer together, giving each member the power to voice their opinions. It was equally important that we were able to provide specific, timely, and realistic feedback when required. I personally learnt the value of taking other people’s opinions into account and being open-minded to feedback.
