My Role

Designed foundational features

Platform

Questrade Pro (Web)

Questrade Pro: Foundational Systems & Design Guidelines

Establishing the UX skeleton and interaction standards for Canada's next-gen trading platform.

A modular, high-density framework that replaced legacy constraints with a scalable system now powering the entire Pro ecosystem.

11

11

widgets

widgets

17

17

design guidelines

design guidelines

5

5

major iterations

major iterations

Context and Constraints

Before

After

  • The Legacy Challenge: Transforming a 20-year-old legacy platform into a modern, cloud-based ecosystem. This required a fundamental shift in how users interact with market data.


  • The Strategy: Shifting the design language from a traditional web-page model to a modular, "OS-style" widget framework. This ensured the platform could scale for complex assets like Options and FX without visual fragmentation.


  • The Primary Constraint: The modular web library selected for the new architecture was not "out-of-the-box" ready for professional trading needs. I had to lead the heavy re-engineering and customization of the library components to support the extreme data density and low-latency performance required by our users.

Driving Design Consistency

The Challenge: Prevent visual and functional silos in a decentralized team where each designer owned a separate widget.

The Solution: I advocated for and authored foundational interaction guidelines—refined through user testing and technical feasibility.

Key Guidelines:

  • Hidden vs. Disabled: Logic for state feedback in high-stakes trading.

  • Right-Click Behaviour: Standardizing contextual menus to mirror desktop software.

  • Column Customization: Systemic logic for managing and reordering dense data tables.

Impact: Created a shared language between Design and Dev, ensuring 100% functional consistency from mockup to production code.

Friction and Pivot

The Problem: Users expect "smart" connectivity across the workspace, but their behaviour changes based on their mental model. For example, clicking a symbol to browse should update a linked Quote widget, but clicking a price to take action should trigger a contextual Order Entry panel. These context-shifting behaviours were flagged by Dev as high-complexity, resource-heavy customizations.

The Challenge: Designing a scalable "Linking Logic" that could distinguish between browsing patterns and action-oriented triggers without requiring an impossible amount of bespoke code for every widget combination.

The Pivot: I led a series of stress-testing workshops to map out complex edge cases. By balancing user intent with technical constraints, I designed a unified Data-Passing Framework. This framework allowed widgets to be grouped dynamically, triggering different behaviors (In-place updates vs. Contextual panel spawning) based on the user's specific task/intent rather than just the data type.

The Validation: I ran high-fidelity usability tests on these complex scenarios to ensure the transition between "Browsing" and "Action" felt seamless and predictable. The result was a system that satisfied the power user's need for context-aware speed while remaining technically maintainable for engineering.

Impact

Future-Proof Foundations: Successfully established a scalable architectural skeleton that transitioned the platform from a collection of static pages to a cohesive, high-performance "Trading OS."

Platform-Wide Consistency: By codifying systemic interaction rules early in the process, I ensured long-term visual and functional alignment across all future feature teams and specialized widgets.

The Blueprint: Created comprehensive architectural documentation that serves as the single "Source of Truth" for design and engineering, significantly reducing friction for subsequent development phases.

Institutional Readiness: Provided the robust foundation necessary to attract institutional-grade clients who require deep workspace customization and professional data density.

Impact

Future-Proof Foundations: Successfully established a scalable architectural skeleton that transitioned the platform from a collection of static pages to a cohesive, high-performance "Trading OS."

Platform-Wide Consistency: By codifying systemic interaction rules early in the process, I ensured long-term visual and functional alignment across all future feature teams and specialized widgets.

The Blueprint: Created comprehensive architectural documentation that serves as the single "Source of Truth" for design and engineering, significantly reducing friction for subsequent development phases.

Institutional Readiness: Provided the robust foundation necessary to attract institutional-grade clients who require deep workspace customization and professional data density.

Impact

Future-Proof Foundations: Successfully established a scalable architectural skeleton that transitioned the platform from a collection of static pages to a cohesive, high-performance "Trading OS."

Platform-Wide Consistency: By codifying systemic interaction rules early in the process, I ensured long-term visual and functional alignment across all future feature teams and specialized widgets.

The Blueprint: Created comprehensive architectural documentation that serves as the single "Source of Truth" for design and engineering, significantly reducing friction for subsequent development phases.

Institutional Readiness: Provided the robust foundation necessary to attract institutional-grade clients who require deep workspace customization and professional data density.