B&B Express
Hotel Booking app
UX/UI Design Case Study
Role & Methods:
UX Design, User Research, Branding, UI Design
Project timeline:
2 weeks, February 2021
Tools used:
Figma, Adobe Illustrator
Project type:
Self-initiated/Concept
OVERVIEW
Why did I create this project?
I remember searching for a hotel to stay in when visiting London for the first time back in 2011, but I couldn’t quite find what I was looking for.
A few years later (now as a Londoner) I once saw a comment on social media saying that “if you want to see the ‘real’ UK you shouldn’t visit London”.
This is how the idea of B&B Express came to life. I asked myself “How can I make tourist’s life easier so they can find the most authentic and best-matching accommodation in London?”
Presenting B&B Express - the local bed & breakfast booking app in London
ABOUT THE PROJECT
B&B Express is a bed & breakfast booking app that helps working professionals quickly book holiday accommodation in London, UK.
THE UX & UI PROCESS
A mix of Design Thinking and The Double Diamond
1. DISCOVER
UX Research
During the discovery phase, I conducted a competitor analysis along with qualitative research, exploring the popular hotel and travel booking apps such as Booking.com, Hotels.com, Trip.com, Expedia.com, Airbnb and more.
I also discussed this with a few family members. As well as recollected my own experience visiting London for the first time as a tourist.
Key Findings:
- The research confirmed the assumptions stated above
- One person mentioned they are often overwhelmed by the fact that the majority of the venues are part of hotel chains
- Another person mentioned they’ve struggled with filtering hotels by price, due to a fixed set of price ranges, as opposed to flexible selection
2. DEFINE
THE PROBLEM STATEMENT
Point of view (POV)
Working Professionals visiting London need a quick way to book affordable, cosy, authentic accommodation because they want to experience British culture without spending a fortune, but they struggle to find a place meeting their requirements on other hotel booking apps/websites.
THE SOLUTION
B&B Express helps working professionals to find a budget place to stay in London. Allowing users to immerse into a homely, British culture in the middle of the capital.
USER PERSONA
Based on the findings from user research, I created a user persona – Giulia to better understand the needs and frustrations of my users and to maintain a user-centred focus throughout the B&B Express project
Giulia
Age: 32
Occupation: Biology Teacher
Marital status: Engaged
Location: Italy
About
Giulia loves to travel with her fiance Francesco, to discover different cultures to meet like-minded people. She’s organized, budget continuous; having a designated amount for the holidays calculated. As a teacher, she’s busy, therefore it’s important for her to be able to quickly and efficiently find a hotel that fulfils all her needs
Goals & needs:
- Explore new places on a limited budget
- Find the hotel with the best value for money
- Spend less time planning and organizing the trips
- Ability to narrow the options quickly
- Get to know the “real” London and British culture
- Connect with the locals, make new friends
Pain points:
- Wasting time looking through dozens of hotel booking apps
- Hard time finding accommodation within the budget
- Difficulty finding hotels that include breakfast in the price of the room
- In previous travels, struggled with finding recommendations from locals
- Feeling forced to set up an account to book a room
Motivations:
“There are dozens of hotel booking apps out there, but I can’t seem to find what I need for my trip to London”
B&B Express User Persona - Giulia
3. DEVELOP
USER FLOW & LOW FIDELITY WIREFRAMES
Booking Bed & Breakfast
Here’s a sample user flow, showcasing the actions user would take to book a bed & breakfast on low fidelity wireframes. Starting from entering the app (Home screen) to ending on reserving a room in a chosen B&B (Booking screen)
From Wireframe to Final UI
BEFORE & AFTER
Move your mouse on the image below to see the transition from Low Fidelity wireframes to final UI Design for B&B Express
B&B Express Before (Low Fidelity Wireframes) & After (Final User Interface Design)
4. DELIVER
BRANDING
I designed several versions of a logo for B&B Express. I included the white version within the app. The blue & red colour palette was inspired by the Union Jack flag since the app is London specific. The colours meet the WCAG contrast ratio accessibility standards.
B&B Express Logo
B&B Express Typography, Type Scale
B&B Express Colour Palette
DESIGN SYSTEM
UI COMPONENTS
A few important components of the User Interface of B&B Express App
- Hotel booking summary card
- Toggle switch
- Hotel card
- Sticky Call to action button
- Price range filter
- Star Rating
Final User Interface Design (UI)
Home screen
A simple main screen, allowing users to instantly search for their dream accommodation without a need to set up an account
- Predefined location - London
- Suggested dates
- Prefilled guest information
- A large search button
Search results screen
Clearly presented search results with all the available bed & breakfast
- Previously selected dates displayed at the top
- Hotels cards with image carousel
- Sticky, prominent filter button at the bottom
Filter & Sort screen
An easily accessible way to sort and filter the search results
- Sorting by recommended, price deals or rating
- Price range slider
- Toggle switches for important conditions
- Amenities & facilities
- Bed preference
Detailed page screen
More information about the chosen property
- Selected booking dates displayed at the top
- Prominent hotel photo gallery
- Star ratings, reviews and policies
- Location previewed on the map
Room details screen
One of the available room particulars
- Room picture gallery
- Information about room size & bed type
- Room facilities
- Description and conditions
Hotel Booking screen
Quick, almost instant reservation process
- Chosen b&b summary along with the address
- Important information
- Check-in and Check-out dates
- Guest information fields
- Sticky book now button at the bottom
