5 Key Design System Challenges and Lessons Learned
A report UXPin co-published with Whitespace identified five enterprise design system challenges at some of the world’s leading organizations. Within these five challenges, the common thread is “how do we achieve a single source of truth?”
This challenging question pertains to everything from design system documentation and components to tools and governance. Organizations struggle to maintain consistency and cohesion, which ironically is what a design system is supposed to accomplish.
Learn from 19 globally recognized companies about design system challenges and how to overcome them in our insightful report. Get your free copy.
Create an efficient design process and help your designers and developers share a single source of truth in both of their workflows. Discover more about UXPin Merge.
The Challenge of Tools
Most companies still use image-based design tools like Figma and Sketch during the design process. While these tools are easy to learn and make product design accessible for designers, they have many shortcomings, most notably limited interactive prototyping capabilities.
Companies rely on plugins or build custom solutions to complete these image-based tool stacks, which increases costs and creates workflow complications.
A single source of truth is the primary goal for every organization using a design system. Ideally, they would have a single tool for the entire product development process.
A solution to the tool challenge
Some companies have found a solution to the tooling challenge with UXPin Merge, allowing designers to build prototypes with coded UI components. This component-driven product development workflow gives organizations the single source of truth they want while allowing designers and engineers to work within their comfort zones.
Design teams still use a design tool during the design process but use fully interactive code-based UI components in UXPin rather than the image-based UI kits they’d use in Figma or Sketch.
Merge syncs UXPin to the company’s design system repository via Git or Storybook, so designers use the same components during the design process as engineers use to develop the final product.
The Challenge of Documentation
Documentation is the biggest design system maturity challenge for the companies we interviewed. Maintaining and updating a design system and its documentation is a resource-hungry process that slows maturity.
Design system documentation helps facilitate buy-in, training, and workflows with usage guidelines and rules. The purpose of this documentation is to increase adoption while ensuring teams deliver consistent UI experiences.
While documenting a design system sounds simple in theory, with no proper industry standard, companies struggle to execute this effectively. Some documentation solutions include:
- PDFs
- Online portals
- Slack channels
- Whiteboard tools (Miro, Mural, etc.)
Another challenge is that many companies manage more than one version of a design system–a component library for developers and a UI kit for designers. Furthermore, design teams might require multiple variations for each tool–i.e., designing in Figma and prototyping in Zeplin.
The design system team must manage library and documentation updates for all these platforms and solve any platform-specific challenges.
A solution to the documentation challenge
Modeling the documentation from successful design systems like Google’s Material Design, Shopify Polaris, Stack Overflow’s Stacks, and others allow organizations to copy what works. Finding tools that automate and unify documentation is also crucial for reducing operational burdens and accelerating design system maturity.
German-based software development agency dotSource is a fantastic example of overcoming documentation and the single source of truth challenges by switching tools. dotSource uses UXPin Merge and Storybook to manage its design system.
Using this combination, the company has achieved a real single source of truth where:
- There are no inconsistencies
- One change automatically syncs design and code
- Documentation is always up to date
- Seamless collaboration between design and development
The Challenge of Governance
Design system governance is vital for adoption and maturity, but implementing effective processes is challenging for teams who must constantly prove ROI to management–consuming valuable time and resources.
A solution to the governance challenge
Political and financial C-level support is the most effective method for overcoming design system governance challenges. Acquiring this support requires the design system team to build a strong business case that speaks to the needs and concerns of stakeholders.
Delivery Hero’s product team secured C-level support by creating a value proposition around the problem of technical debt. The team used an experiment to demonstrate how reusable design system components reduced project delivery by 57% with zero debt.
“People outside of UX have trouble understanding user experience and design thinking principles. Explaining the problem isn’t enough; you must show them what’s wrong and how it impacts the business.” Amber Jabeen DesignOps Director at Delivery Hero.
The Challenge of Adoption
Many organizations aim to achieve strong awareness and support of the design system for maximum success and company-wide adoption. Education and implementation make this adoption slow and challenging.
Adoption is particularly challenging for design-driven organizations and those with competing systems and workflows. A lack of C-level support also reduces adoption rates due to the increased effort it takes for the design system team to reach multiple teams and departments.
A solution to the adoption challenge
Organizations must treat design systems like products that require effective communication and marketing strategies for success. Some of the ways organizations overcome design system adoption include:
- Involving HR and DesignOps in change management processes
- Organizing design system workshops and meetups
- Making the design system team more accessible through Slack, email, and other channels
- Approaching teams individually
- Hosting regular design system update meetings
- Producing marketing and training materials
Delivery Hero uses a three-component adoption strategy for its Marshmellow design system:
- Gamify: Delivery Hero uses four adoption tiers for design system usage and awards users. Team members can visualize their success on a dashboard, and the DS team encourages them to hit their next target.
- Socialize: The DS team involves the organization in the design system’s key decisions and hosts regular events to connect with users and discuss challenges and successes.
- Celebrate: The DS team celebrates every small win as a symbol of progress toward 100% adoption. They celebrate individual team members and overall adoption, creating a buzz and excitement about the design system.
The Challenge of Maturity
Design system maturity varies across organizations and industries. Development-driven product development teams are ahead of their design-driven counterparts due to the use of code components in design and development processes.
Most organizations are at design system maturity level three, with designers using an image-based version of the code component library. Many refer to this as a “single source of truth,” but it’s still one step away from being a fully integrated design system using one library.
A solution to the maturity challenge
As stated in the introduction, the common thread throughout the whitepaper is “how do we achieve a single source of truth?” This single source of truth is the key to achieving complete design system maturity–Stage Four – Fully Integrated.
The goal is to bring design and development into one iterative process where design handoffs, drift, inconsistencies, and technical debt are no longer issues.
UXPin Merge has proven to solve these challenges at the startup and enterprise levels. Bringing code components into the design process is the best solution for achieving stage four design system maturity–unifying designers and engineers while maximizing product coherence and consistency.
Merge’s code-to-design workflow solves many challenges outlined in our whitepaper:
- UXPin does the job of multiple tools used in standard image-based workflows, eliminating the need for separate platforms for design, prototyping, testing, etc.
- Using Merge with Storybook allows developers to generate documentation simultaneously with component releases and updates.
- Merge streamlines governance by reducing burdensome operational tasks and manual workflows.
- Increases adoption by delivering interactive components allowing designers to build advanced prototypes more efficiently and consistently.
- Using Merge accelerates maturity, allowing even startups and one-person product teams to reach stage four.
Getting Started With UXPin Merge
Organizations have two options to get started using UXPin Merge for their design system:
- Git Integration: Connects UXPin directly to a Git repo for React component libraries. Organizations get access to all of Merge’s features, including Version Control, Patterns, and managing JSX presets.
- Storybook Integration: Connect any Storybook to UXPin, including React, Vue, Angular, and other supported libraries. The best solution for syncing DevOps and DesignOps workflows.
After the initial setup with UXPin, Merge works automatically behind the scenes syncing component updates to UXPin’s design editor, so designers and engineers always work with the same library.
Merge’s drag-and-drop design workflow makes design more accessible, even to non-designers like product owners, developers, and other stakeholders, allowing more people to build prototypes and test ideas within the organization.
Solve your design system challenges, and deliver higher quality products with fewer inconsistencies and debt using the world’s most advanced design tool. Visit our Merge page for more details.
