Project: Re-design Qantas.com masthead and navigation
What I did: Ideation sessions, Group sketch sessions, Wireframes, Prototypes, User testing, High fidelity designs
Why are we here?
As part of a re-platforming project, a brand new UXD team had been assembled to evaluate all content and tasks on Qantas.com as individual features and sections of the site were moved over to a new back end.
As apart of this, a new masthead was required to accommodate a set of new key business objectives and user centred requirements.
- Accommodate a new IA Restructure the navigation to reflect the new information architecture.
- Highlight key tasksUnhide the most commonly used actions performed by users: Book, Check in, Manage.
- Consistency across Qantas websitesInclude a global nav bar that takes users to other Qantas sites.
- Respond across devicesMake the layout and functionality responsive across various screen sizes.
- Update our lookConsider and reflect the newly designed global branding guidelines.
Why can't we use what's already there?
- Ambiguous category names Where do you go to check in? What do you expect to see in 'Fly'?
- Lack of heirarchy Where do users look first? Should 'Help' sit at the same level as 'Book'?
- A separate mobile site Currently we detect the users platform and push them off to a mobile only URL.
- Inconsistency On sub level pages Frequent Flyer login is moved and country selection disappears.
- Bland look Current look and feel lacks prestige when compared to other airlines.
Where to start?
A lot of work had already been done prior to my arrival in terms of re-organising the current IA into more sensical groupings and category names. This was done using card sorting tasks performed with Qantas Frequent Flyers.
One of the key objectives already raised by the business was to unhide key pieces of functionality such as search for bookings as well as check in for a flight, manage a previous booking and perhaps look up the status of a flight.
We had already noticed a strong trend amongst other airlines that fitted with our own objectives. Cathay Pacific, Qatar airlines, Swiss airlines and particularly Virgin America had a focus on these key task based actions and had separated their 'content' based navigation channels.
One of the hardest things I find as a Visual Designer is to design at low fidelity. To overcome this takes some discipline on my part.
My main objective when I started out was to organise the different parts of the navigation into manageable buckets. It seemed to me this masthead had several quite different and separate areas of navigation and each one needed to fit into an obvious heirarchy. As a Visual Designer I also wanted it to look slick. I was afraid that with all these links I was going to end up with no white space and have everything squashed and mashed together.
Transitioning standard content from mobile to desktop and back again is reasonably straight forward. Complex navigation bars on the other hand are a whole different ball game.
Deciding how my navigation worked on desktop and then transitioned to mobile and vice versa was a fine balance. It required me to consider every screen size at the same time. I really didn't want to have two completely different navigation systems that would require two separate code bases. It needed to be responsive as opposed to adaptive.
Going to test
We're very lucky at Qantas in that we have a huge testing suite filled with a very diverse range of users, 24 hours a day. All of which we know are already Qantas customers. To most people it's called Terminal 3 at Sydney airport.
The UXD team made a habit of going there every Friday afternoon to grab between 3 - 6 customers and test whatever we had been working on that week. The mast head I was working on went through several of these sessions. This allowed me to iterate fast and test a lot of ideas.
What I tested
The vast majority of what I tested were protoypes I created in Invision App so that the user could click or tap on the UI like a real web page.
Usually I'd be testing desktop and mobile at the same time but usually not to the same users. I didn't want the memory of the first test to affect the second. This was because it wasn't common for users to jump between devices so quickly.
The easiest type of design to test for this project was reasonably low fidelity - grayscale, no images but with an emphasis on layout, typography and white space.
What I found
A hard truth
The majority of the testing we did mostly confirmed insights already presumed. Of course there were oddities in how users understood labeling, or which part of the UI they went to first to perform a certain task, but there weren't a great deal of mind blowing surprises. Except one, which in hindsight probably should have been more anticipated than it was.
No one goes to Qantas.com to read stuff
After a few of these sessions, mostly whilst asking very broad ranging questions about internet habits and past experience with Qantas, this one thing became abundantly clear.
Users only really use the site to perform flight searches, check-in to a flight or to manage a previous booking. Although we already knew this we hadn't expected such a blanket lack of interest in other areas of the site such as the destinations guides or information about cabin class.
It became evident to me that the way to simplify the masthead was to reduce the number of links. In other words, let's get rid of the content navigation (and put it somewhere else).
So, several thousand iterations later...
I got to this
The entire concept of this design hinges around the idea of hiding all the text heavy, informational content away behind the 'more' link. The intention being that if a user couldn't find what they were looking for in one of the four main tasks (which most would) then everything else would be under 'more'.
It was important to put all of the masthead on a single line. This was so that users wouldn't have to scan multiple lines of links and bars to get to these five link buckets. It also allowed the content on the pages to move further up.
Regular and Business Frequent Flyers were also grouped into one bucket. This reduced confusion amongst users and also allowed business stakeholders to add more marketing content to the opening panel which was not previously possible.
View the prototype
What I learned
Not just from this project but from my experience at Qantas as a whole, what I learned mostly revolved around the rapid prototyping and user testing carried out.
- Approaching strangers How to approach random people for gorilla testing and steadily increase my success rate.
- Design fidelityFiguring out the right level of fidelity to present wireframes/designs/prototypes to users so that they won't become confused and I am still able to iterate very quickly.
- Briefing test users Giving users a very specific task to complete was important. However, giving as little information as possible about how to do it is even more so.
- Wait until a pattern emerges Don't get bogged down in the findings of one user. Although they're still relevant you don't know whether it is a one off due to the test conditions or if the user is having an off day.
- Iterate straight away Making slight tweaks as soon as a pattern has emerged and testing again straight away helps get to the end result much more efficiently.
- More toolsLearning new applications to prototpye such as Invision and FramerJS.