Nick Lockington

Reinventing British Airways mobile

My team spearheaded the redesign of BA mobile. Multiple agencies and a hands on client made this a potentially complicated project, but through careful management and insightful design we succeeded in helping BA move their mobile presence from a weakness to class leading strength.

What did I do? Design direction • Design strategy

 
 
 

The setup

British Airways need no introduction, but it's worth understanding the team setup to appreciate the challenges involved in creating a successful product for the world renowned airline.

There were three parties involved. BA, Ogilvy One and my team at Imano. Ogilvy One were the client contact and had creative oversight, BA was growing a mobile specialist UX team as the project was ongoing. My team at Imano were involved to spearhead the mobile UX & design. 

The front & back end build would be handled by the BA team. In some ways this was an advantage, but it did create the challenge that our team needed to have a thorough understanding of the limitations and potential of the system. 

With three separate design teams involved it was very important that my team members were supported in the right way. They needed to be able to take ownership of the project enough to be able to push the concepts, but have the maturity to understand that key decision makers would not be within the Imano team.

 

The challenge

To re-invent & improve BA's mobile proposition.

The product had to aim high as development times were long and the features & execution of the product had to make headlines when it launched 9 months from the concept phase. 

Back end limitations were high. This is because stability is incredibly important for an Airline website or application, and development for these systems are time consuming and expensive.  

In short: to Create a news worthy mobile product suite without causing major impacts to the back end systems for launch up to a year from inception. 

 

Consultations & project strategy

Feature Mapping

We held several short client workshops to get a good understanding of where BA needed to be from a business & brand perspective. We held off from having meetings with the technical teams at this point as we wanted to allow the Imano team to focus on possibilities rather than constraints at this early stage. 

Throughout these consultations the Imano team did in sector research as well as out of sector research. The most useful research was (as is usually the case) the out of sector research. The danger of taking the lead from direct competitors is that you are taking inspiration from your competitors ideas of six to twelve months ago.

We had already defined that adding value for the user once they had purchased a ticket should be a key proposition for the app relaunch. Mobile is naturally an excellent way to bring convenient contextual information to the user, so it was a pretty easy decision that the contextual features that a phone brings to the user would allow us to improve the post purchase/pre flight experience.

The two main inspirations that we took for this was the Yahoo Weather app and Google Now. Yahoo used local imagery to make a pretty dry app very beautiful and Google Now offered the best contextual experience at the time. 

 

Initial concepts

Defining a look & feel

The mobile proposition needed to feel in line with the desktop BA site. Saying this, there was a feeling that the look and feel could be refreshed to match how the brand had been evolving. There were also challenges with design elements for the desktop not working well for mobile & with Android or Apple operating systems. 

My team at Imano and myself worked on two separate routes. One that directly reflected the desktop and one that moved the look and feel forwards and optimised it for mobile. To our delight the client decided it was wisest to go with the evolved look and feel.

 

The production phase

Understanding the product strategy. For the first phase of the relaunch the user would be transitioned into a web view while they completed certain actions (search, booking & seat selection) and then move them back into the app. It was very important that the user would not notice this.

To ensure the user didn't notice these transtions we had to make sure the look and feel felt similar enough that there wouldn't be any inconsistencies. We also had to ensure that the functions and learned user behaviours wouldn't cause any problems. The outcome in the end was successful: bookings increased 100% and the seat selector is class leading.  

Springboard for innovation. We knew that we could not achieve the full potential of our contextual vision in the first phase, so only features that could be created using easily accessible and reliable data were included in the initial phase (the MVP). Despite this we ensured that the design of our contextual feature would allow for many more features and ideas to live within it without the need for any design or functional changes. This has allowed BA to innovate freely - they have already started trials of using iBeacons in Heathrow Terminal 5. 

Detail of home screen

Craftsmanship. I cut my teeth working for luxury automotive brands like Bentley & Jaguar, this has given me a good understanding that creating a premium product is not about throwing everything at a solution, but doing the right things really well.  BA is a world leading brand (Superbrands #1 consumer brand of 2014), their advertising and offline branding highlights their attention to detail and great British design heritage. So I knew it was of the upmost importance that every feature or element we included was executed to the highest possible standards. Elements that an average user might not consciously notice should still to reflect your brand values - even the animations should reflect your brand. 

VSG's

 

Visual Standards & Guidelines were created as the project progressed to allow the entire team to have a shared understanding of how the app should work and look. This was a collaborative effort between the teams at Imano and BA. 

 

 

Training workshop

Training workshop

Included in this project was a two day workshop where the Head of User Experience at Ogilvy One and myself taught the BA UX team (around eighteen people) about our understanding of designing for mobile. 

The BA team had already started hiring their own mobile specialist team, and to be frank already had an excellent understanding of design for mobile, but the process was useful for everyone involved and enabled their team to share and discuss thinking on mobile. 

 

Conclusion 

With over four millions downloads and a rating of over four stars in both app market places, the apps are a great success. Mobile bookings have increased 100% and when you consider this booking process takes the user into a (subtle) webview and then back into the app again this is something that the whole team should be very proud of. 

Comments on social media have highlighted how the apps have given users moments of actual 'surprise and delight' (a phrase that is often banded about in our industry, but rarely achieved. 

Buoyed by this success BA have already employed myself and the Imano team to spearhead the next phase of design for the apps. BA themselves have been adding to the applications and taking advantage of the flexible notifications system within the app by experimenting with iBeacons within airports.

British Airways now have a mobile presence that truly meets the standards of their cherished brand.