Expedia
Back
I played a key role in various web and app projects at Expedia, primarily focusing on global Mobile App Downloads (MAD). During my time there, I had the luxury of collaborating with a UX Research team, a well-organized and governed Design Systems team, thoughtful Devs, and a dedicated UX Writer. Despite the challenges posed by the pandemic, which notably affected the travel industry, our unit successfully sustained its performance and maintained our download numbers. Take a look at the specifics of the work below.
Mobile App
Downloads
(MAD)
Context:
MAD is a suite of UI components designed to drive global app downloads, adoption, and engagement. The components use regionally tailored messaging, imagery, and placement informed by user testing and machine learning. They appear across key points of the Expedia website, adapting to the user’s journey stage, market, and surrounding content. Each element—images, CTAs, value propositions, and placement—was rigorously tested to optimize performance and cultural relevance.
Our team was responsible for designing, building, launching, and testing the system.
Team:
Myself (Principal Designer), Sr. Design Manager, Product Owner, UX Writer, UX Researcher, Development Team
Approach:
MAD components began with in-depth research. The UX writer and I analyzed Expedia’s top value propositions, user journeys, and pain points, and conducted a global audit to understand how competitors promoted mobile app downloads.
Top performing value propositions
Value propositions ranked and segmented
Global App Download Audit & Summary
Whiteboard scribbles
Guest journey pain-points
Upon synthesizing this information, we settled on five placements and began crafting designs and content.
Resistance to change & Design System Challenges:
Expedia’s design system focused mainly on transactional components for booking flights and hotels. MAD components introduced a hybrid approach, combining promotional and transactional elements to drive app downloads, highlight exclusive in-app deals, and encourage completing actions in the app.
Adopting them required close collaboration with the Design Systems team, who were understandably cautious about promotional elements. By partnering with design leadership, providing clear documentation and usage guidelines, and supporting decisions with research, I helped successfully integrate MAD into the design system.
Preheader, the 1st component
The Preheader component was designed for users with a low to medium likelihood of downloading the app. The concept was to prominently present it without being overly intrusive.
MAD Marquee:
The Marquee was a redesign of a previous Expedia footer that lacked any branding. Positioned towards the bottom of the site, it is presented to users with a reduced likelihood of downloading the app.
The Senior Design Manager was eager for me to redesign what was then referred to as "The Footer," which I refreshed, repurposed as "The Marquee."
The old version known as "The Footer"
Iteration, Feedback and Compliance
In close collaboration with the UX Writer and Senior Design Manager, I developed multiple iterations of the Marquee, aligning the copy, placement, imagery, and layout with our research findings on target audiences. Additionally, we collaborated with Legal to ensure compliance with user data collection requirements.
New, responsive, targeted MAD
Marquee designs:
These are some of the final outcomes which enabled us to conduct comprehensive tests on all aspects of the design, including value propositions, imagery, legal copy, and interface variations. These findings were then leveraged by machine learning to deliver the most effective versions to targeted audiences.
Desktop variations of the Marquee
Tablet, phone and inline variations
Take-Over —> App-Hero
Expedia had a controversial component called the "take-over" in its design system. Myself and the MAD team identified it as problematic due to its intrusive nature, almost entirely obstructing users from basic actions if they were disinterested in the content of the Take-Over.
The old version of the "Take-Over"
Our research however indicated favorable reception in several Asian Pacific markets but a general dislike in North America. Note: the Asian conical hat in the image above is coincidental - it was the only screenshot I had of the old "take-over."
The redesign I implemented aimed to unveil more of the Expedia homepage real estate, providing access to top-of-the-page key actions for users uninterested in the newly named "App-Hero" content.
Early wire explorations of the App-Hero
New App-Hero designs
The redesigned App-Hero featured a lighter, on-brand design, providing users with direct access to initiate travel bookings if they were uninterested in downloading the app.
App Landing Page
My last project with the MAD team focused on the App Landing Page, aiming to incorporate all the insights gathered from previous MAD research into the design. Unfortunately, amid a corporate shake-up and new leadership at Expedia, our team got reassigned to different departments, preventing me from completing the work on this project as my focus shifted to working on the Expedia app.
In-progress desktop version
In-progress Tablet and Phone versions
Travel Advisories
Design and A/B testing
Ongoing work with UX Researcher to test which treatments worked best for travelers during Covid 19
Team:
Myself (Principal Designer) and Sr. UX Researcher
