work-in-progress - virgin-atlantic

The Brief

When: 2012

Role: UX Associsate director

Team: 2 ux, 2 design and a shit load of developers

Overview

To cater for the ever increasing mobile visitors to virginatlantic.com, we were asked to translate the newly created desktop experience onto mobile.

Business goal

Increase flight sales and the number of customers managing their booking by enabling key aspects of the Virgin Atlantic digital experience on mobile

Experience goal

There is only one Virgin experience, be it desktop or mobile. The services offered to customers should not be hampered by the way a customer interacts with the brand.

Explore the process

The process

Refine, Test, Refine

1

After the sketching workshop we would design and prototype different options explored during the initial workshop

2

After the sketching workshop we would design and prototype different options explored during the initial workshop

3

After the sketching workshop we would design and prototype different options explored during the initial workshop

One Virgin Experience

Mobile, Tablet, Desktop, it doesn't matter

We took some key templates on this desktop site and sketched out how it adapts all the way down to mobile, we then worked directly with a front end ID to design in browser with a set of test devices

Layered navigation, lets users to see where they have come from

Components and templates work across all break points

Finding your perfect flight

Book your flight, wherever you are

Following the mobile principle of “one Virgin experience” we kept the functionality the same, however to so do we had to create a unique mobile experience that used the same back-end logic but a custom front end.

To make sure we optimised the mobile flow we performed user testing with an Axure prototype , this was tested over two separate days, allowing us to tweak the design after the first day to address any minor usability issues.

Initial low fidelity prototyp of flight search journey

The booking panel allows users to search for a flight with minimal clicks

Flight search results allow users to quickly change flights to get their perfect combination

and receive positive reassurance after booking

Managing your booking on the go

Check in on the taxi ride

The manage your booking application allows passengers to add passport details, choose their seat and buy extra baggage. For each section we have a kick off meeting with EA, Creative and Tech. Wee we scamp out key journeys and discuss up front any possible technical limitations.

The check in process borrows heavily from the manage booking process and shares a lot of features, this allows passengers who are familiar with Virgin to seamlessly move between the two.

From sketch to desing

initial digital prototype create to test the flow

Seat management requires some detailed interaction design

The online checking flow was designed to alert you to a clear next step

The process was designed as a one page experience optimised for speed

And allowed all features of the desktop including a fully featured seat map

Manage booking allows customer to manage flight details in advanced