Unleashing Scale and Growth at Questrade

The Challenge

AllSpark, Questrade's design system, existed but wasn't working. Teams were detaching from the library 90% of the time. Components were inconsistent, design files were messy and stale, documentation was scattered, and the system felt rigid.

Through research—customer interviews, practice assessments, and business alignment—four critical issues emerged:

Teams didn't know what resources existed or where to find them
→ Need: Centralize documentation

Design files were unusable, inconsistent with code
→ Need: Optimize design resources

Teams felt disconnected from updates and releases
→ Need: Improve communication

System felt limiting for different product contexts
→ Need: Increase flexibility

The underlying challenge: How do we move from a basic, uncoordinated system to an established, scalable platform that drives efficiency across the organization?

The Approach

1. Centralize Documentation

Built AllSpark Hub—a single source of truth for documentation, usage guidelines, directories, roadmaps, release notes, and code for web and mobile.

Supporting resources:

• AllSpark Storybook (component playground)

• AllSpark Theme Builder (BETA)

• AllSpark Design Library

2. Optimize Design Resources

Overhauled the entire component library. Refactored 50+ components to improve usability, flexibility, and design-to-code consistency. Cleaned up files, deprecated outdated patterns, aligned everything with production code and enabled library updates/metric tracking.

3. Improve Communication

Teams were working in silos. We established regular updates through:

• Slack Design System channel announcements

• Release notes with each update

• Feedback forms for continuous input

• Public roadmap showing what's coming

4. Increase Flexibility with Design Tokens

The system needed to support Questrade's spectrum of experiences—from dense, utilitarian platforms (Atlas Trading) to airy, expressive marketing (Q.com).

Design tokens became the foundation—shared visual language variables (color, spacing, typography, shadows, motion) that work across design and code.

The transformation:

• Upgraded foundations with tokenized system

• Retrofitted 50+ components to use tokens

• Increased simplicity and scalability

Case Study: Questrade’s Atlas Platform

A new initiative called Atlas leveraged AllSpark’s design tokens. The team saved roughly $1.1M (~17,000 hours) by using tokens instead of rebuilding custom components. Tokens let them create an advanced trading platform powered by AllSpark without starting from scratch.

Before tokens, teams solved the same problems repeatedly. Small changes had big costs. After tokens, teams could adapt the system to their context efficiently.

Design System Maturity Evolution

I used the Nielsen Norman UX Maturity model to benchmark progress and set goals.

Where we started:
Basic & Uncoordinated → Structured & Emerging
(No formal system, components created randomly)

Where we are now:
Organized & Standardized → Established & Scalable
(Widely used, well-documented, regularly updated)

Where we're going:
Integrated & Adaptive → Optimized & Polished
(Fully integrated, automated, drives innovation)

Results

~40,000 hours saved
in development (~$2.5M enterprise impact)

+28% adoption growth
(from 30 to 38 product teams)

50+ components
refactored and tokenized

$1.1M saved
for Atlas platform implementation (~17,000 hours)

+46 NPS increase
(Web: 44→90, Mobile: 36→86) within 18 months

89% reduction
in component detach rate (90% → 0.53%)

Pillar Outputs

Centralize Documentation: AllSpark Hub launched

Optimize Design Resources: Library overhaul completed

Improve Communication: News updates, design channel, feedback forms, release notes

Increase Flexibility: Public roadmap, demos, design tokens implemented

Future Opportunities

The system is established, but there's more to build:

Leverage Community
Enable design + code contribution model. Improve feedback funnels through surveys and ad-hoc input.

Elevate Product
Redefine visual language. Integrate automation and AI.

Educate Users & Leadership
Run roadshows for new hires. Make the case for system investment clear across the organization.

Expand Scope
Turn AllSpark into the hub for all digital experience resources—research guides, brand guidelines, presentation templates. Not just components, but the entire design infrastructure.