Vivino Design System | Scaling UI Consistency and Engineering Velocity

Back

Vivino Design System | Scaling UI Consistency and Engineering Velocity

Established a single source of truth, reduced developer implementation time by 15%, and drastically cut down QA friction.

Role

Product Designer

Platform

Cross-Platform (iOS, Android, Web)

Timeline

2022 - ongoing

TL;DR

We built Vivino’s first comprehensive design system from scratch, curing years of design debt and transforming a fragmented UI into a single source of truth.

✺ 100% Adoption: Fully integrated across all platforms. Developers now strictly enforce the system before writing a single line of code.

✺ Faster Time-to-Market: Eliminated endless spec documents, accelerating cross-functional handoffs.

✺ AI-Ready: The foundation was so logical that engineering leveraged it to build their AI skills repository.

The Problem

The "Button Factory" and Design Debt

Before the design system, Vivino's UI was highly fragmented. The product organization was drowning in extreme design debt, operating too often like a "button factory."

✺ Constant Rebuilding: Designers and developers were constantly recreating the exact same UI components from scratch for different screens and platforms.

✺ Zero Single Source of Truth: Handoffs were agonizingly slow, relying heavily on endless spec documents and manual pixel-pushing.

✺ Wasted Velocity: Highly skilled engineering and design resources were trapped managing basic UI inconsistencies instead of solving complex product challenges.

The Approach & Solution

We didn't just want a UI kit; we needed robust, scalable product infrastructure. We made the strategic decision to build the system entirely from scratch.

✺ Building the Foundation: We established a strict, scalable foundation, ensuring every component was meticulously mapped between Figma and the codebase.

✺ Driving a Cultural Shift: A system only works if people actually use it. We partnered closely with engineering to position the design system not as a set of visual rules, but as an engineering velocity tool designed to make their lives easier.

The Evolution to v1.3

A design system is a living product. While leading the design for the Merchant Dashboard, I had to solve for highly complex data tables and advanced desktop patterns. I fed these solutions back into the central library, evolving the system to version 1.3.

✺ Documentation & Governance: I didn't just build the UI; I authored comprehensive usage guidelines for these complex tables, ensuring the rest of the UX team knew exactly how to implement them consistently.

The Problem

The Approach

We didn't just want a UI kit; we needed robust, scalable product infrastructure. We made the strategic decision to build the system entirely from scratch.

✺ Building the Foundation: We established a strict, scalable foundation, ensuring every component was meticulously mapped between Figma and the codebase.

The Evolution to v1.3

The Impact

100% Adoption & AI-Readiness

The new design system fundamentally transformed how Vivino builds and ships software. The alignment between design and engineering became so strong that the system is now entirely self-sustaining.

✺ Dev-Enforced Adoption: We hit 100% adoption across all squads and platforms. The engineering team became our biggest champions — if a component doesn't exist in the system, developers will actively pause implementation and require design to add it to the library first, cementing the system as the absolute source of truth.

✺ Rapid Handoffs: Cross-functional handoffs transitioned from tedious documentation to immediate, plug-and-play assembly.

✺ Future-Proofing for AI: The component architecture and underlying logic were built so rigorously that the web chapter recently leveraged the design system as the exact foundation to build out their full AI skills repository.

The Impact

100% Adoption & AI-Readiness

The new design system fundamentally transformed how Vivino builds and ships software. The alignment between design and engineering became so strong that the system is now entirely self-sustaining.

✺ Rapid Handoffs: Cross-functional handoffs transitioned from tedious documentation to immediate, plug-and-play assembly.

The Approach

We didn't just want a UI kit; we needed robust, scalable product infrastructure. We made the strategic decision to build the system entirely from scratch.

✺ Building the Foundation: We established a strict, scalable foundation, ensuring every component was meticulously mapped between Figma and the codebase.