SimpleBook: A Hotel Booking Site

Introduction

SimpleBook is a straightforward booking platform that allows users to reserve hotels or other accommodations during their travels. Unlike many complex booking sites, SimpleBook focuses solely on booking services, providing a clean and easy-to-navigate experience. This project was an educational endeavor completed during my time at UXDI, where I applied my passion for travel and booking to create a user-centric solution.

UNDERSTANDING THE PROBLEM:

The primary challenge was to design a hotel booking site that would meet user requirements while standing out against more complex competitors. Most existing booking platforms were overly complicated and failed to offer a seamless experience. Users often faced difficulties due to a lack of essential information and inadequate control over the booking process. This project aimed to address these gaps through a simple, yet effective, design approach.

Competitive benchmarking

The first step of the research was competitive research. To gain insights and explore our competitors, I identified 4 of them and took user flows with note-taking. In research, both market leaders and prominent local sites took part. Most of the booking sites are complex and miss the nuances, which are very painful for users, e.g. local sites don't care about language and currency variety.

Interviews

After benchmarking I continued the research with user interviews. I prepared an interview script with 26 open-ended questions, focusing on my target audiences’ values, motivations, and daily routines. I used 2 sites in each interview: 1 famous and 1 local. In 3 days, I recruited and interviewed 4 users remotely.

The questions included both about users (to understand the context) and their preferences and behaviors (to identify their goals and pain points).

Affinity diagram

Here, when raw data was arranged, I found out that:

• The first impression is crucial. The landing page and the search bar must work perfectly.
• Users need clearly designed filters and an informative map to feel in control of their booking process.
• They need complete information about the room and good photos to visualize and compare.

Customer journey map

Here, in the journey map, I structured the data by steps from making the decision to check-out. User goals, behaviors, and pain points are clear at this point. Going through the further steps, I will come back here periodically. The map revealed numerous user pain points especially in search and room selection steps. Considering these facts, I decided to pay more attention to these steps in the future.

So, after defining the user behavior, goals, and pain points through the customer journey map I learned that:

1. Users have a common issue with the calendar on the homepage.

2. Users want to see a big, informative map.

3. Users want to see a lot of photos of the hotel rooms from different angles.

4. Users want complete info about the final price and check-out.

The next step is making a USER FLOW

As the case was educational, we were asked to do the main flow, explaining the state of each step. So here is the main user flow from the homepage to the check-out page.

Sketches

After all these research steps, it's time to visualize all thoughts into sketches. The main purpose was to summarize all information and test the idea. Then I transferred the paper sketches into the computer and made some annotations for conditional stakeholders.

Wireframes

Using Balsamiq, I translated my first sketches into low-fidelity wireframes. At this stage, the wireframes were defined enough for some user testing. Based on 4 tests, I’ve made a few alterations and moved on to create high-fidelity prototypes.

UI Design

In parallel with usability testing, I created the final screens in Figma. I went back to the first iterations and compared the final results with the research data to determine whether I covered the goals.

Usability Testing

I created a functional, high-fidelity prototype of the flows using Figma. At the same time, we started recruiting subjects for the test who fit our criteria. We did 4 usability tests in the first round and 3 after iterating on the issues that we’ve identified:

problem: The add-on section is hard to find

3 of 4 users had difficulty finding the add-on section. It was on the check-out page.

solution: I decided to change the placement of the section

I replaced the add-on section and merged it with the room selection page.

Finally, I made annotations for the developers and other documentation.

Result

The final design of SimpleBook achieved the goal of creating a user-friendly, efficient booking platform that stands out from its more complicated competitors. By focusing on a research-driven, user-centric approach, I was able to craft a solution that meets both user needs and business goals. The project also provided valuable learning experiences, reinforcing the importance of thorough research and iterative design.

Thanks for watching! 

You can request the Figma link of the prototype if interested.