Case Study:
Design Systems

Case Study: Crafting Comprehensive Design Systems

Overview

As the designer and front-end developer, it gives me the freedom to create a unified design system that can be used across multiple stages of projects. With this in mind, I wanted to create a design system that was not only a visual identity but also a way to streamline the workflow for both design and development.

Goals and Objectives

• Achieve visual and functional consistency across various digital products.
• Accelerate the workflow for both designers and developers.
• Ensure maintainability and scalability of digital assets.
• Allow faster iteration and development of digital products.

Approach: Modified Atomic Design

Atomic design, by Brad Frost, is a methodology that can accelerate the process of creating modular designs. The principle is to not build pages, banners etc but to build reusable atoms that can exist both as part of larger elements and on their own, with one fundamental “source of truth”.

When developing this idea, I wanted to expand the metaphores of atoms, molecules, organisms to colonies to help explain the natural metaphor of the design system. Atomic design currently uses templates as the largest unit of work .

• Atoms: Atoms are tiny, individual peices such as a colour, typographical style or an individual icon.
• Molecules: Molecules are collections of atoms that form a single entity, such as the search box with button etc.
• Organisms: Organisms are logical collections of molecules to form a larger chunk of overal element such as a header or banner.
• Colonies: Colonies are collections of organsims that tend to form a full block of work i.e. a webpage, booklet etc.

This structured hierarchy facilitated intuitive collaboration between teams, ensuring clarity in both design and implementation.

BEM (Block-Element-Modifier)

When implementing BEM, we can follow the same methodology as atomic design for the individual elements, but you want to limit your structure to the molecules level. This allows for a more dynamic nature of a page and to force every element to be agnostic of the organism or colony it's in.

• Block (Molecules): Independent components (e.g., navigation).
• Element (Atoms): Sub-components dependent on a block (e.g., navigation__item).
• Modifiers: Variations or states of blocks/elements (e.g., navigation--collapsed or navigation__button--large).

Using this structured approach simplified development, reduced styling errors, and enhanced overall code efficiency.

Implementation & Results

The design systems were systematically implemented across multiple digital environments:

• Efficiency: Component-based development reduced production time significantly.
• Consistency: Achieved uniform visual styling and user experience across all digital products.
• Collaboration: Enhanced communication and collaboration between design and development teams, significantly reducing confusion and iteration cycles.

Impact

The adoption of these comprehensive design systems resulted in measurable improvements in productivity, consistency, and collaboration. By continuously evolving the frameworks, teams maintain high standards for user experience, scalability, and operational efficiency.