This project was completed as part of the Professional Diploma in UX design from the UX Design Institute, credited by Glasgow Caledonian University.
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?
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.
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.
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
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.
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
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.
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
Sketch
Getting the design ready for development
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.
My solutions to the problems I identified
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.
Users seemed to be confused about the add ons. I added a section to the hotel page to make it more clear.
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.