Skip to content
All projects
Conceptself-directed

Beacon Path Mortgage

A licensing disclosure as the reason to trust

Beacon Path Mortgage homepage on desktop and mobile, with the headline “Buying your first home? Let’s make it make sense.” in cream and copper on navy.

Problem

A first-time buyer has to trust a broker enough to book a call, and FSRA disclosure rules must be met on every page.

My role

Solo: brand identity, research, design system and a shipped React 19 front end.

Outcome

Five responsive pages with a persistent compliance bar, a documented design system and a logo system. No live traffic, so no measured results.

Role
Product designer & front-end developer
Team
Solo
Tools
Figma, React 19, Vite, CSS custom properties, Playwright, oxlint, Claude (AI-assisted)
  • UX/UI
  • Design Systems
  • Visual Design
  • Development
Live siteFull case study

Concept project. A self-directed concept, not a live business. The broker persona is fictional, the licence number is a placeholder, and the conversion range in the full case study is a modelled estimate, labelled as such.

1. Problem

How do you design a financial-services site that a first-time homebuyer trusts enough to book a consultation, while meeting Ontario’s required licence and brokerage disclosures? Most sites treat that text as fine print. I treated it as evidence.

2. Process

  1. 1.

    Discovery

    Read FSRA’s disclosure requirements directly; mapped first-time buyer anxieties; persona Alex Tran.

  2. 2.

    Static build first

    HTML, CSS and JavaScript to test the content and layout quickly.

  3. 3.

    Compliance as a trust signal

    A persistent disclosure bar on every page, written to reassure rather than warn.

  4. 4.

    React rebuild

    React 19 + Vite, with tokens as CSS custom properties.

  5. 5.

    QA and packaging

    Playwright visual QA, oxlint, and design system documentation.

3. Design system

  • Colour. Black #0F1B2A, Charcoal #1E3348, Copper #C1734B, Copper bright #E0936A, Cream #F5F1E8.
  • Type. Fraunces for display and Inter for body and UI.
  • Logo system. Full-colour, white, copper and navy marks with usage rules and a 24px digital minimum.

4. Reflection

The “Test” stage was a self-check of copy, not user testing. Sessions with real first-time buyers would be the next step.

A person studying the AIgis overview dashboard on a desktop monitor, showing an alert volume chart and a risk alert breakdown.Next projectAIgisFraud signals a non-analyst can read at a glance