Case Study
Booking Pages Re-Design
Humpback Swims is a company that offers once in a lifetime whale swim trips in the Kingdom of Tonga
Scope: Booking Pages Re-design for whale swim company
Project Type: September to October 2023
Role: Lead UX Designer
Tools: Pen to Paper Sketches, Figma
Potential clients for Humpback Swims were experiencing a difficult time navigating through the booking pages. They were having such a hard time that a video explanation needed to be included to assist users on how exactly to navigate through the pages.
No Hierarchy with the text and Buttons do not stand out.
Users that want to book a trip must navigate through the different booking steps. These include:
1. Choosing the number of days
2. Choosing the boat size/accommodation
3. Choosing your package
It was important to figure out just what was going wrong to trip users up so badly that they would often need hand holding to get through the booking flow.
Taking a deep dive into the booking pages there were some common issues that I would be focusing on.
The first being that as an user, at first glance it was hard to know just what information to click and what each individual design meant. The overall hierarchy was confusing and lacked structure.
The second issue that needed to be fixed was that my client wanted users to be drawn to each trip length option. Users had the biggest problem with that section of the pages.
Finally, there was a lack of information regarding each trip. Things such as what to expect for each trip and how do they differ from each other?
Booking pages 5 water day trip, 2 boat options.
Booking pages specific trip page.
The main objectives to this project are, to clean up the hierarchy in order to better direct users through the booking process, Include more information to compare and contrast different trip options, and Finally, create a design that draws the users eyes to the different tip lengths of 5 and 8 days.
For the first step of the booking process I was able to work within the existing design language to create something with much more structure and information while still leaving enough white space to not overwhelm the users.
The information was consolidated into a simple description, a table that compares on contrasts the different lengths, and the buttons to choose the trip length that the user wants.
Users can now know what trip is better based on budget and experience levels.
After delivering the first draft of the booking pages and talking with my client. It was decided that while the new hierarchy was nice and the table worked great, the buttons still didn’t draw enough attention to the users.
So it was back to the drawing board for some new designs!
Streaming services such as HBO’s Max and Disney Plus often have packages that users can choose from. These packages clearly communicate to users what each has to offer.
Using these designs as inspiration I was able to create a package design for instances in the booking flow when users need to click one option over another.
Now using the cleaned up hierarchy, existing design language, and new packages I could correct the existing booking pages to make something users don’t struggle to work through.
Now with the book your trip page, the main focus is each trip length option. The secondary focus is the tables to determine the length of stay. This way users don’t have to go to other parts of the website to find out the differences.
The same thing goes for the 5 Water Day page. Instead of being two buttons surrounded by text, the hierarchy is cleaned up and the new packages are used again.
Users can now clearly see that they have the option to choose between a 6 and 4 passenger boat within a 5 water day trip. There is also information on the packages for users to quickly compare the differences without having to actually click into the booking page.
Using the design language already established, all of the specific location pages were upgraded. There was an overall of hierarchy on each page to now tell a story to each user. They can see a clear image of their accommodation location, a quick description, what to expect on each trip overall, and finally the individual packages to choose from.
By creating a strong structure this allows an info dump to occur without overwhelming users. And they can reach this final page with confidence in booking their trip.
The hardest obstacle for this project was figuring out how best to create an improved UI experience within the established design system.
