TIMELINE
Nov 2022 - Jan 2023
MY ROLE
UX & UI DESIGNER
-
User Research & Analysis
-
Interactions
-
Visual Design
-
Prototyping
-
Testing & Handover
PROJECT GOALS
Improve the mobile app experience to:
-
Increase repeat traffic
-
Make the hotel booking experience very straight-forward and uncomplicated
-
Increase sales by applying user friendly and clear payment process
-
Solve other competitor's problems and apply solutions to our product
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.
UNDERSTANDING THE PROBLEM
After conducting in-depth research I noted issues the users are facing with our competitors' mobile booking platforms.
-
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 the 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.
"Why does it show the price in British pounds, I am from Ireland, we use Euro."
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.
-
Difficulty sellecting 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.
"The app is very user-friendly, well except the calendar."
-
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 page is a bit cluttered, it's hard to find what I am looking for."
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
01
RESEARCH
User research is an essential part of product development and can not be skipped. Many businesses skip this process and move straight to developement because it seems very long and many don't know how to conduct 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
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, it allowed me to understand what is standard and used in most cases, as well as what others could be doing wrong.
![Booking.com [Recovered]-02.jpg](https://static.wixstatic.com/media/ea3a32_aea8b1678b034b93bcb37f9484ddc1a3~mv2.jpg/v1/fill/w_278,h_379,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/Booking_com%20%5BRecovered%5D-02.jpg)
![Booking.com [Recovered]-01.jpg](https://static.wixstatic.com/media/ea3a32_424051bdb7894a5fad590c7ce1febc05~mv2.jpg/v1/fill/w_372,h_299,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/Booking_com%20%5BRecovered%5D-01.jpg)
![Booking.com [Recovered]-03.jpg](https://static.wixstatic.com/media/ea3a32_5e5035d62d44457fb0a9cd974e257706~mv2.jpg/v1/fill/w_271,h_381,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/Booking_com%20%5BRecovered%5D-03.jpg)
NOTE -TAKING
Before carrying out my usability test, I learnt how to take notes in the most effective way. I completed a note-taking 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
The usability test is a very effective qualitative and observational research that presents the product from user's perspective. It challenges or validates assumptions, unites stakeholders behind a common cause and is cost effective.
What I learnt from Usability testing:
-
What users are trying to do - their goals
-
What users do - behaviours
-
The context of use - the environment
-
How the product helps them achieve their goals
-
What pain points can be removed
-
How the product compares to the competitors
" Usability is about people and how they
understand and use things, not about
technology."
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:
Open ended questions are the best way to go. Try to avoid leading questions. We want the user to be as open and honest as possible.
-
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
A good usability tester will:
-
Ask open ended questions
-
Embrace the silence
-
Probe on problem areas
-
Have confidence
1. Scenario - Booking.com
-
You live in London and are planning a holiday break this summer
-
You are travelling to Phoenix with a partner for a week
-
You have already booked the flights to Phoenix on June 12th, returning on June 19th
-
You would like the hotel to be located close to the centre of Phoenix
-
You would like to make the payment on arrival, rather than paying upfront, with the possibility to cancel the room, if needed
-
You would like a room with breakfast included
2. Scenario - Hotels.com
-
You are planning a long weekend away to Italy in April next year
-
You don’t have any flights booked yet, but you would like to go on the 2nd or
-
3rd weekend in April, Friday to Monday
-
You don’t have particular area of Italy in mind but you would like to stay close to the beach
-
You are travelling to Italy with a friend
-
You would like to book a twin room with breakfast included
At this point I was ready to meet my first participant - Kim, a young woman who lives in the UK and likes to travel a lot. After meeting her outside of the coffee shop I set up my camera and prepared for the usability test. Kim was already familiar with what was going to happen as I had explained it to her before meeting her. I had to make sure she was 18 years old or over and that she was comfortable with being recorded. I gave her a consent form to sign before we started.
Then I welcomed her and explained to her once again the setup and what we would be doing, and asked her to comment loudly and be as candid as possible. I asked Kim some background questions about her past travel experience and what app she uses to book her accommodation before starting the tasks. Then I gave her my phone with the Booking.com app and we went through the app step by step, starting from the homepage, and ending on the review page. We repeated the process with the Hotels.com app.
I saved my recording so I could come back to it when doing the Analysis.
Short clip from the Usability testing with Kim.
CONCLUSION:
I really enjoyed this project and realised that we only learn from taking action. I thought I was perfectly prepared before the interview, but that wasn't the case. I came across some difficulties. I was meeting the interviewer for the first time and suggested we could meet in a coffee shop which wasn't the best idea. All coffee shops in London are very busy and I quickly realised that it is going to be a challenge to pick a quiet place to do my usability testing. At the end we decided to stay outside, but the traffic was still very loud and distracting.
Other than that it was a great experience, I very much enjoyed it and Kim was absolutely amazing! It was interesting to see how she interacted with the apps and her goals and behaviours. I realised how powerful usability testing is, as not only we can listen to what users say but we also observe what they do.
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 the most important analysis techniques - Affinity diagram and Customer journey map
AFFINITY DIAGRAM
As a first analysis technique I used an affinity diagram. The purpose of the affinity diagram is to organise ideas and research data into groups. First, 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.
CUSTOMER JOURNEY MAP
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.
03
DESIGN
After research and analysis comes design. 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
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
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.
04
PROTOTYPE
Time to create the prototype... Once I had an idea how I was going to solve the problem I started creating 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.
MEDIUM-FIDELITY PROTOTYPE
ANNOTATIONS
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.
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 are were problems or if they could easily flow through the prototype with no issues. This helped me to make informed decisions about the app design.
