Roundel

Transport for London

Case study

Experience redesign

The TFL organisation (Transport for London) has served as the backbone of transportation in and around London for over 4 decades with over a billion people completing journeys per year on their services.​​​​​​​
This case study aims to explore the potential of the current TFL app by making its features relevant and even more functional for its intended users whilst redesigning the UI of the current app.

Group-60160

Stakeholders // Individual Project

Responsibilities // User Research / User Experience & Interface Design / Prototyping

Duration // 6 Weeks

PROBLEM

The current TFL app revolves around the balance of your oyster card i.e. topping up pay as you go credit, checking balance & buying travelcards. Its other useful features are majority external — meaning the features in the app when selected redirect you to the TFL website via an external browser.  It is designed for use with an internet connection also meaning options like selecting the Journey Planner or reporting a lost/stolen card that redirects you to the browser are rendered useless without the internet. The app becomes unusable on the actual London Underground, which is crucial for most people when making their way around London.

There's also a segment of TFL users who are not too familiar with using the London transport system on a regular basis e.g. Tourists, Non-Londoners. It can definitely be confusing for a first timer when navigating around London public transports systems, especially through the various lines on the underground. The current app does not align most of its current features with this audience which can ultimately lead to a negative experience for users.

SOLUTION

For the problems identified, the idea would be to come up with a way to minimise the amount of external redirections the app takes you through. Internalising & incorporating the important features would be the priority when redesigning this current system.

I believe exploring the opinions of irregular users of TFL is vital in making this app inclusive. With a system like TFL, it really does need its app to cater to the masses. Through the original objective of exploring the full potential of the TFL app, I will conduct further research into what should be added to the app, on top of the existing redesign process. These problems that have already been identified within the TFL app are likely to be a glimpse of what a wide range of its regular users’ face.

PROCESS OF DESIGN

This design process will act as a loose guide on how I intend to approach this project. Naturally, the research serves as the backbone of the whole case study which will then be built upon through definition & ideation. The final parts consists of testing and concluding of the project, with potential iterations for the future.

Group-60169

IDENTIFYING CURRENT USER ISSUES

In order to accurately implement the right features and updates to the existing TFL app, I needed to identify the current issues and experiences the users go through when using it. I decided to gather information by conducting field research and going through the app reviews on the apple app store to see what users honestly think of it.

FIELD RESEARCH & APP REVIEWS

A great advantage of doing a case study based on such an integral part of Londons daily operations is that finding participants to take part in the research process becomes relatively easy. With over 250 underground stations to choose from to conduct field research, I decided to narrow down the locations of where I conducted my field research to just 3 stations – Kings Cross, Westminster and Oxford Circus. These places were chosen because of the type of passengers/users of the tube that come through there on a daily basis.

Group-60173-1

Kings Cross Station is one of Londons most recognisable stations. It acts a gateway for those travelling in and out of London. The underground has the most lines on any TFL station. The thought process behind this was to speak to those native to London returning from work.

Westminster is the 2nd place chosen to interview users. Also known as a very busy station with a high footfall. Many of Londons famous tourist attractions are in this location.

When it came to choosing Oxford Circus, this location almost serves as a the retail hub for London. With many high fashion stores and the best restaurants in London, the audience that would be in this location would be quite mixed. From tourists to people who live there & work there.

Results from regular users that rely on public transport from day to day was quite uniform in response. For the people that took part in the field research process, I found that young professionals & students aged 18 - 30 use the app for its ‘convenience’ of topping up their oyster cards. There were a uniform of complaints of not being able to add photocards via the app to add their entitled discounts which deemed the app useless to them, or, they would top up on the app without their discount because they know trying to add money to their oyster on a machine during rush hour is almost impossible.

Group-60213

Another frequent concern was the lack of ability to check line status’ and train delays through the app. Rather than 15 people asking one customer service assistant  a load of questions at the stations, it would perhaps be easier to see live updates via the app.

A big common denominator from both tourists and regulars was that all parties wanted an in-app journey planner.

Although the tourists that were interviewed never experienced all the same problems as the London natives, they did present feedback on certain features that could enhance their travel experience. 100% of the tourist interviewees mentioned that it would be easier to have an integrated system in the app that showed where the main tourist attractions were and how to get there. The reasons was this was mainly down to the language barriers and the complexity of the underground transport system in London.

60a076775135a9a327171a32_Reviews

From the app reviews, the common denominator in user frustrations came from not being able to add a photocard to receive the necessary discount for the ticket/pass being bought. Users also complained about the redirection to the browser from the app features and made suggestions that important features like the map and journey planner become integrated.

KEY FINDINGS

There were a few common pain points found through the user interviews and the app store reviews that would be key when conducting the redesign & implementation of new features:

•    Not being able to add photocards
•    The inability to have live status updates of the trains/buses
•    Being redirected to the browser for basic functions like the journey planner
•    Not having a built in basic feature like the London Underground map, which a lot of people that interchange rely on

Group-60181-1

A LOOK AT OTHER TRANSPORT BASED APPS

Group-60210-1
Group-60205

With the Thameslink app, I see it as a great example of a transport application. It is clear with the information it shows and has a great deal of the features in-app (not being redirected to the browser). It is clear thy have focused on keeping the app cohesive with making the features all in app.I believe the Thameslink app compared to the LNER app is very user focused and aims to put a lot of relevant information in the right spaces. The relevant things a person using the Thameslink service would need is right there in app. From the addition of photocards to being able to apply for a smart-card.

REDESIGN AIMS

The redesign would focus heavily on implementing solutions for the pain points discovered for the apps users. Making everything in-app rather than being redirected to a browser is the primary aim. The secondary design aims are to:

-    Implement an onboarding profile for temporary & regular users    
-    Include route / journey planner based on and off the live status of London’s transportation
      - Allow the ability to search ‘points of interest’ alongside actual location
      - Add a function/system to allow the addition of photocard(s)

USER FLOW

According to the results collected and the personas created based on the results, a logical resolution to deal with the overall issues with the app is to implement 2 different profiles for the consumers. I have outlined user flows of the two profiles of people that would use the TFL system. The goals of Ariana the tourist for example are temporary —  she only needs the app for a short period of time, whereas Daniel and Victoria need the app for their long-term travel goals.The user flow has been created to show the journey both tourist and regular user would go through. It shows the journey with the new features that will go into the redesign.

The user flow has been created to show the journey both tourist and regular user would go through. It shows the journey with the new features that will go into the redesign.

image

WIREFRAMING

The process began with a rough low fidelity wireframe sketch on paper where I began implementing the new features on the app brought forward from the research results. I wanted the experience to feel personal and secure for the users, since it involves transactions of money.

image

Next, was the refinement of the sketched wireframe through a high fidelity wireframe. This added more detail on the various buttons, images & pages included in the redesign that was previously sketched, which would then later be converted into the final product.

Group-60183

CURATION PROCESS

Building trust and familiarity was at the core for the visual design. I established early on in the research that users associate their in-station experience with the app synonymously. Therefore, the trust they have with station staff & operations should be reflected in the app. Using TFL colours would definitely tap into the familiarity aspect the users have with TFL. I drew inspiration from the current uniforms that staff use in stations and made them the primary colours for design compared to their current app which is 90% grey in colour across all flows.

60a0767920a9815d9ef59437_TFL-Sketch

The official typeface of TFL is quite unique and recognisable, P22 Johnson Underground. This again, reinforces the familiarity users have with TFL.

Styleguides were created in Adobe XD to determine a visual structure for the project.

Mask-group

NEW SCREENS

2 new profiles for the TFL app redesign was created as a result of the research found in to making the the TFL app experience better for all users of its in-person service. We have the option to go through the onboarding profile as a regular user, which is labelled as ‘Work or live in London’. It takes you to an account page where there are a range of persona; options relevant to travel and oyster card needs.

The 2nd profile for temporary users is named ‘Visiting London’. In this flow, I implemented options that would be relevant to a user who would be using London transport system for their short term goals.

☑️ Implement an onboarding journey for temporary & regular users

Group-60186
Group-60185

☑️ Introduce route / journey planner based on and off the live status of London's tranportation
- Allow the ability to search 'points of  interest' alongside actual locations

Group-60187

☑️ Add a function / system to allow the addition of photocards

Group-60188

PROTOTYPE & TESTING

Two different flows have been fully prototyped for demonstration. One for the regular users of the app and another for the tourists/non-regular users of the app.

To test the UX of the redesign, I went to the locations where the research was originally conducted, to find regular and extreme users of the app. Extreme users refer to users who rely or use the app heavily - Which in this instance are the people who work &/or live in London. The regular users refer to those who lightly use the app and not frequently  - Which in this case are the tourists/visitors in London.

image-1

From 6 extreme users who were asked to test the app prototype, the general feedback was positive and 6 out of the 6 testers said they would happily switch over to this redesigned app over the current one. Amongst their voiced frustrations of the current app, 3 testers said the ‘Live Status’ feature was the best addition and how it makes their travel journey much easier. The criticisms drawn from 2 of the extreme testers was that although there is a Live Status feature, that there is not a feature which lets you know when the next train is coming. Apart from that, this iterated version of the TFL app received 6 out of 6 positive feedback with every tester eager for it to go live.

6 regular potential users were also asked to test and go through the visitors flow on the app. 4 out of the 6 appreciated not having to sign up to a service they will be temporarily be using for their short term stay, whilst the remaining 2 wanted the option to create/have an account seeing as their is a visitors oyster too. They felt as though it was unfair that they would have to top up in stations and that privilege was only given to workers & residents of London. 6 out of 6 of regular testers really liked the attraction feature and the option to get directions to that attraction too.

REFLECTIONS & ITERATIONS

All the necessary information and research needed to accurately implement changes and adhere to pain points was done to a high quality. Personally, if there were things I would change in regard to the UI of my redesign, I would implement a light mode and change the icons to full colour picture-based icons rather than the outlines I used. I would also use the official TFL font (P22 Johnston) for page headers only and use a san-serif based font like Circular STD for paragraphs and other icons. I feel like the P22 Johnston font was designed to be used for signs and not necessarily multiples sentences or paragraphs. Going forward, I would take onboard the 12 testers’ suggestions they put forward.

For the regular testers, I would implement the option of creating an account for those who plan to return to London and especially for them to have access to the same features as the account users such as topping up their oyster. As for the extreme users, I would make the Live Status page much more detailed so it could it could include an estimated time for the next train coming.

Get in touch

© 2024 Jordan Jaiyeola