Hotel UX

This project consists of work I did for my UX Diploma at Glasgow Caledonian University, run by the UX Design Institute. I completed the course over 8 months whilst still in full time employment.

The Brief: 'Conduct research on existing Hotel booking websites and use your findings to design a user-friendly Hotel booking Mobile Application.'


Competitive Benchmarking

I compaired best and worst competitor apps. I researched 3 hotel-booking apps, by taking screenshots from each stage of the journey and assessing what had been done well, what had been done badly and features that users expect.

 View whole document here



User Surverys

I created an online survey using Survey Monkey for some more quantitative research to gain more understanding into the context of use. I used a mixture of open and closed questions as well as some multiple choice questions. I ensured the survey would take around 2-3 minutes for people to complete.

-       Understand the goal of users using Hotel Booking Apps
-       Understand how users want to search for a their Ideal Hotel room
-       Identify Pain points and Frustrations users have in hotel booking Apps
-       Identify features users like in Hotel booking Apps


User Testing & Depth interviews

I prepared a script for depth interviews for the purpose of gaining some insights into context of use and user insight. The aim was to understand which hotel-booking websites/apps users prefer and why. 

The best way to gain understanding of a user experience is to ask the user.  I created a recruitment screener, a consent form and a script for both mobile and desktop usability testing sessions. I conducted two mobile usability tests and one desktop usability test on Double Tree and The Four Seasons.


Analysis: Affinity Diagram

Next, was to start making sense of the data. Myself along with a work partner went through the the depth interviews, competitor benchmarking document, survey results and user testing notes and wrote more post-its. We stuck the post-its onto a wall and sorted them into categories to create the affinity diagram. 

View full Affinity Diagram here


Customer Journey Map

I took the information from the affinity diagram and organised it into the order the user would flow through their journey to show how the users felt at each stage. I noted their goals, behaviour, context and pain points at each step where relevant.

View Customer Journey Map here


Flow Diagram - for mobile

Using the finding from my research, I was able to create a mobile flow diagram aimed at problem solving the best customer route through the app. There is a large number of ways that a user could use a hotel-booking site, I narrowed my scope to a linear primary use case. This was partly because all four of my usability test candidates skipped the “Log in” and “create account” sections. The Hotel booking journeys tended to be very linear with later steps depending on earlier steps and the users context of knowing they were going on holiday. Whilst working on this diagram I was able to sketch out ideas and quick iterations of screens and layout. 

View Full Flow Diagram here


Mobile Interaction Design

Next was to decide how each element on the page would work when the user interacts with it. I wanted to make the forms on each page as easy to complete as possible so I ensured that the appropriate keyboard would be displayed for each input field. I also ensures progressive disclosure was used throughout the screens to ensure the users flow was smooth and enjoyable. I tested these low fidelity prototypes using 'Marvel' before starting to CAD the next prototype screens.

View low fidelity prototype here



After sketching each screen state, I then designed each screen state in medium fidelity form and created the prototype. This prototype was then used for mini testing throughout to check interactions and get user validation. 

View full working prototype here 



Once the prototype had been tested I created the wireframes. I ensured all rules were defined clearly for a developer. 

*Created in Sketch

View full wireframes