Booking Mockup

Booking

Redesigning a popular travel website and adding the ability to book trains, with a focus on sustainability.

Building a better Booking.com
ROLE
UX/UI Designer
Timeline
2 Weeks - May 2021

Challenge

The sustainable site will be geared toward environmentally friendly customers as well as train travelers that simply want to find an alternative way to reach a destination while enjoying the journey. Booking.com is currently the number one travel booking site but the user interface is quite cluttered and feels outdated and uninteresting.

Many consumers agree that climate change is a serious and pressing issue, there’s a growing movement to travel sustainably across the world. Booking currently lacks train tickets as an available travel method.

Solution

Create a responsive redesign for Booking.com highlight carbon emissions, sustainable travel options and a new rewards system built around saving the planet while earning free trips. 

Research

Booking Persona
Booking Persona Brad
Booking Competitive Analysis
Discovering what travelers enjoy.

During one on one interviews, I was able to determine the current challenges and successes users face with travel sites and the travel booking process.


60%

Of Users were willing to spend extra time traveling if the savings and experience offered a significant advantage.

90%

Lacked awareness of eco-friendly statistics and information, only one user knew about high carbon emissions from flying.

Rewards

A rewards system similar to Hotels.com offers a clear goal that is achievable. Current rewards systems have unreasonable milestones.

Experience

Comfort, luggage, transportation cost and waiting times were major issues travelers faced with air travel.

"Rewards system should be just for train travel, to encourage and entice travelers to use this mode of transportation."

Information Architecture

A user flow that allows efficient travel booking.

I designed multiple paths the user can take to browse and purchase a trip. 
The task flow gives process input and potential directions users may take to complete a single task.

This stage acts as a transition from our User Research toward the Interface Design phase.

Booking User Flow
Booking Sitemap
Extensive wireframing to fully understand usability.

Due to the complex nature of this project, I felt that it was crucial to develop highly detailed, responsive wireframes that fully outline our new Booking design blueprint. Booking a trip requires in-depth search results, filters, pricing tools and route options.

Booking Wireframes
View All Wireframes

Design

Booking full UI
Creating new features while updating design styles.
Booking Colors and Fonts

Utilized pre-existing Booking logos as they were modern, simple and work well with the redesign. 

I created new infographics and unique components that capture the spirit of sustainable, relaxing and wonderful travel experiences. 

Selected colors and typography based off current Booking styles and utilized those styles to develop more elegant modules across the site.

Multiple design aspects encourage learning more and traveling in more sustainable ways and this message is spread across the user interface.

Style Tile

Style Tile

Booking UI Kit

UI Kit

Testing and Iterating

View Prototype
Booking Percentage Icons
"The new design is so much better than the old one, I love the modern, fresh feel you've created and the rewards and sustainability focus is wonderful!"
Booking Affinity Map

Successes
• Great color choices, reflect company
• Sleek, modern imagery and styling
• Bold, large text and buttons

Frustrations
• Sustainability CTA unclear 
• Sustainability page text heavy
• Infographics excellent but users wished to see more

Improvements
• Create colored text graphic highlighting sustainability CTA
• Add informative fact boxes side bar
• Create infographics for sustainability page and reduce text

Booking Stays V1

Problem
• Trouble finding the Learn More CTA 
• "I didn't realize the blue box was related to sustainability."

Booking Sustainability V1

Problem
• Text heavy without glance-friendly titles and messages
• "Page looks great but it's unlikely I would read everything."

Booking Stays V2

Solution
• Redesigned CTA box with better title, color, and button.
• Much clearer sustainability message.

Booking Sustainability V2

SOLUTION
• New bold graphics throughout the page to improve readability.
• "I like the new sidebar facts, I think they work well with Booking's style and make it much easier to quickly get the bullet points."

Redesigned with sustainability in mind.

The redesign and feature additions were completed over the course of a two-week sprint. With more time I'd like to add more screens including a flight booking screen which would be similar to the train screen in regard to sustainability scores and information. I'd also spend some time on the checkout process as this would offer a new challenge in redesigning Booking's current trip purchasing task flow.

There's room to expand upon the tools available, including a price comparison tool, map route feature and more extensive trip management options in the user dashboard.

I'd love to expand on this design, increase the sustainability focus across the site and build pre-planned trips and more extensive options to build a dream vacation. Booking is the largest travel booking company in the world and I loved working on so many different aspects of product design.

Back to Top