Project Type
App Feature Design
Duration
3 Weeks
Scope of Work
UX Research
Product Design
UI Design

Design System for Rebrand

Ensure consistency and efficiency for continuous growth

My Role

Sole designer responsible for:
Product visual reskin, information architecture, component design, design system update, implementation quality assurance.

Problem

A company rebrand introduced new brand identity and elements which created an opportunity to improve the overall product quality and visual consistency.

Goal

Rebuild our design system to implement rebranded product visuals programmatically and ensure future implementation consistency.

Impact

The refreshed product visuals were loved by customers; the updated design system and new design handoff process significantly improved product consistency and development efficiency for future projects.
Eppo’s new brand identity, new visual elements, and rebranded components
Project Background
Eppo, an experimentation and feature management platform, had entered its growth stage. As we prepared for our Series B announcement, we undertook a comprehensive rebrand to reflect our evolution. This rebrand introduced a new visual identity which needed to be reflected in the product.

Opportunity

The design team was tasked to reskin the entire product to embody the new brand elements. In addition to a new logo, the new brand also introduced a new color palette, typeface, and style guidelines.
The idea of elevating the project beyond visual updates with its potential to improve design implementation efficiency resonated with both the design team and management.
‍
While updating the product visual was the catalyst, I proposed using the rebrand as an opportunity to create a scalable design system address long-needed quality-of-life improvements.
We saw an opportunity to start fresh, be meticulous about consistency, and tackle long-needed quality-of-life improvements.
Project Scope
The rebrand project went beyond visual updates. We aimed to improve the entire product experience through better hierarchy, components, and responsiveness. We needed to balance immediate brand alignment with long-term system improvements.
‍
The rebranded website would require key visual elements to be implemented in the product, but there was still time before the Series B announcement to launch the comprehensively rebranded product. Three weeks before the website launch the team agreed on a phased launch plan with 3 milestones.

This structure allowed us to meet immediate brand needs while systematically improving our design infrastructure.
Milestone 1

Product Rebrand Basics

  • Implementing essential brand elements (logo, typography, navigation colors)
  • Aligning product visuals with website launch
Ongoing

Design System Update

  • Restructuring component library for scalability
  • Creating design tokens and documentation
  • Updating components with new branding
Milestone 2

Product Rebrand Completion

  • Implementing comprehensive visual updates (curved frames, refactored headers)
  • Deploying global style changes with updated components
Evolution of the experiment analysis list page through milestones. Click to view full image.
Principles for the New System

Less is More

  • Reduce ad-hoc, single-use components
  • Optimize existing colors and fonts to avoid frequently adding new styles

Sustainability

  • System should scale with product growth and new feature development
  • Focus on adaptable and modular components

Accessibility

  • Enhanced readability through consistent type hierarchy and spacing
  • WCAG-compliant color contrast and responsive behaviors across devices
Building Foundations with Design Tokens
We began by implementing design tokens—a crucial step that our engineering team identified during our kickoff meeting. Previously, text styles and colors were largely hardcoded, making systematic updates challenging and time-consuming. By establishing tokens for colors, typography, corner radius, and other fundamental elements, we created a single source of truth that would:

Impact of Design Tokens

Improved consistency for designers

A well-documented design token library reduces effort in creating consistent designs across teams. To support design team adoption, I created a comprehensive token guide with visual references and detailed annotations.

Improved efficiency for engineers

Although the team had to manually update fonts and navigation colors while building text and color tokens, we achieved token parity between our codebase and Figma after Milestone 1 launched. This foundation work improved design implementation speed and consistency for all future projects.
Milestone 1 launched alongside our marketing website, generating hype and anticipation for our upcoming changes.
From Components to System

Usability and Reusability

A primary motivation for this project was ensuring new components were easily adopted by both designers and engineers while maximizing scalability. Following our design principle, components needed to be reusable and serve multiple surfaces and use cases.
A primitive element can be used as the base to create various components. Click to view full image.

New Library Structure

I partnered with frontend engineers to analyze and rebuild our component library referencing the Atomic Design methodology. By starting with the most frequently used base elements, we created a foundation that improved implementation efficiency.
An example of how Atomic Design Methodology is applied in Eppo's component library. Click to view full image.
The job-to-be-done for a design system is to enable teams to ship thoughtful, polished products without rebuilding UI components.
Implementing the New Design System

Clear Prioritization

Our development work for both Rebrand Milestone 1 and 2 began while the design system was still evolving. To manage this parallel process effectively, we created a clear prioritization for component development and built them in order of engineering workflow:

Stronger Design and Code Connection

We established a weekly design and frontend engineering sync, discussing best practices for implementation quality and efficiency.
To strengthen the connection between Figma and code, I proposed using the Storybook plugin, which links design files to our Storybook library. Engineers quickly adopted it after seeing how it streamlined component discovery and usage. This integration became our standard practice, significantly reducing handoff friction and implementation time.
How a component linked to Eppo's Storybook library can be viewed in Figma Dev Mode. Click to view full image

Quality Control

Implementation quality was crucial to achieve our goal of systematic improvements. We established clear protocols to ensure precise implementation:
Impact & Learnings
With consistent collaboration and improved design implementation workflow, the team successfully launched Rebrand Milestone 2 ahead of the Series B announcement. The new look was praised and loved by many customers, making design a big differentiator for Eppo.

Impact of Design System

  • Reduced build times through component reusability
  • Streamlined design iterations with standardized elements
  • Created a single source of truth between Figma and code
  • Strengthened relationship between design and engineering
  • Minimized handoff friction and implementation errors
  • Established a scalable foundation for future features

Takeaways

Back to Home
Next Project