Designing for System Coherence: Energize Vancouver
City of Vancouver · Nov 2023 - Feb 2024
Creating a consistent and accessible UX across 6+ digital touchpoints for a city-wide sustainability program
Overview
New regulation introduced to building owners: Energize Vancouver. A part of the city's sustainability regulations to reduce the carbon pollution.
Timeline
Nov 2023 - Feb 2024
(4 months)
Team
Business analyst,
Content strategist,
Third-party
develplers
Role
Lead UX Strategist ·
Researcher
Deliverable
UX Consulting · User
research report
Target users
Building owners ·
Energy consultants
quote-left
Background
Energize Vancouver is a part of the city's sustainability regulations to reduce the carbon pollution produced by existing commercial and multi-family buildings.
quote-left
Background
In the program, a multi-step involved; to areport, calculate, benchmark, and take action based on their energy performance
A simplified all applications’ connectivity
Problems
6 touch points create varied experiences across teams and systems, leading to fragmentation, inconsistency, and accessibility issues.
The goal
How can we create scalable design guidelines that ensure coherence while accommodating diffrrent constraints?
tools
Design process
Dystem coherence strategy & process
puzzle-piece
Atomic-level consistency
- Aligning typography, color palette and spacing
- Standardizing Key UI Components
search
Structure-level consistency
- Rebuiling navigation structure as coherent extension
- Connecting all touch points
To establish visual consistency across tools, I referenced the City of Vancouver’s existing design system
as the foundation. I aligned each tool’s typography, color, and spacing with the City’s standards.
Too many characters per line ->
Solution
Limit body text width using:
- max-width constraints
- character count-based CSS units
puzzle-piece
Atomic-level consistency
Problems
Lack of brand consistency, and accessibility risks; low contrast, unclear validation patterns, and invisible focus states for keyboard users.
- Low color contrast
- Missing focus/active/error states
- lack of visual consitancy
- lack of visual consitancy
What I Did
Imporved on accessibility, structure, and brand consistency
- Buttons
- Input fields
- Alert/ Validation Banners
Navigation: Starting from Structure
- Rebuilt navigation structure as coherent extension of the City’s digital ecosystem
Problems
Disconnected navigation structures: Some tools had logos but no return link to the City’s main site, others used third-party branding (e.g., Touchstone IQ), and cross-linking between tools was inconsistent or missing entirely.
What I did
Audited navigation patterns across tools and mapped them to family relamtionship framwork
Family relationship framework
Niece (looks similar to parent and child)
- Has common logo, header, and colours
- Linked from vancouver.ca content pages
- Has familiar interaction styles (buttons and interface elements) and may have a different approach to content due to a system limitation
Standardized basic elements for niece applications
- Standardized elements like logo placement, return paths, header structure, and footer visibility.
- Added Skip to content links for better accessibility.
Solution
Achieved unity across all digital touchpoints, reinforcing the City’s credibility while supporting task continuity
- Building lookup tool
VANCOUVER.CA
Building lookup tool
Need to find your building?
- Building Performance Reporting System (BPRS) + Forecasting calculator
VANCOUVER.CA
Vancouver annual GHG limits by-law reporting
Log out
Username
Home
Support
GHG limits by-law reporting form
- Benchmarking map
VANCOUVER.CA
Vancouver GHG limits by-law reporting map
question-circle Help
- Dispute a Bylaw notice app
VANCOUVER.CA
Dispute a by-law notice
Dispute your GHG (greenhouse gas) By-law notice
search
Structure-level consistency
Problems
Audited navigation patterns across tools and mapped them to family relamtionship framwork
Each touch points within the Energize Vancouver ecosystem operated in isolation. Users had to manually return to the main website or search for links to proceed from one step to the next. This disconnected experience caused drop-off, confusion, and duplicated effort—especially for users unfamiliar with the regulatory process.
What I Did
Designed contextual links between touchpoints based on user behavior, and policy priorities
Building lookup tool
Building Performance Reporting System (BPRS)
- Benchmarking Map
Family relationship framework
Many users asked questions like “Why isn’t my building showing on the map?” or “What do these energy scores mean?”—so I linked to the reporting and lookup tools as a Help Center, along with educational content hosted on the main website.
- Bylaw Dispute Form
Bylaw Dispute Form → BPRS & Ticket Payment
Users disputing a bylaw notice are often unaware they need to report first. I added a link to BPRS as step one, followed by a payment link as a last resort to align with the City's compliance goals.
Solution
Contextual entry points that align with user intent and task order, supporting both user success and City policy
- Building lookup tool
- Vancouver.ca website (Parents)
- Building Performance Reporting System (BPRS) + Forecasting calculator
- Vancouver.ca website (Parents)
- Benchmarking map
Niece
- Dispute a Bylaw notice app
Niece
circle
Outcomes
What impact did we make through?
UI Consistency
Aligned 6 digital tools under a cohesive visual and interaction model based on City standards
A greater object
Introduced WCAG-compliant focus states, semantic forms, and navigation support across platforms
User Clarity
Reduced confusion through contextual linking and predictable navigation between tools
Reflection
Systems Thinking in Practice
This project taught me that system coherence isn’t about making everything look the same—it’s about creating familiar, accessible patterns that help people move through complexity with confidence.
By bridging disconnected tools, aligning them to a shared structure, and anchoring every decision in both user behavior and organizational goals, I helped lay the foundation for a more unified civic experience.
What started as a patchwork of vendor-built services is now a connected ecosystem—one that empowers users, reflects the City’s values, and can scale sustainably over time.
Bring me back to top
Designing for System Coherence: Energize Vancouver
City of Vancouver · Nov 2023 - Feb 2024
Creating a consistent and accessible UX across 6+ digital touchpoints for a city-wide sustainability program
quote-left
Background
Energize Vancouver is a part of the city's sustainability regulations to reduce the carbon pollution produced by existing commercial and multi-family buildings.
quote-left
Background
In the program, a multi-step involved; to areport, calculate, benchmark, and take action based on their energy performance
A simplified all applications’ connectivity
Problems
6 touch points create varied experiences across teams and systems, leading to fragmentation, inconsistency, and accessibility issues.
The goal
How can we create scalable design guidelines that ensure coherence while accommodating diffrrent constraints?
tools
Design process
Dystem coherence strategy & process
puzzle-piece
Atomic-level consistency
- Aligning typography, color palette and spacing
- Standardizing Key UI Components
search
Structure-level consistency
- Rebuiling navigation structure as coherent extension
- Connecting all touch points
To establish visual consistency across tools, I referenced the City of Vancouver’s existing design system
as the foundation. I aligned each tool’s typography, color, and spacing with the City’s standards.
Too many characters per line ->
Solution
Limit body text width using:
- max-width constraints
- character count-based CSS units
puzzle-piece
Atomic-level consistency
Problems
Lack of brand consistency, and accessibility risks; low contrast, unclear validation patterns, and invisible focus states for keyboard users.
- Low color contrast
- Missing focus/active/error states
- lack of visual consitancy
- lack of visual consitancy
What I Did
Imporved on accessibility, structure, and brand consistency
- Buttons
- Input fields
- Alert/ Validation Banners
Building Lookup Tool → Reporting System (BPRS)
Navigation: Starting from Structure
- Rebuilt navigation structure as coherent extension of the City’s digital ecosystem
Problems
Disconnected navigation structures: Some tools had logos but no return link to the City’s main site, others used third-party branding (e.g., Touchstone IQ), and cross-linking between tools was inconsistent or missing entirely.
What I did
Audited navigation patterns across tools and mapped them to family relamtionship framwork
Family relationship framework
Niece (looks similar to parent and child)
- Has common logo, header, and colours
- Linked from vancouver.ca content pages
- Has familiar interaction styles (buttons and interface elements) and may have a different approach to content due to a system limitation
Standardized basic elements for niece applications
- Standardized elements like logo placement, return paths, header structure, and footer visibility.
- Added Skip to content links for better accessibility.
Solution
Achieved unity across all digital touchpoints, reinforcing the City’s credibility while supporting task continuity
- Building lookup tool
VANCOUVER.CA
Building lookup tool
Need to find your building?
- Building Performance Reporting System (BPRS) + Forecasting calculator
VANCOUVER.CA
Vancouver annual GHG limits by-law reporting
Log out
Username
Home
Support
GHG limits by-law reporting form
- Benchmarking map
VANCOUVER.CA
Vancouver GHG limits by-law reporting map
question-circle Help
- Dispute a Bylaw notice app
VANCOUVER.CA
Dispute a by-law notice
Dispute your GHG (greenhouse gas) By-law notice
search
Structure-level consistency
Problems
Isolated Touchpoints, Broken Journeys
Each touch points within the Energize Vancouver ecosystem operated in isolation. Users had to manually return to the main website or search for links to proceed from one step to the next. This disconnected experience caused drop-off, confusion, and duplicated effort—especially for users unfamiliar with the regulatory process.
What I Did
Designed contextual links between touchpoints based on user behavior, and policy priorities
Building lookup tool
Building Lookup Tool → Reporting System (BPRS)
After users search for their building, I added a direct link to the reporting system—removing the need to go back to the main site or hunt for the correct form.
Building Performance Reporting System (BPRS)
Building Lookup Tool → Reporting System (BPRS)
In the BPRS platform, I embedded clearly labeled links to the Lookup Tool, the Benchmarking Map, and the main website to help users cross-reference data or learn about the regulation in more depth.
- Benchmarking Map
Building Lookup Tool → Reporting System (BPRS)
Many users asked questions like “Why isn’t my building showing on the map?” or “What do these energy scores mean?”—so I linked to the reporting and lookup tools as a Help Center, along with educational content hosted on the main website.
- Bylaw Dispute Form
Building Lookup Tool → Reporting System (BPRS)
Users disputing a bylaw notice are often unaware they need to report first. I added a link to BPRS as step one, followed by a payment link as a last resort to align with the City's compliance goals.
Solution
Contextual entry points that align with user intent and task order, supporting both user success and City policy
- Building lookup tool
Niece
- Building Performance Reporting System (BPRS) + Forecasting calculator
Niece
- Benchmarking map
Niece
- Dispute a Bylaw notice app
Niece
circle
Outcomes
What impact did we make through?
UI Consistency
Aligned 6 digital tools under a cohesive visual and interaction model based on City standards
A greater object
Introduced WCAG-compliant focus states, semantic forms, and navigation support across platforms
User Clarity
Reduced confusion through contextual linking and predictable navigation between tools
Reflection
Systems Thinking in Practice
This project taught me that system coherence isn’t about making everything look the same—it’s about creating familiar, accessible patterns that help people move through complexity with confidence.
By bridging disconnected tools, aligning them to a shared structure, and anchoring every decision in both user behavior and organizational goals, I helped lay the foundation for a more unified civic experience.
What started as a patchwork of vendor-built services is now a connected ecosystem—one that empowers users, reflects the City’s values, and can scale sustainably over time.
Bring me back to top
Designing for System Coherence: Energize Vancouver
City of Vancouver · Nov 2023 - Feb 2024
Creating a consistent and accessible UX across 5 digital touch points for a city-wide sustainability program
quote-left
Background
Energize Vancouver is a part of the city's sustainability regulations to reduce the carbon pollution produced by existing commercial and multi-family buildings.
quote-left
Background
In the program, a multi-step involved; to review guides, report, calculate, benchmark, and take action based on their energy performance
A simplified all applications’ connectivity
Problems
6 touch points create varied experiences, leading to fragmentation and inconsistency
The goal
How can we create scalable design guidelines that ensure coherence while accommodating diffrrent constraints?
tools
Design process
Design system coherence strategy & process
puzzle-piece
Atomic-level consistency
- Aligning typography, color palette and spacing
- Standardizing Key UI Components
search
Structure-level consistency
- Rebuilding navigation structure
- Connecting all touch points
puzzle-piece
Atomic-level consistency
To establish visual consistency across tools, I referenced the City of Vancouver’s existing design system
as the foundation. I aligned each tool’s typography, color, and spacing with the City’s standards.
Line length exceeded readability standards → Keep 50–75 characters per line
Solution
Limit body text width using:
- max-width constraints
- character count-based CSS units
Problems
Lack of brand consistency, and accessibility risks; low contrast, unclear validation patterns, and invisible focus states for keyboard users.
- Low color contrast
- Missing focus/active/error states
- lack of visual consistency in the same roles
- lack of hierarchy and visual distinct from component roles
What I Did
Improved on accessibility, structure, and brand consistency
- Buttons
- Input fields
- Page-level alert /Alert banners
search
Structure-level consistency
Navigation: Starting from Structure
- Rebuilt navigation structure as coherent extension of the City’s digital ecosystem
Problems
Disconnected navigation structures: Some tools had logos but no return link to the City’s main site, others used third-party branding (e.g., Touchstone IQ), and cross-linking between tools was inconsistent or missing entirely.
What I did
Audited navigation patterns across tools and mapped them to the family relationship framework
Family relationship framework
Niece (looks similar to parent and child)
- Has common logo, header, and colours
- Linked from vancouver.ca content pages
- Has familiar interaction styles (buttons and interface elements) and may have a different approach to content due to a system limitation
Standardized basic elements for niece applications
- Standardized elements like logo placement, return paths, header structure, and footer visibility.
- Added Skip to content links for better accessibility.
Solution
Achieved unity across all digital touchpoints, reinforcing the City’s credibility while supporting task continuity
- Building lookup tool
VANCOUVER.CA
Building lookup tool
Need to find your building?
- Building Performance Reporting System (BPRS) + Forecasting calculator
VANCOUVER.CA
Vancouver annual GHG limits by-law reporting
Log out
Username
Home
Support
GHG limits by-law reporting form
- Benchmarking map
VANCOUVER.CA
Vancouver GHG limits by-law reporting map
question-circle Help
- Dispute a Bylaw notice app
VANCOUVER.CA
Dispute a by-law notice
Dispute your GHG (greenhouse gas) By-law notice
Problems
Isolated touch points, broken journeys
Each touch points within the Energize Vancouver ecosystem operated in isolation. Users had to manually return to the main website or search for links to proceed from one step to the next. This disconnected experience caused drop-off, confusion, and duplicated effort—especially for users unfamiliar with the regulatory process.
What I Did
Designed contextual links between touchpoints based on user behavior, and policy priorities
Building lookup tool
Building Lookup Tool → Reporting System (BPRS)
After users search for their building, I added a direct link to the reporting system—removing the need to go back to the main site or hunt for the correct form.
Building Performance Reporting System (BPRS)
In the BPRS platform, I embedded clearly labeled links to the Lookup Tool, the Benchmarking Map, and the main website to help users cross-reference data or learn about the regulation in more depth.
BPRS → Lookup Tool, Benchmarking Map, and guide page
- Benchmarking Map
Benchmarking Map → Help Center (BPRS + Lookup Tool)
Many users asked questions like “Why isn’t my building showing on the map?” or “What do these energy scores mean?”—so I linked to the reporting and lookup tools as a Help Center, along with educational content hosted on the main website.
- Bylaw Dispute Form
Bylaw Dispute Form → BPRS & Ticket Payment
Users disputing a bylaw notice are often unaware they need to report first. I added a link to BPRS as step one, followed by a payment link as a last resort to align with the City's compliance goals.
Solution
Contextual entry points that align with user intent and task order, supporting both user success and City policy
- Building lookup tool
Niece
- Building Performance Reporting System (BPRS) + Forecasting calculator
Niece
- Benchmarking map
Niece
- Dispute a Bylaw notice app
Niece
chart-pie
Outcomes
Turn a fragmented service experience into a unified, accessible ecosystem
UI Consistency
Aligned 6 digital tools under a cohesive visual and interaction model based on City standards
Accessibility
Introduced WCAG-compliant focus states, semantic forms, and navigation support across platforms
User Clarity
Reduced confusion through contextual linking and predictable navigation between tools
Reflection
Clarity through connection
This project taught me that system coherence isn’t about making everything look the same—it’s about creating familiar, accessible patterns that help people move through complexity with confidence.
By bridging disconnected tools, aligning them to a shared structure, and anchoring every decision in both user behavior and organizational goals, I helped lay the foundation for a more unified civic experience.
What started as a patchwork of vendor-built services is now a connected ecosystem—one that empowers users, reflects the City’s values, and can scale sustainably over time.
Bring me back to top