Challenge
UX Design
User research
UI Design
Design a simple and accessible website for users to search for and book hotel rooms, based on a deep understanding of the target user.
My design process
1
Research
Competitive benchmarking
User survey
Usability testing
I used these research methods to learn how other websites are solving this problem and established conventions which should be followed, and to gather user goals, behaviours, pain points and mental models.
“I want to be able to filter more specific areas in certain locations”
“Photographs of dog friendly rooms would be useful”
“I didn’t book anything because I didn’t want to commit”
“I would like it to suggest hotels with the best reviews”
“I would remove irrelevant text not needed on some pages”
“I think the calendar function could be easier to use when choosing dates”
Insights
Users are not always visiting hotel websites to make a booking, they are often browsing, thinking about future trips and sharing them with friends
A lot of importance is placed upon photos of the properties, which can have a big impact on making the decision to book
Filters are used a lot, and often changed multiple times a session when searching for hotels. However, some sites include an overwhelming number of filters that are not always used
Users spend a considerable amount of time comparing various options that they have listed before narrowing them down to make a decision
2
Define
Affinity diagram
User journey map
To analyse the research gathered, I used an affinity diagram session and created a user journey map. This allowed us to quickly and logically sort a large volume of data, build structure, and identify areas for improvement.
3
Design
User flow diagram
Sketching
I created a flow diagram to identify each of the screens and states required for the designs, and to easily optimise the flow to create a seamless experience that aligns with the user's needs. Using this diagram I then sketched the screens, allowing for quick ideation and design iteration.
4
Prototype
Wireframes
Prototyping
Wireframe annotations
Using Figma, I translated my final sketches into wireframes. I started with low-fidelity wireframes and then created a high-fidelity prototype, to improve the quality of the user testing I would complete once I had finished designing.
I conducted multiple usability tests throughout the process to test my assumptions and identify improvements.
5
Validate
Usability testing
Using the prototype, I completed another full user test, to identify any further changes which could be made to improve the product, and assess how successful the design has been.
Overall, I believe the design has been received very positively. This user was also used earlier in the research stage, and believed that this was much more enjoyable and easier to use than the sites used for research before.
Lessons Learnt
Throughout this project I have learnt a lot about the various UX techniques and methods I have used, and the importance of following the design process. I also feel I have greatly developed my wireframing and prototyping skills, which has allowed me to test multiple variations of designs and explore creative solutions.
I believe the final product is successful and solves many of the issues that were found when conducting research on hotel booking sites and users. However, there are some things that I might do differently in future, and possible changes I have identified since which I think could further improve the product:
Including weather information for the property location, as I have found that users will also often check the weather whilst viewing places to visit
A clearer way of identifying the available breakfast options - I believe the product could benefit from A/B testing for including additional room options for breakfast, or as an add-on in the checkout process
I would also have liked to complete more usability tests on the final prototype, using more varied users to gather different perspectives