Vital Proteins’ Unified Design System

Developed a unified design system, considering brand guidelines and Tailwind CSS standards, to enhance implementation speed, benefiting all teams involved in daily projects.

Role

leading the new design system creation, aligning design and development for efficiency.

Tools

Figma

Duration

5 Weeks

Project Overview 

The creation of the new design system centered around elements such as the grid system, typography, colors, CTAs, and components. The major success was in aligning design and development processes, addressing inefficiencies caused by diverse CSS standards for developers. This initiative optimized workflows, resulting in quicker project timelines and establishing a unified design system as a robust foundation for the entire team.

Problems

Vital Proteins’ existing design system faced the following problems:

  1. Design and Development Misalignment:
    • Developers faced challenges as UI elements used by designers differed from Tailwind CSS.
    • Each side added its own standards, contributing to a chaotic environment.
  2. Implementation Delays:
    • The mismatch between UI elements and Tailwind CSS standards made developers and designers spend extra time checking designs before launch.
    • This lack of accuracy in checks increased implementation time, causing delays.
  3. Complex Content Creation:
    • Content creators and the creative studio encountered difficulties in image and banner creation, impacting size determinations.
    • Reduced the effectiveness of collaboration between design and creative teams

Approach

  1. Research and Analysis:
    • Conducted a thorough analysis of the current design system, identifying inconsistencies and areas for improvement. Gathered insights from developers, designers, and brand guidelines.
  2. Collaboration with Developers:
    • Engaged closely with the development team to understand their workflow, challenges, and preferred tools. Integrated Tailwind CSS standards into the design system, ensuring seamless collaboration and efficient implementation.
  3. Brand Guidelines Integration:
    • Carefully considered and incorporated brand guidelines into the design system, ensuring a harmonious blend of consistency and adherence to the company’s visual identity.
  4. Typography, Colors, and Grid System:
    • Refined typography, established a cohesive color palette, and implemented a consistent grid system to create a visually appealing and user-friendly interface.
  5. CTAs and Components:
    • Standardized Call-to-Action elements and UI components, promoting a unified design language across the platform.
  6. Training and Documentation:
    • Provided training sessions for both designers and developers on the updated design system. Created detailed documentation to serve as a reference guide for future projects.

Typography

Spacing

Grid System

 

Colors

 

Components

Results 

  1. Accelerated Implementation:

    • Successfully established a consistent design language across web and mobile platforms, enhancing the overall brand coherence.

  2. Improved Collaboration:

    • Bridged the gap between design and development teams, fostering a collaborative environment that resulted in faster implementation and reduced errors.

  3. Accelerated Implementation:

    • The streamlined design system significantly increased the speed of implementation, eliminating the need for double-checks and reducing development cycles.

What I Learned:

A Journey of Transformation

Through strategic collaboration, detailed design considerations, and an iterative approach, the overhaul of Vital Proteins’ design system taught me valuable lessons.

The transformation not only enhanced the user experience but also revolutionized the efficiency of design and development processes. This case study underscores the successful transition from design inconsistency to a harmonious and efficient system, delivering benefits to both users and the Business.