British Airways

 

Completed at: forpeople, London
Location: London, Great Britain
Role: Information Architect, User Experience Designer, User Interface Designer
Live link: www.ba.com

 

British Airways is a full service global airline, offering year-round low fares with an extensive global route network flying to and from centrally-located airports. British airways undertook a digital redesign project in 2015 with the focus of making it easier for users to find the information they need, plan their next trip and manage their bookings. I was bought on-board as a contractor to collaborate, map user journeys, design and rollout the Extras area of the booking process.

erinfellows_portfolio_BritishAirways_04.jpg
erinfellows_portfolio_BritishAirways_07.jpg

Brief

The upselling area of the booking process brings BA approximately £11 million of revenue per annum. With my previous experience in booking systems, I came aboard to design a seamless customer experience to entice users into adding extras during the booking process of their flight without creating friction or sacrificing existing conversion rates.

We needed to design all cases and create logic for:

• Cash & Avios discounts

• Cabin upgrades

• Flexibility upgrades

• Cars

• Hotels

• Seat selection

• Extra bags

• Insurance

Competitor analysis and requirement gathering

Working alongside the Strategy Director and an Experience Designer in daily sprint sessions, we collaborated closely with the client to establish the project requirements, priorities and technical logic for the project.

I completed a thorough analysis of the existing competitive landscape to establish opportunities and patterns of such areas within a booking flow. After investigating these flows and discussing new ideas for improvements, we got sketching and created a war room where we were to compose customer journeys and the order for which a user would embark on each of the areas.

AncilliariesMatrix_10.jpg
 
erinfellows_portfolio_BritishAirways_23.jpg
erinfellows_portfolio_BritishAirways_25.jpg
 
erinfellows_portfolio_BritishAirways_22.jpg

Wireframes

 

We began the practical application of our design thinking with a very hands-on, collaborative wireframing session with paper and markers. We covered all Extra areas and then checked each of them off against the requirements gathered from the previous session to ensure we had captured the business goals and all the necessary commands the user would need to get through their journey with ease.

These sketches were then converted into digital wireframes for presentation purposes and clarity.

erinfellows_portfolio_BritishAirways_28.jpg

UI Design finalisation

The final execution and design deliverables happened over a couple of weeks. Covering off all of the design flows, we delivered a comprehensive and web responsive solution to British Airways. We opted for a modular design landing page that would lead the user through simple pop-up flows to select their options. The user could then use the landing page as an overview page for all their extras. This design solution was also flexible for mobile design rollout and aligned perfectly with their new digital design system.

erinfellows_portfolio_BritishAirways_44.jpg

Interaction Design

A round of interaction design was finally applied to the static designs. This was to demonstrate the interactions, flows and animations of the intended design. Soft fade-in tiles were choreographed for the introduction of the landing page and easy-to-follow animations proceeded. The animations aided the user in understanding the parts of the page they had interacted with and what they had to do next.

BATransition-small.gif
 
Previous
Previous

hungryhouse

Next
Next

CliniCloud