L-UX HOTEL
Design and upgrade the hotel booking process
Professional Diploma in UX Design - Case study
L-UX HOTEL
The Assignment
This Project was part of my UX Design professional diploma from Glasgow Caledonian University and the UX Design Institute. The Goal of the project was to develop an end-to-end hotel booking website that would offer a smooth instinctive flow and a simple enjoyable booking experience.
The challange
• To develop an understanding of customers' goals, mental modes, pain points, and joys they experience through out the hotel booking process. • To learn what pain points the customers face when booking a hotel. • To put the customer at the heart of the design process of the new hotel booking application.
My Approach
• Research, research, and more research. Complete a breadth of research to gain an understanding of my customer. • In-depth analysis of the research data to find insights. • Identify opportunities based on insights. • Design a new hotel booking app with the customers' needs at the heart of the flow design.
L-UX HOTEL
The Result
The hotel booking process varies from site to site. It's not always clear and easy to navigate through the booking experience. I have simplified the Flow by reducing clutter and making it much more instinctive to go through the process of booking a hotel.
My role
• UX Designer • Duration (6 months - 1 year). • Tools (illustrator, sketch, zoom, figma,invision, google form).
The UX Process
UX design is about creating a great user experience (UX) following the UX design process. It’s important to adhere to the process. Skip a step and your users will suffer. Following the process not only improves user experience, it also benefits the communication between team members and stakeholders and prevents costly mistakes.
“If your not doing Qualitive research you are not doing UX”
L-UX HOTEL
The Progression Flow of the UX Diploma
Design progress
Phase 1: Research
Good design doesn’t happen by accident. It follows from a deep understanding of your users: their goals, behaviours and context. When doing UX research the emphasis is on qualitative research because it provides richer insights than mere quantitative data. To understand the prospective users of L-UX Hotel, I used the following research techniques. • Competitive Benchmarking •Online Survey • Usability testing
Project 1: Competitive Benchmarking
I looked at global brands and best-in-class competitors. I researched 4 hotels from multi chain hotels to botique hotels .This was a great starting point, as I was able to compare the booking flow and highlight common pain points and positive parts of the hotel booking user experience. Finding early information to help with the questions for the User survey.
Objectives
• Learn how best-in-class websites and apps solve the problems we are trying to solve. • Understand the conventions we should follow. • Highlight best practice that we should emulate. • Use the project materials to build your portfolio.
L-UX HOTEL
Project 1: Competitive Benchmark (desktop)
Intercontinental Hotels & Resorts - ihg.com/intercontinental
Positives:
Home page looks exclusive and inspiring. • Explore function for location and hotels is fantastic.
Negatives:
• Dont like the placement of Bonus points. • When scrolling down its very distracting. • Book now is messy and complicated. • Too much pop ups and overload of imformation. • Way to slow when loading options page. • when searching you have to put in destination with no help, also when it searches takes you to another page and says no hotels in this area. • You have to use back button to go back.
Conclusion:
Looked super inspiring but not very smooth or easy to book a hotel and room in the right location.
L-UX HOTEL
Project 2: Online Survey
The Key-point to the Online Survey, was too understand about broader perspective of users’ goals, behaviours and challenges, to analyse further in the design process.
The goal is to understand their motivations at the time of booking in the past, and their relationship with hotel booking process.
• Software used Survey Monkey/Google forms.
• A balance of Qualitative & Quantitative research.
• 9 Questions in total.
• 16 respondants.
L-UX HOTEL
Project 2: Online Survey
Elements mostly used are, pictures, price and trust pilot guest reviews. Over 85 % of people user filters as it makes it easier get what they want. More than 65% struggle when there is too much info shown on a page. People dont like to feel pressured to buy things or marketingpush ups. • People are very familiar with using booking.com and hotels.com and that web flow There was a couple of key findings to take away from the survey, people would like to use filters more but at the start of the booking process, make it easier to use and shown at the right time. Also photos are super important if used correctly can really help to get a feel for the vibe of the hotel.
Last two things dont like to much push sales or marketing during the process, and at least 60 % would consider becoming members if they had the right information at the right time.
L-UX HOTEL
Project 3: Note-Taking
The next step was to prepare a script for in-depth interviews to gain insights into the user context. The aim was to understand which Hotel-booking websites the users prefer to use and why. The script also included how many times users typically return to a website before making a purchase and how users share information when choosing flights as a group.
Note Taking (Pre recorded Usability test)
This project was really interesting i watched two Usability test that had been pre recorded with two different tasks for each test. The objective was to listen to the interviews and take objective and professional notes, So that all people reading the notes in the future can see the pain points and all positive points.
L-UX HOTEL
Project 4: Usability Test
I used the usability testing to gain some deeper qualitative insights into the usability of existing hotel-booking websites. The first step was defining my objectives and deciding what I wanted to achieve from the usability tests. I created a recruitment screener, a consent form and a script for desktop usability testing sessions. I read The ‘Mom Test‘ book wich helped me not to ask leading questions or closed questions i focused on In-depth A/B testing and comparative test. The one-on-one users interviews really helped gain real-life insight into their behaviours while performing tasks that were assigned to them to perform during the interview sessions.
Key Info (Usability Test)
• As the interviewer you had to stay really focused not to help the users when they where stuck in the flow. • Users struggled with tasks sometimes due to far too much options and messy page set up. • Marketing push ups seemed to distract and annoy users. • The users did not like to feel pressured to buy services when going through the flow. . • People really appreciate safe security mesures and smart defaults when paying for there booking. • The flow seemed to be in the wrong order according to the users.
L-UX HOTEL
Project 5: Affinity Mapping
It was time to organise and start making sense of my research data. Firstly, I watched the usability test recordings and took notes. I then wrote each point down on a post-it note. I also went through the depth interviews, competitor benchmarking documents and survey results and wrote more post-it notes. I stuck the post-it notes onto a wall in my home office and sorted them into categories to create an affinity diagram. Some clear category types emerged.
Affinity Diagram Workshop
I started by Sharing all my research with my college the day before the meeting and explained the aim was to go through all research an pinpoint on post-its key points. we wrote all key points and stuck them on the wall then started put post it into natural groups and take away any simillar points. By the end of the day we broke up into groups and then into a sequence.
FINAL NOTES INTO SEQUENCES
L-UX HOTEL
Project 6: Customer Journey Map
Task
The task was to translate the research captured from the Affinity Diagram. Then Filter the information even more into a more focused high level Customer journey Map.
Process
Filtering the information even more from the Affinity Diagram into more focused groups. I then documented the User goals, Behaviours, Pain points and Positives into the journey map. Then i measured each step of the experience by using Positive, Negative and Neutral. Record the process as a visual chart on top of the CJM.
Outcome
Identified the steps and journey of the customers process of booking a hotel. Filtered all research previously collected into User Goals Behaviours, Pain points and Positives , making it easier to find possible improvments to the design and flow of the software.
L-UX HOTEL
Project 7: Flow Diagram (Desktop)
The task is to create a Flow diagram using the information found in the previous projects. Taking into consideration of all the flaws and pain points that where found during the analysis. Addressing the users problems focusing on fixing the problems found during the research. Helping to Make a smooth flow that upgrades the users experience through a simplistic and minimalist approach. Making it easier to move smoothly into the design concept phase. For the purpose of this flow diagram, i focused on a high level desktop flow for the most common primary use case when booking a hotel room online.
L-UX HOTEL
Project 8: Interaction Design
I started rough sketching with a pencil and paper (paper prototyping), just to get a feel for the flow of the site design. Then I put everything into context to look a bit more like a website and asked my wife to go through the flow. The quick test shed some light to some flaws between the design and the flow which i updated . I continued with the second sketch more finalized still using pencil and paper and a ruler for a more close to the final design and flow.
Objectives
The navigation system used for this hotel website is a utility application simple and structured.
• Built from the flow diagram i created in the previous project and sketch the screens and screen by hand. • States for the users flow through the hotel booking site. • Addressed all issues and user goals identified in my research and analysis. • Learn how to use sketching as a tool for problem solving. • I Learned how to hand sketch which is a vital step before prototyping or digital wireframing.
L-UX HOTEL
Project 9: Prototype
After I hand sketched the interaction design several times on paper figuring out the design, flow and pain points, I then work through the design flow and got closer to solving the problems i have been researching getting closer to a final design. After sketching each screen state, I moved on to creating a low-fidelity prototype. This prototype could then be fed back into a testing/validation phase and iterated over time for improvements. Then i went to the Invision app and made a low fidelity working Prototype, gave to my wife and some friends to test the flow before moving on the Wireframing.
Code for the working Prototype
L-UX HOTEL
Project 10: Wireframes
For my final handover document of the Ux project, I created detailed wireframes that include all the rules, controls and feedback of the booking Hotel flow. Below I have presented just a few of the screens with their respective annotation.
Personal results and accomplishments
• Increased my knowledge of the UX design process. • Gained experience and practice of the UX design steps and methods. • Organized and moderated my first usability tests. • Have a better structure and clarity of the Ux design thinking process from start to finish. • Learned new skills on new Ux software (Adobe XD, illustrator, Sketch, Figma,google forms ,invision)
1) The text box has all information about the hotel room, it has a photo carousel when you click you will see all photos of the room in a larger scale.There is also a text box showing the price with an action button pay later to move forward.
2) The text box has all information about the hotel room, it has a photo carousel when you click you will see all photos of the room in a larger scale.There is also a text box showing the price with an action button pay later to move forward.
3) The text box has all information about the hotel room, it has a photo carousel when you click you will see all photos of the room in a larger scale.There is also a text box showing the price with an action button pay later to move forward.
4) The text box has all information about the hotel room, it has a photo carousel when you click you will see all photos of the room in a larger scale.There is also a text box showing the price with an action button pay later to move forward.
