Underground App Case Study

The aim of this project is to design an app that allows people to use their smartphone as underground cards. It also provides juicy data in real time.

Underground App main Screen mockup

Product Definition

The Quick Benchmarking was one of the most important method to understand the problem and see possible solutions and how to develop them. I searched for different apps to detect best, good and bad practices.

Underground People
Underground Apps and other references

I discovered that there was a huge possibility to stand out from the competitors if the search function of stations, lines and routes, and the map were simplified in one screen. Furthermore, the control of multiple cards in one app would be a strong idea.

User Research

This phase was focused on understanding user behaviours, needs and motivations. I have used some techniques and metodologies such as User Personas and Surveys. On the one hand, I discovered that I should divide the customers into two different groups: Frequent customers using season tickets and casual ones using pay as you go top up. I also divide the problems into 2 groups: related to top up (before travelling) and related to the map (before and while travelling)

Underground People

I decided to do a survey. The aim of it was to detect the best functions, to prioritize them and listen to suggestions. I asked 20 different people to answer 3 quick questions explaining them the aim of the project.

Underground People

I. Select the sentence that represents you the best

Underground People

II. Rate the following extra functions in an Underground App from 1 (Not important) to 5 (Very Important):

Interview Messages

III. Coments, suggestions, thoughts:

Interview Messages

The conclusions of the survey were that many users have to top up different types of tickets. It is important to keep it in mind to make a clear top up screen. On the other hand customers prefer to have a clear and well desined app with only the main features and some interesting extra ones ( map and real time incidents)

I used a MoSCoW to sort tasks by priority. It was useful to discard the unnecessary ones and highlight the vital product needs. For example, I discarded the street map feature because I prefered to focus in other functions that could stand out more from the crowd.

Information Architecture

After doing the MoSCoW I organised the functions into two groups: the ones related to the top-up card and the ones related to the map. Furthermore I made a list of necessary settings.

General Navigation Schema
General Navigation
Schema of functions of the app
General schema of functions
Example of Payment Flow
Example of payment general flow

Ideas started been more tangible and I took some important decisions: For example, I decided to display favourites and recent searches next to the search bar in the map screen, because many people usually plan similar routes.

Sketches of the Underground App
Sketches and low fidelity wireframes

Style

The goal of the visual appearance is to transmit a feeling of security, modernity and cutting-edge technology.

Technology and blue colors reference

I have defined different types of action buttons and cells deppending on their importance. The app has also been evaluated for contrast standards. I have checked the elements with ‘A11y - Color Contrast Checker’ Figma Plugin and some colors and font weights have been modified. I have used ‘Color Blind Simulator’ Figma Plugin to design an app that does not only deppend on colors but also on shapes and weights.

Underground App main Screen. Cards

App abstract

Customers can use their smartphones as underground cards just by tapping on ‘Use Card’ button. Payment methods could be saved and customers can top-up their cards in a few steps. Furthermore, there is a map screen which sums up all the extra information realted to stations, lines and journeys

General Navigation prototype
Payment prototype
Underground App Map Features
Map Screen Schema

Conclusions

The app allows users to top up and use their smartphones as underground cards. The result is that they spend less time doing it and their satisfaction using the underground increases.