The Qantas homepage was in need of some love. There wasn’t scope for a full redesign, so I needed to work with what was already there and give it a bit of a facelift. I’ll take you through the refreshed homepage and how it was designed.
The goal of the Qantas homepage refresh was to modernise the aesthetic, improve the user experience and increase conversions on flight bookings. The tricky part was that there wasn’t scope for a back-end rebuild, so we simply had to work with what was already there and almost skin the front end into something new. The design didn’t need to be responsive as there is a separate mobile site. I’ll take you through the mobile site refresh in a separate case study.
Looking at the old homepage above, it’s clear that the goal was to fit everything above the fold. I suspect that it may have been a business or marketing requirement at the time. Somehow, the designer of the page managed to do it, which is actually pretty impressive. It must have been tricky as there are quite a few elements to fit on the page.
Because everything is above the fold, however, the page is quite busy and cluttered, making it difficult for users to find what they’re looking for. We used our findings from analytics and user feedback on the old Qantas homepage to help inform our new design.
Since we needed to work with existing website elements, we decided to break things up into modules, prioritise them and sketch out ideas for each one and how they might be laid out on the page. We also came up with ideas for some simple new elements to improve the page. Here are the main modules:
When I sketch a new interface, I often like to draw components on paper and then cut them out and stick them onto a larger sheet of paper with Blu-Tack. Kind of like a UI jigsaw puzzle (as seen in the above sketches). It makes it easier to move things around and change certain parts of the interface without needing to re-sketch the rest of it repeatedly.
After blocking out the basic layout of the page we moved on to more detailed sketches of each module. I’ll go through the basic thought process behind each module design separately below.
Looking at analytics, it was clear that most people who visited the Qantas homepage wanted to book a flight, so it was important that we made this as easy as possible. The old flight booking form (the vertically stacked form above) was placed in a prominent position on the page, but it looked quite complicated, which created friction for some users.
Keeping all existing form fields, we visually simplified the form by highlighting the main input fields (seen in the new horizontal form above). We optimised the form for the most common use case – a single adult taking a return flight. I usually prefer to use vertically stacked forms as they’re generally more efficient to fill out, but a horizontal arrangement fit better on this page layout and tested quite well.
The hero banner was where new flight deals were announced, so it was definitely an important part of the site for travellers and the business. Like on many older websites, the old hero banner (the square banner above) was a rotating carousel with multiple slides, which I think can be quite distracting to users. It also looks a lot like a banner advertisement, which could make it invisible due to ‘banner blindness’. Analytics showed that the first carousel slide had relatively high engagement, which decreased exponentially on subsequent slides.
The new hero banner (the wide rectangular banner above) spanned the full width of the page and showcased beautiful destination photography to entice travellers. It had to remain a rotating carousel to house the existing content, but we managed to decrease the number of slides and also delay the animation to make it less distracting to users.
I wasn’t a big fan of the old promotions carousel (the horizontal carousel containing four images above) as it looked a lot like banner advertisements and I found the constant movement to be quite distracting. It was mainly used to promote hotels, credit cards and competitions. We redesigned it (as seen above) to look more like editorial content and removed the carousel to reduce distractions.
The old login form (seen above on a grey background) was exposed on the right-hand side of the Qantas homepage to encourage users to log in. In order to save space, we placed the new login form behind a button (seen above) in the familiar top-right corner of the page. We created a quick prototype using Invision to validate that users could still log in successfully.
Research showed that a significant portion of Qantas travellers were keen to see the latest flight offers to help them plan their next trip, so we created a new section that displayed the latest flight offers (a few example flight offers can be seen above). We placed it prominently on the page as a doorway for travellers to discover more flight offers.
Sometimes people aren’t really sure where they want to travel, so we introduced a gallery of inspirational destination guides (seen above) to help them decide. Detailed guides of some of Qantas’s most popular destinations are just a click away.
Since much of our user base is less tech savvy, we wanted to soften the blow of the change to ease them into the new page. We decided to create a simple opt-in tour of the new Qantas homepage using Hopscotch, which simply pointed out the changes on the page. We placed it at the bottom of the page to ensure that it didn’t get in the way.
Once we were happy with the new design above, we A/B tested it against the old one on a small portion of our user base. Much to our delight, the new design worked wonders, performing better than the old one in key areas. While the limited technical scope did narrow our design options, it was a fun and challenging project to work on. I think it demonstrates how purely visual design changes can have a significant impact on the user experience and conversion rate of a homepage.
