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
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
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.
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.
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)
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)
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
A few important components of the User Interface of B&B Express App
Final User Interface Design (UI)
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
Hotel Booking screen
Quick, almost instant reservation process