Project: Re-design 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 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.

Why can't we use what's already there?

Current masthead and navigation bar

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.

Initial idea created during UXD team sketch session

Initial concepts

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.

One of my early concepts that went through testing

Responsive navigation

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.

High fidelity designs based on wireframes used in testing

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.

Prototype created in Invision

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 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

Default state of my final concept

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.

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.

Such as...