Case Study

Forming UDS

Defined and developed the creation of Expedia’s Unified Design System, a cross-platform, multi-product system encompassing UI kit, Training, and Migration support.

Background

Historically, Expedia’s product teams were siloed by Platform and lacked a central UI kit. This lead to inconsistent shopping experiences for our users and slow speed to market for features. At the time, I was managing the mobile team and was frustrated by the wasted design effort due to silos and lack of a UI kit. We knew our customers shop across features, devices, and platforms and we believe experiences should be intuitive, on-brand, and cohesive wherever customers choose to meet us. Modals should work in the same way across pages in the app and elements should be consistent with the brand’s visual language. I joined 3 web designers, to define the first cross-platform, multi-brand system for Expedia Group from the ground up.

Our target was speed, quality, and consistency

Responsibilities

System definition

• As the native mobile app expert on the team, I audited existing iOS and Android experiences and collaborated with cross-platform peers to find common patterns.

• With my visual design background, I lead our typography definition. This included defining what a successful system typeface would look like, researching 20+ fonts, pitching a typeface to VP leadership, working with the type foundry to assess gaps for internationalization and defining the system’s type scale. More detail published here.

• Defined token values for color scale, and typography. Contributed components to the shared UI kit. UI kit documentation and organization. Migrated UI kit from Sketch to Figma.

System evangelism

• Onboarding a company onto the concept of a design system required leadership buy-in. Advocacy throughout the design org and small discussions with subject-mater experts enabled our group to form a dedicated team.

• Defined champion model for the design org, empowering product designers to contribute back to the system. Defined champion roles and responsibilities, including leading champions through intensive training, which empowered new advocates for the system.

• Lead training, support, and office hours for designers and mobile engineers.

System adoption

• Defined migration plan for mobile, requiring buy-in from product leadership.

• Managed mobile migration to UDS by enabling product teams to prioritize the work against their roadmap.

Impact

• A shared system across native apps and mobile web, meant features could ship at the same time across platforms, by enabling webviews in mobile app. Filtering and Itinerary pages in mobile apps are now powered from server-driven UI.

• Web, iOS and Android platforms now use UDS. Reducing mobile team’s visual design work since they design once rather than for each platform.

• Reduced barriers across platforms. Teams are now collaborate by domain/line of business rather than platform which has reduced wasted design cycles.

• Our users have a cohesive experience no matter which platform or brand they are shopping with.

• Enables the multi-brand strategy. Unique brands can focus on differentiated features rather than maintaining parity.

• Design systems became a fully staffed team, including a mobile engineer dedicated to UDS.