opentable — evie liu

OpenTable . Reusability

Streamlined collaboration across OpenTable’s Hospitality product teams to identify reusable components earlier, accelerating development and delivering a more consistent user experience.

Team

1 lead designer

1 lead engineer

3 design system leads

5 designers

10+ engineers

Impact

Cross-team alignment on 32 reusable components or patterns in 9 months

Fostered a strong communication and collaboration culture, prioritizing reusability and more consistent UX across product areas.

My role

I collaborated closely with a lead engineer to design and implement a process for identifying and developing reusable components, first rolling it out within my own line of business. I gathered feedback from designers and engineers to iterate and refine the process in practice. As the approach proved effective, teams from OpenTable’s other lines of business reached out to learn more, and I presented the process to support adoption and help them implement similar workflows.

OpenTable is a dual-sided platform with four lines of business: Table Management, Commerce, Hospitality, and the Diner Platform.

As the lead designer for Hospitality, I partnered with a lead engineer to address a recurring issue—teams were independently designing overlapping solutions, resulting in duplicated effort and inconsistent user experiences, especially across lines of business.

We wanted to establish a Hospitality-wide process to identify overlaps early, enabling reusable components that accelerate development and deliver a more consistent user experience.

The process

Identify and align as designers - Designers meet monthly to identify reusable components and patterns; when something appears in 3+ projects, we collaborate on a scalable solution.

Share and collaborate cross-functionally - New reusable components and patterns are shared with engineers and design systems to validate potential for reuse

Here are three notable components resulting from the process I designed:

Search and highlight

Restaurant selector

Alert messages

Search and highlight

Designers discovered that search and highlight is used in autotags, guest book, reviews, and the restaurant selector.

In the places it’s used, It’s inconsistent in highlight color, corner radius, padding, and search patterns.

We reviewed the component with engineering and design systems to align on its reusability. Then, we partnered with them to document it and identify a team to build it.

Search and highlight is now adopted across all Hospitality product teams and available company-wide as a reusable component.

Restaurant selector

The feature, Email Campaigns for Groups, required a scalable restaurant selector capable of supporting enterprise-level group structures, with many subgroups and hundreds of restaurants, some nested across multiple levels.

During our monthly design meeting, the designer leading the Email Campaigns for Groups project shared plans to develop a new restaurant selector, noting that existing selector components included patterns she could leverage.

This sparked a broader discussion as designers realized upcoming group features could also use the component. We consolidated existing and in-progress dropdowns into a single universal selector and partnered with engineering and design systems to prioritize it.

Early alignment allowed engineering to build it within the Email Campaigns for Groups project, saving time across Hospitality and enabling adoption across OpenTable’s other lines of business.

Alert message

Engineering found inconsistencies in snack bar copy and communicated it through our component reuse Slack channel.

We classified instances as generic or specific, using Email Marketing’s high volume and diverse use cases to identify common patterns. After aligning with our design manager on the copy logic, we applied the framework across all alerts and shared the guidance with the broader team.

We aligned on 13 types of snackbars in under 24 hours, thanks to the channels and relationships built through our component reuse rituals. These rituals fostered a culture of reusability, keeping it top-of-mind and enabling such rapid collaboration.

Over 9 months, we achieved cross-team alignment on 32 components and patterns, enhancing communication and collaboration across teams. This alignment enabled the prioritization of these components, ensuring a more efficient and coordinated design and development process.

As the designer leading this initiative, I shared our process with design leads from other lines of business. Moving forward, I plan to support these teams in establishing similar component reuse processes and collaborate with design system leads to develop a framework that enhances consistency and reusability across multiple lines of business.

Streamlined collaboration across OpenTable’s Hospitality product teams to identify reusable components earlier, accelerating development and delivering a more consistent user experience.

We wanted to establish a Hospitality-wide process to identify overlaps early, enabling reusable components that accelerate development and deliver a more consistent user experience.

Here are three notable components resulting from the process I designed:

Designers discovered that search and highlight is used in autotags, guest book, reviews, and the restaurant selector.

In the places it’s used, It’s inconsistent in highlight color, corner radius, padding, and search patterns.

We reviewed the component with engineering and design systems to align on its reusability. Then, we partnered with them to document it and identify a team to build it.

Search and highlight is now adopted across all Hospitality product teams and available company-wide as a reusable component.

During our monthly design meeting, the designer leading the Email Campaigns for Groups project shared plans to develop a new restaurant selector, noting that existing selector components included patterns she could leverage.

This sparked a broader discussion as designers realized upcoming group features could also use the component. We consolidated existing and in-progress dropdowns into a single universal selector and partnered with engineering and design systems to prioritize it.

Early alignment allowed engineering to build it within the Email Campaigns for Groups project, saving time across Hospitality and enabling adoption across OpenTable’s other lines of business.

Engineering found inconsistencies in snack bar copy and communicated it through our component reuse Slack channel.

We classified instances as generic or specific, using Email Marketing’s high volume and diverse use cases to identify common patterns. After aligning with our design manager on the copy logic, we applied the framework across all alerts and shared the guidance with the broader team.

We aligned on 13 types of snackbars in under 24 hours, thanks to the channels and relationships built through our component reuse rituals. These rituals fostered a culture of reusability, keeping it top-of-mind and enabling such rapid collaboration.

Over 9 months, we achieved cross-team alignment on 32 components and patterns, enhancing communication and collaboration across teams. This alignment enabled the prioritization of these components, ensuring a more efficient and coordinated design and development process.

Explore more projects

OpenTable . Communications

Kering . Luce Places

OpenTable . Reviews

Saint Laurent . Buying Tool

Gucci . Visual Merchandising

Puma . PumaTrac