UX Hotels
Designed a responsive web-app as a project during my UX Design Institute studies. By applying learned processes and skills, I developed a booking platform for a boutique hotel.
Timeframe: Sep 2021 - Dec 2021. Tools: Figma, Adobe Xd, Miro
Research
To begin the project, I conducted a competitor analysis on five boutique hotels, noting details such as call-to-action placement, and their flow from landing page to payment. I recorded this information in a Figma file with screenshots, to be used later for analysis.
I then conducted four remote usability tests on these sites, recording users' goals, context, behaviors, positive interactions, and pain points while booking a room.
Analysis
Using my research data, I created an affinity diagram. I wanted to visually organize my qualitative data so I could identify patterns in the users' experiences.
Common themes in users' experiences emerged; for instance, landing pages overwhelmed users with too much information. Price and discounts were significant factors in conversion. Additionally, users would always search for reviews before making a booking.
With the qualitative data now structured, I created a customer journey map. Here, I identified users' mental models, such as the need for multiple room pictures, a booking summary, and the ability to easily edit their booking at any stage.
Design
I designed a user flow for the hotel room booking process. This was iterated through multiple versions, investing significant time to ensure I touched on the items uncovered in the customer journey map.
I sketched detailed wireframes, cutting out components to show different screen states a user would flow through to complete their booking.
Prototype
I created a low-fi AdobeXd prototype. This helped me focus on flow and interactions, and it allowed me to gather feedback before starting more detailed designs.
However, two usability tests revealed an issue with my user flow.
The issue: Initially, I removed the "choose your hotel" screen to speed up the booking process, but in usability tests, users expected to see and select their hotel, even if there was only one option.
I incorporated this feedback by redesigning the flow to include the 'choose your hotel' screen.
I created a high-fidelity prototype for UX Hotels, which included a logo, and typography.
Validation
I validated the solution over 3 usability tests on the hi-fi prototype. The insights from these final tests were very valuable.
All users found the flow easy to follow, liked the summary page, and appreciated the ability to make edits. However, two out of three users didn't like the buttons and thought the colours of them were distracting.
So, I made some final updates to the UI before creating a product spec.
The Final Product
