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 strategically designed to drive global app downloads, adoption, and usage. They incorporate regionally personalized messaging, imagery, and placements, enhanced through user testing and machine learning. Distributed across various locations on the Expedia website, placement decisions factor in the guest's stage in the user journey and their global or regional market. Additionally, placements are tailored to harmonize with surrounding content, with intrusiveness calibrated on a scale tied to market performance and cultural relevance. Rigorous testing covers all placement content elements, including images, CTAs, value propositions, placement types, and locations.
Our team was tasked with designing, building, launching and testing them.
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 thoroughly explored Expedia’s top-performing value propositions, guest/user journeys, and pain points. Additionally, we conducted an extensive global audit to gain insights into how competitors and industry leaders approached the promotion of 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 consisted primarily of transactional components geared toward facilitating flight and hotel bookings. In contrast, MAD components, being both promotional and transactional, had three distinct purposes: encouraging app downloads, showcasing exclusive in-app deals, and suggesting better ways to complete actions through the app.
Successfully introducing MAD components to the design system faced multiple challenges, given the Design Systems Team's understandably protective stance, particularly regarding promotional elements. To overcome this hurdle, I proactively engaged with design leaders at Expedia, consistently delivered comprehensive documentation and usage guidelines, and reinforced components with relevant research findings. These actions played a pivotal role in effectively addressing and resolving challenges, ultimately leading to the successful adoption of MAD components 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
