Webjet’s Website Redesign: A UX Design Study on Enhancing the Online Travel Booking Experience
About Webjet
Webjet is a popular online travel agency that assists customers in booking flights, accommodations and other travel services. The company is based in Australia and operates in several countries around the world. Users can search, compare prices, make reservations and choose from various payment options.
In this case study, we will be focusing on the flight booking section of the website.
Team
Understanding the Problem Space
While exploring the website for the first time, we found several issues that made it difficult for users to navigate and book their flight travel.
Here are some of our initial observations, and in this case study, we’ll go into more detail about them.
Initial Observations
- Generic design: The website had a generic UI design that did not stand out from other online travel agencies. It also gives people the impression that the website is not a legitimate business, which may drive first-time users/customers to competitors.
- Too many advertisements and information overload: Bombarded with irrelevant ads or information, user may become frustrated and leave the website, or have trouble finding the information they need, leading to a poor user experience.
- Cluttered flight selection: Difficult for users to compare prices and features of different flights and make a decision on which flight to book.
- Poor mobile responsiveness: The website was not mobile-friendly, making it difficult to use on mobile devices.
User Research
To better understand the needs and pain points of Webjet Australia’s users, my teammate conducted one-on-one interviews with several people in Australia to gather useful feedback for analysis. To learn more about how he conducted the interviews please click here.
What did we learn?
- Confusing navigation: The website’s navigation menu was crowded with too many options, making it difficult for users to find what they were searching for.
- Complex booking process: The booking process on the website was long and confusing, with multiple steps and pages that required users to input a lot of information making them feel exhausted at the end of the booking.
- Outdated design: The website has an outdated design that was visually unappealing and did not meet the users’ expectations for a modern, user-friendly website.
- Poor customer support: Users reported that it was difficult to get in touch with customer support when they had questions or issues with their bookings, as the customer support page was hidden in some corner of the webpage.
Let’s start designing!
Design Inspiration
I referred several websites to gather design inspirations and learn how other agencies tackle user problems more effectively than Webjet.
I compared the Webjet website to those of Expedia, Flight Center, Skyscanner, Cheap Flights and Trip Advisor to understand the arrangement of content on a page, navigational flow, flight booking, offers and packages, customer support etc.
Here’s a sample of all the screenshots grouped together in Figma.
What are the key takeaways?
- Most of these websites have simple and easy-to-use interface, with a search bar prominently displayed.
- A variety of filters and sorting options to find the best deals.
- Easier booking flow, with only necessary information being asked by the website.
- Easy access to customer service for any queries.
- Effective use of space for showing all the offers and discounts available.
Homepage
Redesigning of the homepage was required to improve the user experience, increase conversions, and make it mobile-friendly. The website had issues with confusing navigation and cluttered design. The redesign focused on simplifying the navigation, making products and services more prominent and improving the mobile experience.
- Improving Navbar: The old navbar had two separate navigation bars with too many options and categories, which made it overwhelming for users. The navigation bar has been simplified by reorganizing options and categories, adding clear labels with icons and moving few options to “Profile section” or “More options”.
2. Maximizing Visibility and Impact: In the previous design, the search bar occupied a significant portion of the hero section, reducing visibility of ads and promotions, which negatively impacted conversion rates. The redesign moved the search bar to the bottom of the page, providing more space for ads and promotions, increasing conversions and improving the user experience.
3. Reducing Redundant Information and Improving Hierarchy: Users found it challenging to locate what they wanted on the old design due to the poor visual hierarchy and redundant information. Through the use of a fixed linear design, the layout was made simpler and easier for people to browse. Additionally, the redundant sections were removed and replaced with more relevant information such as mobile app promotion and subscription to newsletters or price alerts, which would help improve customer retention.
Flight Selection Flow
The flight booking flow on the Webjet website is an important aspect of the user experience, as it is the process that users go through to book their flights. Here’s how the general flow goes:
In the old design, the flight booking flow had several flaws that could negatively impact the user experience. I will be going through each of them one by one.
- Selecting dates on calendar during search: During the usability study, my teammate observed that two out of five participants reported that the calendar overlay automatically closes once the date is selected and they have to re-open the calendar to select or check other dates, which might frustrate the user.
To avoid this inconvenience, we have added buttons so that the user can close the calendar when they are completely satisfied with their selection.
2. Selecting Departing/Returning Flights: In this section, a lot of changes had to be made, as the entire page was very cluttered and did not provide enough context for users to understand the different flight options and prices. Without a clear visual hierarchy, it was hard for users to distinguish between different flights and options, which made it difficult for them to find the flights they wanted. It was also missing advanced filtering options that could help users to narrow down their search results and find the flights that met their specific requirements.
This is how the webpage looked like:
To improve the user experience, the following was done:
- Adding more filter options such as departure and arrival time, price filter, stopover destinations, etc. There is also an option to get price alerts when the cost of the airline falls to a certain threshold, this assures the user for finding the best price.
- Changed the tabular layout to a more simplified version for better readability and understanding. The tabular column in the old design caused a lot of confusion among users during the usability testing as they were not aware about the different flight plans available for each company and the information was not presented in an easy-to-understand manner.
- Reducing the number of steps required to select departing/returning flights.
Here’s the old design of the flight selection flow:
As you can see in the video above, the tabular column in the old design caused a lot of confusion among users during the usability testing, since there was a lot of information given to the user, they would need to pause and think about which flight option would make complete sense to them.
Here’s the redesign of the website:
The redesign of the Webjet website has made the process of selecting departing and returning flights more efficient by allowing users to view both simultaneously as they are arranged column-wise which makes it very easy for user to go through the content. It allows them to compare the prices, options, timings and other details of different flights at a glance.
Additionally, more sorting options have been added which can help users narrow down their options for selection. This new feature makes the booking process more user-friendly, increasing user engagement and conversions.
Booking process
We have retained the existing design for the booking process as it is pretty much straightforward and easy for user to book their flights. However, only small cosmetic changes have been made to improve the visual hierarchy and maintain the colour scheme.
- Flight booking information: We have improved the design of this section by adding colours to highlight important details. Added more information regarding the plan they have chosen for the flights. Buttons will be having the standard green colour as seen in other parts of the website.
2. Add-ons / Flight inclusions: The layout has been modified to allow users to customize their flight inclusions based on their needs.
3. More promotions packed into a smaller form factor:
We improved the promotions section on the checkout page by making it more compact and organized. Users can now access the offers through a horizontal menu bar, reducing cognitive load and allowing them to focus on completing their booking.
We understand the importance of promotions for the business; therefore, we have kept the options still available for the users to review, but in a less intrusive way. This way, users can check the offers at their convenience, without feeling pressured to do so, and can make an informed decision.
Here’s how the booking section looks before and after the redesign
Old Design
New Design
Now let’s jump into the mobile design
The previous design was not optimized for smaller screens, which made it difficult for users to navigate and find the information they needed. To address this, we implemented a responsive design that automatically adapts to the screen size and resolution of the device being used, providing a seamless and optimized browsing experience for users.
Additionally, we made sure that all the features of the desktop version are available on the mobile version as well, like filter options, sorting options, payment options, etc. This allows users to access the same level of functionality and convenience on the mobile version as on the desktop version.
1. Homepage
We have implemented the same top navigation bar as on the desktop version to make it more user-friendly. This way, users can easily access all of the primary services offered by Webjet, such as flights, hotels, and travel packages, right from the home screen without the need to navigate through multiple menu buttons. Additionally, we have improved the color contrasts to cater to all users, making the text and background more distinct, making it easier for users to read and understand the information on the website.
What does the floating menu button do?
We made the decision to incorporate a floating button menu for secondary functions. This provides users with quick and easy access to a variety of features such as customer support chat, price alerts, feedback forms and airline policies. This improves the user experience by allowing them to quickly find and use these features without having to navigate through multiple pages.
Here’s an example of how the chat with customer service executive works.
2. Flight selection
We stuck to the similar design pattern from the desktop and added some extra features such as the progress bar at the top and moved the filter button to the top and made the new search button to the edit button beside the destination names from where users can edit their search.
3. Review and Checkout page
We’ve given a visual upgrade to the review and checkout pages while maintaining the same visual design patterns as all other screens. This ensures consistency across the website and makes it easier for users to navigate and understand. As seen in the image, the new design features an updated layout and improved color contrasts for better readability, which will enhance the user experience on these pages.
Impact after redesign
- Improved navigation: The redesigned navigation menu made it easier for users to find what they were looking for and reduced the time they spent searching for travel options.
- Streamlined booking process: The redesigned website simplified the booking process and reduced the number of steps and pages required to complete a booking, which made it faster and easier for users to book their travel.
- Improved customer support: The redesigned website made it easier for users to contact customer support and get help with their bookings, which increased customer satisfaction and reduced the number of abandoned bookings.
- Improved brand perception: The redesign of the website likely improved the perception of the webjet Australia brand among users, as the website now met their expectations for a modern, user-friendly online travel agency.
- Enhanced competitive advantage: The redesign of the website likely gave webjet Australia a competitive advantage over other online travel agencies in the Australian market, as the website now offered a better user experience and more advanced booking capabilities.
Learning and Key Takeaways
- Collaborating remotely: As a team of two people living in different countries, India and Australia, we faced few challenges while working on the Webjet project. One of the major challenges was coordinating our work schedule due to the time difference. To overcome this, we made sure to schedule regular meetings and used tools such as Google Meet, Figjam, Figma and Google Docs to collaborate effectively.
- Design challenges: Balancing the business needs with user needs was a challenge. We had to ensure that the changes we made to the website would increase conversions while also providing a positive user experience.
- Valuable skills: Remote working needs a lot of self-discipline, flexibility and patience. We had to be very efficient in managing our time and resources and being self-motivated. Furthermore, we had to put in extra effort to build trust and establish good working relationships with each other, despite being in different locations.
Overall, working on the Webjet project was a valuable learning experience. Despite the challenges, we were able to successfully redesign the website and improve the user experience. The key takeaways from this project will be useful for future projects and team collaboration.
And… That’s a wrap!
We hope this case study on the redesign of the Webjet website was informative and provided valuable insights.
Thank you for taking the time to read our case study!
🤝If you have any questions, suggestions or opportunities to work together, please get in touch with me on LinkedIn or Email. I’d be delighted to speak with you!
Read more
- Enjoy going to a cafe? Here’s an app that could help you order food and make seat reservations.
2. Frustrated with the current Bangalore Metro App? Here’s a redesign that enhances the Bangalore metro app’s travel experience for working professionals.
3. Are you tired of feeling guilty about your online shopping habits? Well, GoodExtension is here to save the day!
