Design System Maturity – How to Improve Your Design System
We write a lot about design systems and how they can help guide your product development process. Many people, including experienced designers, don’t understand that developing a design system is a marathon, not a sprint!
We want our design system to be as elegant and comprehensive as industry-leading systems like Polaris (Shopify), Carbon (IBM), iOS (Apple), Material (Google), or Lightning (Salesforce) without realizing the maturity model these organizations followed to achieve success.
This article will help you understand the roadmap to design system maturity and how to optimize the process to achieve your goals much quicker.
UXPin lets you store and manage your organization’s design system inside the design tool. You can set permissions to align with your design system governance to maintain cohesion and consistency. Sign up for a free trial to explore UXPin for your next design project.
Importance of a Design System
In a startup environment with a handful of designers can developers maintaining product consistency is relatively simple. But, as a product evolves and teams grow, the importance of a design system increases.
If multiple design teams arrive at a design handoff, each with their own interpretation of the design system’s components, the product’s features will lack cohesion and consistency. Developers have to code from scratch constantly, and users will be left scratching their heads in frustration or abandon the product altogether.
A design system keeps UX designers, product teams, and engineers on the same page. They can build interfaces faster while maintaining a high degree of consistency.
As the product evolves, designers must follow design system governance procedures to maintain integrity and consistency. The goal is to reach a stage where designers and engineers can launch a product with little or no coding because the design system offers the building blocks to scale.
Achieving that goal means organizations must follow a design system maturity model that promotes the flexibility to grow!
Stages of Design System Maturity
Organizations worldwide have used several design system maturity models, but we’ve found the one from Iress is easy to digest, replicate, and scale.
Design System Product Owner and Regional Head of Product Design at Iress, Nick Elliot, got the inspiration for this model from TJ Harrop, Design System Product Manager at the NSW Government. It’s a four-stage process that outlines the steps it takes to achieve design system maturity.
- Stage one – Style guides
- Stage two – HTML & CSS
- Stage three – Design & coded components
- Stage four – Fully integrated
It’s important to note that it took Iress eight years to get from stage one to four. Which goes back to the point we made at the beginning of this article–“developing a design system is a marathon, not a sprint!”
Stage One – Style Guides
If you’re at stage one, your organization doesn’t have a design system but might have a few common assets defined. Most startups will find themselves here, but many established organizations live in stage one too!
During this early stage of design system maturity, teams design product assets and develop brand consistency. The assets live in PDF style guides that designers use to create assets.
While these style guides provide some consistency, designers often have their own version of the design system saved in their design tool. Design handoffs are often chaotic because there’s drift and inconsistency due to multiple interpretations of the design system.
Another problem with stage one is that PDF style guides aren’t scalable–at least not with any accuracy or consistency. If you release a new version of your style guide, designers must note the changes and update their assets manually. Creating more work and increasing time to market!
If your organization is suffering from these design issues, it’s time to implement a strategy to develop a scalable design system.
Stage Two – HTML & CSS
At stage two, your design system components are defined in snippets of HTML and CSS. While this is an improvement, the design system is still a guideline rather than building blocks designers and engineers can grab to build an interface. It’s open for interpretation which means design drift and errors still occur regularly.
HTML and CSS snippets also need regular updates, which means DesignOps and DevOps need to communicate constantly to sync design systems manually.
Stage Three – Design & Coded Components
Many companies linger in stage three indefinitely. The organization has a design system and follows governance procedures before updating pattern libraries and components.
The design system is fully documented, which streamlines onboarding and reduces errors.
Organizations usually have a dedicated team to maintain and update the design system, but DesignOps and DevOps must still work together to maintain a single source of truth. While this increases consistency, it’s a costly and inefficient process.
Still, prototyping and testing are much quicker because designers can use design system components to build interfaces. Because of this, the time to market is significantly faster because designers and engineers have the components they need.
Stage Four – Fully Integrated
With a fully integrated design system, designers and engineers work with a single source of truth. There’s no design drift and virtually no coding required to build new digital products.
Design systems sync automatically, so product teams, UX designers, and engineers always work with the same components. Consistency is no longer an issue, and team members spend more time focusing on user research and improving the user experience than fixing design and code issues.
Teams can design and launch a product seamlessly, requiring minimal communication during the handoff because developers can just copy/paste.
To many organizations, stage four of this design system maturity model might seem like an impossible dream. But the truth is you can skip a lot of heartaches, get to stage four and achieve your design system goals quicker than you think!
Getting to Stage Four With UXPin Merge
After spending 12 months reviewing tools and solutions, Nick and the team at Iress discovered UXPin Merge.
UXPin Merge allows you to sync code components from a repository with the design editor, so designers and engineers work with exactly the same design system.
UXPin is a code-based editor meaning the design system components are fully functional! Designers can build fully functioning, high-quality prototypes in minutes by simply dragging and dropping the components they need onto the canvas. Prototypes have the same fidelity and functionality as the final coded product.
“With Merge integrating directly with the code repository, designers and engineers will be using the exact same components. Maintained centrally, with one set of components, this will free up our designers’ time.” Nick Elliot – Design System Product Owner and Regional Head of Product Design at Iress
Any changes to the design system in the repository automatically update to UXPin’s designer editor. UXPin even notifies team members of the update, so everyone is aware of the changes.
Design handoffs are seamless with UXPin because designers hand developers a fully coded prototype. Engineers can copy/paste the components, adjust the props and build the final product fast.
Drag and Drop Design
UXPin Merge also creates the opportunity for non-designers to design digital products and interfaces. PayPal’s product teams (most of whom have no experience with design tools) design all the organization’s internal products using UXPin Merge.
Most product designers can build a one-page, fully functioning prototype in under ten minutes! PayPal’s experienced UX designers can’t do the same job using a vector-based tool in less than an hour–without the functionality of code-based design!
Nick noticed the same benefit for Iress: “It will give non-designers access to a tool, whereby they can also experiment and have exposure to the same design considerations…It will allow more collaboration, allowing designers to be facilitators of the design process, not the owners of design.”
Summary
Getting to design system maturity level four takes time, but it doesn’t have to take eight years as it did for Iress. Code-based design tools like UXPin and Merge technology can help organizations achieve their design system goals much faster.
The goal is to get designers and engineers speaking the same language to overcome the same constraints. You cannot get to a fully integrated design system maturity level using traditional image-based design tools. Code-based design is the only way to bridge that gap.
Even if you’re still at stage one or a startup without a design system, code-based design tools can accelerate growth by improving prototyping and testing. If designers can build prototypes that result in meaningful feedback from usability participants and stakeholders, they can minimize errors and make it easier for engineers to develop the final product.
With a code-based solution from UXPin Merge, you can skip stages two and three to reach design system maturity without the headaches many organizations have to endure.
Using UXPin Merge, your design system maturity model becomes a two-phase iterative process:
- Stage One – Component Design: Use UXPin to design your product’s elements and components. Engineers can use Spec Mode for an automatically generated style guide to code components. Designers can also save any component to a shared design system so every team member can access the same parts.
- Stage Two – Full Integration with UXPin Merge: Once you release the first version of your product, engineers store the components in a repository so designers can build new features using fully functional code components. When the design system needs updating, return to stage one and iterate.
Reach your design system goals faster and take your prototyping to the next level with code-based design from UXPin. Sign up for a 14-day trial to explore UXPin’s features for your next design project.
