logo
logo

Introduction > Research > Analysis > Design > Prototype > Reflection

Hotelux: Hotel Booking Made Simple

This UX case study documents the research, design and prototyping behind Hotelux, a hotel booking app built as part of my Professional Diploma in UX Design.

The main focus is to take you through my research process, from initiation and analysis to identifying key pain points and solutions, and finally integrating these insights into a comprehensive design plan.

This is my first attempt at documenting my UX design process in a detailed & elaborative manner. Since venturing into the world of UX/UI, my journey has unfolded as a captivating and vibrant experience, brimming with continuous learning. I trust that the next 10 minutes of your time will be insightful and rewarding. Let’s dig in!

🤯 Some Points Can Be A Pain In The App! 

Overall, I learned that the most common pain points of using a hotel booking app, were:

  • There is a need for improvement in the search entry and results screens (75%+ of users stated).
  • Occasionally, an excess of information and choices can lead to a saturation of data which leads to users looking elsewhere (25%+ of users stated).
  • Fluctuations in pricing, coupled with undisclosed additional costs can lead to distrust of the app (50%+ of users stated).

With these critical pain points in mind, the hotel booking app’s design prioritised:

  • Enhancing the entire booking process.
  • Emphasising seamless navigation.
  • Concise information delivery.
  • An improvement in pricing transparency.

Role

UX/UI Design & UX Research

Tools

Figma, Zoom, Lets View, Sketching, Adobe Suite & G Suite

Time

Sept 2023 – Jan 2024

📱 When The Going Gets Tough, The Tough Will Download A Different Hotel App

The following tools offered me a multifaceted approach to addressing pain points in a hotel booking app:

  1. Competitive Benchmarking helped me analyse 4 competitor hotel apps, identifying their best practices and their faults.
  2. Online Surveying allowed me to gather user feedback from 36 participants, revealing insights into pain points and preferences. What better way to gather user insights than from asking real life people.
  3. Usability Testing allowed me to evaluate app functionality and identify potential challenges of the average user by talking to one in person.
  4. Note Taking helped in two user tests by recording detailed observations and key findings throughout the research process.

This combination of methodologies provides a robust foundation for refining the hotel booking app iteratively, addressing user concerns, and enhancing the overall user experience.

🤝 Taking Insights From The Rich And Giving To The People 

Competitive Benchmark
  1. Prioritising screen content is crucial, determining default visibility, interactive details, and excluding non-essential information.
  2. Follow industry norms, users navigate a sequence – from login, to destination search to checkout. Our focus is enabling informed decisions at each stage, balancing comprehensive details with simplicity.
  3. Essential visuals, like images, provide a snapshot of hotels and rooms.
  4. Clear calls to action and progress updates guide users through, while autocompleting information at checkout streamlines the process, saving time and ensuring simplicity.
Compare The Apps
Online Survey
  1. Respondents, who booked hotels frequently for pleasure in the past year (97% of respondents), preferred Booking.com for its user-friendliness and trustworthiness (58% of respondents).
  2. Interestingly, many used it as a search engine first (86% of respondents) but opted for the hotel’s website for secure bookings and better deals.
  3. Mobile hotel apps or websites (58% of respondents) were the preferred booking methods, with users often browsing on computers as well (36% of respondents).
  4. Shopping around on multiple apps was a common practice (86% of respondents).
  5. Desired improvements included:
    1. Streamlined information,
    2. Intuitive steps,
    3. Transparent pricing/policies,
    4. Diverse payment options,
    5. & Enhanced loyalty rewards.
  6. Key consideration for booking was price (42%), followed closely by customer reviews (25%) and hotel location (20%).
See The Results
Usability Test & Notes Taken
  1. Appreciation is expressed for the inclusion of important hotel booking policies such as “free cancellation” and “no prepayment needed”.
  2. Difficulty is faced in finding the location or map information, emphasising the need for an interactive hotel location / directions map. 
  3. A unified calendar for arrival and departure dates is desired.
  4. Positive first impressions are gained from enticing hotel images on the homepage, immersing users in holiday vibes.
  5. The option to easily return to the homepage with one click is valued.
  6. Satisfaction is expressed that special offers and add-ons are not aggressively promoted.
  7. Descriptive hotel and room details, coupled with a user-friendly layout, are paramount.
  8. Integrating customer ratings, such as Trip Advisor, enhances trust in hotel selection.
  9. While users favor aggregator sites like Booking.com, they express loyalty to individual apps and hotel groups stating positive experiences.
  10. If account sign-up/log-in is needed, it should occur intuitively, not disrupting the booking process.
Watch The Test Video
Read All My Notes

🤠 Discovering The Good, The Bad & The Ugly

Having dissected all aspects of my research, I documented the pros and cons:

  1. The affinity diagram allowed me to collaborate with a colleague and organise data by visually clustering related information, enabling the synthesis of user insights and generating cohesive design solutions.

  2. The customer journey map provided a holistic view of the user’s experience, helping UX designers empathise with users, identify pain points, and optimise interactions across various touchpoints.

  3. The flow diagram enhanced user flow comprehension by illustrating the sequential steps and interactions within a system, facilitating the identification and resolution of usability issues for a smoother user experience.

This combination of analysis tools enhanced my ability to align user needs with design decisions, ultimately ensuring the creation of a more user-centric and successful hotel booking app.

🗒️ Throwing Post It Notes At The Wall & Seeing What Sticks

Affinity Diagram

The key group labels instructed me on what the most important aspects of the app should be. These included:

  1. Examining user booking behaviours and requirements.
  2. Analysing user preferences in hotel search methods and information consumption.
  3. Examining the presentation of information to users, with a focus on optimising clarity and accessibility.
  4. Evaluating the trustworthiness of the app, particularly with financial transactions.

Research is imperative and should be prioritised at the outset of a project for many reasons:

  1. It serves as a catalyst for collaborative efforts, fostering creativity among team members. 
  2. It systematically uncovers reoccuring pain points within current apps, providing valuable insights for informed design improvements.
  3. It contributes to a profound understanding of the subject matter, thereby informing and justifying key design decisions.
Analyse The Diagram
Customer Journey Map

Based on my findings from the affinity diagram, I put together a customer journey map, highlighting the main stages of the process, the goals, mental models, behaviours and pain points for each. Here are my key findings:

  1. There is a need for improvement in the search functionality, entry and results screens.
  2. The hotel and room information screens are satisfactory.
  3. The payment and booking screens are also satisfactory which, along with the aforementioned information screens, demonstrates effective functionality.
View The Map
Flow Diagram

In the final stage of the analysis phase, I created a comprehensive flow diagram to outline:

  1. The high-level booking flow of my hotel booking app.
  2. To depict a visual representation of the application’s design, providing insights into its design framework and interaction sequences.
  3. To aids in identifying and highlighting issues uncovered during previous research and analysis.
Follow The Diagram

😎 Let’s Get Mocked Up!

Once I had completed my research and analysis, I proceeded to create my proposed designs using the interactive design approach, using the method of sketching.

  1. I compiled a list of screens to be designed, using my flow diagram as a guide.

  2. Attention was given to capturing distinct screen states, especially when variations were significant due to users’ actions.

  3. Each screen underwent a thorough sketching process, ensuring a comprehensive representation of the user flow.

  4. During this iterative design phase, I noted any identified issues and continued refining the design until achieving a seamless and effective user flow.

View All Sketches

👨‍🎨 Why Oh Why Delilah, Was It Designed Like This?

Designing a brilliant app isn’t just about how it looks but also about how easy it is for you to use. Every detail matters, from the colours you see to the fonts you read. So why all the blue? Why an obvious font choice? I’ll tell you… It’s all about making sure our app feels right, works well, and leaves you with a good impression. So let’s dig in.

Colour Scheme
Colour Hex Primary Use Meaning Reasoning
Oxford Blue
#010228
Headers & Body Text
Sophistication
It helps establish a sense of credibility and trust with users, especially in a business context.
Blue
#0085CC
Buttons & Backgrounds
Communication
It highlights important elements and improve readability without overwhelming the user.
Sky Blue
#00CCf5
Labels & User Selections
Enthusiasm
It enhances the user’s mood and engagement with the app.
Light Blue
#94E2F0
Secondary Buttons & Highlights
Clarity
It clearly communicates information and guides users through the app’s interface.
White
#FFFFFF
Primary Background & Button/Tab Text
Cleanliness
It provides a minimalist aesthetic that makes the app interface appear clean, uncluttered, and easy to navigate.
Grey
#D6D6D6
Secondary Background & Forms
Neutrality
It allows the other colours of the palette to stand out more prominently.
Coral
EF8354
Save Icon & Tertiary Buttons
Warmth
It helps create a positive and inviting user experience.
Yellow
#FFC759
Star Ratings
Optimism
It subconsciously influence users to perceive the ratings more positively.
Colour Contrast

This carefully curated palette offers several strengths, including high contrast for readability, accessible colour pairings, and a well-defined visual hierarchy. However, while the predominant use of blues creates a cohesive and harmonious aesthetic, it also presents challenges such as limited contrast between lighter shades, potential accessibility issues and visual fatigue.

If I were to complete this project again, I’d replace Light Blue (#94E2F0) with Dim Grey (#707070) to help maintain visual balance and improve the accessibility and readability of the app’s interface. My downfall here was using a colour contrast checker towards the end of the project and not prior to the prototype stage.

Font Choice
  1. Cos it looks good!
  2. Open Sans is versatile, readable and modern, so it’s often considered the perfect font for app design.
  3. Open Sans is clean and straightforward, making it easy to read on screens of various sizes, from smartphones to tablets, laptops and desktops.
  4. Open Sans offers a wide range of font weights and styles, allowing for flexibility in design while maintaining consistency and coherence throughout the app and its branding.
Design System

I utilised the ‘NAM Design’ design system from the Figma Community to craft the user interface of Hotelux, streamlining the design process, resulting in enhanced user experience through cohesive visual elements and intuitive interactions.

🎨 Here’s One I Made Earlier

Designing the hotel app prototype within Figma provided the opportunity to translate insights gained from research and analysis into a fully functioning prototype. This process facilitated the evaluation and validation of design decisions, enabling me to identify areas for improvement.

This prototype is hosted by Figma.

Note: For the full effect, please view the prototype within Figma or fullscreen browser.

View On Figma

🧐 8 Simple Reasons For My Design Choices

Research showed that users often struggled with hotel booking apps due to:

  • Clunky navigation, hotel search and booking functionality.
  • Lack of clarity on cancellations and payment policies.
  • An abundance of information leading to data saturation.
So Here’s The 8 Reasons Why
  1. Login / Signup – To prioritise user data protection while ensuring ease of access, with clear prompts and assistance provided at every step, enhancing user trust and engagement.
  2. Home – To captivate the user with visuals in a clean layout, guiding users towards initiating the booking process by showcasing popular locations and properties, fostering a visually engaging and intuitive user experience.
  3. Search – To streamline the search process into three steps facilitating effortless selection of location, dates, and guest preferences, enhanced by auto-suggestions and smart defaults, promoting efficiency and user satisfaction.
  4. Results – To display listings with essential hotel details alongside striking feature images, facilitating clear expectations and easy exploration, optimising user engagement and decision-making.
  5. Map / Filter – To integrate an interactive map alongside customisable filters allowing users to select properties based on location preferences, complemented by real-time updates on search results, enhancing user control and satisfaction through personalised exploration.
  6. Hotel Info – To provide clear hotel information, including amenities and policies, empowering users to make informed decisions, while previewing room images and amenities, promoting user confidence and satisfaction.
  7. Booking – To streamline the booking process into four steps, offering personal and booking information breakdowns, transparent cost breakdowns and a secure payment gateway, ensuring seamless transactions and fostering user trust.
  8. Confirmation – To summarise booking details, including options for sharing bookings on social media and sending confirmation emails, promoting user engagement and facilitating seamless communication with travel companions.

💬 …This Time It’s Annotated

I also created an annotated version of my prototype to accompany the final version. These annotations document every screen, state, expected behaviours and common components. 

Note: I disabled all interactions in the annotated version to place full emphasis on the annotations. Press the ‘C’ key to show all annotations.

View On Figma

👯 I Get By With A Little Help From My Friends

I actively sought feedback from two colleagues to collaboratively refine my designs, aiming to improve user experiences by tapping into collective insights. The fresh perspectives provided by two sets of new eyes proved invaluable in uncovering and addressing small errors!

User One | Response From A Data Analyst
  • “Consider using different colours for calendar dates of different months to help differentiate them on the date selection screen.”
  • “Include the month and year at the top of the date selection screen for reference.”
  • “Increase the body text size in general so it’s more accessible.”
User Two | Response From A Product Designer
  • “Sometimes I had issues with colour contrasts, mainly the light blue or grey on white features.”
  • “The search bar wasn’t obvious at first as it was labelled Where/When/Who. I’m so used to seeing it just being labelled as Search.”
  • “If i can browse as a guest, the login / register could be introduced later on instead? Either that or disabling the ability to browse as guest.”

Following the constructive feedback received, the user feedback was incorporated into the final designs of the app.

🕜 If I Could Turn Back Time

Based on user feedback and having additional time, I would make the following adjustments:

  • Integrate accessibility standards seamlessly into the design process, avoiding the common pitfall of checking compliance at the end of the project.
  • Opt for a more recognised design system such as Carbon Design System or Chakra UI instead of NAM Design to leverage its extensive community support and readily available resources, potentially accelerating the development process and offering additional design flexibility.
  • Enhance the prototype phase by implementing thorough usability testing throughout each iteration of the app.
  • Adding extra interactivity to the prototype especially at the personal details screen to enhance the user’s experience and help show usability to developers.
  • Implement a loyalty system to increase user engagement and foster a sense of commitment.
  • Experiment with dual app versions, and also including a light mode and dark mode of each, assessing their performance to determine the most effective and user-friendly design.

👏 So Long, Farewell, Auf Wiedersehen, Goodbye!

Thank you to all those who have taken the time to read this case study, the UXDI student success team for their valuable guidance, my user testers and everyone who provided constructive critique on my work.

Hotelux - UX Case Study for a Hotel Booking App