The challenge
Zertiban, a B2B SaaS company specializing in digital signatures and payments, experienced rapid growth since its inception in early 2022. This growth, however, was not accompanied by a structured design approach, leading to inconsistencies in the product's design.
One year later, we decided to build a solid design system to ease design decision-making, enhance collaboration with the development team and ensure product consistency.
Roadmap and audit
Our journey began with a 20-week roadmap, outlining the project's scope and key milestones. Spoiler alert: we accomplished it with just a two weeks delay.
We started by conducting an audit of our current design and development work, uncovering a range of inconsistencies in color usage, iconography and design patterns.
Following this, we laid down the basis of our system, reaching consensus within the design team and with the development team. One of our initial decisions was to adopt the Angular Material library, which allowed us to move faster.
Additionally, we agreed on the naming conventions for our design tokens and icons, determined how to categorize our components, and, of course, decided on the name of our design system: Burritos.
Building the system: guidelines and components
Firstly, we focused on iconography, using Material symbols as our foundation. We then grouped and tagged the symbols that were relevant to our needs.
Next, we tackled color and typography tokens. We chose Inter as our primary typeface and established the typographic scale. Regarding colors, we defined our global and semantic colors as well as our of specific color scheme.
Moving on to guidelines, our goal was to create a complete design system, not just a UI kit. This included setting breakpoints, responsive grids, spaces, and defining other tokens like border radius, stroke widths or icon sizes.
Finally, we revamped the components that make up our product. Working closely with the development team, we designed and implemented over 40 components.
Implementation and maintenance
We documented our DS in Zeroheight to facilitate internal adoption and to integrate design files (Figma) with development components (Storybook), creating a seamless source of truth.
We implemented Burritos gradually, aligning closely with business requirements. We have a dedicated workstream for the ongoing development and maintenance of the design system, as it is a never-ending responsibility.
By the first half of 2024, our aim is to have our Storybook fully operational and integrated with Zeroheight.
