Crafting a design system with Figma, React & Storybook

Despite its strong partnerships and sustainability efforts, Alchemy faced a major problem: each of its apps was developed independently, leading to a disjointed user experience that hurt both customer satisfaction and operational efficiency. Recognising the need for a unified design system to streamline these experiences, the challenge was to develop it without sidelining other critical projects. Careful planning and strategic resource management were essential to ensure the design system could be integrated smoothly alongside ongoing initiatives.

• Conducted comprehensive UX audits to identify design inconsistencies and usability gaps.
• Worked closely with stakeholders and the design team to define the MVP for the Vulcan Design System.
• Developed a token-based visual language and themes in Figma.
• Contributed to the development of a React Component Library with automated versioning and testing.

As part of the product team, I conducted a detailed analysis of leading design systems such as Google’s Material Design and IBM’s Carbon. This analysis was aimed at extracting valuable insights and identifying industry best practices that could guide our development. These systems provided a wealth of inspiration and set a benchmark for our own design aspirations. With this foundation, we set out to define a focused set of features, aiming to deliver them within a stringent timeline to meet our project goals efficiently.

Principles

Core Workshops: I facilitated and participated in several workshops with the design team to carefully define the core principles of our design system. We focused on accessibility, localisation, interaction, and usability, prioritising these elements to guarantee our system's inclusivity and effectiveness. These principles were established as the foundation to guide all future development and ensure a cohesive user experience across our products.

Structure

Foundation Building: I focused on developing robust foundational elements that serve as the cornerstone for all subsequent design components. This included creating versatile colour palettes, defining a clear typography system, crafting consistent iconography, and establishing precise spacing guidelines. These elements are crucial for ensuring a cohesive and effective design system.

A preview of the foundational elements

Implementation Strategy: I crafted a comprehensive set of design tokens in Figma that ensured consistent styling across all digital assets and platforms, crucial for maintaining brand integrity and design uniformity.

Semantic colour design tokens in figma, documentation as well as the tokens defined within the codebase.

Extensive Documentation: I developed comprehensive documentation for each component in the library I designed, facilitating straightforward usage and customisation by all team members. This documentation is rich with practical examples and best-use scenarios, designed to facilitate optimal application and integration of design components across various projects. The primary aim was to secure strong buy-in from Alchemy's designers and developers, highlighting the crucial role of this design system in enhancing project outcomes and operational efficiency. Ensuring the design system's success was paramount, as it directly impacts the effectiveness and cohesion of our development efforts across the board.

Adaptive Design: I developed components using Figma’s powerful auto-layout and responsive resizing features to guarantee optimal usability across all device types.

Component features can be controlled from the props panel in Figma

Development Synchronisation: We chose Storybook.js as the platform for managing coded components, mirroring the asset management and configuration principles used in Figma. This synchronisation was vital for maintaining consistency between the design prototypes and the final coded components.

Collaboration with Development: I worked closely with the development lead to ensure that all components coded in Storybook were perfectly aligned with the designed components in Figma. This included detailed handoffs of design tokens, behavior specifications, and guidelines to ensure that the developers could replicate the exact design intent in the coded environment, making Storybook an integral tool in our design-led product strategy.

We successfully launched over 30 components and more than 360 component variants in a flexible React toolkit and an easy-to-navigate Storybook library.

Theming and Customization: Due to Alchemy's collaborations with multiple brand partners, it was essential to customize the look and feel of our design system to accommodate various theming requirements without the need to maintain separate design files. We achieved this flexibility through the strategic implementation of design tokens. This approach allows us to easily adjust and apply different themes across our design system, ensuring both consistency and brand-specific customization while minimizing maintenance overhead.

Modularity and Flexibility: I Implemented a modular design approach using atomic principles, allowing for high customisation and flexibility in component use.

Governance and Rollout

Training and Guidelines: I produced comprehensive training materials and guidelines to ensure smooth adoption and implementation of the design system across departments.

Implementation and Outcomes

Key Outcomes:

System Deployment: We launched the Vulcan Design System, which includes a detailed Figma Kit and a React-based component library, across all business units.

Operational Improvements: Although the design system was only recently launched, initial indicators are very promising. We expect it to dramatically enhance operational efficiency and UX consistency across all applications. This should lead to significant reductions in both design and technical debt, streamlining our processes and improving our overall product quality.

Achievements:

Fostered an environment of innovation and collaboration, significantly enhancing cross-functional team productivity.

Established a scalable and flexible design framework that supports Alchemy’s ongoing needs and future projects.

Narrative Overview

Challenges and Innovations

Faced with diverse application ecosystems, Alchemy required a design solution that not only unified interface elements but also embraced the complexities of global software environments.

The Vulcan Design System addressed these needs by introducing scalable solutions like design tokens and responsive components, which were critical in managing design at scale.

Impact

The system has been pivotal in streamlining design processes, enhancing user experience, and maintaining brand consistency across Alchemy’s global operations and brand partners.

Reflection

This project highlighted the transformative power of a well-integrated design system in tech environments, proving essential for enhancing user engagement and operational agility.