Stay UX

This project was completed as part of the Professional Diploma in UX design from the UX Design Institute, credited by Glasgow Caledonian University.

The Task

Create a hotel booking website where users can book a hotel with add ons and extras as well as payment options. The website should be easy to use and intuitive. The goal is to create a product with minimal user friction.

User experience is key to the success of the website. How does the user feel when they are using the website? What are the problems I am trying to solve?


What are the problems I am going to solve?

3 strategies

Competitive Benchmark

I decided to start by doing a competitive analysis of top ranking hotel booking websites. he aim of the competitive benchmark is to identify the strengths and weaknesses of the websites, while at the same time understanding the conventions to follow.

Online Survey

Next, I made a user survey to understand the needs of the users. The survey showed that a majority of the users prefer to book a hotel online and quite a few of them prefer to book a hotel with add ons and extras.

User Test

As I was designing my website from scratch, I wanted to understand the user's expectations and what they would expect to see on a hotel booking website. So I had the user test 3 different websites and asked them to complete a task. The user test highlighted the importance of having a clear and easy to use booking process.


Competitive Benchmark 1


Competitive Benchmark 2


Competitive Benchmark 3


Competitive Benchmark 4


Making sense of the reseach

Making sense of it all...

Affinity Mapping

Usually affinity mapping is done collaborative. As I had no team, I asked a few of my friends to help me. Seeing the large amount of data I had colleced on digestible post-it notes, made it easier to start to group the notes and make sense of them. Slowly, patterns started to emerge and logical groupings became apparent.

Customer Journey

The next step was to map out the customer journey. By now, I was starting to form an idea of the bottlenecks I needed to address with my design. User goals, behaviours, context and pain points in each step of the customer journey are really highlighted by visualizing the journey this way.


Affinity Diagram 1


Affinity Diagram 2


Affinity Diagram 3


Customer Journey Map


Time to use all the information I have gathered and start finding solutions

Bring it all together...

Flow Diagram

Creating the flow diagram helped me to understand the user's journey and the steps they would take to complete a task while it also helped me to identify the bottlenecks and pain points in the user journey.

Interaction Design

It was lovely to put pen to paper finally, as the interactive design is the very first step on the way to the actual prototype. It is easy to problem solve and test ideas at this stage. I got to play around with different layouts and ideas before landing on the design.


The full picture started to come together as I worked on the prototype. At this stage I was pretty comfortable with the reasons behind my design and the problems I was trying to solve.


Interactive Design 1


Interactive Design 2


Flow Diagram




Getting the design ready for development

Get ready for handoff...

User Test

I was able to run a user test with a friend and get some valuable feedback and insights. It helped me identify some issues with the design and make some changes to the prototype.


The last part of the process was to create the wireframe. This is the final step before handing over the design to the developers. It is a very important step as it helps to ensure that the design is implemented correctly. Spending time on the wireframe is worth it as it helps to avoid costly mistakes later on. The wireframe should be as detailed as possible and should include all the elements that will be used in the design.

UX Design


My solutions to the problems I identified

Problems solved

Reducing Abstractions

I opted to use a modal for my search sequence. This focuses the user on the task at hand and reduces the number of abstractions. I also used iconography throughout the design to simplify the interface and to make it less cluttered.

Add ons added to hotel page

Users seemed to be confused about the add ons. I added a section to the hotel page to make it more clear.

Show me the images!

I made sure to use plenty of images throughout the design. This helps to make the design more engaging and helps to break up the text. Users also seem to prefer visual content over text.

Current Stack