Design System Management

Imagine joining a new design team eager to learn about everything. You want to start with learning about the design style and poke around Figma (or whatever tool is used), but…it does not exist. The design system does not exist! (Mean Girls get it)

The formal introduction:

This project focuses on revamping the Publica Design System to streamline workflows and enhance collaboration across design, product, and engineering teams. The updated design system will provide a consistent, user-friendly framework to improve efficiency and ensure cohesive user experiences across the product.

The project will be completed in phases over a 3-6 month period, with key milestones including an in-depth audit of the current system, comprehensive updates to core components, and the development of scalable design guidelines. By the end of the project, the new system will empower teams to work more effectively, reduce design and development time, and ensure consistency in both design and code.

Objective:

  • Enhance Collaboration: Foster better communication and alignment between designers, product managers, and engineers through a unified design system.

  • Boost Efficiency: Reduce redundant work by creating reusable components and standardized patterns for faster development and design iteration.

  • Ensure Consistency: Standardize visual elements, interactions, and code practices to create a seamless user experience across products.

  • Create Documentation: Develop clear documentation that enables all team members to understand how to use the design system with ease.

Role:

Product Designer, Publica by IAS

The design system does not exist!

When I first joined Publica, a design system was nonexistent. It was my first project to create one for the team. 

Initial user pain points 

  • As the user along with pms, it was difficult to ideate or understand what components are used along with consistency. 

Initial cost of problems 

  • Time (finding existing designs and basically having to create everything as new).

Fast forward to 2024, and while the design system has grown, it hasn’t received the necessary attention. There are numerous new components, but we’re not standardizing them as we should be. Outdated icons are being used, and new components are constantly being added without proper oversight.

Current User Pain Points:

  • Inconsistency: Multiple versions of similar components, leading to confusion and inefficiency.

  • Unstructured Components: Frames without defined layouts, making it harder to maintain and scale.

  • Too Many Icons: Overwhelming variety, lacking consistency and creating unnecessary complexity.

Costs of the Problem:

  • Time: Teams are spending more time hunting for the right components or recreating them from scratch.

  • Documentation: As the team grows, the lack of proper documentation slows onboarding and creates confusion across different teams.

Strategic Approach

Research & Insights:

  • Conducted an in-depth review of existing design systems to identify best practices and determine what would work best for our team's needs.

Solution Framework:

  • Clean Up: Streamline and organize current pages, removing redundancies and improving clarity.

  • Simplify: Focus on simplicity to enhance usability and consistency.

  • Component Creation: Develop components with flexible properties and states to ensure reusability and adaptability across different use cases.

Implementation Plan:

  • Page-by-Page Approach: Tackle the design system incrementally, prioritizing the most frequently used components first to create a solid foundation.

Measurable Results

  • Speed & Efficiency: Streamline the process of creating mockups, allowing for faster iteration and quicker turnarounds.

  • Accessibility: Make the design system easily accessible to other team members, including product managers and engineers, to ensure smoother collaboration and consistency across teams.

Outcome

An updated design system was delivered, featuring new components, guidelines, and comprehensive documentation to ensure consistency and scalability across design.

Next phases…

Collaborate with Engineers: Align closely with the engineering team throughout the build process to ensure that design components are accurately implemented and reflect the system's standards.

Unify Design & Development: Ensure consistency by bridging the gap between the design system and the codebase making sure what’s in the design system is mirrored in what engineers are building. Utilize Figma as a repository (explore Storybook or other tools).