Tripadvisor
—
Tripadvisor —
Adapt the Design System to embrace a new direction for Tripadvisor.
Objectives
Take a rebrand and bring it to life in the product space.
Optimize the Design System for the new look and future of the brand.
Role + Responsibilities
Senior Product Designer
Establish a benchmark for product design that fully embraces the vision of Brand’s redesign.
Take the work of the branding agency and adher it to the Design System standards.
Strategize and implement a redesign across web + native both impactfully and as quickly as possible.
For Tripadvisor’s 25th anniversary, Koto brought the brand back to where it all began: the travelers. Their direction brought user-generated content front and center, punched up the visual identity with a vibrant new color system, expressive type, and a playful mascot.
The brand work first needed to be translated for the product space and account for business considerations.
Small snag, we had a lot to address before implementing our ultimate vision.
In order to announce our new branding to the public on time, we focused on implementing minimal changes for maximum impact.
We made key updates to foundational tokens and 1:1 component swaps across web and native.
The consolidated typescale reflected Koto’s bold typographic approach and brought better contrast and hierarchy to the product.
A new color system was developed, heavily influenced by Material’s approach, that took the spirit of Koto’s expression and grounded it to system best practices and EAA compliance.
📣 Shoutout to Thomas Dittmer for his strategic + technical implementation!
1-1 component swaps that held the greatest brand equity.
Our revenue-sensitive buttons needed a solution that would work across all business units. A system was developed that reduced the component variants and added an all encompassing Brand Button that would be employed to highlight the top-worthy action on each screen.
Design System 2.0
The Results
The Results
Color tokens eliminated from legacy token system to Atlas
267
Redesigned components defined in Atlas across web and native
82
Increase in native eng throughput from usage of flex sections