B&B Express

Hotel Booking app

UX/UI Design Case Study

B&B Express - Home Screen - MintSwift
B&B Express - Filter + Sort Screen - MintSwift

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

The Double Diamond Process - MintSwift

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:

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 - User Persona - B&B Express - MintSwift

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:

Pain points:

Motivations:

Social
Personalisation
Price
Personal Growth
Comfort
Value

“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)

User Flow + Low Fidelity Wireframes - B&B Express - MintSwift
B&B Express User Flow shown on low fidelity wireframes

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 - Wireframes - MintSwiftB&B Express - Final User Interface Design - MintSwift.

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 - MintSwift

B&B Express Logo

B&B Express Typeface, Type Scale - MintSwift

B&B Express Typography, Type Scale

B&B Express Colour Palette - MintSwift

B&B Express Colour Palette

DESIGN SYSTEM

B&B Express - Important UI Components - MintSwift
B&B Express User Flow shown on low fidelity wireframes

UI COMPONENTS

A few important components of the User Interface of B&B Express App

Final User Interface Design (UI)

B&B Express - Home Screen - MintSwift

Home screen

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

B&B Express - Search Results Screen - MintSwift
B&B Express - Filter + Sort Screen - MintSwift

Filter & Sort screen

An easily accessible way to sort and filter the search results

Detailed page screen

More information about the chosen property

B&B Express - Hotel Details Sreen - MintSwift
B&B Express - Room Details Screen - MintSwift

Room details screen

One of the available room particulars  

Hotel Booking screen

Quick, almost instant reservation process

B&B Express - Hotel Booking Screen - MintSwift

MORE UI/UX PROJECTS

Brity - UI UX Design System - MintSwift

BRITY

Digital Banking app

UX/UI Design Case Study

×

Basket