The Menagerie Hotels
Mobile Site
The story of how I transformed the online hotel booking experience for people who are fed up with being habitually left in the dark
Setting the Stage
Purpose and Measurements of Success
Welcome to the story of my first journey in UX! It was exciting, challenging, and enlightening in ways I hadn't anticipated. My task sounded both straightforward and ambitious: design the mobile version of a new hotel booking website.
I would need to create a working prototype from nothing, but to focus only on the process of booking a hotel room. As a solo designer on this project, I would be the lead (and only) researcher and designer.
What Would Success Look Like?
Defining success proved difficult at this point. This was going to be a new product for a fictional company. With no stakeholders or baseline metrics, what could I measure? I couldn’t compare revenue or costs. I couldn’t increase customer acquisition and retention or decrease drop out rate. So instead, I set a simple goal: to create a desirable product.
"A problem well-stated is a problem half-solved."
- Charles F. Kettering
Tell Me How you Really Feel
The Research
Focusing on my goal of creating a desirable product, I needed to understand why people use hotel booking websites. What are their actual goals and expectations? What success stories or frusterations could provide insights into their needs? I knew what I wanted to know, and I knew I wasn’t the person to tell me.
I Am Not My User
Starting with basically nothing, I needed to cast a wide net. I wanted to know what past experiences, contexts, goals, and struggles real people have had when booking hotels online. To cast such a net, I decided to use a survey. A survey could give me both quantitative data to identify patterns and qualitative data to uncover deeper insights and reveal emotional responses.
The Survey Questions
I decided to use Google Forms because it was free, familiar to me, and easy to use and distribute. I came up with a total of seven questions, an easily digestible amount that would take less than five minutes to answer.
Rallying the Troops
I reached out to friends, coworkers, and family, seeking anyone with experience booking hotels online. After a couple weeks (and a few reminders) I had survey responses from twelve lovely volunteers, and a good handful of useful insights. These insights weren’t definitive by any means, but they would help me to form testable assumptions which proved very valuable later.
Goals, Context, and Behavior
Most respondents reported that proximity to activities in the area is the most important thing to them when looking for a hotel. Additionally, a large portion of respondents also reported that they spent the majority of their efforts filtering hotel amenities and browsing through search results.
When asked what task they were trying to complete, most respondents replied that they were either booking or comparing prices. Several mentioned specifically choosing sites with the best prices or which supported easy price comparisons. Others mentioned using sites where they belonged to a rewards program with the brand. Several highlighted ease, speed, and reliability as key attributes of their favorite booking sites.
The Contradiction
An interesting contradiction emerged in the survey results. Most respondents said that proximity to activities in the area was the most important factor to them. However, almost none mentioned it when describing their goals or interactions. I found this apparent contradiction interesting, but reminded myself not to jump to conclusions. I was only just scratching the surface of my research.
The Pain
Out of all of the questions I asked, the longest and most detailed answers came in response to the last question on the survey: "What would you change?" It was clear that even though some respondents were answering questions about an experience they had weeks to months ago, their frustrations stuck with them.
Checking out the Competition and Hunting for Conventions
Having gathered some basic data about user needs through my survey, I wanted to see how other hotel websites were addressing (or failing to address) them, discover conventions, and form a baseline. To minimize my personal bias, I set rules for myself. From a set of twelve UX design principles, I came up with a small set of categories I could focus on. My categories were navigation and order, saving time or effort, alignment with user goals, expectations, and forthcomingness.
The Lucky Contestants
With a clear lens for analysis with the help of my defined categories, I was ready to pick some websites to examine. I focused on well-established companies who likely have the resources to optimize their websites. I landed on Hilton, Marriott, and Best Western. All three brands have been around for over fifty years and have thousands of active users. Hilton and Marriott were mentioned multiple times in survey answers. Best Western stands out with its franchisee-operated locations and budget-friendly reputation.
With my target site chosen and a big cup of coffee, I began walking through the booking process on each mobile site. I took screenshots and jotted notes on anything interesting.
The Good, the Bad, and the Conventional
I discovered a few interesting things through this exercise. For one, there was certainly a conventional pattern to the steps through the booking process. Each site more or less took me through the same steps to complete my booking. Anyone who has used these sites has likely shaped a mental model off of this pattern. Beyond the process, I identified several key insights that fell easily into my categories.
Alignment with User Goals
Excessive promotional content can obscure the user's path to completing their goal.
Limited real-estate on mobile sites can result in designs that inadvertently create visual relationships between unrelated items
Allowing users to sort by distance, price, etc. may help them focus on their specific goal
Interactive maps can help users visualize and find hotels near their preferred destinations.
Pop-ups and tooltips can obscure important information or fields.
Navigation & Order
A consistent header for navigation and indicating the user's current location is crucial, especially on mobile sites with hidden functions.
Navigation and key information for the user to have on hand should remain visible on mobile sites.
Organizing, labeling, and numbering form fields can help users provide necessary information more easily.
Clear navigation and visible back buttons help users recover from mistakes or change their minds.
Expectations
A calendar date picker is a common convention for selecting stay duration, but its ease of use can impact user frustration.
It is common for hotel search results to offer multiple filters, such as amenities, type, brand, and price range.
Including a stay summary (hotel name, phone number, address, dates, and total cost) in the confirmation section may be both expected and helpful for users.
Prompting users to sign in, create an account, or continue as a guest is a common convention, with sign-in typically optional.
Forthcomingness
A pricing breakdown can be useful to users for cost details.
Be cautious with “points” and other hotel currency, as not all users, especially first-timers, may understand them.
Icons are useful and conventional on mobile, but they should have clear meanings or be explained upfront.
Clear validation requirements and error messages help users understand what’s missing or incorrect.
Saving Time/Effort
Auto-suggestions based on search criteria can help users as they type in their trip destination.
Displaying common search filters and additional options a click away saves users time.
An easy way to reset filters saves users from changing them manually.
Forcing users to repeatedly decline offers can lead to frustration.
Forcing users to select card type is an unconventional extra step
Clearing inputs when toggling options may force users to start over unnecessarily.
The Importance of Observation
With a better understanding of user needs and the typical booking process, I wanted to see for myself how real people interacted with existing booking websites. Would their behaviors align with my assumptions? Would they feel confident? Where would frustration arise, and what could I learn about their mental models? Getting the answers to these questions and more would be possible with usability tests, allowing me to observe users’ expressions, body language, and confusion in real time and organically.
"What people say, what people do, and what they say they do are entirely different things."
- Margaret Mead
Selecting Users and Setting Up
I observed four usability test session, each with a different user. I selected participants with hotel booking experience but from different backgrounds to see if their approaches varied. The tests were conducted via Zoom and LetsView (a screen mirroring app). A few days before the session, I emailed participants an outline explaining the test, its purpose, the expected duration, and instructions for installing and using the necessary software.
Getting Comfortable
Once the technology was set up, I took time and care to ensure my participants were comfortable. I clarified that we testing the website - not them - and emphasized that there were no mistakes — only insights. I encouraged them to ask questions, but explained that I might not answer all to maintain the test’s integrity. I asked them to take their time and think aloud, sharing their actions, thoughts, and impressions of the screens. Finally, I explained the test structure and expectations as well as confirmed they were okay with the session being recorded.
Depth interviews: Getting to Know the Participants
Each of the four tests began with a short interview to understand the users' backgrounds, behaviors, and context for using the software. I asked about their occupations, location, booking habits, priorities when booking, and recent booking experiences. Their responses helped me create four user personas, which I later used to design the customer journey.
Conducting the Usability Tests
After each depth interview concluded, it was time for the exciting part – testing the usability of the websites. Each participant was tasked with booking a hotel in a specified city for a weekend on two different sites – two of the sites I examined during my benchmark research. I watched what they were doing, reminded them to talk through their thoughts if they got quiet, and asked follow-up questions when needed, being as careful as possible not to bias the tests.
Each session took about an hour. After they finished the tasks, I asked how they felt about the experience—what surprised them, what they liked or didn’t like, and if they thought anything was missing. I wrapped up by thanking them for their time and letting them know how helpful their feedback was for my research.
"Efficiency is doing things right; effectiveness is doing the right things."
- Peter Drucker
Notable Behaviors
Participants all remarked on colorful, on-theme imagery and photos of hotels. Imagery seemed very important, especially on the homepage. Each user began the same way: by looking for a place to enter their desired destination and dates. On the hotel results page, they focused on finding the most appealing hotel with good ratings at the lowest price. They also seemed to love seeing ratings.
After selecting a hotel, they quickly reviewed the amenities if available, then moved on to the room selection page. Here, they compared prices and room features, scrolling up and down the page until they found a match closest to what they were looking for.
Pain Points
Pain points encountered by the participants included overwhelming or unexpected search results, unconventional or confusing date picker controls, lack of clear and descriptive information about the hotels and amenities, unclear sorting options, confusing rates and promotions that weren't easy to compare, and unclear lines drawn between member and non-member options.
An Exercise in Empathy
Watching people struggle is painful, but important. Not everyone works through problems in the same way, and completing the task isn’t everything if the journey was painful. I didn’t want to bias the data, but I also didn’t want my users to feel bad about themselves. With one participant in particular, I could tell she was getting anxious and blaming herself, and it took everything I had not to jump in and console her.
Looking back, I can see where I could’ve done things differently. Next time, I won’t agree with or justify their frustrations, and I won’t jump in with solutions. Instead, I’ll show empathy, give them some space to figure things out, and ask them to share what they’re feeling or trying to do when they get stuck.
The Forest Through the Trees
The Analysis
One of my favorite methaphors has to do with “seeing the forest through the trees.” More or less, this means being able to draw the larger meaning, or bigger picture, out of the parts. I definitely had a bunch of trees - piles of research notes. Through analysis, I was hoping to make sense out of it all.
For some direction, I revisited my goal: creating a desirable product. When I first set that goal, I wasn’t sure what a desirable hotel booking site looked like. But now, with my research in hand, I hoped I could finally figure it out.
Was There Really a Problem to Solve?
I was excited to dig into the data, but I couldn’t help wondering: was there a real need for this? What problem were we solving? If we actually built this, would it be any better than the competitors?
"People don't want to buy a quarter-inch drill. They want a quarter-inch hole!"
- Theodore Levitt
Triangulation (I Should Buy a Bigger White Board)
I decided to start with an affinity diagram to organize all my notes. I grouped related data together first, then defined the categories based on commonalities. This way, natural groupings emerged, helping me focus on what's important without letting my own opinions influence the process. Essentially, it allowed the data to speak for itself.
I gathered stacks of sticky notes in different colors, a whiteboard, and markers. I worked through one research set at a time—survey results, benchmark notes, interview answers, and usability videos—spending about 10 minutes on each. I wrote down key points on sticky notes and placed them on the whiteboard.
Building the Affinity Diagram
My whiteboard was a mess of sticky notes, but I started grouping related ones together. I kept adjusting, moving things around until everything had its place. Then, I gave each group a name. Some groups needed further breakdown, so I created subgroups and labeled those too. In the end, I had a clearer picture of everything.
Areas of Importance Exposed
I ended up with nine categories: filtering, account, look & feel, hotel info, extras, room selection, navigation, date selection, and pricing.
The groupings seemed to line up with what users had emphasized as most important. The Hotel Information category had the most sticky notes—users often felt the info about hotels wasn’t clear enough. Within that group, three key themes kept coming up: location, amenities, and reviews.
Hotel Information
Locations
Smart search suggestions and recent searches are a must. Most users are looking for a specific place, so results should focus on locations, landmarks, and nearby attractions. The search results page should let users switch between list and map views, with the map clearly showing where each hotel is in the area.
Amenities
Amenities should be clear at every step—when choosing a hotel, room, rate, and in summaries. Use icons, but also label them for clarity. For example, a "parking" icon needs more detail—what exactly are we saying about parking? Amenity filters should be easy to find on the hotel search page.
Reviews
Reviews came up again and again in the research. Many users see them as a key factor in trusting a hotel or booking site. A simple, visible 5-star rating system, like TripAdvisor, should be prominent on each hotel result.
Room Selection
Room options should show pictures and clear default prices that are easy to spot as users scroll. Top room amenities should be listed without taking up too much space, so users can still compare prices. Any extra details should be in an expandable section under each room description.
Date Selection
Users prefer a single calendar picker for selecting dates—something familiar, fast, intuitive, and easy to use, with an option to clear dates easily.
Pricing
Users should easily find other rate options for any room. Member or rewards pricing should be clearly labeled and separated from other rates. Each rate should include a description of what's included. Rates should be easy to compare, and whenever possible, an itemized breakdown of charges should be clearly shown. No hidden fees or "gotchas".
Account
Account creation or sign-in should be optional and clearly communicated as such, with an easy opt-out. However, membership perks should be explained—what they include and why they’re beneficial. Rewards offers should be easy to find and visually separate from other content.
Filtering
Filtering should be easy to find, set, and clear. Amenities need to be clearly labeled to avoid confusion, including hotel features (like a pool or fitness center), room features (like an in-room safe or microwave), and nearby activities or points of interest.
Extras & Add-ons
Reactions to add-ons showed they can be divisive. Some users liked the option to add special amenities, but others felt it was interruptive marketing. One even got confused when it seemed mandatory. So, add-ons should be offered, but clearly optional and not disruptive.
Look & Feel
Many users mentioned brand loyalty, so logos and branding should be prominent. Imagery is also key—beautiful vacation and hotel photos should be bold and present throughout the booking process, from the homepage to the booking summary, to entice users and showcase quality.
Navigation
The booking process should follow a conventional order of steps. A progress bar showing completed, current, and remaining steps should be visible throughout. Selections should be saved between steps to avoid rework when backtracking. Stay details should be visible on screen to avoid relying on memory, and call-to-action buttons should be large and consistent across all screens.
A User Journey Taking Shape
At this point, it felt crucial to define the key stages of the booking journey, which I had started to visualize through the research and affinity diagram. There were about eight major steps: home page (destination selection), date selection, hotel search, hotel selection, room selection, rate selection, add-ons, and booking completion (payment & contact details).
1
Home Page (destination selection)
2
Date Selection
3
Search, sort, & filter hotels
4
Compare hotel results & select a hotel
5
Compare hotel rooms & select a room
6
Select a rate
7
Choose or skip add-ons
8
Complete the booking
The Customer Journey Map
With my focus areas from the affinity diagram and the journey steps defined, it was time to organize everything. I added user goals, behaviors, and sentiments to create a customer journey map. This helped me get a clearer picture of the website’s information architecture and guided the design by identifying key screen purposes, opportunities, and guidelines.
The Eureka Moment
The glaring bottom line made evident from the affinity diagram and customer journey map was clear: the main issue was a lack of (or at least confusing) information, often assuming users knew things they didn’t. This was a consistent problem across every site I researched and was highlighted by every user interviewed and surveyed.
At this point, my goal became much clearer. While there might not have been a glaring problem to fix, there was an opportunity to improve. A desirable hotel booking site would follow industry standards but do so with complete transparency, providing users with all the information they need at every step.
"Good research is not about finding what you expect to find; it’s about finding what’s actually there."
- Albert Szent-Györgyi
Opportunities
My analysis thus far revealed that the key areas of transparency I needed to focus on fell into four main categories: hotel quality and amenities, hotel location and its relation to places of interest, pricing and rate comparisons, and account and membership programs.
The Other Guys
-
Unknown hotel quality
Limited hotel descriptions
Ambiguous amenity icons, labels, and descriptions
Opportunities
-
Hotel quality rating prominently displayed
Detailed hotel description
Clear amenity icons, labels,and descriptions
The Other Guys
-
Unexpected search results
Unclear relation to the area, airports, or places of interest
Opportunities
-
Search results based on location-only for simplicity
Intuitive map view options for search results, providing clear relationships to the area
Emphasizes when close to airports or points of interest
The Other Guys
-
Unclear inclusions and limited descriptions of special rates
Ambiguity between member and non-member rates
Lack of pricing breakdowns and hidden fees
Opportunities
-
Clearly describes what is included in special rates
Member and non-member rates clearly labeled and separated from each other
Pricing breakdowns prominently displayed
The Other Guys
-
Unintuitive membership opt-outs
Unexplained perks or membership inclusions
Insufficient distinction between member and non-member options
Opportunities
-
Clear opt-out of membership programs
Fully explained perks and membership inclusions
Plenty of delineation between member and non-member options
Paper, Pencils, & Pixels
The Design
With my analysis complete, it was time to move on to design. I needed to translate the customer journey map into the actual screens of the website. Each screen had to serve a clear purpose and allow interactions which would support that purpose. My focus was on the goals, actions, intentions, and expected results of each screen.
Information Architecture
I set up a Miro board and began building the website's information architecture. I added screens as rectangles, one by one, and filled each with bullet points outlining the necessary interactions. I used my customer journey map and affinity diagram as guides throughout the process.
Sketching the Screens
At this point, I felt I had enough to start sketching the design. Sketching would help me quickly get ideas down and translate the interaction notes into actual web controls like inputs and buttons, including their positions. The goal was to create realistic screen states—a low-fidelity draft I could later use for the prototype.
I grabbed some pens and grid paper got to work. I chose controls and placements based on conventions I had found or to address usability issues. I kept things simple, focusing on opportunities within a happy path. I started with rough sketches and refined until I had some clean sketches which I could upload to a Miro board. Once in Miro, I added detailed annotations to explain the interactions and screen states (useful for developers and other stakeholders).
Note: Pretty Drawings != Good Design
One key lesson I learned through this exercise was that artistic skills don’t necessarily make you a good designer. Aesthetics weren’t the focus here. Having the interaction designs from earlier allowed me to concentrate purely on the functionality of the screens, not the look. By the end, I had high enough fidelity designs to move forward with creating my prototype.
Bringing My Designs to Life
The Prototype
This was it—the moment to take all my sketched screens and turn them into something digital and high-fidelity, a prototype that could simulate working software well enough to present to stakeholders and engineers. A Prototype would be crucial in real-world UX design to reduce ambiguity, save time, and minimize risk. I used Figma - a popular and standard design tool - for this task.
Transparency Design
I put a lot of focus on the major opportunity I had found – to design my site to be completely transparent and informative regarding hotel quality and amenities, hotel location and relation to places of interest, pricing and rate comparisons, and account and membership programs.
Other Important Areas of Focus
The other key areas identified in the analysis phase, especially from my affinity diagram, included navigation, date selection, extras and add-ons, and the overall look and feel. It was important to design these elements using established conventions while also addressing issues and negative feedback to make my site more user-friendly and delightful compared to the other guys.
The Results
And voila! After working through a bit of learning curve with Figma and a few days and building and rebuilding components, I finally had a collection of high-fidelity annotated screens and a working prototype for an entire hotel booking workflow from homepage to checkout!
Stakeholders and the Business
If this were a real design for an actual company, the project wouldn’t end here. Let’s pretend it is, and I’ll explain how I would have continued. After finalizing the annotated screen designs and prototype, the next step would be to gather all the key stakeholders—other designers, project and product managers, copywriters, legal, developers, and anyone else involved in the product and share the designs.
Ideally, there would be regular touch points throughout the design process, and this would be one of many checks to ensure everyone is still aligned on the problem we’re solving and agrees that this is the solution to test. I'd also make sure the development team understands the UI interactions and can build it as intended, addressing any questions, concerns, or suggestions they have.
"Good design is good business. When you focus on designing a great experience for your users, your business will benefit."
- Jared Spool
Iterate, Iterate, and then Iterate Some More
If the design needs adjustments, this is a time for negotiation—deciding what we can compromise on and how to adjust for technical limitations without losing key functionality. Creativity doesn’t stop when the design is delivered.
Solving problems is an ongoing process. I’d continue to get creative to find the best solutions within our limitations. Plus, the design cycle doesn’t end after launch; deployed software opens the door for more research, testing, analysis, and continuous iterations.
A Reflection on the Experience
Lessons Learned
Technical skills through the UX lifecycle
Throughout this project, I practiced a variety of skills and tools essential for effective user research, analysis, and design. I wrote and administered a survey with both qualitative and quantitative questions, conducted benchmark research on several products to establish baselines, and led usability tests, recording and taking notes using Zoom and screen mirroring technology.
I analyzed feedback by whiteboarding an affinity diagram, created customer personas, and mapped sentiments and journeys using Miro. I designed wireframes and web screens in low, medium, and high fidelity using paper, pencils, Miro, Photoshop, and Figma, ultimately culminating in a working, annotated prototype in Figma.
The importance of user research and expecting the unexpected
Without the research, I wouldn’t have been able to create designs that truly met user goals and needs. Learning about users' past frustrations with similar software uncovered key opportunities and led to my “eureka moment” about where to focus my design efforts.
I had to stay flexible and let the research guide me, setting aside my own opinions and disproving assumptions along the way. Watching users struggle, while difficult, was crucial for building empathy and making key discoveries. Those discoveries were the core of the project. I learned that without listening to and understanding user sentiment, designing functional software that truly solves a problem for both the business and the customer isn’t possible.
Final thoughts
Thank you for reading about my journey in this case study. I'm incredibly grateful for the opportunity and experience—it turned out to be even more interesting and enjoyable than I expected, and I learned so much. My UX journey doesn’t end here. This field means so much to me and is crucial to technology. I have a lot to learn, and I’m just getting started.
If you'd like to learn more about me, check out my about me page or my resume. You can also see what project(s) I'm currently working on here.