GR8 People, a talent recruiting software company, needed to evolve the way they approach design consistency, design validation and accessibility throughout their products. It was determined that the Product team would devise a strategy to create a design system.
My Role
Lead Product Designer
I organized the design system efforts with the head of development, I held an accessibility lunch-and-learns about accessibility and helped coach sales on how to talk about accessibility and our design systems effort with clients.
Goals
The goal was to make well-designed and developed, reusable, UI components, with accessibility standards in mind, to reduce repetitive dev tasks, and create consistency throughout the product and reduce technical debt.
Create a Design System that is…
- Easy for Development to access, ideally just a link away online
- Simple for Product to update
- Able to contain links and assets from Product and Development
- Able to keep assets (ex: an icon library) in one place to be used over and over
- Able to contain instructional documentation if needed
Solution
As Lead Product Designer I collaborated with Development to first discuss and outline how we would work together on this on going project because it would change a lot of the way our process worked. Product needed to make sure that the design standards are being met and that the designs are honored in the development phase so we made some adjustments to the way we work together.
Development needed a place where they could build and publish UI components before they went into the product. Creating a component library would allow the team to make sure they looked right, that the functionality listed in the requirements was achieved and that Development wouldn’t be creating the same components over and over burning dev hours. Development decided to publish and house their components in Storybook.
Product decided to publish our assets, rules, files, and other design system documentation to Zeroheight because it would make it easy for anyone to access.
Update the Design/Development Process so that…
- There is room for Development to create a component library of their own
- There is a system for the Product Designer to validate their designs that are completed by Development to make sure all new components work and look as intended by the Product team
It wasn’t just finding a place to house the components, we also needed to adjust our process to make room for the development of new components. We created new storybook tickets where development was given the extra time to work on these components in a stand alone way. We also implemented design validation tickets for those storybook tickets and to the final designs so that the product designer would have the final say if something was complete. This was to make sure that the design and usability were honored.
Accessibility Effort
Accessibility was introduced at this time as a priority as well. The Product designer introduced a company-wide accessibility effort committing everyone putting in the extra effort when a new feature is coming out to make sure it’s accessible. This was so that the UI components and layouts etc are built in keeping with current accessibility standards.
- When a feature is worked on, an “accessibility validation” sub-task will be created so that the component or layout is checked for key accessibility principles
- If there are specific accessibility needs for Development to address in the development process, they will be documented in the requirements
- All new features or features getting any updates will have an accessibility validation task associated with it for Product to check the design/ component to make sure it passes our agreed-upon accessibility standards
- If an accessibility issue is found that might be a bigger issue it can be broken into it’s own stand alone task at that point
Reflection
All of the teams agreed unanimously that these changes have benefited everyone on the development and product sides. These changes have reduced the amount of re-engineering, saving a lot of time. The reduction of technical debt is one of the most obvious improvements, proving that spending a little time upfront can pay off in the end. Being able to share a link quickly helps keep the process flowing faster and reduces confusion with version control.
Product committing to a design system also helped to form patterns keeping the product design consistent. The accessibility efforts are in motion and has improved the product’s reach by improving usability for our users. It has also had some positive business outcomes, the sales team can now boast the accessibility effort with clients and potential clients which they have had only positive feedback about.
Reflection sessions have been used to knowledge share on any new accessibility findings and techniques. Keeping accessibility as a part of the regular workflow with consistent validations on all features and changes has helped us to make GR8 People’s products WCAG compliant.