Overview
During my time studying at the UX Design Institute. We were tasked with researching and designing an app centred around Hotel stays, specifically the process of booking a hotel room.
My goal was to use the key methodologies to help create a better user experience for people booking a hotel. This was left open for us to determine through our research and analysis.
Role
Product Design
Duration
6 Months
Team
Solo Project
01 // Research
🔎 Goal of research
Find what apps and services people use to book hotel rooms
Understand what pain points they were facing when choosing a hotel and room
Find where in the flow users are getting annoyed or are being inefficient using the app
💡 General Insights
91% of people surveyed used a hotel aggregator instead of a specific hotels website
100% of participants who completed the usability test had a ‘dealbreaker’ when choosing a hotel
❓ Online Survey
92 Responses to online survey
73% of people complete the whole survey
💡 Insight
Most people used hotel aggregators instead of specific hotel brands
Majority of people choose Booking.com as it was convenient.
💬 Interviews
Interviewed 3 people
Each interview averaging out at 40 minutes
💡 Insight
Each of the participants had a ‘dealbreaker’ when booking a hotel room
They used booking.com and other apps to browse hotels and then Google Maps to have a look around the area in which that hotel is stationed
📱 Usability Tests
All participants avoided using the filter options
Spent a lot of time reading descriptions to find info
💡 Insight
Users loved viewing the images and made decisions quote quickly based on images
Liked to read reviews, all 3 said they read reviews before booking
02 // Analysis
I found the analysis stage very useful when it came to collecting all of the data that I had gathered during the research phase. I realised at this stage also that a need to take notes better and highlight key findings better within those notes at the time of making them.
🔎 Goals of Analysis
Find what apps and services people use to book hotel rooms
Understand what pain points they were facing when choosing a hotel and room
Find where in the flow users are getting annoyed or are being inefficient using the app
💭 Affinity Diagram
💡 Insights
Majority of people ignored filters
Booked for groups - friends, partners or family
Needed certain requirements (dealbreakers) met or they wouldn’t book that hotel
😡 Customer Journey Map
💡 Insights
Allowed to clarify where in the journey the participants were getting stuck
Found this exercise time consuming. Already had a good idea of pain points
Users were generally happy with their experience - there were just a couple of things slowing them down when browsing
💡 Key Insights
03 // Design
As we now knew what needed to be tackled, my job was to create a solution to help them get over the time consuming hurdle of finding a hotel that suits their needs as well as the needs of the people potentially joining them on the holiday.
🔎 Goals of the Design Stage
Brainstorm ideas and sketch them to help me make more informed decisions.
Create a flow that will help me to design a prototype clearly
Solve the problem of users not using the filters and over-reading descriptions
💡 User Flow Insights
Time consuming browsing = Set all ‘dealbreakers’ at the beginning of the app so any recommendations fit your requirements
Booking for multiple groups = Allow the user to quickly and easily switch between groups
Has to exit app for activities or view city = Book tickets to events and areas within the app
💡 Sketched Wireframes Insights
The user flow allowed me to explore solutions without the time consuming part of designing UI or structure. As I moved onto Wire-framing and Interaction Design, I could now dive deeper into how these solutions would look in the form of a quick sketch.
Needed to cut down amount of screens
Needed a progress bar as users won’t know where they are
04 // Prototype
As most of the major problem-solving was done, my next task was to built out the solutions I had created. The aim of this step was build a UI that followed users mental models of how a hotel booking app worked, while also implementing my new idea on top of it. It should be seemlessly transition.
🔎 Goals of the Interactive Prototype
I wanted to create an experience that would ensure the user didn’t get board
Build a prototype that the developer can use to help them develop
Build an experience that was close to production level apps so we could test it on users
💻 Developer Handover
Build a solution is one thing, but making sure that it can be built the way you designed it is another. My detailed documents to the developer included:
Animations
Behaviours of buttons and users flows
Sizing of components and text
The course required a PDF version, however, I used a software called Zeplin to build out the annotations first as it was a superior way of handing over the instructions.
Conclusion
Observing
Listening and observing for pain points and problems isn’t always easy. Sometime the real annoyance people face is hidden within the cracks and nothing something they will show in an obvious manner.
On-Boarding
Onboarding process needs to improved. I am creating a new mental model for them to follow so I need to add more details surrounding how it works and how it benefits them.
Figma Components
Need to improve on create components on Figma. I found myself creating copying and pasting UI Elements that could have been turned into re-usable components
Screen States
Double and triple check User Flows and how many screen states are needed. I found myself missing screen states when it came to the final design. This wasted time and slowed down the process.