Find Me
LinkedIn iconVSCO icon
project

Crafting a comprehensive system

The design and implementation of a complete design system from scratch to unify a suite of products under a consistent, scalable, and adaptable framework to support evolving product needs.

Acquia, 2022-2024
Role: project lead + designer

Graphic for Customer Data Platform project - a collage of various design system components including tags, checkboxes, and color palettes.
continue to next section

Problem statement

Our marketing and hosting tools suffered from inconsistent design and a fragmented user experience, creating frustration for users and inefficiencies for developers. We needed a scalable design system to unify our products with a cohesive visual and functional framework—one that could easily adapt to new features, acquisitions, and the multiple code languages in our ecosystem.

Objectives + metrics

HAPPINESS: Achieve a 80% satisfaction score among designers and developers using the system within the first six months. Metric: regular surveys assessing ease of use, satisfaction with documentation, and overall usability.

ENGAGEMENT: Ensure at least 60% of all new feature development utilizes the design system components in the first year. Metric: % of new features or updates implemented with design system components compared to custom builds.

TASK SUCCESS: Reduce the average time to develop and implement new UI components by 30% within six months. Metric: Time tracking in Jira for development tasks before and after implementing the design system.

Audit + foundation building

Objective: Analyze existing products and user needs to establish the foundational principles and guidelines for a unified design system
Key activities:
  • Conduct a comprehensive audit of existing products to identify inconsistencies and user pain points
  • Gather and analyze user feedback to inform the initial guidelines and priorities
  • Generate an initial inventory of design patterns, components, and guidelines to build the system’s foundation
Example screenshot from audit report with identified inconsistencies and pain points.

Alignment + governance

Objective: Collaborate with cross-functional teams to establish shared goals, secure buy-in, and define scalable governance for the system
Key activities:
  • Engage stakeholders across product, engineering, and marketing teams to align on shared objectives
  • Define governance processes, including roles, decision-making protocols, and mechanisms for contribution and versioning
  • Generate an initial inventory of design patterns, components, and guidelines to build the system’s foundation
Graphic depicting a person speaking on a video webinar

Design + integration

Objective: Develop reusable, scalable UI components and integrate the system into design and development workflows
Key activities:
  • Design and develop reusable UI components that ensure consistency and flexibility across products
  • Integrate the design system into Figma for designers and development repositories for engineers
  • Facilitate seamless collaboration between design and development teams through shared tools and workflows
Library of reusable UI components in Figma and development repositories
Screenshot of Figma file with reusable and composable table component and its elements.Screenshot of Figma file showing options and variations of table component from library.

Adoption + evolution

Objective: Ensure smooth adoption of the design system and maintain its relevance through ongoing feedback and iteration
Key activities:
  • Roll out the design system to all teams with supporting documentation, tutorials, and hands-on training
  • Monitor system usage and gather ongoing feedback from users and stakeholders
  • Regularly update the system to address new product needs, user feedback, and technological advancements
Comprehensive documentation website and training materials for adoption
Feedback loop process and a roadmap for system maintenance and evolutionAsana project documenting the process for integrating new styles and components from the design system into the existing product UI.

Results

Outcome + metrics

HAPPINESS: After 6 months, we achieved a 92% satisfaction score among designers, who praised the system’s clarity, ease of use, and well-documented guidelines. However, satisfaction among developers lagged due to the complexity of implementation and insufficient resources to fully integrate the system into their workflows.

ENGAGEMENT: By the end of the first year, around 55% of new feature development utilized design system components, nearly meeting our target. This adoption rate reflected strong alignment and enthusiasm within the design team.

TASK SUCCESS: Measuring the reduction in development time proved challenging due to the diverse nature of our development teams, each working on different products with varying coding languages, funding, and bandwidth.

Lessons learned

  • Inconsistent tracking across teams hindered impact measurement; a unified approach is critical.
  • Bespoke solutions are inevitable; design systems should enable efficient customization.
  • Tailored support and tools are essential for equitable adoption among all stakeholders.
  • Documentation proved to be the cornerstone of success; however, keeping it up-to-date required more resources than initially anticipated.
← Back to project list
Next project: Accessible design →
Find Me
LinkedIn iconVSCO icon
Designed and built by Alison Voghel in Webflow