Hotel
London
Project:
Hotel London is a fictional new startup hotel that wants to create an online booking experience which is simple, accessible and based on a deep understanding of their target users. The final handover will be of a clickable prototype that can be tested with users, along with a detailed set of wireframes.
​
This project was completed as part of my Professional Diploma in UX Design.
My role:
Research
Competitive benchmark
Online survey
Usability testing
Analyse
Affinity diagram
Customer journey map
Design
Flow diagram
Interaction design
Wireframe
Prototype
Validate
Usability testing
Design process
I followed the full UX design process from Research through to Analysis, and then Design and Validation.
​
As this was a fictional project carried out for my coursework, I was able to take my time and go in-depth for each stage of the process. This meant the overall project took around 8 months to complete. I recognise that this was unusual. In client projects I've completed since I have had to adapt my design process to fit with real business deadlines and pressure on resources.
​
I was the sole designer and carried out all research tasks by myself. I worked alongside other colleagues to analyse the findings, and then built the prototype independently.
Research
Online survey
Following on from my benchmarking research, I conducted an online survey to test the assumptions made about pain points in the competitive benchmarking. I used a mixture of open and closed questions, gathering both qualitative and quantitative data.
​
What I learnt:
-
I was surprised about how low down on people’s priority list getting the cheapest price came. People were more concerned with seeing good availability on the dates they wanted to go on, as well as knowing what facilities the hotel had on offer.
-
If completing more research I would like to know more about how users pick where to go. In my usability testing I will try and find out more about this.
-
I want to know more about what users find hard to navigate about existing booking sites to try and improve on this in my own designs.
-
Respondents booking a hotel typically have already decided on a location and dates before looking at accomodation
-
Main pain points are to do with websites not remembering the data a user has already inputted and being unclear or hard to navigate.
Competitive benchmark
I started by looking at competitors websites to try and find out what our competitors are doing and what we can do better. I also wanted to carry out a heuristic analysis to see what conventions are already established, and ensure that these are present in my designs. In line with the brief, I only focussed on the homepage, search and select and user details input areas.
​
What I learnt:
-
Calendar layout including days of the week is highly important for users to easily input their dates.
-
The most effective sites have a clear, grid based layout and an uncluttered appearance.
-
Pre-filling 2 adults / 1 room is an established standard.
-
A short summary at checkout gives confidence in correct dates and price before user hits book.
-
Clear images of the room are often lacking.
-
Include quick ways for user to scan for information about facilities such as headings and icons.
-
Autofill capabilities are effective at getting users through the checkout process quicker and encouraging finalising booking.
-
Special offers can be overwhelming and confusing for the user to realise which they are eligible for.
Usability testing
To dive deeper into the research I had so far, I undertook usability tests. I wanted to go into the usability tests with a good foundation of research already, for users to then give me direct feedback on the assumptions and pain points gathered so far.
​
Following the usability tests, I generated a notes document which summarised the key pain points and positives covered. This can then be shared with other team members for them to easily digest the research.
​
What I learnt:
-
Users want to see clear and uncropped images, otherwise it feels like the hotel is “hiding something”
-
Summary of booking before hitting pay is useful, without it the user feels “less confident” in confirming the booking
-
Selecting dates with the calendar view is easy
-
Pop ups or special deals that can’t be claimed are “annoying"
-
Seeing reviews is important to assess popularity with other guests
-
Separate add-ons are “clear and obvious”, but too many can be “overwhelming”
Competitor benchmark
Usability testing
Online survey
Analyse
Affinity diagramming
My first analysis session focused on affinity diagramming. I used Miro to host a session with another colleague. Before the session I exchanged notes with them and then we begun the process, typing out post-it notes detailing key bits of research.
Once all the data had been filled into the post-its on Miro, I discussed the categories with my colleague. We started with a number of small categories but could then group these into higher level objectives. Organising the data helped to spot repeat pain points as well as improvements users would like to make.
In the end, we concluded that the following categories had the highest impact for users failing to complete the booking process, or becoming frustrated on a hotel website:
Operational
Simple navigation fitting mental models of other booking sites, smart defaults to make data entry seamless, automating elements of the process where possible (e.g. autofill).
Website features
Calendar view, maps, inviting homepage.
Financial
Customers hold reviews with high importance, comparison among other websites is key, price is an important factor in choosing between location, rooms and add ons.
Hotel features
Clear to see exactly what is included, and what add ons are available.
User Feelings
Many comments brought up that users felt frustrated and confused about cluttered websites with missing information
Customer journey map
Based off the findings from the Affinity Diagram session, I set to work creating a Customer Journey Map in Figjam. In this I tried to hit the main pain points or positive areas that reoccured through the research.
​
I gained a much better idea of what parts of the process are working for users and which need improvement. For example, people want to be able to easily see the dates they want are available and be sure they are getting the best price. I also found people wanted to avoid annoying pop ups and reminder emails as well as surge pricing.
Customer journey map
Design
Flow diagram
To fix the issues uncovered during research and analysis I went on to create a flow diagram. For my Flow Diagram I focused on minimalising the amount of steps required for user to go from homepage to checkout page. I removed any pop-ups and deals that were not relevant to the user. I also made sure that the add ons and special requests were all included on one page rather than spread out across the booking process.
​
Alongside removing these steps which caused pain points for users, I made sure to include areas of my research which users found helpful. For example, using the calendar view for selecting dates, which was something users in usability tests found easy to navigate, as well as something I found in my competitor benchmarking was an established industry standard.
Completing my flow diagram then guided how my interaction design was developed. This high-level flow is an initial step into detailing the user booking process, and if the project were to be extended I would like to create additional flows for other user journeys. I will keep returning to the flow to ensure it is still fit for purpose once I start to sketch my screens.
Interaction design
Moving onto the Interaction Design phase, I generated a series of wireframe sketches to settle on a final solution ready to be built as a working prototype. Each iteration of my sketches worked to refine the high level flow for users from homepage to payment confirmation. I went through three sketching phases - rapid sketch, detailed sketch and finally an interactive sketch.
​
Whilst making the sketches, I kept my analysis and research close at hand and made sure to include a number of key findings across the initial designs. For example, users said that clear, large images were important to them when deciding where to book. Therefore, I added a large photo to the homepage as well as photos of every room which can be enlarged.
​
Another element I included from my research and analysis across all sketches was the booking summary on the confirmation page. From my research I found that this gave users more confidence in the booking and made them more likely to complete the checkout process.
Interactive sketch wireframe
Medium fidelity designs
After completing my sketches, I then built some medium fidelity designs in Figma to iron out any issues in my sketches, for example the checkout screen looked cluttered. To improve this, I put it in a continuous list rather than spreading across the screen. The sketching process made it clear where I need to improve which made starting to make digital wireframes in Figma much easier.
​
Keeping the designs to medium fidelity to start with worked really well. It meant that I could focus purely on the user flow before perfecting the UI and visual design elements.
Design system
The final stage of this project involved creating a working prototype detailing the high-level flow. I used Figma for this and defined a style guide covering brand colours and typography. I chose the font Karla for legibility as well as its range of weights. I stuck to 8pt spacing throughout and used the grid to ensure everything was truly aligned. I created this design system from scratch as I wanted full creative freedom over the process.
​
After defining a design system, I worked on putting these elements together into larger components such as buttons and cards as well as extra design elements such as the teardrop shape.
.png)
Validate
After the final prototype had been created and tested by me, I wanted to go back to users and see if I managed to resolve some of the key problems they had with other hotel booking sites. In particular, I wanted to see if users had any more positive feelings about the Hotel London site compared to the competitors I tested in the usability testing research.
Usability testing
I conducted further tests, giving users a booking process to follow on the prototype. I also asked them to comment on the general feelings they had about the booking process which resulted in the following feedback and areas for improvement.
​
-
Users struggled with the add ons page, it is not clear enough when the add on has been successfully included in the order. Based on this, in the final design I will include instant feedback from the website to make it obvious an add on has been included.
​
-
After selecting the number of guests, user expected the box to automatically shift to be selecting the number of rooms without the need to click back into the rooms box. This will be fixed in the final design by redoing the prototyping flow in Figma.
​​
-
Users commented the overall booking process was clear and concise, with all the information needed available.
Outcome:
This project was completed for my Professional Diploma in UX Design and achieved a grade of 95%. It has been a great start point for learning along my UX journey and I am now looking to complete personal projects in order to keep developing my skills even further.
​
Using an interactive sketch prototype was a great way to quickly draw ideas and amend them where necessary. I would definitely use this technique again. I also found that the rapid sketching process was useful to get ideas flowing.​​​​​​​
​
To improve in my next project, I recognise the need to work in a larger team on projects like the affinity diagramming session. Working alongside one colleague was great and broadened the range of opinions available, and I realised the value in this would be even greater by having more team members involved if the timescale and budget allowed.