How to build a design system that lasts
Inclusivity is one of Emergn’s guiding design principles. We believe solutions should include everyone, through carefully delivered work and continuous refinement. We had the opportunity to put this principle into practice while developing Emergn’s design system, which is a set of reusable digital components that can be assembled to create a variety of applications, all while adhering to corporate guidelines.
We wanted to create a robust and lasting design system. From the start, we considered that accessibility was essential, as we are very aware that proactive inclusivity benefits all users.
And, although all organizations should understand the business value and the impact that accessibility has on customer experience, unfortunately, there aren’t many accessible design systems available in the market. Our ambition was to have accessibility as one of our design system’s differentiators, connected with our guiding principles within Value, Flow, and Quality.
Consider user accessibility from the start
In a system, the parts are connected, and they affect the whole. Most design systems use a common approach, where design components range from the most basic, such as colors and font, to the most complex, such as menus, cards, forms, and whole web page templates such as a login screen. Because these elements are reusable, the use of a design system significantly speeds up the development of a website or mobile app.
However, the advantage of reusable components in a design system can become a drawback because accessibility problems can propagate and scale upwards. A use case from deque showed that approximately 67% of accessibility issues originate in the design phase.
For example, when thinking of the modular design approach, that means that a color contrast issue will potentially reflect on every component and template that uses that color. Color contrast is not the only issue that can originate in these first stages. Inappropriate alternatives for non-text content, challenging keyboard navigation, and a lack of clear labels, alerts, and component states are among the most common issues.
It is crucial to perform manual and automated tests from the very beginning, even in the design phase. At Emergn, we saw the opportunity to improve our process by starting quality assurance testing before the components are developed and looking into potential accessibility barriers.
Components applied in context
While an accessible component is always a good starting point, the way it is implemented in each project must take accessibility and usability guidelines into consideration. Many aspects need to be considered in context, such as if components are following a logical reading order, or if the titles, headings links, and labels are being used in a descriptive manner. To help designers and developers in their decision-making process, we’ve put together a set of best practices that ensure that the correct patterns are consistently applied. This documentation includes information on the preferred components to be used in specific scenarios and the options available so that the product is as accessible as possible. Additional resources and training have been provided to the team developing and using the design system to ensure that accessibility standards are kept.
The Value, Flow and Quality (VFQ) use case of our design system
At Emergn, VFQ is our context-specific and outcomes-driven approach to transformation based on three guiding principles. We teach this approach in many ways, but the core channel is our digital learning platform. Our learning platform is our main design system adopter. The very first release of our learning platform was designed and built from scratch, without a component library, visual guidelines, or a set of standards. While this approach worked in getting the platform from an idea to a working solution, it was not sustainable in the long term.
We saw there was room for improvement and that consistency and accessibility needed our attention. With the design system development, our team collaborated on bringing our very own design and development standards to life. As the system has been developed, we have implemented changes and seen incredible results. The design system removed the guesswork from designing new features by providing us with a large set of reusable components and visual styles that meet industry-standard accessibility guidelines. Not only has this increased our team’s speed, but it gave us more certainty that we’re meeting our customers’ needs with a platform that is built to last.
It is with the mindset of continuous improvement that we keep working on our process and our design system. By starting off on the right foot and taking all considerations into account during the development process, you can better ensure that your design system will last.
If you’re interested in learning more about our design system and how a systemic approach might help your own products, our Experience Design capability is the right place to start. Alternatively, you can request a demo to show how we can help you scale your digital products and user experiences faster and better with our Infinity Design System.
Additional Insights
Is your L&D helping (or hurting) culture and employee retention
Reflections on workplace learning
Building a culture of improvement
