West Fraser - Building a scalable Design System

UI Audit

Design system

website redesign

figma, storybook, drupal

Transformed a fragmented UI kit with 100+ duplicate components into a scalable design system for West Fraser, North America's leading lumber manufacturer. Implemented Figma variables as design tokens with JSON export for developer handoff, keeping design and development synced. Used component properties to consolidate variations into flexible, reusable components. While building the system, I also redesigned key pages to test components in real contexts and address client concerns. This ensured components worked in practice, not just in theory.

Transformed a fragmented UI kit with 100+ duplicate components into a scalable design system for West Fraser, North America's leading lumber manufacturer. Implemented Figma variables as design tokens with JSON export for developer handoff, keeping design and development synced. Used component properties to consolidate variations into flexible, reusable components. While building the system, I also redesigned key pages to test components in real contexts and address client concerns. This ensured components worked in practice, not just in theory.

Transformed a fragmented UI kit with 100+ duplicate components into a scalable design system for West Fraser, North America's leading lumber manufacturer. Implemented Figma variables as design tokens with JSON export for developer handoff, keeping design and development synced. Used component properties to consolidate variations into flexible, reusable components. While building the system, I also redesigned key pages to test components in real contexts and address client concerns. This ensured components worked in practice, not just in theory.

Problem

West Fraser's product team couldn't ship efficiently due to an inherited UI kit that turned 30-minute tasks into 3-hour ordeals. While the system had Figma properties, they were labeled "Property 1" through "Property 9" with cryptic values, making them unusable. Combined with 100+ redundant components and no design tokens, simple brand updates took days instead of minutes.

Key Challenges

Handoff was broken: Implemented variables with JSON export for automatic sync

Handoff was broken: Implemented variables with JSON export for automatic sync

Handoff was broken: Implemented variables with JSON export for automatic sync

Team couldn't work independently: Built self-service system with clear navigation and naming

Team couldn't work independently: Built self-service system with clear navigation and naming

Team couldn't work independently: Built self-service system with clear navigation and naming

Finding and updating components took hours: Built organized and flexible component library.

Finding and updating components took hours: Built organized and flexible component library.

Finding and updating components took hours: Built organized and flexible component library.

Client

West Fraser

Timeline

4-6 Months

Role

Product Designer (2-person design team)

Tools

Figma, Storybook

Demo File

Client

West Fraser

Timeline

4-6 Months

Role

Product Designer (2-person design team)

Tools

Figma, Storybook

Demo File

Client

West Fraser

Timeline

4-6 Months

Role

Product Designer (2-person design team)

Tools

Figma, Storybook

Demo File

Example of some component variants from old UI Kit - Properties existed but were meaningless.

Audit and Discovery

I spent several days conducting a comprehensive audit of components across the existing Webflow site and UI kit — documenting every pattern and variation, uncovering inconsistencies, and surfacing opportunities to improve UX. This revealed what to consolidate, what was missing, and what required refinement. The audit spanned all levels of the system: atoms (colours, type, spacing), molecules (buttons, form fields, tags), and organisms such as heroes, menus, and cards.

Component audit table listing all existing patterns and consolidation opportunities—organized findings from both the Figma file and live Webflow site

I spent several days conducting a comprehensive audit of components across the existing Webflow site and UI kit — documenting every pattern and variation, uncovering inconsistencies, and surfacing opportunities to improve UX. This revealed what to consolidate, what was missing, and what required refinement. The audit spanned all levels of the system: atoms (colours, type, spacing), molecules (buttons, form fields, tags), and organisms such as heroes, menus, and cards.

Design System Architecture

I chose atomic design methodology because West Fraser needed a system that could scale. Starting with atoms (colors, typography, spacing) that combine into molecules (buttons, inputs) and then organisms (navigation, forms) meant each piece built on solid foundations. This approach made the system predictable—developers knew exactly how components related to each other, and designers could create new patterns using existing building blocks without breaking consistency.

  1. Atoms: Introducing Tokens for Scalable Management

At this stage, I defined design tokens for colors, typography, and spacing values. More importantly, I advocated for a token-based approach across design and development, so edits could be made once and cascade system-wide. This reduced duplication, removed ambiguity, and established a resilient foundation for scaling.

I worked closely with the development team to align on how tokens would be implemented in code, ensuring the system was practical as well as scalable. The client requested a wide palette, which raised overwhelming the brand concerns. To address this, I established a hierarchy of usage: primary anchors of brand expression, while the remaining colors were refined as decorative accents or data-visualization support. Every token was tested against WCAG standards to ensure accessibility and legibility.

Color and typescale, file structure, variables

  1. Molecules: Decluttering and re-building

The previous UI Kit contained redundant variants and inconsistent behaviors, making it difficult for teams to know which component to use. I consolidated overlapping patterns and defined clear states (default, hover, active, disabled, error). Each molecule was rebuilt with accessibility in mind, supported by tokens for color, type, and spacing, which allowed changes to cascade system-wide without duplication.

The audit also revealed missing components like badges, forms fields, and accordions. I built these from scratch to complete the system.

Drag slider: examples of some molecules from new component library (right) in comparsion to old scattered UI Kit (left)

  1. Organisms: Building Responsive, Complex Components

This stage required significant redesign and creation of missing components. The previous kit lacked basic patterns like accordions, callouts, interactive cards, and modals. Poor UX in existing components also demanded complete rebuilds.

I leveraged Figma's component properties—variants and booleans—to create flexible, single components instead of multiple versions. For example, one card component could show/hide CTAs, descriptions, and eyebrow text through boolean toggles, replacing what was previously 5-6 separate components.

Desktop & Mobile version of Top Nav

Desktop & Mobile version of Stock info component

Use of Figma component properties

  1. Templates & Pages: Demonstrating the System in Action

After defining the building blocks, I moved on to templates and full pages to validate how the new system performed in real scenarios. The old pages often suffered from visual inconsistency, duplicated elements, poor use of white space, and accessibility gaps.

By rebuilding them with the new component library, I demonstrated how a unified design language improved clarity, hierarchy, and usability. Pages became easier to scan, more consistent across sections, and better aligned with West Fraser’s brand. Establishing clear header levels (primary, secondary, tertiary) reinforced hierarchy and ensured scalability for future content.

Examples of some of the pages built with the component library. View live site

Implementation & Handoff

To ensure smooth adoption, I exported the design tokens (colors, typography, spacing) for developers, enabling them to implement the system in Storybook. This created a single source of truth and allowed us to validate the components in code before integrating them into Drupal.

I collaborated with the development team to build initial reference pages directly in Drupal, demonstrating how the new components should be used in practice. This provided the client with a reliable foundation—both a coded UI kit and working page templates—that their team could extend confidently and consistently.

Impact & Reflection

The biggest impact of this system was scalability: once the components were built in Drupal, the client’s team was able to independently create new pages without design bottlenecks. This validated the system’s success—the building blocks were flexible enough for non-design teams to use directly.

However, with this freedom came challenges. The team often overused the wide variety of options, introducing too many color combinations and requesting additional header variants beyond what was functionally necessary. Looking back, I realized the importance of stronger documentation and usage guidelines. While I delivered a robust component library, I should have invested more time in governance—defining clear “do’s and don’ts” to prevent inconsistency.

I view design systems as a superpower: they give teams incredible efficiency, but with great power comes great responsibility. Without guardrails, reusable components can just as easily create chaos as they can enable consistency. This experience reinforced that successful design systems are not just about building components, but about guiding how they should be used responsibly.

Have an idea worth stitching together?

Designed & Developed by Muneeba

Have an idea worth stitching together?

Designed & Developed by Muneeba

Have an idea worth stitching together?

Designed & Developed by Muneeba

Enter password to view case study