Nov 2022 - Jan 2023
UX & UI DESIGNER
User Research & Analysis
Testing & Handover
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
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.
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."
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.
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.
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
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."
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
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.
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.
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
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
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.
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.
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
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.
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.
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.
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.
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.
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.
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.