UX Hotel Booking Site

As a hotel-booking aggregator site, Getaway Stay demonstrates the entire UX process, from user research, to implementing a UI design system, to a final interactive prototype.

 

Project Overview

Objective: To utilize research methods and analyze data to develop a hotel-booking application rooted in user-centered design. Use research methods to define negative experiences for users and utilized design to absolve those pain points.

Solution: Developed a web application prototype that follows conventions set by top competitors, while easing user pain points discovered through research and defining usability issues.

 

Role: UX researcher, UX designer, UI designer

Timeline: 12 months

Tools & Skills: Figma | UX/UI design | UX research | Competitive analysis | Usability testing | User flows | Affinity diagramming | Journey maps | Information architecture | Mockups | Wireframing | Protoytpying | Interaction design | Accessibility standards | Design annotations | Brand identity | Grid systems | Typography | Design systems | Design principles & elements

Phase 1: Research & Insights

Before designing solutions, it was vital to understand the user’s goals, context, and behaviors. Survey results exposed insights regarding the users’ perspectives.

 

Competitive Benchmarking

Competitive benchmarking of various hotel-booking sites revealed universal procedural steps and conventions users already understand. This analysis demonstrated that deviations from conventions reduce intuitiveness and create pain points for users.

 
 

Usability Testing

Next, I conducted usability tests to better understand the user perspective. Participants were asked about their past experiences with booking hotels and if they successfully accomplished their goals that day. Participants then completed the hotel-booking process on two sites and compared those experiences. These tests provided rich qualitative data as participants expressed their thoughts and I observed their actions.

Phase 2: Defining Problems

After collecting insights, the findings were analyzed and problems were defined.

 
 

Customer Journey Map

Through my research, I understood users’ goals, context, and behaviors, which were marked throughout the customer journey map. Analyzing the hotel-booking process, it was indicated if the step produced a positive or negative experience for users. The positive aspects are conventions that I strived to maintain. The negative experiences were pain points that I strived to resolve and improve upon.

Affinity Diagram

After collecting qualitative research, the data was clustered into an affinity diagram. This process revealed commonalities among the data and its organization provided insights. Patterns emerged, categorizing the data into context, goals, behaviors, pain points, and positive interactions. The diagram revealed consistent friction areas like lack of transparency, unclear pricing, and the annoyances of upselling.

Phase 3: Establishing Solutions

After organizing and analyzing the data, possible solutions were considered.

Flow

The collected research highlights users’ mental models when booking a hotel, so I matched my flow to their mental models. Mapping out the high-level interactions identified the primary case user flow. Once known, the flow was streamlined for increased efficiency and removed the pain points highlighted in the research.

Low-fidelity sketches

Sketching possible iterations, I focused on where the pain points occurred in the flow and within the interface. Implementing the proper information architecture, the site’s primary navigation and key interactions were determined first. I kept iterating until a balance was found where conventions were followed and the pain points subsided.

Wireframing

The most conducive iteration underwent wireframing. Close attention was given to the information architecture to be certain the site matched the users’ mental models. Hierarchy and affordance emphasized key elements per page to inform users what action to take and what the outcome would be.

Phase 4: Design System

A UI design system was implemented to maintain consistency across pages and express the brand’s values.

 

  • Color

    The purple hues and neutral orange create a dynamic color palette that contrasts yet complements. Orange evokes emotions of happiness, optimism, and enthusiasm. The orange emits a warmth reminiscent of a sunny day on vacation. Simultaneously, the deep purple conveys luxury, stability, and honesty. The electric purple encompasses a lively and vivifying excitement value that is bold and energetic. Together, the color palette personifies the brand’s values of excitement and adventure.

  • Typography

    As a sans-serif typeface, Poppins enhances the clean and orderly interface. The serif typeface, Playfair Display, is utilized in juxtaposing circumstances to achieve hierarchy. The typography and copy provide clarity in its visual legibility and comprehension for users. The copy is straightforward and explicit to remove any ambiguity about what is offered. Unclear jargon was a redundant pain point that made users unsure of what to expect. The copy and typography aimed to resolve such pain points.

  • Imagery

    For each screen, the images were the focal point. Research revealed the users associated few and low-quality photos with impressions of deception and that something was being hidden. To bolster users’ trust, clear, well-shot, honest images were prioritized. The global imagery evokes values of excitement and adventure. The site offers trip ideas, so the imagery highlighted specific locations and activities. Ultimately, the imagery stirred up the user’s wanderlust.

  • Interactions

    Clarity was interspersed via interface interactions like buttons, calendars, and search bars. The element changed appearance to validate the user’s interactions, giving feedback when the action was successfully completed, or if an error occurred. Users felt confident in their actions when they garnered the desired results. This confidence made users feel in control, giving the impression of an intuitive interface because users easily understand it and had a better experience.

Phase 5: Building Solutions

A high-fidelity prototype was developed to demonstrate the entire hotel-booking process. Each screen explains the pain points and how they were resolved.

 

 High-Fidelity Prototype

Landing Screen

Pain points:

  • Inability to instantly or easily locate the search bar.

  • Mis-matched mental models when the page deviates from established conventions.

Solutions:

  • The search bar’s central location becomes the landing screen’s focal point.

  • The search bar is prioritized then supplementary content is secondary.

  • Followed set conventions that users understood, thus mental models match.

  • Users can easily resume their previous searches.

  • Users save time reviewing “Saved stays.”

Results Page

Pain points:

  • Missing filters or backtracking to refine the search.

  • Only allowing the location to be adjusted in the search bar, not refined with the map.

Solutions:

  • Various filters are readily applicable and customizable filters are in the drop-down menus.

  • A conventional map that automatically refines the search based on if the user zooms in or out.

  • The map is intuitive and grants users greater control with less work.

  • The search bar recalls inputs and is easily edited.

  • Follow conventions users expect and know.

Selected Results

Pain points:

  • Suspicious when there are a few, low-quality photos.

  • Policies were hidden, in fine print, or unclear. The jargon was confusing and ambiguous.

Solutions:

  • The menu bar below the images allows users to select a tab and the page jumps to that section.

  • Transparency by the site gives the user certainty as they understand what they are receiving.

  • Clearer jargon that is easily understood for the language was pulled from usability tests.

  • Multiple high-quality images are available.

  • The policies are explicitly stated.

Add Ons

Pain Points:

  • Add-on section was either hidden, unavailable, or first appeared at payment.

  • Add-on prices were not stated; the total price was a surprise upon payment

Solutions:

  • Prices are explicitly stated, absolving any surprise costs upon payment.

  • A designated page and progress indicator commencing the reservation process.

  • Flexible and beneficial to all users; can skip or browse add-ons.

 

Payment

Pain Points:

  • Users felt uncertain about price configurations or not seeing the total amount when on the payment page.

  • Users abandon transactions when payment forms are tedious and lengthy.

Solutions:

  • Payment form is reduced to essential information. Form uses in-line validation to give user feedback while inputting data. Form is quick and painless.

  • The total price and its configuration are explicitly stated.

  • Concise recap of trip details that user checks before submitting payment.

  • Page is straightforward and without distractions to keep users on task.

Login

Pain points:

  • Limited login in options; either with specific apps or must create an account.

  • Login is complicated or requires too much information that feels unnecessary.

Solutions:

  • Various login options or can ‘continue as guest’.

  • Users that log in via other apps save time and effort with auto-filling information.

  • User has flexibility as they choose which method best suits their needs.

 

Confirmation

Pain points:

  • Without an explicit confirmation, users felt unsure if their reservation was successfully booked.

  • Most sites send a confirmation email several minutes after the booking. Users must open a new tab, navigate to their emails, and continuously refresh their inbox until it arrives. This extra work is annoying and unnecessary for the user.

Solutions:

  • A confirmation page that instantly and explicitly assures users of their successful reservation, thus absolving any uncertainties.

  • The playful illustration stirs excitement for the user as they just booked their stay and look forward to their trip.

Solutions & Conclusions

Takeaways: During this project, I acquired the roles of a UX researcher, UX designer, and UI designer. Every step of the process proved to be instrumental and is reflected in the final prototype. Once the pain points were identified and narrowed, implementing direct and tangible solutions became possible. I am confident my solutions deliver an improved user experience. By intentionally developing solutions to known issues, my decisions are informed and backed by the user insights collected during research.

Successes: Getaway Stay maintains a consistent brand throughout the interface. Above all, Getaway Stay prioritizes users’ needs and never compromises functionality for design. During the entire process and prototype, it is clear that form follows function. Every element serves a function, and its location, appearance, and interaction feedback were carefully considered. The site is visually pleasing and enjoyable experience to navigate. The site succeeds in leading the user through the entire process while being intuitive and operating with minimal effort.