Increasing mobile engagement by 83% through strategic UX design

Role:  Sr. Art Director & Creative Lead
E-Commerce
UX Design
UI Design
PHG screens in situ
ACHIEVED
Average Order Value
UP 10%
Mobile Usage
UP 83%
Site Traffic
Up 33%
Cart Abandonment
Down 25%

Objective

Design an online experience that would both delight users and lead to increased conversions.
Preferred Hotels & Resorts had noticed a lag in conversion and felt their engagement could be better but didn't know how to go about capturing users and converting them.  They needed a complete website redesign including a total reworking of their checkout process.  

The Luxury Travel Shopper

The first step was understanding who the luxury travel shopper is. I began with research and insight into their existing consumer base and how they use travel websites, as well as trend research into hospitality successes across the industry.
We polled 167 of their consumers to find out what made them tick.

GENDER

Women dominate luxury travel bookings and engagement, accounting for over 61% of luxury travel interest and up to 80% of bookings.

INTERACTIVITY

Luxury travelers are highly influenced by digital experiences—40% of all luxury purchases are shaped by the quality of online interactions.

LIFE CYCLE

Luxury travel shoppers visit an average of 277 different web pages before making a booking. It takes roughly 45 days before they make a purchase.
Browse on phone, convert on desktop
Most luxury travel is still booked on desktop computers rather than mobile devices. While mobile generates about 60–68% of online traffic for travel and hospitality websites, desktop accounts for approximately 62% of actual sales
Inspiration leads to intent
Whereas 95% of hospitality website users immediately go to the search function first, they are also drawn to curated experiences, visual inspiration, and the discovery process in early to mid process shopping.
How can we capitalize on emotional needs of the consumer throughout their journey?
A lot of thought went into tactics that dovetail into the emotional needs of the consumer at various points within their journey.  Boards were created to capture any and all ideas about what was important and how we could convey it at various points.
PHG Miro Board
PHG user flow
Meet them where they are
Execution
Inspiration
What if we tailored the UX to the user’s needs on the device they would be using at each specific stage of the purchase lifecycle?

Design

Understanding the life cycle of the luxury travel shopper was key to designing the Preferred Hotel Group web experience.  Mobile filtered up not only locations but also curated galleries and themed categories like “Last Minute Escapes” or “Spa Retreats” while desktop encouraged learning and conversion.
PHG homepage scrolled in-situ
Dream
• Facilitate inspiration
• Inspire with imagery
• Promote discovery
Allow people to find experiences and be inspired by the act of browsing and dreaming.  People might not know what they want yet.
PHG Learn Cluster
Learn
• Facilitate investigation
• Inspire with scenarios
• Promote sharing
Allow people to turn dreams into possibilities through stories.  Allow them to get others excited as well.  Give them high-level information.
PHG Find Cluster
Find
• Facilitate a deep dive
• Inspire with details
• Promote planning
Allow people to give structure to their ideas. Turn dreams into plans through detailed information.  Here is where price is most important.
PHG Property Details in-situ
Convert
• Facilitate booking
• Soothe with simplicity
• Promote confidence
Towards the end of the life cycle, shoppers move to desktop for larger imagery, more details about the location and to make a purchase.  Remove any friction or fear.

Distilling the research

Understanding the life cycle of the luxury travel shopper was key to designing the Preferred Hotel Group web experience.  Mobile filtered up not only locations but also curated galleries and themed categories like “Last Minute Escapes” or “Spa Retreats” while desktop encouraged learning and conversion.
The Luxury Travel Shopping Lifecycle
Dream
Learn
Find
Convert
PHG homepage scrolled in-situ
PHG Homepage tablet
PHG Property Details in-situ
Facilitate inspiration
Inspire with imagery
Promote discovery
Allow people to find experiences and be inspired by the act of browsing and dreaming.  People might not know what they want yet.
Facilitate investigation
Inspire with scenarios
Promote sharing
Allow people to turn dreams into possibilities through stories.  Allow them to get others excited as well.  Give them high-level information.
Facilitate a deep dive
Inspire with details
Promote planning
Allow people to give structure to their ideas. Turn dreams into plans through detailed information.  Here is where price is most important.
Facilitate booking
Soothe with simplicity
Promote confidence
Towards the end of the life cycle, shoppers move to desktop for larger imagery, more details about the location and to make a purchase.  Remove any friction or fear.

Prototyping

Luxury shoppers are highly engaged with pages that feature micro-interactions and engaging visuals so prototyping heavily featured animation and visual delight. . Not all of it got implemented but it was worth exploring.

Homepage

All versions of the homepage were optimized for their device.  The mobile prioritized browsing and discovery whereas the desktop was focused toward search and conversion.
PHG Homepage Mobile
PHG Homepage Desktop

Property Details Page

The Property Details page was the most frequently entered page (via SEO).  Originally, there was little engagement as the copy was lengthy and difficult to read, and the various sections were split up into 5 different URLs per page.   For the redesign, the copy was completely rewritten for clarity & scalability, and the page was consolidated into one URL split with jump links that mimicked the structure of the 301 redirects.

Great pains were taken to bring forward room data and imagery outside of the Global Distribution System (GDS) which managed room availabiltiy.
PHG Property Details
PHG Property Details Mobile

Checkout

The checkout process needed to be completely redesigned.  It was simplified to four steps.   There were many restrictions as to what could and could not be done, as the system is powered by SABRE (the Global Distribution System) and SynXis (the Global Reservation System) and is neither hosted nor controlled by Preferred Hotels & Resorts so a strong collaboration was needed to maintain a consistent look and feel to reduce confusion.

Research showed that once in the checkout flow, removing the main nav items reduced “ADHD Bounce” and increased conversions by keeping consumers in the flow.  The redesign was made to be clear, easy to use, and inspire trust.
PHG Checkout
PHG Checkout
PHG Checkout
PHG Checkout

Thanks to these UX and UI improvements, we achieved the following:

Average Order Value
up 10%
Mobile Engagement
up 83%
Traffic
up 33%
Cart Abandonment
down 25%

More Projects

E-Commerce
Native App Design
Increasing conversion by delivering the goods for Taco Bell
View case study
UI Design
UX Design
E-Commerce
Tripling revenue by capturing the feel of a record store
View Case Study
Ai Integration
Web App Design
From overwhelmed to empowered: UX Design for a better cause
View case study