Mise à niveau anticipée

Donnez à WestJet Les membres Gold et Premium l'opportunité de surclasser leur cabine 48 heures avant leur vol au lieu de 24 heures pour un meilleur tarif.

Expérience utilisateur • Interface utilisateur • Recherche • Architecture de l'information • Prototypage

Donnez à WestJet Les membres Gold et Premium l'opportunité de surclasser leur cabine 48 heures avant leur vol au lieu de 24 heures pour un meilleur tarif.

Expérience utilisateur • Interface utilisateur • Recherche • Architecture de l'information • Prototypage

Who is Triple M Housing?

Triple M Housing is a leading 100% Canadian-owned manufacturer of high-quality, energy-efficient factory-built (modular) homes in Western Canada, operating out of Lethbridge, Alberta. Established in 1981, the company is known for its proprietary building systems, its industry-leading 20-year structural warranty, and its extensive dealer network. They are currently a specialized housing division of ATCO Structures.

My Role & Project Overview

I led the UX/UI design for the new Triple M Housing dealer portal, transforming their complex, old dashbaoard system and paper-based modular home configuration process into a clear, guided digital experience.

This project was developed using React, leveraging Material 3 (MUI) as the foundational component library. I was responsible for taking the base Material design system and adapting its styles, theming, and components to create a custom design system that aligned with the specific branding guidelines of Triple M Housing.

The core focus was establishing a robust 5-step ordering flow that allowed sales teams to accurately configure, price, and manage high-value home orders, significantly reducing errors and improving sales efficiency. The design provides real-time pricing feedback and powerful order tracking capabilities.

Something important to keep in mind: Triple M wanted to retain a level of familiarity with their existing system and workflows (as shown in the images below), while still modernizing and improving the experience. This made the transition easier for users, as the new system felt familiar rather than disruptive.

While this could have been approached by simply replicating the existing flow, my goal was to meaningfully improve it. I started by redesigning the landing page to be more functional and user-focused, prioritizing a clear table that surfaces the most relevant day-to-day data. For users, this primarily meant orders and their statuses, as tracking, selling, and managing orders is the core of their daily work. Because of this, I placed strong emphasis on visibility, clarity, and quick access to this information in the design.

Overall, this redesign represents an upgrade from a fragmented workflow that relied on a combination of paperwork and an outdated digital platform, into a more streamlined, efficient, and fully digital experience, while still respecting existing habits and expectations.

The Challenge: Complexity & Configuration

Before the dashboard, the configuration of a modular home was highly susceptible to human error due to the sheer number of mandatory and optional components. This section details the technical and logistical hurdles that necessitated a robust, guided design solution, focusing on validation and pricing accuracy.

Modular home configuration involves thousands of variables (models, options, decor, logistics).
The previous system led to frequent mistakes (wrong model, incompatible options, incorrect pricing), causing delays in manufacturing.
Need for a dynamic system that provides real-time pricing and configuration validation.
The primary user (the dealer/sales representative) needed a quick and intuitive flow to maintain sales velocity without sacrificing accuracy.

The Solution: A Guided, 5-Step Ordering Flow

To handle the immense complexity, I devised a clear, linear, and high-fidelity ordering flow. This structure ensures users complete all necessary steps logically, preventing skips or errors and translating complex business rules into simple, actionable steps.

I designed a clear, linear, and high-fidelity ordering flow to handle the extensive configuration:

Model Selection: The entry point for defining the core product (M Series, Meridian Type, etc.).
Option Selection: Categorized configuration of functional components (Packages, Doors, Windows) with immediate pricing impact.
Decor Selection: A dedicated section for aesthetic choices (Cabinets, Tile, Finishes) ensuring a clear separation of function vs. form.
Destination Details: Collection of critical logistics and customer data (Province, Foundation Type, Delivery Date).
Review Order: A summary page for final verification before submission.

Strategic Design Decisions for Usability and Efficiency

This section highlights specific design patterns and components that were crucial for the dashboard’s success. It explains why certain elements were chosen, demonstrating thoughtful UX strategy applied directly to the product's challenges.

A. Order Management Comment Center (Landing Page)
The dashboard landing page serves as the sales team's primary tool for pipeline management and prioritization.

Advanced Tracking: Orders are categorized by crucial statuses: All (312), Completed (289), In Progress (20), Draft (2), and Templates (12), allowing for quick filtering and focusing on actionable items.
Data Density and Clarity: A sortable table displays key order data at a glance, including Order #, Customer, Modified Date, Price, and current Status.
Efficient Workflow Entry: The + New Order button is prominently placed to initiate the core 5-step configuration flow immediately.

B. Guided Configuration Flow
The linear, multi-step process simplifies the complex task of specifying a custom home.

Persistent Order Summary: A "sticky" sidebar provides a constant, collapsing view of the selections (Model, Options, Decor) and a real-time price breakdown (CAD Total), minimizing cognitive load and ensuring financial transparency.
Intuitive Error Reduction: Using structured categories (like Packages, Doors, Windows in Option Selection) and constrained choices (like selecting specific Tile finishes in Decor), the design ensures only valid and compatible combinations are picked, directly addressing the configuration challenge.
Logistics Capture: The Destination Details step mandates collection of critical customer and delivery information, including Province, Foundation Type, and a Proposed Delivery Date with an Urgent checkbox, streamlining the transition to the logistics team.
Utility & Flexibility: Incorporating user-friendly features like Save as Draft, Print, and a toggle for Display Price (visible in Model Selection) supports various stages of the sales cycle, from initial quoting to final contract submission.

Back to projects list

Results & Impact

The new portal delivered significant gains across multiple stakeholders, from the development team to the end-users and the business unit itself.

Developer Satisfaction (Technical): The Triple M Housing development team expressed great satisfaction that we leveraged Material 3 (MUI). This decision made the codebase easier to work with, resulting in simpler development and streamlined maintenance compared to managing a proprietary library.
Business Value (Experience): The new application dramatically improved the dealer experience, delivering an experience that the business unit described as "not even comparable" to the previous system. This modernized platform strengthened relationships with the sales network.
User Efficiency (Workflow): Direct user feedback confirmed that the guided 5-step flow significantly shortened their workflow and led to substantially fewer mistakes during the high-stakes configuration process.
Reduced Errors: The validation built into the guided flow drastically reduced the number of errors being passed from the sales team to the manufacturing floor.
Client Satisfaction (Indirect): As the sales users were happier and more efficient, their ability to deliver accurate quotes and configurations quickly directly improved the experience for their end clients (the home buyers).

Design system

I designed and built a comprehensive design system for the company’s new dashboard, establishing a strong visual foundation that scales across products and teams. The system is based on Material 3 (MUI) guidelines, while introducing a custom brand identity tailored specifically to the company’s needs.

The design system defines and standardizes all core UI elements, including typography, color palettes, spacing, elevation, icons, and interactive states. Every component was carefully designed to ensure consistency, clarity, and ease of use across the entire interface.

Beyond visuals, the system was fully implemented across the component library, covering layouts, form elements, navigation, and feedback patterns, so teams can design and build faster while maintaining a unified experience.

Accessibility was a key priority throughout the process. The entire system meets WCAG Triple-A (AAA) accessibility standards, ensuring the dashboard is inclusive and usable for all users, including those with visual, motor, or cognitive impairments.

This design system serves as a single source of truth, enabling long-term scalability, reducing design and development debt, and supporting a high-quality, accessible user experience across the product.