Citymapper Redesign

Contribution

UX/UI Design

Target

Webflow

recognition

UCL MSc HCI Course Project

year

2017

Overview

This project focussed on enhancing the user experience (UX) of the Citymapper mobile app's main menu, with a specific emphasis on improving the inputting of destinations and selecting transportation options. The primary objective was to streamline the app's functionality and make it more user-friendly, particularly regarding location details and transport choices. By addressing usability issues and refining the design, the goal was to create a more intuitive and efficient user experience.

What I've done

1. Conducted a design review of the existing Citymapper app interface, identifying usability problems.

2. Defined the usability problems, including "Choice Overload" and issues with default options and fixed sequences.

3. Generated innovative design solutions to address these problems, incorporating principles like Hick's Law and user personalisation.

4. Created wireframes to visualise the proposed design changes.

5. Developed a prototype to demonstrate the redesigned main menu's functionality and user interactions.

Aim

This project aimed to significantly enhance the user experience within the Citymapper app by addressing usability challenges. The key objectives included reducing choice overload, improving the default options presented to users, and introducing personalisation features for favourite locations. These enhancements aimed to make the app more intuitive, efficient, and enjoyable for users, ultimately increasing its usability.

Design Process

The design process for this project can be summarised in several key stages:

  • Phase 1 - Project Initiation:
    Set clear goals for enhancing the Citymapper app's main menu and improving user experience.
  • Phase 2 - Design Review
    Analysed the existing interface, identified usability issues, and determined areas for improvement.
  • Phase 3 - Problem Definition
    Clearly defined the usability problems, such as choice overload and issues with default options and fixed sequences.
  • Phase 4 - Ideation
    Generated innovative design solutions, including UI changes, prioritisation adjustments, and personalisation features.
  • Phase 5 - Wireframe
    Created wireframes to visualise and plan the proposed design changes effectively.
  • Phase 6 - Prototype
    Prototype Development: Create a working UI prototype.

This project showcases my skills in UX/UI design and interaction design, emphasising the importance of user-centred design principles in addressing usability challenges and creating more user-friendly interfaces.

Design Review

I identified critical usability issues within the current Citymapper app interface:

  1. Overwhelming Options: The existing interface presents users with an abundance of options, leading to decision fatigue and a less-than-optimal user experience. To improve usability, I recognised the need for a more streamlined approach with enhanced visual clarity.
  2. Inconvenient Default Options: Upon selecting 'Get Me Somewhere,' the app defaults to presenting options from the navigation history. This approach may not consistently align with user preferences or convenience. To address this, I explored alternative methods to provide users with more relevant and personalised suggestions, ultimately enhancing user convenience.
  3. Limited User Control: The fixed sequence of favourite locations in the app limits users' control and flexibility. To empower users and create a more enjoyable experience, I proposed introducing customisable options for organising and managing their favourite locations. This change would grant users greater control over their preferences and contribute to an overall improved user experience.

Define the Usability Problems

In my analysis of the current main menu design, I uncovered several critical usability challenges:

Choice Overload

The main menu's multitude of options can overwhelm users, resulting in decision paralysis. The visual similarity among different functional choices exacerbates this issue, even when accompanied by descriptions. This challenge is commonly referred to as "Choice Overload," where users are presented with numerous options and can feel overwhelmed during the decision-making process (The Decision Lab, 2021).

Default Option Inconvenience

Upon interacting with the 'Get Me Somewhere' search bar, the app's current user interface defaults to displaying the 'navigation history' list in the tab menu. However, my analysis suggests that prioritising user preference and convenience calls for setting the 'Favourite' option as the default tap choice. This adjustment would enable users to access their frequently used locations more swiftly and efficiently.

Static Favourite List

The existing arrangement of the favourite list is static, resulting in a fixed sequence that does not cater to individual user preferences. To enhance user satisfaction and provide a delightful experience, I recommend introducing the option to adjust the order of favourite items. Implementing personalisation would grant users the flexibility to customise the sequence of their favourite locations according to their unique preferences. This approach promotes a more personalised and enjoyable user experience.

These usability challenges and proposed solutions reflect my commitment as a UX designer to address design issues, simplify user interactions, and prioritise user convenience and personalisation in creating user-centric applications.

Ideation

During the ideation phase of this project, I explored innovative design solutions to enhance the user experience in the Citymapper app's main menu. Here are the key design ideas:

  1. Streamlined Option Differentiation
    In this concept, I reimagined the user interface by differentiating functional options through changes in their sizes. Transportation options were presented in a larger format, whilst other options maintained their original size. Additionally, users gained the ability to personalise their two primary modes of transportation on the main menu, allowing them to exclude less frequently used options. This design approach aligns with Hick's Law, aiming to simplify the decision-making process within a multitude of choices, ultimately reducing users' cognitive load.
  2. Tab Prioritisation for User-Friendliness
    To enhance user-friendliness, I proposed a redesign of the tab sequence within the main menu. The 'Favourite' option was prioritised as the default choice, ensuring that users could effortlessly access their frequently used locations. This adjustment prioritises convenience and usability in the overall design.
  3. Enhanced Place Management
    In this concept, I introduced a significant change by replacing 'Save New Place' with an 'Edit Places' button. This modification empowered users to not only add new places but also efficiently manage their existing locations. Users could now delete places and adjust the order of their saved locations, creating a more tailored and user-centric experience.

These ideation concepts exemplify my approach as a UX designer, where I aim to simplify interactions, prioritise user preferences, and create user-centric interfaces that improve overall usability and convenience.

Wireframe

Drawing from my analysis of the main menu's usability issues and the creative ideation phase, I embarked on creating a wireframe to redesign the Citymapper main menu. This wireframe specifically addressed critical usability problems within the existing design, notably focusing on 'Choice Overload,' 'Default Option Inconvenience,' and the challenge of a static favourite list.

In this phase of the project, my objective was to translate the identified problems into tangible design solutions. The wireframe served as the blueprint for the redesigned main menu, strategically addressing these usability issues. Through thoughtful design decisions, I aimed to enhance the overall user experience, simplifying interactions and prioritising user preferences.

This wireframing process exemplifies my approach as a UX designer, where I bridge the gap between identifying usability challenges and creating practical design solutions that prioritise user-centricity, ultimately leading to improved usability and user satisfaction.

Prototype

Feel free to play around the prototype below ✨

Reflection

Throughout this project, my focus was on improving the user experience (UX) of the Citymapper mobile app's main menu. Specifically, I aimed to enhance the destination input and transportation options to streamline the app's functionality and improve user-friendliness. In order to achieve this objective, I conducted an in-depth design review that allowed me to identify key usability problems. I then proposed innovative design solutions that prioritise user convenience and simplify decision-making. To bring these ideas to life, I created wireframes and a prototype that exemplifies my commitment to user-centric design and improving overall usability.