UX DESIGN CASE STUDY / BUILDING A RESPONSIVE WEBSITE AND AN APP FROM THE GROUND UP
The client was a new hotel group looking to create an online booking experience that is simple, accessible, and based on a deep understanding of their target users. The task was to design a new website and mobile app for the client, focusing specifically on the hotel booking process: how users search for and book hotel rooms online.
Platform: mobile app and responsive web design for desktop, tablet, and mobile
Role:sole product designer
Hotel booking is an industry that can really benefit from UX. Booking a hotel room should be a simple process, but, as research has shown, sometimes it can feel too complex.
Understanding the problem
To better understand the hotel booking process for users, three research methods were conducted:
The first step was to survey the hotel booking landscape, analyze how best-in-class products are solving or not solving booking process problem, understand current conventions to follow, and identify the strengths and weaknesses of the current products.
Four competitors, three direct and one indirect, were selected for comparison: Marriott, Hilton, Wyndham, and Airbnb.
The areas of focus were the homepage, search and select pages, and the booking process up to checkout.
Benchmarking provided good examples of how major brands are solving the searching and booking process for their users. Many current conventions could be observed, particularly in calendar and hotel page designs and in general user flow.
Possible areas of exploration and improvement:
The online survey was designed to learn more about the goals, behaviors, and context of users when booking hotels. Data gathered from the survey could assist in making more informed design decisions.
What are users trying to do?
Is anything preventing them from doing it?
What other features would they like to see?
Please see the slide deck for a presentation of the survey materials and results.
All the users that responded to the survey were able to complete their task; however, most reported encountering some difficulties or pain points along the way. Most users felt they had to utilize multiple tools in order to best accomplish their goals (comparing prices or finding more information).
Possible areas of exploration and improvement:
Additionally, most users considered their options for several days and sometimes more than a week before making a final decision.
Usability testing is the most powerful tool a UX research has. Rich insights can be gained directly from users, and these insights inform design decisions, which makes better products.
Usability tests were set up along with depth interviews as part of the session. These tests and interviews allow learning about users' goals, behaviors, and context when booking on a website or app.
Six products were used in the tests and interviews: Marriott, Hilton, Wyndham, Airbnb, Barcelo, and The Doyle Collection.
Detailed notes were taken to highlight key insights from each session for easy referencing.These notes are valuable data regarding users' goals, behaviors, and context while booking hotels, as well as any positive interactions and pain points.
Some of the key findings were as follows:
As far as positive insights that were encountered, users appreciated when there were ratings and reviews of the hotels, especially TripAdvisor ratings, and users enjoyed viewing nice imagery.
Defining the problem
With the collected research data, it was time to analyze the findings.
An affinity diagram and a customer journey map can be used to synthesize the research results which can then be turned into meaningul, actionable insights.
Affinity diagrams are a great way to sort through large volumes of data for further analysis and making design decisions.
All the research data was broken down into individual units and each piece was written on a digital post-it note in Miro. Post-its were then organized into related groups from the patterns that emerged after reviewing the Notes. Next, the groups were labeled. Finally, groups were arranged in chronological order.
The chronological order helps set the stage for a user journey maps, which provides more structure and details the user experience through the sequential steps of planning and booking a hotel.
It was found that users undergo a journey that could be grouped at a high level into thinking, researching, considering, deciding, and completing stages.
As the user journey map shows, most hotel booking products start with a standard approach, but they take different approaches in design when it comes to displaying results, hotel information, and fees. Users are experiencing frustration and the most difficulty when having to choose between and compare options.
With a full understanding of the problem space, it was time to ideate and design possible solutions.
Here, a user flow diagram, a site map, and interaction design wireframes were created with the objective to fix the issues that were uncovered during the research phase.
Each card having a border with a drop shadow also helps them stand out from each other so more spacing is not really necessary.
Mobile-first design was utilized to deliberately focus ont he most essential features and prioritize the core functionality.
Here, the problems and goals uncovered during the research phase were addressed while keeping in mind the common conventions that were already working well for users.
This was also the time to plan the navigation style and use sketching as a tool for further problem solving.
The next step was fine-tuning the design details and creating a more lifelike model of how the product will look and function.
A medium-fidelity prototype was created to evaluate the high-level flow, screen layouts, text, and basic interactions for validation before making a high-fidelity version.
Design is an iterative process, so a usability test after making a medium fidelity prototype is a good opportunity to validate design choices and learn what is working and not working before investing additional energy into a high-fidelity prototype. In addition to solving the user problem, the product should be a pleasure to interact with.
This round of testing investigated the Ohana Hotels medium fidelity prototype to evaluate how well the design choices were improving user experience while booking a hotel.
With the results from the latest round of usability testing, a high-fidelity prototype could be produced to better represent how the actual products will look, feel, and be interacted with.
A high-fidelity prototype was created to show how the actual product would look, feel, and be interacted with by users. A responsive web design was created with breakpoints for use on a desktop, tablet, or mobile phone.
Since most users spend multiple days researching and considering their options, it is important that users can access the product from multiple devices, no matter where they are at the time, and easily continue their search from where they left it.
Below are the responsive screen designs at different break points.
Research showed most users spend multiple days considering and searching for their hotels. That's why it is so important that the website works on any device. Users may be researching their options while they are at home, at work, or on the go.
A high-fidelity mobile app prototype was created for if Ohana Hotels released a native app.
Since research showed most users spend multiple days before finalizing their booking, it is imperative that users are able to quickly resume their search from where they left off. Being able to continue with dates and guest information remembered further smooths the flow.
The searching modal serves as a progress indicator and a convenient in-search navigation bar so users can quickly edit their criteria as well as view their progress.
Most users wanted to easily be able to see the locations on a map and many users had trouble finding the map on the results page. Defaulting to screens with a split list / map view makes it easy for to know both are available.
Whether users are on the expanded map display or the expanded list display, it is always clear that the other option is available. A list slider remains at the bottom of the map on the expanded list, and the expanded list has a floating map button in a bold color.
Each hotel detail page also includes an expandable map dispalying the hotel's location. This way users don't have to return to the result page to remind themselves of where it is, as many are not familiar with the address and streets of the place they will be staying.
On the hotel detail page, relevant information is neatly contained and categorized with helpful icons. Many users felt overwhelmed by the amount of information, had trouble finding information they were looking for, and wanted icons to easily scan for what they are looking for.
One of the last steps was to prepare a static wireframe document detailing the function and form of the elements and interactions in the designs.
These annotations will provide developers and/or UI designers with much of the extra details they would require to efficiently develop the app.
This case study shows the entire process of building a native app and responsive website from the ground up.
This project shows the importance of research to UX.
Fundamentally UX is a problem-solving discipline. It is about researching users' problems and designing solutions to solve those problems.
Following UX best practices minimizes the risk of building unnecessary products and the risk of an unsuccessful product.
Usability tests show that you can gain rich insights into users' goals, behaviors, and context.
Finally, users want to products to help them reach their goal, whatever that may be - great design can help the product do so.