Crafting a tailored booking experience for ski holiday bookers to boost conversion
My role
Lead UX/UI designer (solo)
Timeline
3 weeks
Tools
Figma, Miro, ChatGPT
Client
Arctic Travels: A new ski travel agency seeking to build an online booking experience
Arctic Travels, a travel agency specialising in skiing and snowboarding holidays, aims to provide luxurious experiences at competitive prices. To achieve this, they needed a website to facilitate seamless and personalised holiday planning, booking, tracking, and communication with specialised agents. The website's aesthetic required to reflect its arctic theme.
Challenge
Business goals: Maximise conversion & the number of bookings
To achieve their business objectives, they requested the design of five key pages for their new website: a landing page, destination page, booking page, payment page, and confirmation page. The landing page was to be modelled after the functionality of leading travel websites like Expedia and Booking.com.
As a new brand, Arctic Travels focused on creating a user-friendly and frictionless experience to attract and retain customers. They aimed to maximize their KPIs related to booking numbers and conversion rates by facilitating easy planning and booking of personalised holidays.
Approach
Create a frictionless booking experience
To create a frictionless booking experience, I conducted a competitive analysis of both direct and indirect competitor websites to understand customer expectations. Using these insights, along with user personas derived from secondary user research, I developed user flows that mapped out the desired customer experience.
Building on these foundations, I designed wireframes and established a design system. This process culminated in the production of high-fidelity designs optimised for conversion and usability, ensuring a seamless and engaging booking experience for Arctic Travels' customers.
Research
Understanding the market and user requirements to drive success
Competitive Analysis to identify the required features
A comprehensive competitor analysis was conducted to analyse the key players specified in the brief, such as Expedia and Booking.com, along with other ski travel agencies in the market, including Heidi and FlexiSki. By evaluating their unique value propositions, strengths, and weaknesses and conducting a user experience audit, insights were gained into both the effective and deficient aspects of their designs to inform the design of the Arctic Travels website.
Key Feature Insights
Floating search bar
Effective websites use this feature near the top of pages for a clear CTA
Preselected flights
Including this in holiday packages reduces decision-making
Social proof
Key competitors use Trustpilot or ATOL to increase credibility
Limited options
Too many options tended to overwhelm and delay decision-making
Define
Characterising the personas and use cases for a user-centred design
Resource constraints led to limitations on the primary research, extensive secondary research was conducted, delving into the demographics and behaviours of UK holidaymakers interested in skiing vacations to identify the target audience. This included trend analysis, user segmentation, and exploration of sources like Reddit feeds. Leveraging AI, these insights were synthesized to create three distinct user personas, each representing a unique segment of the audience.
The Focus
How might we craft a user experience to facilitate solo, family and group travellers booking personalised luxury snow holidays?
Ideate
Creating user flows and wireframes to build the foundations of the product
In this stage, I applied UX and UI principles to establish the foundational elements of the website. Drawing insights from competitor analysis to inform the UX, I crafted the user flows. The wireframes further developed the user experience, detailing the design components necessary to facilitate the actions and behaviours identified in the user flow.
User Flows for planning and booking a personalised holiday package
Informed by research insights and user personas, a user flow was crafted to seamlessly guide customers through the website, enabling them to plan and book a ski holiday tailored to their specific needs. The personas provided insights into various user needs such as family booking options, group bookings, and après-ski information. This flow delineates the journey across the landing, destination/resort, booking, payment, and confirmation pages. It establishes clear information architecture and strategic CTAs to enhance usability and conversion rates.
See below for the rationale behind key design decisions.
Choice of options to personalise holiday
Design rationale
Options to personalise the trip were strategically split between the booking and checkout stages to simplify decision-making while offering flexibility. Users can customise details such as dates, destination, number of passengers, flights, and boarding options.
Progressive checkout stages
Design rationale
The checkout process is divided into stages to streamline decision-making and reduce cognitive load. Users can first add extras like ski passes and equipment, then provide passenger information for flights and hotel bookings, before finally proceed to payment.
Wireframes
Based on the user flow, wireframes were created to visualize the Arctic Travels website's structure, drawing inspiration from competitors like Booking.com and Heidi. These wireframes balance innovation with familiarity, focusing on clarity, usability, and alignment with the client's specifications for copy, labels, and CTAs.
Placement of the search bar
Design rationale
A floating search bar is placed prominently on resort pages near the top of the screen as a clear CTA to enhance navigation, simplify booking, and improve customer satisfaction.
Preselected options when planning trips
Design rationale
Preselecting recommended flights minimises the choices required and reduces friction in the booking process while allowing users the flexibility to make changes if needed.
Develop
Crafting coherent high-fidelity designs for the booking experience
Design System to create a consistent design language
Based on the wireframes, this design system was created to specify common visual elements to create a cohesive aesthetic for the Arctic Travels website. The system outlines guidelines for the colour palette, typography, buttons, input fields, grid system, and iconography. See below for the rationale behind some of my decisions.
Cooler colours
Design rationale
The cool colour palette, specified in the brief, includes blues for icy landscapes and purples for luxury, reflecting the brand's premium feel. Lighter blue, which evokes trust in during transactions, was used as an accent, with a darker analogous purple being used to create contrast and balance.
Typeface pair
Design rationale
Carena, a ligature serif typeface for headings, blends modern luxury with a friendly, approachable feel that resonates with Arctic Travels' customer service ethos. Paired with Nunito Sans, a san-serif typeface for body text, this combination ensures both aesthetic harmony and excellent readability.
High-Fidelity Design
A snow holiday booking experience on the Arctic Travels website
I applied the design system to the wireframes to craft a unified and polished high-fidelity design for the Arctic Travels website. Emphasising cool tones, especially shades of blue, establishes the site's overarching ‘arctic’ visual tone.
The notification bar and footer are designed in a light blue hue to evoke a sense of optimism and airiness throughout the website. Additionally, generous spacing between elements enhances readability and ensures visual clarity.
Typography plays a pivotal role in establishing hierarchy and aiding user navigation. To enhance accessibility, we've integrated a customer service chat feature as a floating button in the bottom right corner, leveraging a distinctive blue colour to attract attention.
Discover the rationale behind other key design choices below.
Key design decisions
Use of colour on CTAs for conversion
Design rationale
Using colour on CTAs enhances conversion rates by ensuring they stand out prominently. Purple is employed for primary CTAs to create strong visual contrast and capture user attention effectively. Blue is chosen for secondary CTAs to provide a complementary, eye-catching contrast on darker backgrounds.
Visual focus on search bar to drive clicks
Design rationale
To enhance visual focus, a bordering effect was applied to direct visitors' attention towards the search bar. The deep purple navigation bar and value proposition sections on the resort pages highlight the search bar and hero image. Additionally, the imagery has a model looking downwards to reinforce the focus towards this key feature.
Conclusion
Areas for Improvement
The lack of primary user research restricted my ability to pinpoint specific user pain points and areas for improvement. Conducting primary research would have provided deeper insights into user behaviour and preferences, allowing for a more effective solution.
In terms of the floating search bar, I would have preferred to include it on the landing page, similar to major competitors. However, the project brief mandated additional information on the landing page, which made it challenging to maintain clarity and avoid overcrowding.
Moreover, due to the project's fictional nature and time constraints, I could not conduct thorough testing to assess the designs' effectiveness. Methods like A/B testing or heat mapping would have been valuable in validating the impact of my colour choices on usability and conversion rates.
Key Lessons
This project underscored the foundational importance of user flows and information architecture in shaping effective UI and UX designs for websites. By strategically outlining the desired user experience in the user flows, I was able to iterate through wireframes and refine the user journey with intentional design decisions. Additionally, I gained valuable insights into applying UX principles such as Hick’s Law, Fitz Law, and Jakob’s Law to enhance overall customer experience and usability.
👋 Get in touch at