Hotspot.
Role: UX Research, UI/UX Designer
Project type: Conceptual case study
The result of a 5-day design sprint, Hotspot is a community-driven mobile app that allows its users to pick out their holiday accommodations with ease.
Objective
Explore problems in the hotel space and create a new experience.
Narrowing the Scope
I targeted three possible areas where users might encounter issues with and decided to focus around this areas in my research.
Hidden costs
Room Accuracies
Booking process
Surveying the Industry
With the 3 areas in mind, I did a competitive analysis on two of the top hotel booking apps, Expedia and Booking.com.
Red areas mean unavailable. Green means available.
Interviewing the Users
Conducting the above analysis enabled me to narrow down my interview questions.
Toggle the accordion menu to view the questions I have prepared for my interviewees for each area.
-
Let’s talk about hidden costs, were there times they are inflicted on you? How often?
In which part of the booking process were the hidden costs shown?
-
Let’s talk about rooms, what features do you look for when booking a room?
Tell me about the time when the room that you booked did not meet your expectations. How did you feel?
-
Walk me through the process of picking a hotel for your vacation.
What mobile travel booking apps do you use to book your hotel rooms?
What do you prioritize when booking a hotel?
Are there any issues you face in the process of booking a hotel?
Results
Upon completion of the interviews, the top pain points were as follows:
Lack of photos of important features of the room
Unavailable amenities
Does not find the room size numbers useful at all when picking a room
Not aware of hidden costs until check-in
Problem Statement
Based on the research results, I crafted my problem statement.
Tourists often face difficulties when booking hotel rooms due to lack of transparency in the booking process. This can lead to unpleasant surprises upon arrival, negatively impacting their holiday experience.
Persona Creation
Based on my problem statement, I crafted out my persona. This will help keep me focus on the wants and needs of the targeted users of my product.
Creating Hotspot.
At this stage I solidified my concept of Hotspot, focusing on the ‘what’, ‘how’, ‘when’, ‘where’ and ‘why’ to explain its potential existence.
User Flow
Before working on the wireframes, I prepared a user flow that will address the concerns derived from my interview results.
Low-fidelity Prototype
Upon completion of the user flows, I started working on my low-fidelity wireframes and later, prototype.
Addressing the Problem Statement
Below is an infographic on how the Hotspot app addresses the problem statement.
Brand Guideline
After finalizing my low-fidelity wireframe, I started working on the brand guidelines in preparation of creating my high-fidelity wireframes.
Font
I wanted a typeface that is clean, minimalist, and most importantly, easy to read.
The Poppins font checked all the boxes.
For the app, I used its bold and regular typefaces.
Color Palette
I chose a predominantly blue palette that embodies trust.
Oranges are reserved for error and call-to-action buttons.
This palette also adheres to the Web Content Accessibility Guidelines (WCAG), catering to the visually disabled.
Buttons & Field States
Buttons and field states are indispensable to any app. Hotspot is of no exception.
Thus I made it a priority to make sure their every state is clearly communicated to the user.
High-fidelity Wireframes
Now that I have a clear focus on the look and feel of the brand, I proceeded to work on the high-fidelity wireframes.
Room Details
The room details page follow a hierarchal structure based on results received from interviewees during the primary research stage.
Since room accuracy and hidden costs were a huge concern, User ratings and final pricing take priority, appearing just below the name of the hotel.
Sizing no longer is given in numbers, but in icons, showing the ideal number of luggage and customers the room an comfortably accommodate.
Lastly, users can see reviews in detail as well as pictures that other users have taken of the hotel room.
Checkout Process
Once the user decides on the room, they can tap the ‘select this room’ button to begin the checkout process.
The first page of the checkout process displays the booking details, prompting to user to check if all details are correct.
The next page shows the price breakdown. Here, the final price is shown.
The following page will prompt the user to fill in their preferred form of payment.
High-fidelity Prototype
Due to time constraints of the design sprint, the high-fidelity prototype showcases only the check-out process.
Moving forward, I aim to continue to work on converting the rest of the low-fidelity frames to high-fidelity ones.