Design System Creation

Sector

E-commerce

Duration

10 Months

My Role

Design Manager

The Challange

Otrium needed a comprehensive design system to streamline collaboration between designers and developers, ensuring consistency in design while enabling the faster development of new features. The aim was to create a unified look and feel across the platform, making it easier to scale while maintaining the quality of the user experience.

Problem Definition

As Otrium’s platform grew, inconsistencies in design and development workflows became increasingly noticeable. Different design elements were used across pages, leading to visual misalignment and a disjointed user experience. Furthermore, the absence of standardized components slowed down development processes, causing inefficiencies in implementing new features and updates. These inconsistencies were costly both in time and resources, and without a clear design system, the platform struggled to deliver a cohesive brand experience.

We needed to create a design system that would unify all elements of the platform and provide a seamless communication framework between designers and developers. This system had to be flexible enough to evolve with the platform while ensuring that each new feature adhered to the same high design standards.

Discovery Phase / Research

In the discovery phase, we gathered insights from key stakeholders—product managers, designers, and developers—to understand the platform’s current challenges and future needs.

We conducted workshops with designers and developers to identify inconsistencies in the design and implementation of components across the platform.
Extensive audits were done on the platform's existing UI components to understand where inconsistencies arose and how they affected user experience.
A competitive analysis of other design systems helped us identify industry best practices that could be applied to our own system.

Tool Selection:
As part of the discovery phase, we selected Figma and Zeroheight as our main tools for designing and documenting the system. Figma was chosen for its collaborative capabilities, allowing real-time design sharing between team members and seamless handoff to developers. Zeroheight was chosen for its ability to document the design system in a user-friendly way, providing clear guidelines on how each component should be used by both designers and developers. This combination of tools ensured that the design system would be both accessible and maintainable.

Ideation

Based on the research insights, we started to establish the design system utilizing the Atomic Design approach, which can be simply illustrated through the analogy of making pancakes:

Tokens as Ingredients: The starting point was defining design tokens—colors, fonts, icons, and spacing units. These tokens were the most basic building blocks, much like the ingredients for pancakes.
Atoms as Pancakes: We then created the atoms—fundamental UI elements like buttons, input fields, and containers. These were the simplest, indivisible parts of the UI.
Molecules as Stacked Pancakes: By combining atoms, we developed molecules, such as banners, cards, and filters. These components were collections of atoms working together to form more complex UI parts.
Pages as Syruped Pancake Stacks: Finally, we stacked the molecules together to build entire pages, ensuring a cohesive experience across the platform.

The key idea was to make sure each level (tokens, atoms, molecules) was modular and reusable, allowing for easier updates and scalability.

Design

The design process focused on refining each layer of the system.

Design Tokens: The first step was finalizing our tokens for consistency. We standardized color palettes, typography, and spacing units to ensure uniformity across every design element.

Atoms: We created a library of atomic UI components, such as buttons, icons, and form elements. Each atom was designed with flexibility in mind, able to be combined in various ways without breaking consistency.

Molecules: From the atoms, we designed more complex components like banners, cards, and filters. These molecules were crucial for bringing together various elements to create dynamic, functional UI parts.

Pages: Molecules were then assembled to create the key pages of the platform, ensuring that the design system worked harmoniously across different sections of the platform—from the home page to product detail pages.

Delivery

Documentation: We used Zeroheight to document the entire design system, including guidelines for each token, atom, molecule, and page. This documentation ensured that both designers and developers had easy access to the rules and usage of each component.
Collaboration and Handoff: Figma was pivotal in facilitating real-time collaboration between designers and developers, allowing for a seamless handoff of the design system. I worked closely with the development team to ensure that the system was implemented consistently across the platform.
Release and Testing: The design system was rolled out incrementally, with small, fast releases that allowed us to monitor its performance. Usability testing was conducted after each release to gather feedback and make necessary adjustments.

Outcome

Consistency and Efficiency: The design system unified the look and feel across the platform, providing a consistent experience for users. This not only improved design quality but also sped up development cycles, as designers and developers could now work from a single, shared source of truth.
Scalability: The system was flexible enough to support the platform’s future growth, making it easier to add new features and pages without breaking design consistency.
Faster Time-to-Market: By reducing the friction between design and development, the design system significantly shortened the time needed to release new features.

Learnings

From Research to Action: This project highlighted the importance of translating research into actionable design decisions. Starting with design tokens ensured a strong foundation, making it easier to build larger components later.
Catering to Different Needs: Developing the system required us to balance the needs of multiple teams while keeping the end user in mind. We learned that a flexible, bottom-up approach, where user needs are prioritized, leads to better outcomes than a rigid, top-down system.
Simplifying and Customizing: One of the most valuable lessons was understanding the importance of simplifying and customizing the system. By focusing on modular, reusable components, we made it easier to maintain and update the platform, keeping it relevant as user needs evolved.
Importance of Tools: Using the right tools—Figma for collaborative design and Zeroheight for documentation—was crucial in ensuring that the design system was adopted and understood by all teams. These tools helped keep the process efficient and transparent.