Andrei Tarasevich
PORTFOLIO • Management

Design Systems Practice

Design Systems are the foundation of every Design Team's working methodology.

These systems determine:
  • Team performance
  • The quality of team deliverables
  • Testing activities
  • The effectiveness of communication between teams

That's why it's crucial that everyone involved in a project, whether it's a Design Team, developers or testers, understands their Design System.
To achieve this effectively, I always recommend the use of knowledge sharing.
This principle promotes the effective collaboration of teams through the design and development process, contributing to an optimal workflow.

The Value of Design System

  • 30-50% costs decreasing for the Design Team activities.
  • Increases consistency and unification of design solutions.
  • More than 30% costs decreasing for the Development Team.
  • Improves the efficiency interactions between designers and developers
    • Speeds up the project onboarding process.
    • Descreases project onboarding time frame from 1-2 weeks
      to 4-16 hours.
    • Improves the testing process and approach.
    • Supports UI and components auto-testing.
    • Delivers clear & scalable specs about UI components styling and sctructure

    The Main Goal of Design Systems

    Consistency of all project and product line elements
    A Design System is built from the smallest (atoms) and biggest (organisms) elements of a project, whether it's colors and typography or page layouts populated with text headings, paragraphs and more. It's a set of rules on paddings, grid systems and guidelines that inform an entire team on how different elements should be located in relation to others.
    Simplifying & speeding up designers' workflow
    • Helps eliminate repetitive tasks
    • Avoids design debt
    • Empowers team members to focus on delivering the best flows for users
    Simplifying & speeding up developers' workflow
    • Encourages the reuse of components and solutions, preventing them from being developed from scratch unnecessarily
    • Removes the need for constant design reviews
    • Provides a framework for components in all the possible states, giving them behaviours that are consistent and predictable

    How to Match Design Systems
    with a Frontend Reusable Components Base

    Naming components & design tokens
    • Use consistent, shared vocabulary
    • Сhoose short & obvious names
    • Ensure that naming denotes structure
    Adding stories and rules
    With Storybook, we create a 'story' for each component state. An example of a Storybook is illustrated in the button example to the right, offering the following stories:
    • Button in default state
    • Button in error state
    • Button with icon or another additional element
    • Button in loading state
    Visual review of UI components with your team
    Matching design systems with a frontend reusable components base cannot be achieved in isolation. It's important that all
    UI components are reviewed by the entire team visually.
    This ensures that Design System structure, components and Design Tokens Names will work with the technology base, and are accepted by the entire team.

    How to Test and Validate Design System Standards
    on Implemented Products

    Give designers access to test components and provide feedback
    Collaborate on scenarios not covered by the Design System
    Conduct functional, visual regression, manual and automated accessibility testing

    Management of Design System Changes

    Communicate changes
    Ship updates regularly and always include a change log
    Open channels for delivering updates
    Create a trigger for the update. For instance, whenever someone pushes updates to the Design System, send a notification via the team communication channel, announcing that a change has been proposed.
    Establish regular checkups
    By holding regular meetings you can set priorities and create a roadmap to improve the system, so that it better serves the needs of the business.
    Establish a clear governance strategy
    • Who approves changes to the design system?
    • How are requests for new components handled?
    • What happens when bugs are found in the design system?
    How to deliver the Design System
    • Estimation, prioritization
    • Roadmap, backlog
    • Introduce versioning
    • Initial workshop
    • Cross-functional collaboration

    Design System Strategy

    How to create Design Systems for a large single product with customizations
    • Create a Design System for the main solution with detailed specs for components and a Design System Management Framework
    • Create a Design Task Flow, with supporting documentation for people involved in the design artifact lifecycle. This is to create a transparent workflow starting from the initial design request and finishing at the testing of the implemented solution
    • Create additional Design Systems for customizations, for instance forks from the main solution
    • Use Design Systems versioning in case development teams are working on different versions of a product at the same time
    How to create Design Systems for product lines with multi-platform solutions & multiple projects
    • Unify the naming of Design Tokens and Design Systems architecture for all platforms used in product line
    • Align the communication and Design System Changes process for all development teams
    • Build a strategy on how to connect separate projects' Design Systems to a single Product Line Design System
    Using Design Systems at a company level
    • Align Design System Creation and Management Processes for every team in the company
    • Create documentation and onboarding specs for newcomers
    • Establish a mentorship program and a feedback collection loop for unified process correction. This will reduce the time taken when onboarding or switching between projects for both designers and developers.

    To UX/UI Mentoring Page >

    Do you want to know more about my experience,
    or wish to discuss a UX/UI Design Management opportunity? Get in touch now. I'd be delighted to hear from you.
    Send Me An Email