CityMapper Redesign
This project is about learning CIF usability testing by applying it to a popular app. I chose Citymapper, a widely used app in the UK for navigation and transit help.
Key Redesign
You can easily find the directions from one point to another but when it comes to multiple destinations, its not easy enough to access. That is the major feature added to this existing design of a website and mobile application.
The initial version of the app only allowed users to search for one destination at a time, lacking the capability to plan trips involving multiple locations. This restriction made it impossible for users to compare routes or determine the most efficient travel methods for a multi-stop journey.
Plan a trip
This new feature will now help in planning efficient and pre planned travel making it hassle free for the user.
Add Stop
Now, when you click on "Plan a trip," there's a handy "Add stop" option as you pick your starting point and destination. This lets you throw in extra stops along your route, making it a breeze to compare different paths and plan your journey just right.
How did I do it?
Usability test method : CIF Test
The Common Industry Format (CIF) places paramount importance on three crucialaspects of usability: precise goal achievement effectiveness), minimizing resource usage (efficiency), and surpassing user expectations (satisfaction). Through metrics such as completion rates, task times, and subjective feedback, the CIF paints a comprehensive picture of a product's user experience. This user-centric approach ensures that the product is effective and efficient, and ultimately satisfies users' needs.
Aim
-
To have a user friendly and responsive UI
-
To analyse the collected data and use the pinpoints to make the app better
-
To optimise the efficiency of the website or app to use less battery or data
Participants
Anybody who uses a mobile phone to find out travel plans can be a participant. A diverse group of people can be tested for this project which includes regular travellers, tourists, elderly people, tech savvy users and young adults. The age group can be defined from 18 - 65.
Deliverables
User research insights, wireframes, high-fidelity prototypes, and an interactive platform design
Role
Lead UX designer and Researcher
Tools
Figma, Miro, Word, Adobe suite
Timeline
4 Weeks
Existing User Interface
The existing homepage looks very clean and easily understandable. They have used some great colours that help give attention to the important things. One great thing about CityMapper is the number of ads that are limited. For example, the TfL website is bombarded with ads, it makes it confusing for the user.
The screens above are the “NEWS” part of the website. The same feature on the mobile application is hidden deep inside settings with a different name called “New Posts”. The purpose of this part is to make the users aware of planned or unplanned disruptions in their travel.
01
City Mapper lacks consistency between the apps and websites which may be difficult for new users and some existing users as well. If you see below, there are no filter options. But the app has filter options. This confuses the user and leads to using a different navigational app.
02
The website has a login option which does not work. The feature could actually be used to help users get to their desired destination quicker.
03
These are the main UI problem that a day to day user would encounter. There are a few other problems and if addressed properly, this navigational platform has endless potential.
Procedure
I screened participants using a form to ensure they met my criteria. Eligible individuals then performed the same tasks on both our mobile and website platforms. This method allowed me to directly compare task efficiency across different user interfaces, helping me pinpoint usability differences.
Participant screening
Not everybody can be a good fit for the test, so participants were screened before selected for the usability test.
Informed consent
All the participants were given a consent form in order to understand how and where the data obtained was going to be used
Survey Questions before Usability test
A few warm up questions were asked before the usability test to ease the participants
Research Tasks
These are the asks given to the participants for both mobile and website versions
04
Task 4
Can you find out what time the 418 reaches the county hall bus (Stop UA) stop?
05
Task 5
Can you find the news section and find the latest news about railway strikes?
01
Task 1
You’re on a trip in London, plan a route from “KT5 8DF” to “221B Baker Street, Big Ben and to Oxford Street”. You can go to the destinations in any order. Try to find the cost and the most efficient way there and provide a detailed explanation of the planned journey.
03
Task 3
You have 1 minute do finish this task. It is 20:05 and it takes you 3 minutes to go to the platform. Find the quickest train from “London Waterloo Station” to “Surbiton Station”. Try to address any interference you may come across.
Task 2
Attempt to plan a journey from “KT5 8DF” to “221B Baker Street” that combines cycling and public transportation. You have to finish your work and leave at 1100 hours. Calculate how long your journey is and how much money you’re going to spend.
02
Post test questionnaire
After completing the tasks, participants filled out a post-test questionnaire to provide detailed feedback on each scenario. This form explored their experiences, challenges, and suggestions
Performance Data
The data presented below reflects the results from usability tests conducted with participants who performed identical tasks on both our mobile and website platforms.
Website
Time on task for website
This is the time on task comparison for 5 tasks on the website version of Citymapper
Task results for Website
Participants completed five tasks on both website and mobile platforms, showing varying degrees of efficiency. While all achieved a 100% success rate on the website cross tasks, individual experiences differed significantly. Notably, Task 1 revealed better mobile performance with shorter completion times, whereas Task 4 highlighted substantial usability challenges with a 0% success rate. Tasks 2 and 3 demonstrated consistent success but varied in the need for assistance and error rates, suggesting areas for optimization. Task 5 was completed flawlessly by all, indicating effective usability for simpler interactions.
Website Task 1
Website Task 2
Website Task 3
Website Task 4
Website Task 5
Task 4 failure reasoning (Website)
Task 4 was a failure on the website because it does not have any option to check specific bus routes.
The button to check bus details
The button to check specific bus routes
Whereas the mobile version has button where you can check the route of a bus, timings of the bus for the entire day and the current location of a specific bus.
SUS score for website
Our website's average SUS score of 70 reflects a decent usability level, with some users experiencing challenges. This variability suggests a need for refining the website to enhance user satisfaction and consistency across all interactions.
Mobile application
Time on task for Mobile
This is the time on task comparison for 4 tasks on the Mobile version of Citymapper
Task results for Mobile
Mobile Task 1
Mobile Task 2
Mobile Task 3
Mobile Task 4
Task 5 failure reasoning (Mobile)
The screens above are the “NEWS” part of the website. The same feature on the mobile application is hidden deep inside settings with a different name called “New Posts”. The purpose of this part is to make the users aware of planned or unplanned disruptions in their travel.
SUS score for the mobile application
With an average SUS score of 77.5, our app demonstrates good usability overall. While generally well-received, the feedback indicates opportunities to streamline interactions and improve error handling to boost user confidence and ease of use.
Main user experience Issue
Task 1 : You’re on a trip in London, plan a route from “KT5 8DF” to “221B Baker Street, Big Ben and to Oxford Street”. You can go to the destinations in any order. Try to find the cost and the most efficient way there and provide a detailed explanation of the planned journey.
Objective: Evaluate how efficiently the user is able to do the required task. Determine how user friendly it is to get the desired outcome (Route Planning).
Explanation : You can easily find the directions from one point to another easily but when it comes to multiple destinations, its not easy enough to access.
Redesign : The search bar could have an “Add Stop” option to add different points of destinations and you could choose accordingly from there on.
There were other issues but this issue was taken mainly into consideration during the redesign process.
Common Industry Format (CIF) based usability testing
The evaluation of CityMapper's usability and user experience is pertinent due to its consideration of post-pandemic concerns, competitiveness preservation, adaptability to shifting urban mobility needs, sustainability advancement, adherence to evolving user expectations, and alignment with broader societal and global dynamics.
S
ince its launch in London in 2011, CityMapper has expanded to become a popular urban mobility software throughout the world by carefully adjusting to the changing demands of digital integration
modifying commuting schedules are becoming commonplace.
These developments have a direct impact on how we live our daily lives and navigate our cities, which has piqued the interest of many individuals. In spite of the difficulties it encounters when addressing urban congestion, providing eco-friendly travel options, adopting new technological advancements, or adjusting to post-pandemic realities, the usability test ensures that CityMapper will remain a dependable, user-centric, and sustainable solution in the dynamic field of urban mobility.
Q2. Which system/software/website are you going to test? What organization ‘owns’ the software?
The CityMapper website and mobile application will be tested for this usability test. CityMapper was very recently acquired by a global Transport tech firm “Via”. While Via’s software enables cities and transit agencies to efficiently plan and operate their public transit networks, CityMapper empowers transit riders with the ability to navigate the urban transport network through intuitive and beautifully designed apps.s
“
”
and urban living. Real-time navigation, transit information, and a variety of transportation options are just a few of the benefits that CityMapper offers as it helps users traverse the intricacies of today's metropolitan surroundings, which are becoming more and more urbanized. Its worldwide reach demonstrates its flexibility and user-centered approach, underscoring its dedication to tackling the unique obstacles presented by every community. By recommending environmentally beneficial routes of transportation, the app not only provides users with effective navigation tools but also actively encourages sustainability. As the urban and technology landscapes are always changing, the usability test is essential to investigating user experiences and providing insightful feedback for the app's further development.
Q1. What real-world changes in business or society set the context for this usability test? Why are these trends important and of interest to many people?
Our transportation preferences are being influenced by broader societal trends and the way we travel across cities has changed significantly. This has an effect on CityMapper's usability test. One key factor is the expanding urbanization trend, which is characterized by an increase in the number of people moving to cities, which increases traffic and complicates urban transportation systems. The usability test aims to address this by enhancing CityMapper's efficacy and usability while taking into account the evolving demands of individuals navigating congested urban environments.
The growing emphasis on sustainability is another crucial aspect. With a rising global awareness of environmental issues, people are actively seeking eco-friendly transportation alternatives. The usability test ensures that CityMapper aligns with this societal interest by evaluating the app's features that promote sustainable and environmentally conscious commuting. This is particularly relevant as users increasingly prioritize travel options that contribute to greener cities.
Technology improvements have a big impact on the usability test. Because real-time data is more readily available, GPS technology is always improving, and mobile app capabilities mean that users expect urban mobility apps like CityMapper to be both technologically sophisticated and easy to use. The usability test's objective is to ascertain how successfully CityMapper integrates these cutting-edge technologies while maintaining a user interface that is simple to use and intuitive.
The COVID-19 epidemic has had a major impact on commuter patterns, with remote work becoming increasingly prevalent. This is taken into account in the usability test, which evaluates CityMapper's ability to adapt to these post-pandemic changes. This also takes user expectations and safety into account in a world where working remotely and
the user experience but also allows for collaborations with city authorities and urban planners to provide insights for improving transportation infrastructure.
Neither Uber nor TfL know what you do once you leave their system. But Citymapper does, because it’s not tied to any one system and – because of geolocation and your search – it knows your real origin and destination.
Q4. How does usability and user experience enable these business goals?
CityMapper's primary business objectives depend on usability and user experience. A user-friendly interface makes it easier for new users to get started quickly by introducing them to the features and functionalities of the program. This accessibility, which reduces potential barriers to entry, is crucial for promoting greater user adoption. The utilization of intuitive route planning tools and clear navigational cues also significantly boosts the efficacy of trip planning. Customers may easily research various transportation options, leading to higher use and solidifying CityMapper as the go-to source for regular commute needs.
In addition to encouraging exploration, an intuitive design creates wonderful user experiences that increase user satisfaction and loyalty. Customers that are happy with an app are more likely to stick with it, which leads to higher retention rates. Due to customers' ardent advocacy, CityMapper's user base inevitably expands as they tell others about their positive experiences.
Moreover, reliable, consistent, and accurate information is the foundation of the app's credibility. Users' trust in CityMapper as a trustworthy source of real-time navigation and transportation information further solidifies the app's place in the competitive urban mobility market. In addition, the data-sharing features of the user-friendly interface encourage active engagement and allow CityMapper to gather meaningful data on user preferences and behaviors. Collaboration with local authorities to enhance urban planning projects can be facilitated through the use of data to support strategic decision-making.
Last but not least, a major factor in CityMapper's success is its flexibility in a range of urban situations. The software guarantees a satisfying user experience that is appealing to people all around the world by customizing its services to meet the particular difficulties of various places. The ability of CityMapper to adapt to different urban settings and satisfy the unique demands of its users has been demonstrated by its successful growth to major cities across the globe.
Common Industry Format a.k.a CIF for Usability test is a standard method for reporting usability test findings
Q3. What are the business goals of the software?
CityMapper's main business revolves around providing a comprehensive urban mobility platform through its software applications. The key aspects of its business include:
Navigation Services: CityMapper offers users real-time navigation services, helping them plan and navigate through cities using a variety of transportation options, including public transit, cycling, walking, ridesharing, and more.