Holiday Packages Booking Engine
A platform for customers to dream, plan and book their next holiday online. Customers will be able to build their own dynamic packages by combining flights and accommodation for bundled deals.
‘Do it yourself’, dynamic packaging will enable customers to build their own combination of flights and accommodation, instead of purchasing a predefined package via enquiry or in store.
- Starts with a search form and is a self service approach to packaging.
- Same inventory as the Air and Hotel Booking Engines.
This includes 6,000 routes, 420,000 hotels and 42,000 destinations globally.
Note: Choose “Bundles” tab in search form on homepage banner
Create a self service booking engine that enables users to take control of building their trip.
Fast. Frictionless. Easy. The user should be at the centre of every decision made.
Offer a competitive range of products at a competitive price. Package savings will provide value to our customers.
Project discovery
The first workshop was the project kickoff involving the entire team. The session is essential in getting everyone on the same page in terms of project direction and priorities.
In this session, it was determined that user experience was the priority over all other tasks.
Understanding who we are designing for is essential for building a great product. The personas were created based off customer research and development stages. In the initial session, we had 3 primary personas.
Package Pete: Pete will book the first package he sees. He is happy with Flight Centres recommendations.
Customise Kat: Kat likes to change, edit, filter, sort, compare packages to find the perfect holiday which suits her needs.
Consultant Karl: Karl is a Flight Centre consultant that would use the Packages booking engine to help clients book.
Based on the 3 personas highlighted, we were able to scope out the high level development tickets required to achieve minimum viable product (MVP) for each user story.
Research
I launched some preliminary surveys on different areas of the website to gather early insights from our customers. The objective was to understand purchase behaviour and decision making. The basis of the questions were early assumptions of booking a holiday packages that we wanted to validate.
The results from the surveys won’t be shared in detail for IP reasons, however some of the major findings will be shared later to better understand design decisions.
Conducting a competitor analysis is essential to see where you fit within the market. Identifying competitor strengths, weaknesses, opportunities and threats. Also it is a great head-start to see how other users engage with existing package booking engines.
Aligning existing conceptual models with our product will trigger mental model familiarity with our customers. They will feel more comfortable with the experience because they have seen it elsewhere.
Similar to the competitor analysis, this process looks at the various user flows of our competitors. Setting test scenarios with our personas can help identify gaps and opportunities when building our product.
Pro tip: Our team at Flight Centre use Miro to collaborate on files such as these (shown right) which have a lot of screenshots and space is required.
Based on the research, early insights were discovered and assumptions could start to be tested. It felt as though we were on the right track.
(Pictured right) Some screenshots of the Google Slides research doc so far. It was an important documentation piece to present to stakeholders to generate “buy in”.
Based off a sample size of 902 respondents, 72% of them would trust Flight Centre to pre-select flights
Based off our analytics, that is approximately 42,000 customers per month
Wireframes
Based on the research findings, ideation workshops are run to get fresh eyes on the project. Various stakeholders are asked to sketch some wireframe designs based on their interpretation of the research.
It is a really fun workshop to get people involved in the process. You get some really fast and new ideas to play with too.
There were some ideation and workshop sessions around early wireframing and possible user journeys. (Pictured right) This is an example of a potential basic flow user journey that was discussed with the team, there were several of these, measuring scope, experience and project impact.
After multiple sketch sessions, design reviews and stakeholder reviews, the wireframes were agreed upon. The thing that was constantly stressed was that this is MVP, meaning this is the fastest way to get to a product that is financially viable and usable for customers. Once MVP is released, we will analyse, design and implement. This process ensures that the product is constantly improving.
Once I had the wireframes approved, I put together a rapid prototype using Invision which will be used for face to face user testing interviews. Desktop & Mobile.
User testing
I conducted 5 face to face interviews with people from a range of demographics. The goal is to validate the first phase wireframe prototype. Are our users able to make informed decisions? What are their expectations? Identify who our users are, any roadblocks, conversion killers and new opportunities for future design considerations.
Why 5 users? From this graph (right), you can see a plateau after 5 people, making it less cost effective to continue testing with new participants. Instead, test as frequently as you can, knowing you can find the most critical usability issues with 5 participants.
After each interview I asked the participants to complete a usability survey. The problem? I wrote the questions, so the results weren’t as accurate as they should be (they were all really positive, which isn’t the case!) What I would do differently? I would still ask them to fill out a usability survey, however it would be the UEQ usability survey.
The UEQ is a fast and reliable standardised questionnaire to measure the User Experience of interactive products. It includes classical usability aspects (efficiency, perspicuity, dependability) and user experience aspects (originality, stimulation) are measured.
When the interviews were complete, I consolidated the information, analysed and provided recommendations. There were a number of minor changes which you will see in the next designs when you compare them to the original wireframes. There were also opportunities that were flagged for future releases.
Iterations
Move ability to change flights from review onto the results page
5/5 users wanted to see more flight options other than the pre-selected flight. We orginally had this ability on review but this is far too late in the funnel.
A dropdown menu was preferred over the original tabbed treatment for sorting packages
5/5 users either didn’t like the tabbed functionality or couldn’t work out how to sort the package results to their preference.
Aspects of the edit search and navigation was unclear
The edit search section will need further testing, but there were a number of minor improvements that were implemented from the results.
Having validated the wireframes with users and iterated those designs, we could comfortably aim for an MVP solution that would meet business, project and user goals.
It is easy to get caught up in designing for desktop because there is more space to play with. Mobile device sizes helps you stay focussed on a lean UX solution.
In the dreaming and planning stage, the majority of users prefer mobile for researching.
However, when it comes time to book, users ar emore comfortable booking on desktop.
One of the challenges of the project from a UI perspective is determining what the best breakpoints are based on device usage statistics on Google Analytics. Using this data to make sure each component will “break” nicely as various users will be using different sized devices was the goal.
(Pictured right) Packages results page tiles breaking down from largest to smallest. As you can see some pieces of the component drop off. This is the trade-off between what is essential information and clutter.
Mobile & Desktop
Architecture
After having finalised an MVP, it was time to revisit the user flows and understand the possible steps a customer might take.
(Pictured right) Happy flow is the ideal user flow but it is rarely the path taken.
Like a lot of projects, you can spend so much time planning to make things perfect, however you are bound to run into system or development “problems” that need solving as you progress. We discovered a number of scenarios we hadn’t thought of which were impossible to predict at the start of the project. This showed me the importance of lean and agile working methodologies to fail fast, test, design and iterate.
(Pictured right) Happy flow is the ideal user flow but it is rarely the path taken.
There were some ideation and workshop sessions around early wireframing and possible user journeys. (Pictured right) This is an example of a potential basic flow user journey that was discussed with the team, there were several of these, measuring scope, experience and project impact.
Looking to the future
Having a design system improved the design teams workflow dramatically. There are a few great tools out there to manage a design system, however we used Sketch to integrate with Abstract. I like to be well organised with my files so that I can easily handover the packages project to another designer in my absence in the future.
Each MVP component was created with the final “ideal” scenario in mind. An example of the property room tiles (right) is a good example of a staged approach. Some of the rich content data isn’t available to us through the switchfly API right now, so getting the component as close to that version will help the implementation in the future.
Developers also get a better idea of where the component is heading so they can easily prepare for efficient implementation.
Being an MVP release, there were compromises made for the greater good of launching the product on time and budget. I’ve outlined post go-live features listed in a UX roadmap based on priority.
Acknowledgments
Thank you to the great team that worked with me on this project, I couldn’t have done any of it without you. You guys rock!
- Jamie (Product Manager) for the countless conversations, whiteboard scribbles and teas. But mostly for the relentless support and great leadership.
- The packages team (FE’s, BE’s and QA’s) for working incredibly hard, always thinking of the customer first and being passionate about your work everyday.
- Design team for the 50+ design reviews, feedback, support and collaboration on the design system.
Other projects
Check out some of the other projects I have worked on below.
A systematic approach to design that helps build cohesive experiences across products, applications and platforms.
Opentrons make open source, flexible, user-friendly robots for life scientists. Opentrons robots automate experiments that would otherwise be done by hand, allowing scientists to spend more time pursuing answers to some of the 21st century’s most important questions.
How might we better communicate to our customers and prospective customers that digital payments are safe, secure and easy to use.
Get in touch
If you want to learn more about me or have a chat, please say hi 👋