Stax, a multi-application platform, faced significant inconsistencies across and even within its individual applications. These discrepancies created confusion and inefficiencies, detracting from the overall user experience and causing unnecessary complications for designers and developers.

Our primary objective was to ensure a consistent look and feel across all applications, thereby elevating the user experience and establishing a unified brand identity. Additionally, we aimed to define usage guidelines for components and patterns to assist future designers and developers in understanding why we use certain design elements and techniques.

Understanding the magnitude of creating a design system from scratch, we undertook comprehensive competitive analysis and scrutinized what would be required to initiate this vast endeavor. These insights proved invaluable, shaping our direction and informing our decisions throughout the project.

Truffle, our new design system, was conceived primarily for designers and developers. We aimed to offer a single source of truth for designers, clarifying when and why to use one pattern or component over another. Similarly, Truffle was meant to provide developers with technical documentation for components, fostering an understanding of the rationale behind our design decisions.

The design system was named "Truffle," inspired by the company's mascot – a pig. This name captures the spirit of the project, with truffles symbolizing the valuable outcomes our "mascot" seeks.

Our initial steps included meticulously selecting and testing colors to meet the AA standard for accessibility. We also devoted considerable time to choosing a font. After initially selecting a non-monospaced font, we realized its inadequacy for our fintech platform, which often required precise display of numbers and amounts.

Subsequently, we designed essential components such as Buttons, Text Fields, and Dropdowns, anticipating their frequent use across applications.

After establishing guidelines for colors, typography, and initial components, we involved the development team for feedback and to discuss optimal implementation strategies. The team recommended using StoryBook and working with Design Tokens for developer-friendly implementation.

While developers constructed the components, we began formal documentation of Truffle, including Do's and Don'ts, and embedded code from StoryBook as a reference for developers.

Implementing Truffle resulted in a notable increase in efficiency for both the design and development teams. By standardizing the visual aspects of common elements like buttons or text fields, teams could focus more on functionality, improving overall productivity.

One significant challenge emerged when the company underwent a major rebrand during Truffle's development, necessitating a complete overhaul of our styles and colors.

This project, my first experience creating a design system from scratch, was a significant learning journey. I gained a deep understanding of design tokens, the importance of accessibility, and the art of articulating design decisions.

Truffle continues to serve as the design system for Stax, persistently evolving alongside the company. The journey of creating Truffle from scratch was an enlightening experience, one that has bolstered the efficiency of our design and development teams and fostered a more consistent, intuitive user experience across all Stax applications. As we look forward, we are committed to the ongoing development and refinement of Truffle, ensuring it remains a valuable resource for our team and a cornerstone of our user experience strategy.