Book it case study

TIMELINE

MY ROLE

PROJECT GOALS

Nov 2022 - Jan 2023

UX & UI DESIGNER

User Research & Analysis
Interactions
Visual Design
Prototyping
Testing & Handover

Improve the mobile app experience to:

Increase repeat traffic
Make the hotel booking experience very straightforward and uncomplicated
Increase sales by applying user friendly and clear payment process
Solve other competitors' problems and apply solutions to our product

BUILD

TEST

INTRODUCTION

Bookit is an online booking platform designed for hotels to offer their accommodation through a mobile application. It is also designed for travellers to have a pleasant and easy experience with booking their hotel stay.

It concentrates on solving other competitors' problems and challenges through thorough research and user testing to improve the user experience. The problem solutions are then applied to our product.

This mobile app was created as a part of my UX diploma course I recently completed. It focuses on detailed research and analysis, interactions, good structure and navigation, design principles, workflows, prototyping, and handover to the developer.

Anchor 1

01 RESEARCH

I started this project with the most essential part of product development - user research. I learnt from my experience that many businesses skip this process and move straight to development because it seems very long, and many don't know how to conduct a successful user research. This often leads to failure because:

" No design works unless it embodies ideas that are held common by the people for whom the object is intended."

OUR USERS

Before I started user research, I deep dived into our criteria for our desired users.

Individuals need to be 18 years or older
Both female and male, different age categories
Booked a hotel room online within past 12 months
Booked a hotel room online through hotel app directly
Users need to own a smartphone and go online every day
Participants need to be confident online

COMPETITIVE BENCHMARKING

View PDF

How are other hotel booking platforms solving the same problem?

First, I started the research with competitive benchmarking. I reviewed similar and well-known hotel booking platforms (Booking.com, Hotels.com, Trip.com) as well as other less popular hotel booking apps (Barcelo Hotel Group and The Doyle Collection). Not only did this help me identify how others are solving the same problems, but it also allowed me to understand what is standard and used in most cases, as well as what others could be doing wrong.

NOTE -TAKING

View PDF

Before carrying out my usability test, I learnt how to take notes in the most effective way. I completed a notetaking activity provided by UX Design Institute. I watched two usability tests, where users were interacting with two different hotel booking apps (Barcelo and The Doyle Collection), and wrote down all positive feedback, as well as pain points, context, past experience, most important criteria, and background of the participants.

This enabled me to practice note-taking before conducting my usability test.

USABILITY TEST

For this usability test I chose two apps I presented to the user - Booking.com and Hotels.com. My usability test took place in person, I used my camera to record and the phone screen - which the individual was interacting with - was being recorded.

Before the actual meeting with the users, I thoroughly prepared myself by writing down the scenario for each test as well as notes to remind myself what to ask in case I forget. My main aim was to ensure my user feels comfortable and the conversation is natural rather than scripted. I also followed the scenario myself a couple of times to make sure all tasks were possible to complete and familiarised myself with the app properly.

What to ask during the test:

I wrote down some of the key points I was going to ask during the usability test.

What are you seeing on this page?
What would you do next?
How does this feature, description, page make you feel?
What are you looking for on this page?
What would you expect to see next?
What do you think this feature does?
Remind the participant to think out loud
Ask them how they are feeling about the website/app and enquire if they understand different elements on the page

Short clip from the Usability testing with Kim.

CONCLUSION:

I really enjoyed this project and realised that we only learn from taking action and also how powerful is usability testing as not only we can listen to what users say but we also observe what they do.

I was able to see how important filters are and how much time they can save. I also noticed how frustrated users can get if the information is not displayed clearly or if they cannot find information they are looking for. For example, Kim - who I was doing the usability testing with - was unable to find a hotel that offers two single beds. It took her a while to find it. Providing simple features like more filters can make the user experience more reliable and trustworthy.

UNDERSTANDING THE PROBLEM

After conducting in-depth research, I noted issues the users are facing with our competitors' mobile booking platforms.

PROBLEM

Location confusion and no location filters available

Multiple individuals were confused about the location.

Location details were not stated clearly enough or were not present at all. Users also complained about not being able to filter location and select their hotel stay by entering the area they want to stay in.

IMPACT

Unclear location or inability to select the location brings confusion and delays the whole process. The user might lose interest in our product if he/she is confused or it takes too long to select or find the desired location.

"There is nothing that allows me to put proximity where the hotel is going to be."

Irrelevant currency - smart default not applied

Another pain point we discovered through usability testing was irrelevant currency. One of our users from Ireland complained that the price was listed in British pounds despite Euro being the currency in Ireland. The smart default should have been applied to prevent this problem.

IMPACT

Irrelevant currency can cause delays if the user must convert the currency outside of the app and the conversion might not be exactly accurate. This can make the user feel unsure and discouraged.

"Why does it show the price in British pounds, I am from Ireland, we use Euro."

Difficulty selecting dates

A few of our users found selecting dates and the app calendar confusing. The competitor's app was using a calendar where the user could only pick one date at a time. Then they had to close the calendar and open it again to select check-out date. It took a while for the user to figure out.

IMPACT

Not being able to select dates quickly and having to spend time figuring out how the calendar works can bring frustration to users. Solving this problem can help the user select dates faster without any confusion.

Disorganised and confusing content, too much information on a single page

Less is more. Too much information is not always good, and our users complained about seeing the same content twice on the same page and too much not so important information they had to scroll through to find what they were looking for.

IMPACT

Too much irrelevant or unimportant information can cause users to get lost easily.

"The app is very user-friendly, well except the calendar."

"The page is a bit cluttered, it's hard to find what I am looking for."

ANALYSIS

02 ANALYSIS

Analysis is the second step of the UX design process. After a detailed user research, I needed to define the problem I was attempting to solve.

I chose two most important analysis techniques - Affinity diagram and Customer journey map as they helped me to organise the data into groups or themes based on their relationships.

AFFINITY DIAGRAM

View PDF

As a first analysis technique I used an affinity diagram. I started writing down all the data - context, behaviour, positive interactions, pain points, confusions, goals, etc on sticky notes. Then I started grouping them into related groups.

Doing an affinity diagram helped me to review my research and learn how to put structure on qualitative research data. It saved me time when looking for positive feedback, pain points or specific groups like filters, map, or description of the hotel. Also, I knew grouping them would be helpful when it comes to creating a customer journey map and sketching my screens in the next stages of the UX design process.

CUSTOMER JOURNEY MAP

View PDF

I then moved on to creating a customer journey map by using all the data I gathered in my affinity diagram, note-taking exercise, and usability test. The customer journey map allowed me to deeper analyse and put more structure on the analysis of my research data I collected in my previous research techniques and affinity diagram. I created a graph to visually show how the experience went up and down and analysed their goals, behaviour, context, expectations, and positive interactions.

The customer journey map helped me to learn how to translate research data into a structured document.

PRODUCT VISION AND SOLUTION

After analysing our competitors' pain points and problems, I came up with solutions. My goals are to:

Make sure there is a location filter clearly visible and easy to find, so users can filter their preferred location
Ensure the location can be seen immediately with no need to search for it
Apply smart default for currency concerns, so price will update depending on where the user is from. There will also be a button that enables the user to convert the currency if needed
Make the calendar user friendly and easy to understand so user can select dates fast and with no confusion
Ensure the content is relevant, and only necessary info will be displayed. The most important information will be at top of the page

DESIGN

03 DESIGN

After research and analysis, I started designing. My overall objective was to fix the issues I had uncovered during my research that were highlighted in my affinity diagram and customer journey map.

I started the design process with a flow diagram.

FLOW DIAGRAM

View PDF

My goal was to define a high-level flow for the mobile app and address all the issues highlighted in my customer journey map.

I sketched the user flow in Figma. Each screen or state is represented by a box and each interaction by a circle. I sketched the flow from the homepage to the end screen - confirmation. This was a great way to visually present the flow of my app.

DESIGN SKETCH

View PDF

Next, I sketched the screens for the mobile app hotel booking process before prototyping. I decided to use Procreate for my sketches as it's much faster and drawing it digitally enabled me to erase or duplicate very easily. Sketching is a fast and great way to start designing because at this point it's very easy to make any changes if needed. This made me think of the layout and all the features and interactions that I want to include in my design.

PROTOTYPE

04 PROTOTYPE

Time to create the prototype... Once I had an idea how I was going to solve the problem I started creating a medium-fidelity prototype in Figma. I designed all the pages I sketched before from the home page to the end screen. At this point I wasn't focusing on the design as much, I mainly focused on the functionality of the interactions and prototype. My goal was to prove that what I designed is possible... well not only possible but also easy to follow.

MEDIUM-FIDELITY PROTOTYPE

View here

ANNOTATIONS

View here

Finally, I ended the UX design process with annotations. I created a set of annotations, containing all the necessary details a developer would need to build the application accurately. I used my wireframes I had created earlier and added annotations next to them.

VALIDATE

05 VALIDATE

As a final step I conducted a usability test on my prototype. I sent my prototype to a few people - friends, family, and colleagues to test it and see if there were any problems or if they could easily flow through the prototype with no issues. This helped me to make informed decisions about the app design.

REFLECTION

The UX design course and this project have taught me many valuable lessons. One thing I know about myself is that I learn the most by doing. I love creating projects and learning as I go rather than trying to learn the theory only to forget soon after. I love solving problems and finding solutions. I was able to apply this in my own project, particularly whilst prototyping.

The journey to creating this app from scratch was challenging but opened my eyes to design trends and functionality. I learnt about the whole UX design process in detail and realised how important user research and analysis is. Only by conducting user research are we able to find the problems that need fixing.

When I was starting out, I knew a lot about the user interface but only a little about user research. As much as I like designing, I was surprised how much I enjoyed the UX research - analysing and solving problems. The usability test was my favourite part, as well as the most valuable experience. One of the most important lessons I learnt was how crucial each step is, whether it is the research or prototyping: each step has its importance and should not be skipped.

While creating flow diagrams, sketches, wireframes and prototypes I realised that UX design takes time and cannot be rushed. I put so much effort and time in creating this mobile application and doing the research. I found something to alter every time. UX and UI is never ending, there is always something to improve.

Overall, I really enjoyed this project and am super excited to apply what I've learnt in my next projects.