Hotel Booking app
UI/UX Design Case Study
Role & Methods:
UX Design, User Research, Branding, UI Design
2 weeks, February 2021
Adobe XD, Adobe Illustrator
ABOUT THE PROJECT
B&B Express is a bed & breakfast booking app that helps working professionals quickly book holiday accommodation in London, UK.
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.
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.
THE UX & UI PROCESS
Based on Design Thinking Methodology
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
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.
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
Occupation: Biology Teacher
Marital status: Engaged
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:
B&B Express User Persona - Giulia
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)
Final User Interface Design (UI)
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)
A few important components of the User Interface of B&B Express App
A simple main screen, allowing users to instantly search for their dream accommodation without a need to set up an account
Search results screen
Clearly presented search results with all the available bed & breakfast
Filter & Sort screen
An easily accessible way to sort and filter the search results
Detailed page screen
More information about the chosen property
Room details screen
One of the available room particulars
Detailed page screen
Quick, almost instant reservation process