70%
The Busy Bee
Too busy to plan other activities when on vacation but still looking forward to having fun with the kids
Scenario
Wants to go on a vacation with her husband and 2 kids to London for a week, but she is worried and concerned about how difficult it is to get an affordable hotel in a great location that has close proximity to outdoor activities that would engage the kids.
Personality
Prioritizes happiness and well-being of her family.
Always aims to create lasting memories with her kids.
User Goals
To plan a family vacation that will be both enjoyable and educational for her kids.
She is looking for a hotel that offers outdoor activities and is close to local attractions.
Pain Points
She is often limited by her budget and has to balance the cost of the vacation with the activities and experiences she wants to provide for her family.
Age: 35
Occupation: Accountant
Status: Married with two kids
I wanted to look at the most popular hotel booking apps as I thought they would be the best at solving already existing user problems and are best designed for a good user experience.
I reviewed four apps, Hotels.com, booking.com, Airbnb, and family critic vacation.
The Goal
To see how popular hotel booking apps solve problems that I wanted to solve.
How I can use any negative experiences as a way to improve my app and not repeat the same issues?
To figure out the conventions of the hotel apps and how they differ across different apps.
Competitive Benchmarking
Empathize
Market Research
Online Survey
Competitive Benchmark
Usability Test
Define
Affinity Diagram
Customer Journey Map
User Archetype
Ideate
Flow Diagram
Sketch Screen State
Prototype
Wire frame
Hi-Fi Design
Prototype
Test
Usability Testing
Feedback
Tools Used
Work Process
Scope of Work
Empathize Phase
Market Research
My first step was to carry out market research to get to know more about the hotel booking app, the nature of the product, and its competitors. Using google search, google play store, and the apple app store, I found some direct and indirect competitors.
Direct competitors: Airbnb, booking.com, hotels.com, travago
Indirect competitors: Family Critic Vacation, Tripit, Gowhee,
From this research, I was able to pick up on the typical conventions and best practices that hotel apps use:
Observations
Explore/recommendations of places to visit is a good feature
The search bar is usually the first thing on a homepage
Map View/list view option is available
Filters/sort to make the search easier
Share, like button on hotel pages
User-friendly interface
Summary / Observations
Interviews & Online Survey
In order to gain insight into how users are experiencing similar products, I needed to collect feedback to help make sense of user behavior and to learn what works and what doesn’t so I can prioritize the changes I carried out on my one-on-one interviews.
Positive Interactions
Reviews and ratings of the hotels were useful for users to complete a booking.
Location and surrounding structures were strongly considered when booking.
Proximity to the city, malls, and shopping areas was important to the user.
When booking with family, space and nearby activities was important.
Pain Points
Lack of spacious rooms when with family.
Traveling with family is worthwhile when the kids are engaged in outdoor activities.
Inaccurate or misleading information.
Limited search options.
To deepen my research, I wanted to look into the personal experiences of people who have used any booking apps, their goals, behaviors, and context.
So I did an online survey using Google forms to observe any patterns and similarities in what the potential user may want. A total of 20 people responded to the survey which helped me frame the problem correctly.
This usability test brought quite a few things to my attention. I can see how simple additions to an app can make a pleasant experience for the user. For instance,
User Perspectives
I got to observe the user's bahavour and emotions as they interact with the product.
Validate previous assumptions, like features that were a good experience for one user can be a pain point for another user.
Some Design Goals to consider.
Adding a map view was a pleasant experience for the user.
Giving the user the ability to change currency was very important.
Users were really pleased when welcomed with a beautiful image on the landing page. In his own words, it really sets the mood.
Don't give users too many options, it can be frustrating.
Being able to see nearby fun activities was a good touch.
Add reviews and descriptions to hotel bookings
Quantitative Research
Summary / Insights
Project & Diploma Duration
6 Months / 18 screens
Usability Testing
In other to challenge or validate my assumptions I needed to watch and observe how people are using existing hotel booking apps, their behavior, and their feelings
I conducted a usability test on two participants and observed their interactions and honest feedback using three native apps, Airbnb, Travago, and Booking.com.
Summary and Insights
Affinity Diagram
To define the problem, I had to gather all my findings and research notes to make sense of them and gain more insights into solving the problem, I collaborated with 5 other colleagues. We started by sharing all our raw data and after an hour we came together to make sense of it all.
We used Miro to create sticky notes of all the findings and group them into appropriate categories.
Summary / Insights
Who are we designing for?
The Tourist
Always looking for fun places and things to do when on vacation.
Scenario
He loves to travel and ensures he has as much fun as possible while on vacation but he is usually bad at planning those extra activities while also considering his budget.
Personality
Adventurous and spontaneous, loves to travel and explore new places.
He is outgoing and loves trying new things.
User Goals
Wants to plan a vacation that is packed with fun and adventure.
He is looking for a hotel that is close to touristy activities and attractions, so he can maximize his time and experience.
Pain Points
He has a busy work schedule and may only have limited time for a vacation.
He may also be working with a tight budget, which can make it challenging to find the right hotel that meets his needs.
Age: 29
Occupation: Lawyer
Status: Single
Customer Journey Map
To analyze deeper into how the user experience was throughout the usability test, I did a visual representation of the steps, emotions and touchpoints my participants went through to further identify pain points and opportunities for improvement.
Ideate Phase
Before I began to design anything, I reflected on what I have learned from my last two stages. Below are the points of improvement and general conventions that I would incorporate when designing:
• Users like a visually appealing and a relevant homepage
• Make the search bar the main focus to get the user to start their search as they enter the app
• Keep taps to a minimum - users shouldn’t have to do a lot to get to their result
• Pictures of hotel and hotel rooms are vital - slideshow format
• Must have TripAdvisor reviews
• Map view
• Hotel information
• Make any back/skip/close buttons apparent
• Allow currency change option so user can alter if needed
Flow Diagram
I created a Flow Diagram to get a clear flow of how the user will interact with each screen that follows a single user's happy path from the onboarding page, to the payment page.
Design Sketch / Low - fidelity Prototype
I first started off with a pencil sketch of my app. I found this extremely helpful as it was the first visual of my app flow. I sketched out what goes where on a screen. It took me by surprise how many of the design ideas I had in mind did not work well, however, this was why I found this stage in particular very helpful because I could make any changes before creating my medium-fidelity prototype
Visual Identity
Visual Identity
Colours
#2B299B
Main Colour
Secondary Colour
#00A2EC
Secondary Colour
#FFAD00
I used Blue because it depicts Trust, Dependability, Authority,
Stability, Strength, Wisdom.
Complimentary Colour
#777777
Complimentary
Colour
#333333
Typography
Typefaces
A
a
Poppins
Google Font
Extra Light
Bold
Inter
Google Font
Light
Regular
Bold
Text Hierarchy
f
Name
Font Weight
Font Size
Heading 1
Bold
24px
Heading 1
Bold
18px
Lead Paragraph
Semi Bold
12px
My Role.
Competitive Benchmark
Note Taking
Usability Testing
Affinity Diagram
Flow Diagram
Wireframe
Prototype
UI Design
Collaborated
with 5 other colleagues for the
Affinity Diagram
Body
Regular
12px
Regular
11px
Body small
Wireframe
Solution
Bookily is a hotel booking app that specializes in family-friendly accommodations that include features that allow users to search and book for nearby kid-friendly activities and events.
Problem Statement
Families often face difficulty in finding nearby fun activities for their kids when booking a hotel. This can lead to a lack of entertainment options for children, causing dissatisfaction among family members and potentially ruining their vacation experience. This problem is particularly prevalent for families traveling to unfamiliar locations independently without the assistance of a travel agent.
Bookily
A hotel booking app that helps families easily book fun activities while on vacation.
For a quick experience
The main points are highlighted for your convenience
Summary / Insignts
Hi-Fi Design
After submitting my last final projects, I decided to fix up my medium-fidelity prototype and design it with images and the colour palette I had envisioned. Creating a proper version of my app was a great way to see if the colours and layout of the different elements were apparent enough for the user, and visually appealing.
Why a Mobile App
Research shows that Mobile apps are often more convenient for people who are on the go and prefer to make bookings using their mobile devices.
Qualitative Research | Interview
To further understand and empathize with the users, I created two user archetypes based on all the research information gathered from my usability test, user interviews, and an online survey. The archetypes represent the target user groups' goals, behavours, and context of the real design targets.
Wireframing was the last part of this project. Once the design was done, I created wireframes so that I could show what exactly needs to be done on the app. The wireframes needed to be as descriptive as possible so that the app had the appropriate flow as well as the correct response when a user clicks on something.
I used Orange because
it depicts fun, youth,
Happiness warmth
I created a logo, colour palette and chose logos/imagery to suit the tone and feel of my app. It was important to define the brand's visual elements and design system, which should reflect the user experience and the brand's values. The visual identity should be consistent, memorable, and easily recognizable.
Prototype
Scenario:
• Travelling to London
• From 11th - 17th February
• 2 adults, 2 Kids
• Family Activity: Bus Tour
• Explore with the map view
• Budget $160
• Check Out
I used the prototype to conduct a test with four users in our target demographic. Participants were able to use the app with ease and happy with the design. There were few positive & negative feedbacks. This helped me uncover opportunities to improve the overall user experience.
User Feedbacks
Testing Phase
Negative Feedback
• Menu should be visible upfront, its difficult to find on go
• I don't like the colours, it's overwhelming me
• I was hoping to see more options for the activities page.
Positive Feedback
• Easy to use so far.
• The welcome page was nice, a bit different from what I see regularly.
• It takes the stress of looking for fun things to do right away.
My Learnings
This course/project has taught me many important and valuable skills when it comes to UX/UI design. It has highlighted the different methods and techniques that are used by UX designers. The journey to creating this app from scratch was challenging but opened my eyes to design trends and functionality.
One of the important lessons I learned was how crucial each step is, whether it is research or prototyping.
Each step has its importance, and should not be skipped. Without all the research, you are not only creating an app with biased opinions but also an app that won’t be solving problems that other users are facing. Doing each step is part of the process of learning and understanding the users, which will then aid in making the right problem-solving decisions.
Another thing I learned and enjoyed discovering was how after each prototype I designed/sketched, I found something to alter every time. For the user flow diagram, I made a basic outline of what is to happen on each screen. However, once I sketched it out, I saw how I needed more CTA’s, or extra screens for the app to flow better. When I created my medium-fidelity prototype, I realized that the layout of each screen needed further adjustment, therefore when I made my final, properly designed prototype, I worked on making those changes. Each stage of this project helped to make my vision clearer and reach my goal - to solve user problems.
Overall, It was a fun yet challenging experience working on this project, also thanks to all the people who agreed to give me their valuable time for my research. I learned about the diversity of opinion which eventually taught me the importance of user research. This course taught me methods that I would be expected to use in a real-life project and where to apply them.
Project Overview .
Making travel easy and fun for families means finding ways to make the experience as enjoyable as possible. This can involve finding affordable airfare, hotel deals, and other ways to make traveling more affordable. With Bookily hotel booking app, travelers with kids can find fun and family-friendly events and attractions that are safe while on vacation.
preferred using a mobile phone app to access a hotel booking app
30%
of the participant had issues booking because of difficulty using the app.
30%
would change the UI design on the app for a better experience.
50%
of users have something to change due to negative experiences.
Define Phase
10
Participants
I Interviewed
Over zoom, whatsapp and google duo. To gather some insights on their challneges
Design Phase
Click to View Prototype
The Affinity Diagram was able to help me define and make sense of my research, here are some key points.
Positive Interactions
Use beautiful images and videos of lovely destinations for the homepage.
always display ratings by Trip Advisor
Arrival and departure date input must happen on one page.
Add a map view during the search to give a sense of proximity.
Include an option to change currency.
Add a little description of the location when presenting the search results.
Use simple and clear icons to make navigation easy.
Provide options for nearby fun activities.
Use appropriate colours with the UI to help tell a story.
Negative Interactions
Don't overwhelm the user with search options.
Make sure each page is visually appealing
The user should be able to change currency as desired.
Pay on arrival should be an option.
Refundable payment should be available.