The challenge

The lack of a unified web marketing design system at Questrade led to inefficiencies, inconsistencies, and reduced brand trust. This issue impacted not just our users but also our internal teams. Designers would invest time creating new pages, only to discover that the required components weren’t available in our CMS, making it impossible to build as intended. The root of the problem was that designers were creating their own components, each with slight variations. What we needed was a unified, company-wide source of truth for consistency and efficiency.

A platform-agnostic design system was essential to streamline workflows, boost consistency, and foster sustainable growth. We understand that for many of our users, Questrade.com is often their first interaction with the brand and our products and first impressions matter. By creating and maintaining a unified system, we can ensure more efficient, higher-quality work that ultimately leads to a better user experience. This not only enhances customer satisfaction, both for end users and internal teams, but also helps Questrade achieve its long-term goals of growth and success.

Getting started

Auditing the Existing Design System: To develop Questrade’s next-generation web marketing design system, we started with a thorough audit of the existing system. We conducted an inventory audit to catalog all components, patterns, and styles in use across the website, giving us a complete view of the system’s assets. A usage analysis followed, identifying inconsistencies, outdated elements, unnecessary customizations, and areas for improvement. This collaborative process provided a clear understanding of the current system’s strengths and weaknesses, forming the foundation for our improvements.

Defining Goals and Vision: Following the audit, we focused on creating a scalable, accessible, and modern design system that would improve responsiveness across devices. Key priorities included enhancing accessibility, modularity, and consistency. A user-centred approach guided our vision, considering the needs of end users and internal teams like designers and developers. With these priorities in mind, we identified key areas for immediate updates and long-term improvements.

Research and Benchmarking: To align with industry standards and best practices, we researched modern design systems and trends. Using atomic design principles, we structured the system into smaller, reusable components such as atoms, molecules, and organisms to ensure consistency and scalability. The original system lacked design tokens, so we introduced them to improve consistency and simplify updates across components for both designers and developers. This research-driven approach ensured the new system adhered to the latest UX frameworks and practices.

Collaborative Plan: We assembled a cross-functional team of designers, developers, and project managers to guide the system’s development. A detailed documentation strategy supported the rollout of updates, which occurred through quarterly milestones and incremental releases. Biweekly sprints allowed for frequent minor updates while minimizing disruptions to ongoing work. The small team coordinated carefully to prioritize upgrades effectively, with developers managing releases to ensure a smooth transition. This approach balanced flexibility and control, allowing for an organized rollout of the next-generation system while aligning with team objectives.

To simplify implementation, type styles were unified across devices by organizing them by purpose, such as headlines and body sizes, rather than maintaining separate stacks for mobile, tablet, and desktop. This approach streamlined adaptation across screen sizes and improved usability.

The system includes detailed documentation with design tokens and usage guidelines to ensure seamless collaboration between design and development. Rigorous accessibility testing ensured compliance with WCAG standards, and iterative refinements kept the system adaptable, delivering a cohesive and user-friendly experience across all platforms.

Questrade’s core brand palette is built around its signature Questrade Green, complemented by dark green, black, white, and a range of greys. This palette reinforces brand recognition, especially in competitive visual spaces where clear attribution is essential.

The core palette is also used in off-platform marketing, such as social media promotions and other high-visibility placements that compete for attention in busy environments. By maintaining consistency across these channels, we ensure strong visual recognition and brand presence.

Questrade also utilizes a secondary colour palette that serves as a complement to the core colours. These supporting colours are used sparingly and only in specific cases.

We are shifting to custom photography to capture real people and authentic experiences. The approach reflects diversity, inclusivity, and genuine everyday moments. Each image tells a story, creating a nostalgic and relatable feel. By moving away from stock photos, we ensure our visuals are true to the Questrade experience.

Questrade’s new grid system is a responsive web framework designed to dynamically adapt the page layout based on the viewport size, ensuring a seamless experience across all devices. To arrive at this system, we carefully evaluated our website’s content structure, user experience goals, and the need for consistency across our web platforms. By prioritizing responsiveness, we incorporated customizable breakpoints to optimize layouts for desktops, tablets, and mobile devices.

The grid system strikes a balance between flexibility and consistency, allowing for unique page layouts while maintaining a cohesive visual identity. Built with modern design trends and accessibility in mind, it ensures readability, proper spacing, and ease of navigation. Additionally, we considered performance and scalability, ensuring the grid system is lightweight, browser-compatible, and capable of supporting future updates.

Through prototyping, testing, and user feedback, we refined the grid to deliver a foundation that enhances usability and visual harmony, ultimately improving the overall experience for users navigating Questrade’s online presence.

After the foundations were set, we then proceeded to create a comprehensive library of UI components that drive consistency, usability, and efficiency across Questrade’s website. Each component was meticulously designed to be modular, responsive, and accessible, adhering to defined interaction behaviours, ARIA standards, and brand guidelines.

These components include elements such as buttons, form fields, modals, tooltips, and more. Each one supports multiple variants and states. Designed for reuse across multiple contexts, they leverage a tokenized design foundation and are documented with clear usage guidelines to ensure accuracy in implementation.

This modular approach enables teams to rapidly assemble interfaces using rigorously tested and pre-approved components. It accelerates development cycles, reduces design debt, and ensures cohesive experiences across Questrade’s digital ecosystem. The result is a scalable and maintainable framework that balances innovation with design consistency.

In the design system, we used design tokens to represent recurring visual decisions like spacing, colour, and typography. By replacing raw values with clearly named tokens, we ensured these choices were applied consistently across the product while also making their purpose easier to understand and maintain. This approach not only improved scalability, but also streamlined collaboration with developers by aligning design language with code.

Token Structure