Gatwick ExpressiOS/Android

Creative Direction UI/UX
App Design

Background & role

Gatwick Express is a premium transport service taking passengers direct from London Victoria to London Gatwick Airport within 30 minutes.

As a halo brand for major operator Go-Ahead, it was given a rebrand and makeover in 2016 and has had several subsequent app reworkings.

The first version of the app was very much an MVP, but we still had an opportunity to introduce some unique and useful tools such as flight times and e-tickets.

With increased budget and scope, we took to completely rethinking the app in 2017, with a relaunch in 2018.

I worked with a mid-weight designer under my direction to assist with design production, whilst I laid down the creative direction, stakeholder communication and UX/UI direction.

The challenge

The initial release of the app in 2016 was a major step forward for Gatwick Express. Yet, due to time restraints, we had limited time to implement all of the great features that we wanted to.

Phase 2 of the app design in 2017 was then a golden opportunity to listen to user feedback and include new and useful features, such as stored payment, improved flight tracking, PayPal integration, notifications, true native e-ticket integration, personal account and some nice little bells and whistles with the design.

Our main challenge was to make it quick and easy for users to download the app (it had to remain light for those on mobile data traveling from abroad) and fast to purchase the right ticket for the customer to purchase on the station platform with minimal investment required to learn the app.

Hence it was important to keep a user-centric focus: often users are in a stressed state of mind when engaging with the app for the first time. They may be running late for trains, in the middle of crowds and have little patience for learning new heuristics or even able to spare limited time to engage with onboarding.

Branding

Onboarding

The client was keen to keep the essence of the brand right from the start, from splash screen to purchase. We knew that not all of our users would have time to absorb the onboarding screens, so as a start, kept them visually interesting for those, say, waiting in a departure lounge, but allowed the ability to skip straight away for those in a rush (you’d be surprised how many apps don’t do this).

Each slide has an overview of features and scrolls smoothly in a pleasant parallax style. We spent some time prototyping to get this movement feeling right before handing to the developer to implement.

The end result was a clean, helpful overview without being obtrusive. Users can review the tour at any time by accessing it in the menus. Simple features like this can be helpful if they decide to skip in the first instance.

Overview of the onboarding screens

Dashboard customisation

Every user, of course, has different needs and contexts.

We looked at how our users were shaped in terms of persona: whether they were traveling from abroad, with a basic understanding of English, a regular corporate traveler, or a daily commuter.

Some may be coming across town, or straight from Gatwick. As such some may need tube updates, some may need flight information. Research indicated it could be incredibly variable.

As such, we needed to give users the ability to prioritise their information on their dashboard. Yet at the same time, it needed to be straightforward and unobtrusive so we devised a simple method by which users can quickly tap, to rearrange the modules to their liking.

Dashboard

Twitter feed with up-to-date info

Quick Purchase

Aside from increased customer satisfaction, a key indicator of success for the client was an increase in ticket sales. Of course, that’s going to be a bottom line on the spreadsheets.

In order to achieve both of these (they typically go hand in hand anyway), we needed to improve the purchase process. The existing implementation was rather messy for an app, with an external payment handoff and non-native input forms.

So native implementation was clearly the way forward: it is simply faster and more secure.

We rethought the entire flow, making each form input a simple and unobtrusive process. Previously the user was faced with a wall of forms (we LOVE tidy forms but not THAT much), which was immediately off-putting. We looked at what was really needed, cut out what wasn’t, and simplified the entire presentation.

The user can save their card to their account for the next purchase, meaning just a couple of taps from selection to confirmation.

As a result, ticket sales have increased to 18% over the previous iteration. Success. Time for a celebratory drink.

GPS triggered purchase screen

Ticket information and dates are clearly labeled

Account section

The account section was a major upgrade to the original release and was desperately required as a more streamlined means of managing purchases and payment options.

First time around we simply didn’t have the scope to implement these features, but enough users raised feedback with our client that it was seen as an important step forward in customer satisfaction (see, someone does listen).

We were only too happy to oblige.

In order to implement this efficiently and secure stakeholder buy-in, we worked up wireframes from the ground up, looking at popular and successful apps such as Ryanair (big respect to the design & UX team here) as part of our heuristic research and evaluations.

The end result was a fully fleshed out account section with the ability to control your information, review orders, re-download tickets and manage your stored cards.

We still have work to do on a product level in adding a quick registration whilst purchasing tickets, but it was out of scope in this release. Regardless, overall it is a great step forward for the user.

User flow in the account section

Account wireframe overview

A vast improvement. I love that my ticket now comes straight to my phone.

  • Beta user feedback

Log in / account recovery screen

Account landing screen

Quick editing of your details

Recover tickets and re-download

Pin a flight

The app has always been about end-to-end experience, right from leaving London to stepping onto your plane. A virtual travel buddy to get you to Gatwick and beyond if you will.

We always envisioned (we like to have a dream) that users would think of the GEX app as soon as they started traveling, but of course in order to do this it needs to be easy to use and of course… well… helpful!

As well as useful features such as tube info and train times, the next most important consideration is the flight info.

Picture this: You get past security and want to relax. You might have some food or some drink (steady now). So as a user, the last thing you want to be doing is constantly watching the departure boards or staring at your phone.

As a solution we integrated exactly the same departure information that is seen at the Airport, with a push notification implementation planned for the next future phase.

So you can sit down, enjoy your beer (or Gin Fizz if that’s your thing, we won’t judge here, promise) and wait for the app to tell you when to leave without a single strained muscle from craning your neck. Result!

Stay up-to-date with your flight info

Pin flights to your dashboard and receive notifications

Easy registration & payment

Stored card payment is an important feature of any modern app, users will be quick to crucify those that don’t have this feature.

As a native solution, we thought about a quick selection of cards through a swipe mechanism with a playful representation of the card itself. Research we conduction showed that this visual metaphor for a card is well received and assists the user when inputting information.

For a future phase, we have an implementation of Apple/Google Pay scheduled along with a card scan feature so users no longer need to input the information manually. Alternative third-party payment systems are also currently being explored to allow the user to have the quickest and easiest possible.

A neat little feature currently in-app is a postcode address search. Of course, should this fail, the user is notified and can simply complete the rest of the address with minimal fuss. It’s surprising how many postcodes in the UK fail at this stage and Korean address have a completely different structure altogether. So far, no negative feedback from Korea (of the South variety).

Streamlined fields and booking process

Store multiple cards for payment

The outcome

The team put a lot of long hours and love into the current phase of the app, with many time and budget restraints and it has been a huge achievement considering the leap forward in tech stack and usability.

As a premium part of the Go-Ahead portfolio, it is somewhat of a standard bearer for future technology trickling down to the other parts of the organisation, so we have a huge responsibility in getting this right. For the most part, we did.

But of course… as any product manager will tell you, a product is simply never finished!

We are in continuing discussion with our client to continue to nurture the app, with improved features such as passenger loading, payment options, GPS recognition for automatic ticket reminder notification (i.e. “you’ve reached the barriers would you like to display your ticket?”) and future user testing to continue to focus our future improvements.

We’re excited to continue working on a great product, with a great client, and will be pushing to get these great new features out to our user-base in the coming year along with other features under an NDA. Watch this space!

Overview of the new features