Realtor.ca - Design System

View other projects

Realtor.ca Design System

Building Realtor's first unified, accessible, multi-platform design system

When I joined the Realtor.ca team to lead the redesign of the platform, my first step was to assess its current state. It quickly became clear that the experience was highly fragmented, each platform and team was building in isolation, with almost no consistency or shared direction. Before I could even begin improving individual screens or flows, I had to address the foundation. That meant creating a unified design system from the ground up.

Platform

Realtor.ca

Date

June 2024

Read

6 minutes

WCAG AA ACCESSIBLE

///

60% FASTER FEATURE DEVELOPMENT

The problem

Four teams.

Four platforms.

Zero consistency.

Realtor.ca had evolved in silos. Desktop, mobile web, iOS, and Android all used different UI patterns, components, and accessibility levels. This fragmentation slowed development and made scaling impossible.

8 different button styles × 6 input variants × 4 card patterns = chaos

The plan

To rebuild the platform’s foundation, I followed a structured six-step approach—starting with discovery and ending with full-scale system implementation. This timeline outlines how I moved from understanding the problem to creating a unified design system ready for adoption.

Step 1 — Seeking answers

Step 2 — What’s out there, and in here

Step 3 — Baby steps

Step 4 — Visualizing the design approach

Step 5 — Stakeholder buy-in

Step 6 — Building

I began with a bird’s-eye audit of the entire platform. Evaluating visual pain points, cross-device inconsistencies, and the state of any existing design system. This helped me understand the true scope, timelines, and what needed to stay, go, or change moving forward.

I analyzed the competitive landscape: Zillow, Redfin, Realtor.com, Rentals.ca, Centris, and Kijiji, to understand where our experience stood in the market, how competitive we truly were, and what foundational improvements were needed.

I started shaping early concepts and lightweight structures, initial components, patterns, and rules, to test what a unified system could look like.

I translated the early foundations into clearer directions, creating visual frameworks and system principles to show how the new experience could come together.

With a clear vision in place, I aligned cross-functional partners by presenting the system’s value, principles, and impact on product velocity and consistency.

With alignment secured, I moved into full execution, building scalable components, documenting guidelines, and preparing the system for adoption. I also developed a detailed roadmap structured around two-week sprints to systematically deliver every part of the design system with clarity and momentum.

The Solution

A unified system built on scalable tokens

I created a comprehensive design system with semantic tokens at its core, enabling consistent experiences across all platforms while supporting full theming capabilities

Color Tokens

Semantic + primitive
Light and dark mode

Dimensions

4px grid
Spacing and corner radius

Layout grid

Mobile, tablet
and desktop break points

Typography

Display, Text, Links
and Initials

Border strokes

Style, thickness
and color

Effects

Elevation, focus ring
and background blur

Component Library

Actions

Buttons

Button group

Selection controls

Clusters and pins

Input and Selection

Dropdown

Segmented control

Password

Slider

Select field

Text area

+4 more

Indicators and status

Badge

Empty state

Placeholder

Progress bar / circle / steps

Messaging

Banner

Dialog

Snackbar

Sheet

System banner

Toast

Tooltip

Popover

Navigation

Breadcrumbs

Carousel

Navigation header

Link

Pagination

Tree view

Discover how the system helped elevate both the structure and design of the navigation across Realtor.ca.

Theming

Full semantic theming
with one toggle

Light

Dark

The Process

From chaos to system in 6 months

4 weeks

Audit

Documented every component variation across all 4 platforms. Identified 200+ inconsistencies and accessibility gaps.

6 weeks

Architecture

Designed the token system, component API, and accessibility requirements. Created the foundation for scale.

16 weeks

Design

Built every component with full variants, states, and documentation. Established patterns for future growth.

Ongoing

Rollout

Partnered with engineering for implementation. Created training materials and supported team adoption.

Impact

Measurable results

0 %

Faster feature development

0 %

Fewer inconsistencies

0 +

Production component sets

Full accessibility

Meets WCAG AA standards with color contrast, keyboard navigation, screen reader support, and focus states built in.

Reflection

What I learned

01 Systems thinking beats feature thinking

Building for scale requires stepping back from individual components to see how everything connects. The token architecture was the key to making theming and future updates manageable.

02 Accessibility is a foundation, not a feature

Retrofitting accessibility is painful. Building it in from day one made every component better and saved countless hours of rework down the line.

03 Adoption requires partnership

The best design system is worthless if teams don’t use it. Continuous collaboration with engineering, training sessions, and migration support were just as important as the designs themselves.

View other projects