Implementing a Design System in an Existing Product

While the journey may be challenging, 76% of organizations with successful design systems attribute their achievement to established processes and practices.

Surprisingly, the common perception of building a design system is to create a component library with documentation, but the key to success lies in proper processes and practices.

What is a design system?

A design system is a comprehensive collection of guidelines, principles, and components that are used to create a consistent and cohesive user experience across digital products or platforms. It serves as a single source of truth for design and development teams, providing a set of standardized elements, patterns, and rules.

A design system typically includes components such as buttons, forms, icons, typography, colors, and spacing, along with documentation that outlines how these elements should be used and implemented. It also includes design principles, interaction patterns, and accessibility guidelines that guide the creation of user interfaces.

A well-designed and maintained design system streamlines the design and development process, promotes consistency across products, and enhances the overall user experience.

Design systems are not limited to visual design. They also encompass the underlying code and development practices, making them a valuable resource for developers. This includes coding standards, coding conventions, and libraries or frameworks that facilitate consistent coding practices and help maintain code quality.

What to include in a design system

A well-designed and comprehensive design system typically includes several key components that work together to ensure consistency and coherence in design, functionality, and brand identity. These components may vary but generally, a design system should include the following:

1. Design Principles: Provide the organization's design philosophy and set the overall direction for the system.
2. Design Elements: Comprise the visual and interactive components of the user interface, such as buttons, forms, icons, typography, colors, and spacing.
3. Documentation: Includes guidelines, style guides, pattern libraries, component libraries, and code snippets for seamless implementation by designers and developers.
4. Accessibility Guidelines: Consider users with disabilities, covering color contrast, keyboard navigation, and screen reader compatibility.
5. Interaction Patterns: Define predefined ways in which users interact with the interface, such as navigation patterns, form interactions, and animation effects.
6. Code Libraries and Frameworks: Provide visual elements, code libraries, frameworks, and coding standards for consistent coding practices among developers, ensuring maintainability and scalability.
7. Governance and Maintenance Plan: Includes regular updates, processes for managing contributions, handling feedback, and addressing issues or bugs to ensure ongoing improvement and maintenance.

5 steps for creating a design system

1. Start with structuring the team

Before diving into the implementation of a design system, it's crucial to establish a strong team. This entails defining team members' roles and responsibilities with clarity. It's essential to bring together individuals with diverse backgrounds, skills, and expertise to ensure that the design system aligns with your product's specific needs.

There are various approaches to rolling out a design system into an existing product, and the chosen path often influences the team structure for implementation. Let's explore some of these team models:

• Solitary Team Model: This approach is based on an established asset library, often open source, such as Bootstrap. It is suitable for teams that lack design and frontend development resources. However, its effectiveness may be limited when significant customization or extension is required. The owners of the design system may not be actively involved with the users, resulting in addressing generic needs. Teams may need to handle customizations, implementation, and adoption on their own.
• Centralized Team Model: In this approach, a single dedicated team is responsible for implementing the design system, including its policies and processes, and spreading it to product teams. This team may or may not be involved in designing and developing the design system itself and could be an external agency. By being fully dedicated, this team has the space to identify opportunities and set up practices and processes, but may lack context for product-specific needs.
• Federated Team Model: A more decentralized approach where a representative and a team of multidisciplinary individuals manage the design system. They work collectively to implement the design system and spread knowledge within their circles, equipping others to do the same. This approach may lead to relevance across different product suites and platforms, but it can also result in inconsistencies or duplication across the organization. Decision-making challenges may arise due to scattered discussions and a lack of control.
• Hybrid Team Model: This approach combines elements of both centralized and decentralized implementation team models. Some parts of the design system may be managed centrally, while others are handled by individual teams. The central team focuses on the organizational aspects, such as policies and processes, while the community makes contributions to the design system. The central team also validates shared needs and determines which are not. This approach allows for a balance between centralization and decentralization.

The choice of team model for design system implementation depends on various factors, such as organizational structure, available resources, and desired level of control. It is essential to carefully consider the strengths and weaknesses of each approach and choose the one that best aligns with the organization's goals and culture.

Comparison of team models for scaling design systems

Maintaining visibility of unshared component inventory is a useful tactic to consider. This practice provides full transparency to the team and facilitates quick action when a design becomes a shared pattern. To achieve this, you must keep track of components used by individual teams or single projects which do not meet the inclusion criteria for the design system. List them in an ”Unshared component inventory” for easy review and reuse when needed, or include them in the design system when they are used in multiple areas to maintain consistency across the organization.

The optimal implementation model for a particular organization will depend on its unique needs and goals, including factors implementsuch as desired consistency, coherence, flexibility, and customization.

It's important to remember that in organizations that have already launched products to the market, there may be influential decision-makers who are not directly involved in product building. Ensuring their involvement and buy-in from the very beginning is important.

2. Define goals and metrics

Adapting goals and success metrics to suit your organization's unique needs and product requirements is a vital part of the implementation process. It requires teamwork to determine the approach and method for measuring success. One effective approach is to set goals together, keeping in mind how the metrics can validate the extent to which the organization's business goals are being met.

There are several general success metrics that are worth considering at the outset, as they can help you demonstrate the impact of your efforts on the organization and enable you to make a case for resources and budget allocation in the future. These metrics include:

• Development velocity for end product teams
• Time to launch and release end products
• Accessibility rating of end products
• End product quality (e.g., time spent on rework, results of regression testing, etc.)
• User satisfaction rating/satisfaction score (e.g., NPS) – addressing both product teams and end product users

It's important to think about where you want to go as a design system team. The main goal for organizations implementing design systems is adoption. You can measure it in various ways, such as defining adoption levels and assessing them across teams or product suites, or by tracking initiated and graded adoption, migration, updates, commitment, and age of the design system.

Other metrics which will help to monitor your team’s work quality:

• Capacity of the team (and how this capacity is allocated among research, building, support, etc.)
• Frequency and quality of contributions (both external and internal, depending on your model and processes)
• Participation and collaboration (e.g., attendance at team meetings, feedback, number of active users on communication channels)
• Sponsor/evangelist engagement
• Library coverage in relation to product features
• Design/QA/decision-making time for a new feature
• Deviation and customization levels (including component detachment, among others)

These metrics serve as indicators of progress and can help win over skeptics by demonstrating the impact and value of design systems through tangible measurements.

3. Audit, research, and build the roadmap

To ensure the success of your team's operation, it is essential to have a solid grasp of the existing product patterns and needs, which can be achieved through proper documentation and a thorough product audit. This process allows you to identify common patterns, unify where necessary, and have tangible evidence to support your design decisions. These proofs and arguments will allow you to serve your users' shared needs effectively and demonstrate your understanding of the end product requirements.

When the design is the primary source of truth for the end product, it becomes easier to gather an inventory of styles and components from the design tool. The findings can be quickly analyzed to identify patterns. However, if the live product is the only source of truth, the task becomes more challenging. In such cases, documenting artifacts from the live product, such as screenshots, becomes necessary. This may be time-consuming, especially if the end product has complex user flows and requires extensive setup to delve deeper into its intricacies. Nonetheless, it is a worthwhile and essential task to ensure the success of the design system.

It is also crucial to treat the design system as a product, not just a project. Conduct research on the workflow, pains, and needs of the product teams who use the design system. Stay vigilant and continuously monitor the end product itself. Keep track of any changes in business needs and the direction in which they are moving. This information is vital in prioritizing tasks and aligning the roadmap of the design system with that of the end product it serves.

4. Scope, estimate, and staff

At this stage of the implementation, you may be curious about the resources and time required for the project. You might have in mind the velocity of your team to meet the coverage rates between the design system components and product features. However, it's important to be aware that the amount of time you'll need to spend on support will depend on the number of patterns that are added to the library. In this case, speed may not be your ally, as it can significantly impact the time spent on bug fixing, adjusting components to different use cases, and constant restructuring of the library. It's crucial to carefully manage the pace of adding patterns to the library to ensure that it doesn't adversely affect the overall quality and stability of the design system.

5. Establish ground rules with policies and processes

Source: Sparkbox Survey 2022

Referring back to the Design Systems Survey by Sparkbox, it is evident that the robust processes and support are the results of the design system implementation. The survey discovered that when design system users feel their needs are met, they found that there are processes and practices implemented successfully. This is noteworthy as the usability of a design system directly affects its adoption, which is a key metric for measuring success and can significantly impact business goals.

To establish effective processes and rules for implementing design systems, it's important to start with a workflow that defines the process, tools, scope, contributors, participants, and reviewers. Creating a clear definition of "done" can help manage a backlog of codependent and overlapping tasks.

You can break down the workflow into steps such as discovery and scoping, designing, building, documenting, publishing components, and measuring outcomes. Dive deeper into each step and prepare the following:

1. Onboarding process and documentation for users and contributors
2. Contribution model (who and how can get involved)
3. Contribution acceptance criteria, for example:

• • • Definition of shared needs
    • Expectations towards content and quality of deliverables
    • Feedback and review process
    • People who are involved

4. Training process (overview and policy, getting started & download instructions, best practices for implementation, release announcements)

5. Support (prioritization, scope, and amount of time and resources spent on it)

6. Backlog management (prioritization and task coordination)

It's crucial to be transparent with this information and make it easily accessible to users. Keeping policies and processes scattered in different documents can lead to increased support requests or misconceptions about the team's work.

Ensure that current tasks and backlog are made public and easy to understand for users. This allows them to track progress, understand how to contribute, and build trust in the team's efforts to serve shared needs in a thoughtful and structured way.

6. Build the pattern library

The pattern library is a key component of design systems, serving as a comprehensive and organized collection of design patterns, UI components, and visual styles. It provides a standardized and reusable set of design elements that help maintain consistency and coherence across digital products. In this section, we will delve deeper into three different methods for working on pattern libraries.

Bottom to top – organic growth

The bottom-up approach, also referred to as "organic growth," is a flexible and adaptable method for developing a pattern library. Team members or small groups create and share reusable design patterns and UI components as they work on specific projects, which are then gradually accumulated and organized into a pattern library.

This approach allows for creativity, collaboration, and ownership among team members, as they contribute to the pattern library based on real-world usage and design challenges. However, proper management is essential to maintain consistency and coherence. Clear naming conventions, documentation standards, and review processes should be established to ensure a coherent and usable pattern library.

Overall, the “bottom to top” approach can be a viable method for developing a pattern library in organizations that value creativity and innovation. It may also be considered as a pilot for a large-scale overhaul using the hybrid model.

Top to bottom – product overhaul

Essentially, the "top to bottom" approach involves breaking down the product into its compositional sub-systems and patterns in a reverse fashion. The gathered information is then used to organize, systemize, and review existing patterns, with decisions made in consultation with product teams. This approach can be used for a complete overhaul of the product or as an initiating step in a hybrid approach, prioritizing patterns based on user needs.

Hybrid

When your product has reached a mature stage and you have the capacity and time, you can consider combining both the “top to bottom” and “bottom to top” approaches. Start by reviewing your product from top to bottom to identify the components that will serve as your starting point. Once these are launched, observe how they are adopted and evolve, while also setting ground rules for organic growth and welcoming new requests and contributions from users. Simultaneously, continue prioritizing previously recognized patterns that are already in the product.

This approach may feel more natural, but it is also more complex as it involves implementing two processes. One for reviewing the entire product and building a library based on findings, and another for incorporating new emerging patterns. This brings risks, as faster growth requires more time for library support.

How to combine design systems with rebranding or product redesign?

If a team chooses to adopt the “top to bottom” approach, there may be a temptation to rebrand or redesign the product. However, before diving into such changes, several factors need to be considered.

First, the product's architecture must be assessed to determine if a smooth transition is feasible. It may be necessary to replace components globally or prioritize different parts of the product.

Similarly, the design documentation must be kept up to date to accurately represent the current state of the product. If the redesign does not significantly impact functional flows, simply marking the designs as outdated in terms of visuals may suffice.

Global component replacement

If the new visuals are far away from what you had in place originally, it is challenging to move gradually from the old to the new without end users noticing something is off. Most likely, the only option is to release the refreshed product as a whole, which will consume much of your time and resources.

Fragmental component replacement

To effectively release product updates with minimal risk of inconsistent user experience, you can gradually roll out changes that are more subtle. One approach is to divide your product into smaller chunks and prioritize them using different criteria:

1. Traffic Rate: You can start by implementing the changes on pages with lower traffic to test the implementation process, and to monitor usability and brand perception. As you gain confidence, you can then apply the changes to higher-traffic product suites, leading the overall product metamorphosis.
2. Occurrence: Another option is to prioritize patterns or components that are the most popular in your system based on product analytics. Instead of refreshing full screens, you can focus on single components, such as buttons, that are frequently used by users.
3. Complexity Rate: Assessing different parts of your product in terms of implementation complexity can also be helpful, especially at the beginning of the implementation process when minimizing risk is crucial. This can help you prioritize areas that require less effort and can be implemented with relative ease.
4. Effort: Look for quick wins in your implementation process, such as low-hanging fruits that can be addressed easily and quickly. Involving designers in areas that require their expertise can also help streamline the implementation process.
5. Importance for Business: Focus on elements that have higher importance in terms of product roadmap, business goals, and maturity. Consider the strategic significance of the changes and prioritize accordingly.

By considering these criteria, you can effectively prioritize and implement product updates in a gradual and strategic manner, ensuring a smooth and consistent user experience while minimizing risk.

What are the challenges of implementing design systems?

Implementing a design system in an existing product can come with its fair share of challenges. One common challenge is the need for cross-functional collaboration and alignment among different teams, including design, development, product management, and other stakeholders. Ensuring that everyone is on the same page and working together towards a unified vision can be a complex task.

Another challenge is the potential disruption to existing workflows and processes, as teams may need to adapt to new design principles, guidelines, and tools. This can require significant effort in terms of training, documentation, and change management. Additionally, managing the timeline and resources for implementation, while also maintaining ongoing product development and releases, can be a balancing act.

Furthermore, addressing the unique needs and constraints of an existing product, such as legacy code, technical debt, and varying design patterns, can add complexity to the implementation process.

Overall, successfully implementing a design system in an existing product requires careful planning and effective communication.

What are the benefits of design systems?

A design system can bring numerous benefits to an organization when implemented in a product. From promoting consistency and efficiency to fostering collaboration and scalability, a design system serves as a powerful tool for creating cohesive and high-quality products. Here are some key benefits of implementing a design system in a product:

1. Consistency and coherence: Providing a set of predefined design assets and components that are consistently used across the product, resulting in a polished and user-friendly experience.
2. Improved efficiency and productivity: Offering reusable design assets and components that can be easily implemented, reducing redundant design work and streamlining the design and development process.
3. Enhanced collaboration and alignment: Serving as a single source of truth for design-related decisions, facilitating communication and decision-making, and ensuring consistency in design elements and interactions.
4. Scalability and flexibility: Providing a foundation for consistent updates and maintenance, making it easier to adapt the product to changing user needs and business requirements, and ensuring that updates are implemented consistently across the product.

Final thoughts

Whether you are building a design system from scratch or implementing it in an existing product, the benefits are numerous - from achieving consistency, efficiency, and scalability in product development to fostering a feedback culture that allows for continuous improvement and user-centric experiences.

By involving all stakeholders, a design system becomes relevant and practical, enabling organizations to gather valuable insights from user feedback and make timely adjustments. This iterative approach helps prevent potential issues and ensures that the design system aligns with the needs of the product and the goals of the business.

With proper implementation and ongoing feedback, a design system can be a valuable tool for achieving consistency, efficiency, and scalability in product development, leading to a seamless and user-centric experience for end users.