Back
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.
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 at 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.
Figma screenshot showcasing one of the numerous design iteration and feedback pages created during the development of the Marquee.
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 and small screen variations
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 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
