Ketwich Design System
Design standardisation for Scripbox
Project details
The Scripbox web and mobile apps were plagued with numerous inconsistencies and mismatching design elements. Different product pods were using different versions of UI components leading to a non-uniform experience across the product. By developing Ketwich, we hoped to solve all of those problems and provide users with a consistent and elevated experience.
Atomic Design
We chose to follow the methodology proposed by Brad Frost in his book Atomic Design.
Atomic Design groups all components into the following:
- Tokens
- Atoms
- Molecules
- Organisms
- Templates
- Pages
Source: Extending Atomic Design
Design tokens are an agnostic way to store variables such as typography, color, and spacing so that your design system can be shared across platforms like iOS, Android, and regular websites.
Standardising spacing
Defining grids
Icon repository
Atoms of our interfaces serve as the foundational building blocks that comprise all our user interfaces. These atoms include basic HTML elements like form labels, inputs, buttons, and others that can’t be broken down any further without ceasing to be functional.
Form elements as Atoms
Molecules are relatively simple groups of UI elements functioning together as a unit. For example, a form label, search input, and button can join together to create a search form molecule.
Search as a Molecule
Organisms are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms. These organisms form distinct sections of an interface, for instance, the header of a webpage which could contain a logo image, search bar, and links.
Header can either be a Molecule or an Organism depending upon the complexity of its subcomponents
Templates display all the necessary page components functioning together, which provides context for these relatively abstract molecules and organisms. When crafting an effective design system, it’s critical to demonstrate how components look and function together in the context of a layout to prove the parts add up to a well-functioning whole.
Pages are specific instances of templates that show what the final UI looks like with real representative content in place.
Collaboration with Developers
We reached out to our Front-end team and created a plan together in order to create a library of reusable components and patterns. This would be maintained not just on Figma in a master file, but also on Storybook as an accessible library for every Front-end developer.
Impact
Since conception, over 60+ new components were introduced. Existing components and patterns were standardised. Redundant work was significantly reduced as the design system documentation enncouraged designers and developers to reuse components and patterns. The handoff process also became significantly smoother since developers and designers were referring to connsistent and updated libraries. Overall speed of design and front-end execution was noticed to have improved by 40%.