HotelsOnline
How can we check rooms availability and book rooms of our choice?
Project Overview
Project Overview
Founder, Product Designer, Front-end Development Research, Usability Testing.
Tools
Figma, FigJam, Adobe Illustrator, Adobe Photoshop, Protopie, Paper Pencil.
Teams
Back-end Engineer,
UX Designer,
Myself
Duration
4 months - Ongoing
How it started
During my trip to Florida last year I had an unpleasant experience staying at the hotel. I started diving deep into it and found out that the majority of users are complaining about not finding accurate information. Also, people are frustrated because they can’t check the availability of the rooms online. At HotelsOnline, We are making it more fun to book a hotel room online.
Introduction
As the founder and only designer in the team, I juggled a variety of roles including researching the problem space and users, ideating on the MVP and features, and managing the roadmap. Recently, I crafted a high-fidelity prototype (proof of concept) of our MVP used to raise over $50,000 in investments in the span of 2 months. We have hired a UX Designer and Back-end Engineer to develop the front-end of the App for IOS and Android on React Native.
The design process we follow
Research & Understand
Learn about the problem & understand the possible solutions.
Sketch & Wireframe
Sketch out the product to align the user needs.
Design & Prototype
Decide the designs and convert into a prototype.
Test & Developement
Launching the application to the market
Research & Understand
the existing process and the potential improvements.
Competitors Analysis
I started researching existing hotel booking apps such as booking.com, Airbnb, Expedia, and Agoda for analyzing UI, UX, User Flow, and Key features. Also, what works for them, and what doesn’t, will give a guide on how to set up a good base for creating a new app from scratch.
User Reviews
After I went through the app and its features, I checked customer reviews to find out their challenges and struggles.
Survey & Interviews
The managers of 5 hotels participated in on-site interviews to gather information about their software and challenges. With their help, we targeted 32 of their clients via an online survey to gather their side of struggles and challenges.
However, they provide this exceptional service only to their VIP or Platinum users.
Key takeaways from the research
Summarizing the key takeaways from the research, I have gathered the following data:
Sketch & Wireframe
Based on the research I came across many different scenarios. I crafted personas with different scenarios that have different needs and goals. This will help to focus on each scenario’s goals and needs to make their experience better.
Jane Cooper
Knows the dates and destination of its trip.
Attributes
- Frequent User
- Corporate Employee
Goals
- Room Selection of own choice
- Satisfactory Stay
Concerns
- Correct information
- Free Wifi
Jane Cooper
Knows the dates and destination of its trip.
Attributes
- On Vacation with Family
Goals
- Reasonable Price
- Quality and Facilities
Concerns
- Room Selection of own choice
- Complimentary Breakfast
- Cleaning and Safety Practices
Jane Cooper
Knows the dates and destination of its trip.
Attributes
- Backpacker
- Holiday Couple
Goals
- Long stay deals
- Location & Room Types.
Concerns
- Nearest Tourist Attractions
- Property Amenities
User pain points
- Do they have any rooms available?
- How do I book a handicapped room?
- Ugh! Too much information and it is very confusing.
- How do I select the room I want?
- How do I get in the room without going to the front desk?
- It is very difficult to get a refund and contact customer service.
- How do I know about the events happening around my hotel?
Customer Journey Map
decide possible solutions.
User flow
before, taking into consideration the customers and the professional platforms.
Wireframe
before, taking into consideration the customers and the professional platforms.
- Edit fields to search for hotels, date, room and number of members selection.
- After completing step 1, search button will navigate to search results based on entered information.
- Shows entered information to search for hotel.
- Shows hot deals with hotel’s image name and price.
- Shows more hot deals.
- Navigation panel with home, account information and notification tabs.
Design & Prototype
mockups to create a prototype of the application to test and validate with users.
Typography
modular type scale
Buttons
Forms
Alerts
Icons
width with 2px stroke weight
Spacing
to define dimensions, padding, and
margin of elements.
Mockups
Based on the design system we created, below are some of the screens we designed.
Prototype
Below is a GIF for proof of concept MVP. This prototype was created using Protopie. Click the
link to open the prototype and test it out.
https://cloud.protopie.io/p/5acc1d136a
Test & Validate
I used the above prototype to check usability testing with users to gather more feedback. I went to the hotel managers who participated in an interview and tested this prototype with them and gather their insights on the MVP.
Furthermore, I presented a case study and prototype at “Touro GST ‘s UX/UI Design Showcase” organized by Touro College to leading UI and UX Designers in the field to receive criticism and recommendations. I was awarded as “The Synthesizer”.
Some key takeaways from
this project.
Importance of personas. Personas are crucial in UX design as they provide a user-centered framework, helping designers empathize with and design for the diverse needs and behaviors of target users.
Flow first, details second. Prioritizing flow first and details second in design process ensures a seamless and user-centric experience before diving into specific elements or visual elements within a design.