The Hof Hotel Website Design from A-Z
User research • Design • Prototype
Context
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.
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.
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.
Solution
Reorganising information in a way that facilitate user's decision process and user-friendly by user-centric approach.
Method
"I enjoyed challenging what we thought we knew."
Philin
Understand users
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.
I'd like to keep in mind the business problem while prioritising user experience.
Let's rephase the question to;
'How might business stakeholders encourage people to opt for direct booking by optimising website usability and booking process?'
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 online tool
Qualitative & Quantitative research method
23 respondents
9 questions
2 continents, 4 languages
Competitive Benchmark
At the same time, I was performing competitor anaylsis to learn about the industry conventions, dos and dont's, and opportunities.
6 competitors analysis; direct and indirect
User in-depth interview & testing
Next, I conducted in total 4 user interviews and testings to learn more about relationship between the users and the booking process.
4 A/B testings & in-depth interviews
Define
Following discovery research, I gathered and analysed data using note taking technique, affinity diagrams, and customer journey map to synthesise valuable insights. Then, turned them into a problem statement.
Problem statement
'How might we reduce time of a hotel website booking process while increasing user's trust?'
Main Insights
Most users distrust website information due to factors like missing photos and price explanations, risking both low satisfaction and brand trust deterioration.
Information scattered across various locations forces users to navigate back and forth to find missing details, leading to a longer and more frustrating booking process.
The most frustrating experience faced by users are during room comparison, date and location selection, and property search respectively.
Design & Prototype
Once I've got insights and the problem clearly defined. I drew an ideal user flow before drawing low-fi wireframes on paper.
Design what and why
Problem:
Many hotel booking sites have too many information on landing page and ignore the need of seeing the property's location as it's one of the first priority users look for early on in a booking process.
Problem:
Hotel booking sites lack clear, step-by-step instructions for users.
Users can't modify booking details after initial selection, causing frustration.
Hotel and marketplace websites overlook crucial room card information for users.
Solution:
'Map' section with dedicated property's location on landing page instead of on later stages.
'Progressive disclosure' design principle to limit information on this page to the goals; to explore properties and to book a hotel.
A simple branding and logo. Representing being welcoming, organic, yet lively and confident.
Solution:
Clear filters aligned with user priorities streamline decision-making, such as filtering rooms with work amenities for business travelers.
Comprehensive room cards feature essential details like breakfast inclusion and free cancellation, alongside room size and amenities for easy reference.
Problem:
At this step, many hotel booking sites separate questions in a few pages while it could be combined together at one step.
Solution:
Gather all the necessary questions in one step to avoid longer process or the feeling of longer process, together with overview and detailed payment explanation.
