User research • Design • Prototype

The Hof Hotel Website Design from A-Z

The Hof hotel website is a booking desktop web application designed for a fictional hotel designed as part of a Professional Diploma in UX Design course with the UX Design Institute. This is my first UX project.

Problem

Not only users faced difficulty locating and understanding information to make choices, leading to a lengthy and confusing booking process, but also results in brand mistrust.

How might we help users decide faster and complete their hotel booking with less friction?

Task

To design a new website for a new hotel start-up, focuses exclusively on the hotel booking process. It should be usable, accessible and empathetic to the target users.

Solution

Reorganising information in a way that facilitate user’s decision process and user-friendly by user-centric approach.

Tools

  • Survey Monkey
  • Figma
  • Miro
  • Apple IOS
the hof hotel desktop mockup

I enjoyed challenging what we thought we know.

The what & why

  1. Optimised landing page
  2. Optimised room comparison/selection flow
  3. Optimised payment process

1. Optimised landing page

Most hotel booking sites drown users in info but forget what really matters early on: location. So, I brought the map front and center on the landing page. To keep things clean and purposeful, I applied progressive disclosure—showing only what users need to explore properties and book a hotel, nothing more.

the hof map

2. Optimised room selection flow

Room selection flow is the heart of the hotel experience—slow or confusing, and users drop off. Research showed most sites miss the basics: no clear step-by-step guidance, no way to tweak details mid-flow (so I gave flexibility), and vague room cards. My fix? I streamlined decision-making with filters that match user priorities (think work-friendly rooms for business travelers) and designed room cards that tell it all upfront—breakfast, free cancellation, room size, amenities—so no one books blind, and it helped with quick comparison (that’s enough, no need to design a comparison feature).

the hof room selection

3. Optimised payment process

Some booking sites love dragging users through endless question pages—a real patience killer. I flipped it: all essential questions in one step, paired with a clear overview and transparent payment breakdown. The process feels faster, cleaner, and way less frustrating.

the hof roomdetail

The design process

method

Business problem

Given my industry insights, hotel businesses have long faced with the challenge of driving direct bookings via their websites, leading to high costs for acquiring customers.

‘How might business stakeholders encourage people to opt for direct booking by optimising website usability and booking process?’


Understand user (Discovery research)

Firstly I wanted to explore the problem area of a hotel booking process as much as possible so that we learn the dos and dont’s, users goals, behaviours and thoughts.

Online survey

  • Survey Monkey
  • Qualitative & quantitative research questions
  • 23 respondents
  • 9 questions
  • 2 continents, 4 languages
Online survey

Competitive benchmark

At the same time, I was performing 6 competitors anaylsis to learn about the industry conventions, dos and dont’s, and opportunities.

User in-depth interview & testing

Next, I conducted in total 4 user interviews and A-B testings to learn more about relationship between the users and the booking process.


Define

After discovery research, I mapped insights with note-taking, affinity diagrams, and journey mapping, then distilled everything into a clear problem statement. To sharpen the synthesis, I even roped in two colleagues for a hands-on note-taking session—because two extra brains catch what one might miss.

Problem statement

How might we help users decide faster and complete their hotel booking with less friction?

Main insights

Users didn’t trust what they saw—missing photos, vague prices, and scattered info sent them bouncing back and forth across pages. Frustration peaked during room comparison, date picking, and property search.


Design & Prototype

Once the problem was clear, I mapped an ideal flow, sketched quick low-fi wireframes, and evolved them into hi-fi prototypes to rebuild trust and streamline the booking journey.


Test

I ran 4 prototype tests. Users loved the welcoming look and feel and appreciated the site’s simplicity and straightforward flow. Hotel cards proved especially useful—they helped users decide quickly, given a specific scenerio. The main hiccup? Some struggled to see how many rooms they’d selected—the room count indicator at the top just wasn’t clear or prominent enough. I would improve that in the future.


Conclusion

The Hof project revealed critical trust and usability gaps in the hotel booking journey. Users struggled with incomplete or scattered information, leading to frustration, distrust, and wasted time. By streamlining the flow, centralizing property details, and clarifying room comparison and booking steps, I improved decision-making speed and overall booking confidence.

Opportunities ahead: further enhancing trust signals (e.g., verified reviews, transparent pricing), personalization of search filters, and smarter comparison tools to reduce cognitive load even more (if necessary). The Affinity Diagram workshop took 6 hours, I would make it more efficient in the future.