The Challenge

To improve user experience on the National Express customer app
iOS prototype of booking flow redesign
iOS prototype of booking flow redesign
UX tools used: User Interviews | Contextual Inquiry & Observation | User Journey Mapping | Competitor Analysis | JTBD statements| HMW questions | Story boarding | Ideation | Wire frames | Interactive Prototype
 

Understanding the user

Speaking to 3 people I personally know who are active NX users, I was able to gain some useful insights as a starting point.

👨🏼‍🦰👩🏻👳🏽‍♂️ User needs

  • Tickets ready in app / wallet to show
  • Live updated status
  • Clear details: gate number, station address, route

☑️ Goals

  • Simple and easy way to book
  • Clear instructions PRE journey
  • Station details available
  • Help available when needed and easily accessible

🚌 Tasks

  • To book a ticket
  • To track a coach
  • To access details on journey

😤 Pain points

  • Scrolling through email to find tickets
  • Not informed of delays to changes in route
  • Long booking process
  • Unsaved and they cannot come back to

Technical

Before thinking about solutions I wanted to establish technical assumptions and requirements.

Assumptions

  • User has wifi or data available
  • User travelling alone, young persons coach card
  • User knows where they are travelling to
  • Coach has live GPS locator
  • System has live updates, peak times, traffic, etc

Requirements

  • Account already set up to store data: tickets, payment, favourite stations and routes, travel history
  • Opt-in push notifications

Competitor Analysis

To get a brief overview of what the market is currently doing, looking at direct and indirect competitors mainly apps with booking features.
NX Booking Flow — Competitor Analysis
NX Booking Flow — Competitor Analysis
 

Defining the problem

Starting with the scenario, to understand the user a bit better. The JTBD statement will help my design process be clearer. Where the user’s main goal is to book a return ticket easily through the app. HMW questions will also help me with the ideation phase, considering different factors.

🏞 Scenario

Jane is attending her sister’s wedding in London, she has to travel down from Birmingham where she lives, she wants to book a return coach journey for her trip.

📝 Job To Be Done

When Jane has an event to attend out of town,

🤔 How Might We

  • HMW help Jane book her coach tickets easily?
  • HMW help Jane feel more comfortable on the service?
  • HMW inform Jane on any delays and ETAs?
 

Ideation

Crazy 8's

Using HMW questions I carried out some ideation using the crazy 8’s technique. Getting out ideas fast, within a limited timeframe allowed me to think outside the box. Coming up with ideas I wouldn’t have if not under pressure.
NX Booking Flow — Crazy 8's
NX Booking Flow — Crazy 8's

Storyboard

I created this storyboard to empathise with the user, it helps me think about the events, tasks and emotions they have to go through and to pinpoint where problems may occur.
NX Booking Flow — Storyboard
NX Booking Flow — Storyboard
After doing all the research and ideation up until this point, I’ve realised that the whole booking flow in itself is quite a chunky one. So I want to be realistic about what I can achieve in the limited time of this sprint (8hours).
NX Booking Flow — pre & during stages of the Booking Flow
NX Booking Flow — pre & during stages of the Booking Flow
I’ve decided to set myself a new goal, I will only focus on one of the flows — to improve user experience within the booking process.

Experience Map

Observation through testing allowed me to better emphasise with the user. As you can see, the user wasn’t very happy through out the process.
NX Booking Flow — Experience Map
NX Booking Flow — Experience Map

User Journey

With the learnings I’ve encountered so far, using only the main information needed and nothing more, I’ve created a new booking flow which involves 4 easy steps.
NX Booing Flow — New Booking Flow Design
NX Booing Flow — New Booking Flow Design
 

Prototyping

Wireframes

I kept the wireframes simple and without colour at this point as I wanted to focus my efforts on making sure the flow works first.
As you can see here, I’ve changed the tab bar and got rid of the hamburger menu. Reason being I felt like a lot of the information was repeated.
NX Booking Flow — Wireframes
NX Booking Flow — Wireframes

Prototype goals

  • To test if the flow allows the user to achieve their goal
  • To test if there are any missing screens to be built
  • To test the flow of the screens and basic interactions

Visualised flow

Helps the understand the flow screens from start through to the user accomplishing their goal.
NX Booking Flow — Visualised Flow
NX Booking Flow — Visualised Flow
 

Next Steps

Releasing small iterations over time would be the ideal way, in my opinion to allow the user to transition and slowly learn piece by piece as the app grows. If I had the chance to continue with this project I’d like to…
  • Usability testing of the new design
  • Implementing colour, type and interaction onto the booking process prototype (with W3C guidelines)
  • Adding on-boarding screens to introduce the new app
  • With user research insights I received, I want to explore what seat bookings and upgrades could look like
  • Start research and observation for the coach tracker feature
  • Explore and research for my accounts feature
badge