Sitemap
Tripadvisor Tech

Stories from the Product and Engineering Team at Tripadvisor

The people-first approach to our Design System refresh

--

How design stewardship gave our Design System new life

By Darren White, Tripadvisor

Crafting a design system is a massive, messy feat of collaboration. And by design, it’s work that is never truly finished.

Over the past two years, we’ve adjusted how we work and staff our team to meet this reality. Keeping a design system modern and functional requires focused attention, proper governance, and a constant eye on your product’s future.

When a shiny object loses its sheen

Our design system (the DS) was born from a large-scale Tripadvisor brand refresh in 2019. We sought to craft a flexible, foundational system to ensure consistency in our product across business lines and user types.

There was widespread support and advocacy for the effort throughout the company, but the groundswell of fiery excitement was hard to keep lit post-launch. As business needs changed, especially in light of COVID and its downstream impacts, so did our focus as a product team.

Designers were urgently needed to solve pressing, business-specific problems. As a result, the eager designers who’d volunteered uncommitted time to stand up the DS were pulled into new directions. Despite the internal support and a desire for a foundational DS, we still needed people who could be dedicated to it.

Within a year, we felt the impact of our divided attention.

The high cost of an understaffed design system

Design stewardship is crucial in maintaining order in a design system. You need people to hold the line: to maintain standards, offer clarity, and keep up with best practices.

When that role is empty, it’s easy to end up with individualized solutions that meet a single need but don’t fit into the larger picture of the product language. The more this happens, the more gaps appear in the design system, creating a cycle of creation without consideration.

In the long term, that cacophony is disruptive to users and costly to the organization.

Aligning teams and seeking clarity between designers can eat up hours in a project timeline. Those wasted hours compound when it’s time to build your product, and engineers are left without a defined set of elements to pull from. You can end up with a product made of disparate parts and patterns that users can’t rely on or recognize.

When a product doesn’t deliver on the ease and consistency promised by a brand, customers will take their business elsewhere. According to , about 65% of consumers have switched brand loyalties when the customer experience didn’t live up to what a brand’s image promised. That , on average, as those customers cut their spending or move to other brands altogether.

That’s an expensive toll on user trust, and it’s one we didn’t want to pay.

Implementing a new way of working

To streamline and strengthen our design system governance, we took some decisive steps to enhance order and stewardship.

  • We established a team leader. We brought in a seasoned Design System leader who could quickly assess the cracks in our processes and find strategic, scalable solutions to fix them.
  • We built a team around the effort. Instead of relying on designers to help when they had the time, we put dedicated designers on the DS full-time who’d already shown deep interest and expertise in system design and atomization.
  • We aligned with existing teams for efficiency. We recognized that it was important to collaborate early and often with Design, Product Management, and Engineering, so everyone could work in lockstep toward the same efforts and goals. In this way, we’re treating the DS as an integral part of our product — not just a nice-to have — with leadership, attention, and manpower.
  • We prioritized open communication about the DS. The new DS team quickly set up an open forum channel in Slack, a space for Design, Product Management, and Engineering to make suggestions, offer feedback, and report bugs. The team also introduced “office hours” twice weekly: dedicated times to discuss more complex issues or DS needs live.
  • We implemented a Rule of 3" governance model for new contributions to the system. Design systems are meant to scale; they exist to solve common problems and avoid one-off solutions. “Less than three instances isn’t common enough to be worthwhile work to warrant a design system team’s attention,” says . To ensure DS components have broad applicability across the product, we look for three distinct applications before considering an addition.

Our new DS governance process has greatly impacted how we address challenges, big and small.

It was essential as Tripadvisor added more AI-powered features to our core product. The DS team has been able to stand in as a design nexus, working across brand and product teams to address the complexities of creating a practical, coherent design strategy for AI implementation. Things like office hours and open forums created clear points of communication to keep all stakeholders aligned each time we expanded the scope of our experiments with machine learning.

Those same lines of communication have led to other successful product outcomes, too.

When a product manager identified inconsistencies in our product cards and cross-sell shelves, they brought it up in the open forum. We knew from previous projects that users relied on large imagery to make informed decisions about a hotel or tour purchase. It was imperative to find a global solution that balanced immersive imagery with enough space for critical commerce info. Settling on a universal card dimension for these features enhanced design consistency, improved the click-through rate of the shelves, and enhanced overall user engagement.

The system is never complete

The effort we’ve put in over the last two years to strengthen our design system allows us to navigate more complex business problems with greater speed and agility.

But, a DS is a tool of resilience, and the foundation of resilience is change.

We’ve intentionally made space for necessary flexibility and change as we go forward, like:

  • Tracking adoption and usage so we can routinely retire components that aren’t being used.
  • Adopting a new DS platform for a single source of truth, streamlined documentation, and easy access for the entire organization.
  • Sharing our progress to keep the DS top of mind. Communication is a two-way street, so the DS team uses a dedicated Slack channel to share updates on new features, retired components, and road mapping for the DS overall. More recently, we’ve launched a monthly newsletter that synthesizes these updates for a company-wide audience.

We’re always looking for ways to futureproof our work and expand our design world in service of our community of travelers across the globe. We’re already knee-deep in DS improvements that help us build trust, like internationalizing the DS to better serve global audiences and taking deeper strides to make our products more accessible to all users.

Nothing about design should be static — a product can’t grow and evolve when design stands still. Embracing the never-ending work of maintaining a design system means fully leaning into the chaos and color of collaboration as an asset, not a limitation.

No responses yet