My ICBC

End-to-end UX Design
Responsive Web Design
My role
UX Designer
Team
ICBC Senior UX designers and content team
Tools
Axure RP
Year | Status
2025 - 2026 | Live - Evolving
A mouse with arrow down showing prompt to scroll down
Pixel art lightbulb character with eyes and pink mouth on white background.

Description

Millions of British Columbians rely on ICBC for some of life’s most important moments: getting licensed, insuring their vehicle, reporting a claim after a collision. Before My ICBC, those services lived in separate systems with different sign-in flows, inconsistent branding, and no shared account. My ICBC brings it all into one responsive, self-service platform, so people can manage what matters without having to figure out where to go first.

I was part of the team that designed and built this experience, contributing end-to-end across Billing and Payments, responsive design, usability testing, and cross-functional collaboration at scale.

Pixel art of a teal hummingbird with a white chest in flight on a black background.

My contribution

Across the broader My ICBC platform, I owned the payment plan experience within Billing & Payments page, one of the most complex service areas on the platform, exploring best layout options, designing low-fidelity wireframes through to high-fidelity interactive prototypes and different payment plan statuses in Axure RP.

Beyond Billing and Payments, I contributed across the platform by designing responsive experiences with a focus on mobile usability and accessibility, facilitating and observing usability testing sessions and translating findings into concrete design iterations, identifying UX improvements through research, user feedback, and analytics, and helping establish consistent patterns across the My ICBC ecosystem to support design coherence at scale.

Highlights

No items found.

OVERVIEW

My ICBC is a unified self-service platform that brings together driver licensing, insurance, claims, billing, payments, and account management into a single digital experience for British Columbians.

Before My ICBC, all services existed across separate systems with different sign-in experiences and navigation patterns. This created fragmented journeys and made it difficult for users to manage their services in one place.

The platform was designed to provide a more connected, accessible, and self-service experience where customers can access essential ICBC services through a single account.

Today, My ICBC supports services across several key areas:

Driver Licensing & ID

  • View the status and expiry date of government IDs like B.C. driver’s licence, BC Services Card, or BCID
  • Book driver licensing appointments
  • Schedule road tests
  • Download driving records
Driver Licensing card on My ICBC dashboard

[[divider]]

Driver licensing landing page on My ICBC

[[divider]]

Auto Insurance & Registrations

  • Renew eligible insurance policies online
  • Prepare auto insurance estimates
  • Access insurance documents
  • Submit odometer readings
  • Find brokers and registrations services
Insurance & Registration on My ICBC dashboard

[[divider]]

Insurance & registration landing page on My ICBC

[[divider]]

Claims

  • Start and manage claims online
  • Continue saved claims submissions
  • Access claim information and support resources
  • Review benefits and treatment information
Claims card on My ICBC dashboard

[[divider]]

Claims landing page on My ICBC

[[divider]]

Account, billing & payments

  • Manage communication preferences
  • Update email settings
  • Access account-related services
  • Monitor account verification and subscription statuses
  • Manage payment plans
  • Review payment statuses and account issues
  • View outstanding balances and debts
  • Make payments online
  • Set up and update direct deposit information
Account, billing & payment tile on My ICBC dashboard

[[divider]]

Account overview on My ICBC

[[divider]]

Billing & payments on My ICBC

[[divider]]

Payment plan example on My ICBC

THE CHALLENGE

Before My ICBC, services such as driver licensing, insurance, and claims were maintained independently.

Users often had to sign into multiple systems to complete related tasks. Branding, global headers and experience patterns varied between services, creating friction and inconsistency.

Examples of service landing pages before My ICBC:

Claims landing page before My ICBC

[[divider]]

Get driving record and insurance history service before My ICBC

[[divider]]

Book a road test service before My ICBC

[[divider]]

Insurance renewal portal before My ICBC

[[divider]]

This fragmentation created larger UX challenges:
  • Separate sign-in experiences
  • Inconsistent branding and interaction patterns
  • Limited connection between services
  • Disconnected account management
  • Reduced continuity across journeys
  • Trust concerns caused by inconsistent digital experiences

Trust is critical within government services.

Users frequently questioned whether they were still interacting with an official ICBC experience when branding and experiences changed between services.

The challenge was not simply designing screens. It was helping unify disconnected systems into a trusted and cohesive experience.

Research and Insights

To validate navigation, authentication, discoverability, and payment experiences across My ICBC, we conducted moderated usability testing across desktop and mobile.

I participated in facilitation, observation, note taking, and translating findings into design improvements and prototype iterations.

Testing Overview:
  • 3 rounds of testing
  • 18 participants
  • Desktop and mobile
  • Participants from across BC
  • Task-based evaluation with ease-of-use scoring

Participants completed realistic tasks across authentication and sign-in, dashboard navigation, claims and insurance journeys, billing and payment plans, direct deposit, and account management.

Key findings:

Testing revealed a strong overall success rate, with most participants completing tasks successfully and reporting a positive ease-of-use experience.

Key insights included:

Sign-in call to action on icbc.com

17 out of 18 participants struggled with sign-in visibility.

Screenshot of sign in high fidelity wireframe before the test
Sign-in call to action button before the test: showing lack of visibility

Iteration

Improved sign-in visibility by adding a border around the Call to Action button and change the text colour from black to navy.

Screenshot of sign in high fidelity wireframe including the recommended changes after the test
Sign-in call to action button after the test: UI changed to have a better visibility at first glance

[[divider]]

Payment plan - tooltip

Participants sometimes associated payment tasks with insurance or claims and struggled to find payment-related information.

Task for the users to complete was to find out Why was payment withdrawn on another date

  • 5 of 10 did not find the related tooltip, 2 of 10 struggled​
  • 6 of 10 tried "change your payment plan" for answers​
  • Some associated payment plan with insurance section​
Screenshot of high fidelity wireframe showing information hidden in the tooltip before the test
High-fidelity wireframe before the test: Information hidden in the tooltip

Iteration for the remaining 8 participants

Due to these results, prototype was iterated for the remaining 8 participants​ and tooltip was moved into blue info box.

Screenshot of high fidelity wireframe including enhancements to change the tooltip into an info box
High-fidelity wireframe after the test: Tooltip changed into an info box to have the important information easier to find

[[divider]]

Payment plan - testing the rest of 8 participants

  • 3 of 8 did not notice text in blue info box​
  • 1 of 8 clicked on the "change your payment plan" link
Final iteration
  • Adjust text formatting of blue info box​
Screenshot of high fidelity wireframe including final enhancement on the info box with a better text formatting
High-fidelity wireframe after the test: final enhancement on the info box with a clearer information hierarchy

  • Add redundant navigation (cross-linking) from Insurance landing page to Billing & Payments to resolve  associating payment plan with insurance section​
Screenshot of high fidelity wireframe showing the link to payment plan added on the insurance landing page
High-fidelity wireframe after the test: link to payment plan added on the insurance landing page

[[divider]]

Claims card on My ICBC dashboard

3 of 6 bypassed eligibility questionnaire by selecting "manage claims" instead of report a claim.

Screenshot of high fidelity wireframe showing claim card on My ICBC dashboard before the test
High-fidelity wireframe before the test: claim card on My ICBC dashboard

Iteration

To try to drive most customers through the eligibility questionnaire before they begin the process, added a link to report a claim from My ICBC dashboard

Screenshot of high fidelity wireframe showing the enhancement after the test including the link added to report a claim from claims card on My ICBC dashboard
High-fidelity wireframe after the test: the link added to report a claim from claims card on My ICBC dashboard for a better wayfinding

Pay a debt

7 of 18 associated debt with claims, and searched these sections first

Iteration

Add redundant navigation (cross-linking) to all landing pages to billing & payment​

Screenshot of high fidelity wireframe showing the link to billing & payment page added on all landing pages
High-fidelity wireframe after the test: the link to billing & payment page added on all landing pages

[[divider]]

Direct Deposit - banking information form

  • 5 of 10 found the transit/branch number is confusing​
  • 1 of 10 entered banking details incorrectly
Iteration
  • Due to these results, prototype was iterated for the remaining 8 participants​
  • Format hint added below field​
  • Branch number label changed to include transit too
Screenshot of high fidelity wireframe showing the enhancement on the direct deposit form
High-fidelity wireframe after the test: enhancement made on the direct deposit form to make it easier to understand

[[divider]]

Direct Deposit - Call to action section

6 of 18 navigates to Billing & Payment, did not easily find direct deposit section​

Screenshot of high fidelity wireframe showing the direct deposit call to action tile before the test
High-fidelity wireframe before the test: direct deposit call to action tile
Iteration
  • Potential banner blindness - revise layout and content to make it appear less "ad-like"​
  • Redo example graphic to make it easier to read​
  • Adjust layout of form fields
Screenshot of high fidelity wireframe showing the direct deposit call to action tile after the test including enhancement like change the UI to look less like an advertisement
High-fidelity wireframe after the test: change the UI to look less like an advertisement

[[divider]]

DESIGN THROUGH ITERATION

Testing reinforced the value of designing through real behaviour rather than assumptions.

By observing users, identifying friction points, and iterating prototypes, we helped shape clearer and more intuitive experiences across My ICBC.

Solution

DESIGNING A UNIFIED EXPERIENCE

My ICBC needed to do something genuinely hard: make a complex, multi-service government platform feel simple and trustworthy to millions of people with different needs, devices, and comfort with digital tools.

The dashboard brings driver licensing, insurance, claims, and account services into one experience, with clear navigation and contextual actions that help users move directly into tasks without having to orient themselves first. Each service area uses collapsible sections to reduce visual overload while keeping important information within reach.

The experience provides quick visibility into:
  • Driver licensing information
  • Vehicles and insurance details
  • Claims information
  • Account services
  • Relevant next actions

Within Billing and Payments specifically, the challenge was hierarchy. Users needed to understand their financial situation at a glance, across multiple vehicles, policies, and payment states, without feeling overwhelmed.

I designed a range of status experiences including active plans, missed payments, account issues, debt states, and empty states, ensuring the interface remained readable and trustworthy across all of them.

Design PROCESS

Designing My ICBC was not a clean linear process and that was the point. Services were being built in parallel, requirements evolved, and the work had to flex without losing coherence.

The process included:
  • Research and discovery
  • User testing and feedback sessions
  • Cross-team collaboration across UX, content, product, and development
  • Flow creation and scenario mapping
  • Low-fidelity exploration and wireframing
  • High-fidelity interactive prototypes in Axure RP
  • Responsive design refinement across breakpoints
  • Stakeholder presentations and alignment sessions
  • Ongoing iteration informed by analytics and usability findings

What made this process distinct was the scale of coordination involved. Decisions made in one service area had ripple effects across others. Staying aligned meant communicating constantly, advocating for consistency, and knowing when to move fast and when to slow down and get it right.

Features

PAYMENT & BILLING EXPERIENCE

One of my primary focus areas within My ICBC was the Payment & Billing experience.

I designed the payment plan experience, including:

Low-fidelity wireframes

[[divider]]

High-fidelity interactive wireframes

Including different iterations to decide what is the most user friendly layout

Screenshot of high fidelity wireframe exploring layout A for payment plan
High-fidelity wireframe: exploring layout A for payment plan
Screenshot of high fidelity wireframe exploring layout B for payment plan (chosen one)
High-fidelity wireframe: exploring layout B for payment plan (chosen one)

MVPs

To priorotize the crucial information first and nice to haves to be developed later to meet budget and deadline

Screenshot of high fidelity wireframe for the first MVP having only the required info
High-fidelity wireframe: first MVP including only the necessary information
Screenshot of high fidelity wireframe for the first MVP having only the required info
High-fidelity wireframe: Second MVP including nice to have information for the future releases

Mobile responsive experiences

Screenshot of the payment plan mobile view high fidelity wireframe
High-fidelity wireframe of payment plan mobile view

The payment plan interface needed to communicate a large amount of financial information clearly and confidently.

Users may manage multiple vehicles and policies while needing to understand payment status quickly.

The experience included:
  • Policy details
  • Vehicle information
  • Payment schedules
  • First and upcoming payments
  • Scheduled payment frequency
  • Remaining payments
  • Payment amounts
  • Status and account messaging

Status indicators included:

Active

Missed payments

Account issue

Debt

Paid in full

Empty state

[[divider]]

The primary UX challenge was hierarchy

The information needed to remain readable, trustworthy, and easy to scan while balancing financial complexity and responsive design requirements.

Through testing, analytics-informed iteration, team reviews, and continuous refinement, the experience evolved into a clearer and more user-friendly payment system.

Impact & reflection

Impact

Over a six-month period, more than 60,000 British Columbians opted into email communications through My ICBC. For a government platform where most services are used once every few years, that kind of voluntary engagement is a strong signal of trust.

Measuring adoption for services like ICBC is genuinely difficult.

People renew their ID every five years. They file a claim after an accident. Traditional engagement metrics miss the value of a well-designed experience in those moments. But trust shows up in other ways, and it showed up here.

Beyond that signal, My ICBC contributed to:
  • Greater consistency across ICBC’s digital ecosystem
  • Stronger user trust through unified branding and experience
  • Higher task completion rates across online services
  • Improved mobile accessibility and responsive interactions
  • A more scalable foundation for future self-service features

Reflection

My ICBC reinforced something I believe about large-scale design work: Coherence is a decision you make every day, not once at the beginning.

Designing for millions of British Columbians across services they rely on for life’s most important moments meant holding a long-term vision while making practical, MVP-grounded decisions along the way. It meant advocating for consistency when parallel workstreams pulled in different directions. It meant treating trust not as a nice-to-have but as a core design requirement.

This project deepened my ability to work at scale, balance policy and UX constraints, and deliver accessible, responsive experiences within complex institutional environments. It confirmed that the most meaningful design work often happens quietly, in the details users never notice because they just work.

EXPLORE MORE

ID Card Online Renewals & Replacements

Leading the end-to-end UX of a future self-serve experience for BC drivers.

I led the UX design of ICBC’s upcoming Card Online Renewal & Replacement experience, from research and flow creation to high-fidelity interactive wireframes, testing, iteration, and stakeholder collaboration.

Due to confidentiality and upcoming launch timelines, detailed screens are not publicly available

→ View ID Card Online Renewals & Replacements

Other projects