Design system for Bonterra
Stitch is bringing cohesion to Bonterra’s fragmented products by introducing craft, accessibility, and high-quality user experiences. I wrote the guidelines for accessibility (WCAG 2.2), progressive enhancement, and layout. I also built, documented, and provided hand-off for digital foundations, design tokens, components, and patterns for the teams to consume.
Business goals and gathering feedback
It’s imperative to know where the company is, the teams involved, and where the company is going when deciding where to start a design system. Internal stakeholders are crucial to the success. Through multiple products and legacy design systems, it was decided to build out a “system of systems” design system using the hybrid team model.
Design tokens
I orchestrated and built out the token structure, naming convention and implementation. The design tokens sync across Figma and JSON allowing both designers and developers to be building with the same consistent building blocks.
The design tokens consist of two layers of primitive and alias tokens. The alias tokens include spacing, sizing, color, borders, radii, elevations, typography, and breakpoints. Our typography adjusts based on the breakpoint and makes it easy for designers to adjust their mockups for mobile and desktop applications.
Component exploration process
During exploration, I work with designers building features on what their needs are, do competitive analysis on other design system components, utilize our established foundations, work through Stitch’s accessibility standards and design principles, and create several versions and iterations. With my front-end development knowledge, this exploration includes creating the structure similar to how it would be written in code to help with parity for hand-off to engineers.
Hand-off process
Once the component has been finished, I alert the product design teams and hand-off the component for the engineers to build. I provide the designers with a sticker sheet and a detailed spec sheet for the engineers using the design tokens defined in the system.
Forming standards and guidelines
As the Stitch design system was newly forming, I created a lot of the initial guidelines and foundations. With most things, they are iterative and improving. I created accessibility guidelines based on WCAG 2.2, progressive enhancement standards for creating mobile-first design and code, and foundational elements like layout. I built out a system for our grid, breakpoints, and overall spacing and sizing.
Below is the spacing scale that was built on a 4px scaling system. I categorized into three different groups to help designers know which to use in creating mockups. This scale also assists designers in creating vertical rhythm without the need to pixel push to perfection. It’s done for them in an easy way through Figma variables and the spacing scale.
