Facing the challenge of rapid iteration and the need for a consistently high-quality digital experience, a private tech company recognized the critical need for a unified design system. Leveraging the principles of the golden ratio (Fibonacci sequence) and Atomic Design methodology, this initiative aimed to create a scalable and efficient framework for visual assets, fostering seamless collaboration and maximizing team productivity. 

IMPORTANT: Some resources were replaced due to a client's NDA.

Goal

To architect a unified design system, creating a single source of truth for UI elements across all product teams by empowering designers, accelerate workflows, and ensure consistent, efficient product development.

Target Audience

Primarily focused on empowering the multidisciplinary product team, including UX/UI Designers and Front-End Developers, with a shared design language.

Role & Responsibilities

• Lead UX/UI Designer, from concept to launch.

• Drove the iterative design process, from initial ideation and wireframing through incorporating feedback and addressing accessibility.

Key challenges
(pain points)

Redundant and Fragmented
Assets

The existing design landscape was plagued by outdated and scattered visual resources, with a single component duplicated up to seven times across disparate files and repositories. This created version control nightmares and wasted valuable storage space.

Inconsistent and Inefficient Architecture

The lack of a clear design hierarchy resulted in an inconsistent user experience and hindered efficient workflows. Outdated and off-brand graphics further compounded the issue, making it difficult for teams to locate and utilize the correct assets.

Communication Breakdown and Resource Strain

The absence of a shared design language led to significant miscommunication between teams regarding UI implementations. This placed unnecessary strain on design resources, diverting their focus from critical, complex problems.

Research Study

A comprehensive, user-centered research approach was fundamental to the successful development of this design system. To deeply understand the needs and pain points of our primary users, a mixed-methods strategy was implemented, including:

User Interviews

In-depth conversations were conducted with designers and project managers to understand their workflows, pain points, and needs regarding design systems.

Contextual Inquiry

Observing designers and project managers in their work environment to see how they currently use design components and identify areas for improvement.

Surveys

Gathering quantitative data on design system usage, satisfaction, and feature preferences.

Personas

Based on the research, two key personas were developed to represent the primary users of the design system.

Felix

• Age: 32
• Education: BFA
• Hometown: San Francisco, CA
• Occupation: UI/UX Designer
  

Felix is a UI/UX designer who needs a design system that allows him to quickly find and implement components because he wants to focus on creative problem-solving, not on repetitive design tasks.

Sonya

• Age: 45
• Education: MBA
• Hometown: Bellevue, WA
• Occupation: Senior Project Manager
  

Sonya is a Senior Project Manager who needs a clear and well-organized design system because she wants to ensure projects are delivered on time, within budget, and with a consistent brand experience.

Starting the design

This phase began by establishing the foundational principles of the design system, drawing inspiration from the Fibonacci Sequence and Atomic Design. Initial concepts and structural ideas were then explored through mind mapping and preliminary wireframing.

Ideation, Sketching & Wireframing

Take a look at the
Design System low-fidelity prototype

Key Mockups

This section highlights key visual representations of the design system in action, demonstrating the application of its core components and principles across various user interfaces. These mockups illustrate the consistency and scalability achieved through the system.

High-fidelity prototype

The final high-fidelity prototype showcases a clear and workable user flow. It empowers users to explore design libraries and understand how to implement specific components. Furthermore, it provides essential guidelines and rules for their proper usage, among other functionalities.
Take a look at the Design System high-fidelity prototype.

Style Guides

Going forward

Takeaways

Impact

The implemented design system has significantly improved team efficiency, as evidenced by a web developer's feedback: "we get something from the library and it's done in a snap!... faster than expected is phenomenal.” It has also fostered greater design consistency and streamlined collaboration between teams.

What I learned

This project underscored the critical importance of perseverance in tackling complex, long-term initiatives. While the initial stages presented challenges, the eventual positive impact on team efficiency and stakeholder satisfaction reinforced the value of meticulous planning and collaborative effort. Furthermore, it highlighted the power of a well-documented design system in fostering a shared understanding and streamlined workflow within a multidisciplinary team.

Next Steps

1) Developing a Comprehensive Storybook

To further enhance interaction and understanding across platforms (library, web apps, marketing site).

2) Refining Design Tokens

Specifically focusing on brand colors and spacing to ensure greater flexibility and scalability.

3) Establishing a Clear Tone of Voice for Documentation

To improve the user experience and accessibility of the design system's documentation.

LinkedIn  |  edith@edithmoreno.com

© 2025