Project Timeline

Context

  • Timeline: 2022-2023
  • Type: Course Work

Role

  • UX Researcher
  • UX Designer

Responibilities

  • Conduct User Research
  • Analyse Findings
  • Create Sketches and Prototypes
  • Design and Test

My Six-Month Hotel Booking App Design.

I designed a hotel booking app as part of a six-month practice project at the UX Design Institute. My goal was to create an intuitive and accessible booking experience. Throughout the project, I conducted user research, developed wireframes, and built a functional prototype. This case study highlights the key insights I uncovered and the process I followed to enhance the booking journey.

What’s the Problem?

Your Gateway to Hassle-Free Hotel Reservations.

Despite the widespread use of mobile devices, 75% of users in the United Arab Emirates still prefer booking hotels on a desktop or laptop. Yet, the process often feels unnecessarily complex. In this case study, I share my journey—from initial research to final design—and show how I transformed insights into action to create a smoother, more intuitive booking experience.

My Target Users Are

  • Business travelers who need efficient booking options for short city stays.
  • Leisure travelers looking to book vacations and hotels near popular attractions.
  • Solo travelers who value safe, convenient locations—especially near public transportation—and may be interested in social events or group activities.

My Goals

My main goals of the research were:

  • Understand user goals and observe their behavior.
  • Identify common design conventions to follow.
  • Discover elements that enhance the user experience
  • Uncover pain points and negative interactions.
  • Find strong UX examples that could inspire design decisions

How?

Combining these methods enables cross-referencing and validation of findings, ensuring a comprehensive and objective understanding of user needs and pain points. For example, insights from usability testing can confirm trends identified in survey data, while affinity diagramming helps synthesize insights from competitive benchmarking and user interviews.

To complete this project, I am following the full UX process.

Research

Analysis

Design

Handover

Research

For me, every project begins with research.  It helps establish best practices and design constraints.

Competitive Benchmark

I also tested top hotel booking apps and studied how users perceive things and what patterns are widely used. This helped me identify intuitive features to include and areas that needed improvement features to add versus things that I could improve as well as distinguish myself.

My key Goals:

  • Understand how top competitors address booking challenges.
  • Identify design elements that enhance user experience.
  • Pinpoint usability issues or gaps in competitor apps.
  • Implement solutions to create a faster, more intuitive booking flow.

Some Pain Points:

  • Users struggle to understand which dates are selected, leading to frustration and booking errors.
  • Cluttered map view with too many hotel pins.
  • Unclear CTA — users are uncertain about what actions to take next.
  • Complicated location search — users find it difficult to search for specific places, making the process time-consuming.

My Key Finding:

  • Improve date selection clarity with highlighted dates and a summary before booking.
  • Reduce map clutter by clustering nearby hotels into expandable pins.
  • Use clear, descriptive CTAs to guide users through the booking process.
  • Add predictive search with filters (e.g., cities, landmarks) for faster location search.
View Complete Competative Benchmark

Online Survey

Next, I conducted a survey with my target audience to understand what they liked or disliked about existing hotel apps and to identify the information they consider most important.

My key Goals:

  • Understand what users like and dislike about existing hotel booking apps.
  • Identify the most important information users look for when booking a hotel.
  • Use these insights to improve the overall booking experience in our app.

Some Pain Points:

  • Users often find hotel apps confusing and difficult to navigate.
  • Key details like amenities and pricing are hard to find.
  • The booking process is frequently slow and frustrating.

My Key Finding:

  • Users value clear, detailed information about hotels—especially amenities and pricing.
  • A fast and simple booking process significantly enhances user satisfaction.
  • Easy navigation is crucial for a positive user experience.
  • Users prefer multiple payment options and a secure checkout process.
View Survey Results

Usability Test

Before designing, I conducted remote usability tests to observe how users navigate hotel booking apps. By assigning two tasks, I identified pain points and gathered user suggestions to improve the experience.

My key Goals:

  • Identify the challenges users face while completing tasks on hotel booking apps
  • Collect user feedback and suggestions to enhance the overall booking experience.
  • Analyze how users interact with different apps to inform more effective design decisions.

Some Pain Points:

  • Users find it difficult to search for specific locations.
  • Time-limited discounts feel overwhelming or pressured.
  • Unclear CTAs create confusion and uncertainty during the booking process.

My Key Finding:

  • Enhancing search functionality simplifies and speeds up the booking process.
  • Offering discounts without strict deadlines helps users feel more comfortable.
  • Clear and intuitive CTAs are crucial for guiding users smoothly through the booking journey.

Synthesize & Analyze The Data

The goal of this method is to organize research data into visual categories, revealing common pain points and desires, and validating research insights through collaboration.

Affinity Diagram

 To make sense of the research data—from usability tests, surveys, and competitor analysis—I collaborated with a colleague to create remote affinity diagrams. This helped us organize insights, identify key patterns, and validate findings. Working together gave us a deeper understanding of user needs and pain points.

My key Goals:

  • Use affinity diagrams to organize research data into clear categories, helping identify common themes, patterns, and user needs.

Some Pain Points:

  • Users struggle to find booking options and filter settings.
  • Some hotel listings raise concerns about credibility and trustworthiness.
  • The mobile interface lacks user-friendliness, leading to frustration.

My Key Finding:

  • Users want intuitive filters to quickly narrow down options.
  • Reviews, ratings, and verified listings help build trust.
  • A smoother mobile interface is essential for a better user experience.
View Full Affinity Diagram

Customer Journey Map

The purpose of creating a customer journey map is to visualize what users do, think, and feel at each step of the booking process. This helps to find areas to improve and make the user experience better.

From the affinity diagram, I saw common likes and dislikes among users. Using this information, I created a journey map showing key touchpoints, emotions, and pain points throughout the booking process. This map highlights areas that need improvement and ensures a smoother user experience.

My key Goals:

  • Gain a clear picture of how users interact with the booking app at each stage.
  • Pinpoint specific steps where users encounter difficulties or frustrations
  • Understand how users feel at different points in the booking journey.
  • Use insights to streamline the booking process and make it more user-friendly.

Some Pain Points:

  • Multiple steps and unclear instructions cause frustration.
  • Users experience delays that disrupt the booking process.
  • Elements like buttons and forms are not intuitive, leading to user errors.
  • Users often struggle to find their way through the app

My Key Finding:

  • Reducing the number of steps and providing clear instructions improve user satisfaction.
  • Optimizing the app’s response times keeps users engaged and reduces frustration.
  • Designing intuitive buttons and forms reduces user errors and enhances the overall experience.
  • Simplifying the navigation helps users find information quickly and easily.

By creating a customer journey map, we gain clear insights into how users interact with the booking app. This helps us pinpoint pain points and uncover opportunities for enhancing the user experience, leading to a more seamless and satisfying journey for our users.

View Customer Journey Map

User Flow

The main goal of creating a user flow is to visualize the steps users take when interacting with the booking app. This helps identify their actions, thoughts, and feelings at each stage, revealing areas for improvement.

After mapping out the Customer Journey, I had a clear vision of how the hotel booking process should flow and what screens were needed. To bring this vision to life, I created a user flow diagram. This diagram showed each step the user takes, making sure the booking experience is smooth and easy to follow.

My key Goals:

  • Maintain a consistent user experience across all screens.
  • Gauge user emotions to ensure a positive experience.
  • Understand where and why users are leaving the booking flow.
  • Reduce the amount of thinking and effort required from users to complete their tasks.

Some Pain Points:

  • Users feel restricted by the lack of diverse payment methods.
  • Users are unsure of where they are in the booking process.
  • Users do not receive clear feedback after performing actions.
  • Users find it hard to make changes to their bookings.

My Key Finding:

  • Offering more payment methods caters to diverse user preferences.
  • Adding progress bars or steps to show users where they are in the booking process.
  • Providing clear and immediate feedback for user actions to confirm their progress.
  • Making it simple for users to modify their bookings at any stage.
View Full User Flow Diagram

Turning Concepts into Designs

Giving life to thoughts.

Sketches

Sketching is a quick way to visualize different design ideas and explore multiple options before moving to digital tools.

Once the flow was clear,I pulled out my pencil and paper and started sketching different concepts. I kept my research in mind, focusing on user preferences. This allowed me to explore different ways to improve the booking experience and make it more enjoyable.

My key Goals:

  • Use the flow diagram from the previous project to sketch out screens and screen states for users moving through the app.
  • Use sketching to brainstorm and solve design problems.
  • Recognize sketching as an important step before creating digital prototypes or wireframes.
  • Identify design problems early in the process

My Key Finding:

  • Sketching helps in quickly exploring a wide range of ideas.
  • Early sketches help identify and fix design issues before they become big problems.
  • Sharing sketches with the team encourages collaboration and input early on.
  • Getting feedback on sketches early can save time and effort later.

Wireframes

The major goal of a prototype is transforming initial sketches into clickable screens to gather valuable user feedback and refine the design.

After noticing layout issues, I revisited my sketches to refine the design. I used whitespace and layout grids to make sure everything looked neat and organized..

Seeking input from mentors and classmates identified areas for improvement before user testing. Getting unbiased feedback first was invaluable for catching overlooked issues. After implementing those insights, finalizing the design with a user-tested, interactive prototype brought the concepts to life.

My key Goals:

  • To create a functional, clickable wireframe that demonstrates the primary user flows and interactions of the product. This wireframe provides a realistic experience of the user interface, allowing for effective usability testing and feedback collection.

Some Pain Points:

  • Simplifying complex interactions and interfaces into wireframes can be challenging.
  • Creating medium clickable wireframes requires attention to detail and may be time-consuming.
  • Consistency across all screens can be challenging, especially when transitioning from sketches.

My Key Finding:

  • Users prefer medium-fidelity wireframes for testing as they offer enough detail to understand functionality without distracting from core features.
  • Clickable prototypes allow for more dynamic user interaction, leading to more accurate feedback on usability.
  • Iterative wireframe testing helps identify design flaws early in the process, reducing costly revisions later on.
  • Identifying and resolving issues at the wireframe stage is significantly cheaper than doing so during high-fidelity design or development stages.

Annotations

The main goal was to create detailed wireframes that developers could easily follow. After validating the prototype, I made wireframes with clear notes for each interaction. These notes included user feedback, helping developers understand exactly what was needed. This made the development process smooth and ensured the final product matched the design.

My key Goals:

  • Provide clear and concise annotations that explain the functionality, behavior, and interactions of each element in the wireframe.
  • Foster effective communication and collaboration between designers, developers, and other stakeholders.
  • Ensure that the final product is consistent with the design vision and meets user expectations.

Some Pain Points:

  • Without clear notes, developers might misunderstand how things should work.
  • Lack of detail can lead to differences between the design and the final product.
  • Poorly explained interactions can confuse users and frustrate them.
  • Missing accessibility details can make the product unusable for some users.

My Key Finding:

  • Clear notes help users and developers understand each interactive element.
  • Detailed notes on how elements should behave (like hover states and error messages) improve the final product.
  • Combining wireframes with clickable prototypes helps validate user flows better..
  • Continuous feedback between designers, developers, and stakeholders improves the design and feasibility.
View Annotations For Developers

Interactive Prototype

Main goal was to create a clickable prototype to see how real users interact with the design and identify any issues.

The prototype was the final piece that brought my app to life before launch. Despite some bumps in learning to prototype, it was worth it in the end.

My key Goals:

  • Collect feedback from users to understand what works well and what needs improvement.
  • Confirm that the design meets user needs and expectations before moving to the final development stage.
  • Ensure the prototype follows best practices in user experience design, focusing on ease of use and intuitive navigation.

Some Pain Points:

  • Creating a detailed, interactive prototype can be time-consuming, especially under tight deadlines.
  • Ensuring the prototype is feasible within technical constraints can be challenging.
  • Poorly explained interactions can confuse users and frustrate them.

My Key Finding:

  • Users appreciate simple and intuitive designs, where they can easily find and use features.
  • Clearly defined interactions (like button clicks and form submissions) help users navigate the prototype smoothly.
  • Straightforward navigation paths reduce user frustration and improve overall satisfaction.
  • Continuous feedback loops between designers, and users help refine the prototype and improve its quality.
View Interactive Prototype

UX Lessons Learned

Working through the entire UX design process for this project was such a valuable journey. It showed how important it is to take each step methodically to create a solid solution. This experience reinforced the belief that great user experience is crucial for business success today. While I’m proud of the final booking flow designs, which aim to make things smoother for users, we also found areas where we can still improve. It’s all about continuous learning and making things better!

Back To Case Studies