UX / UI Designer
Responsive page systems, content hierarchy, service journeys, and interface direction.
Utility platform
HydroOne
A UX/UI system for content-heavy utility pages, focused on navigation that surfaces the next step, task-led service journeys, and responsive information architecture.
Utility service UX
Help customers find account, outage, billing, rate, and support information with less friction.
Content at scale
Reusable modules designed to make long utility pages feel consistent and easier to scan.
2020 – 2021
Nov 2020 to Mar 2021 with the Hydro One product team.
5 months
Five months of wireframes, mockups, and user flow work to redesign the platform for everyday workforce tasks.
Make high-density utility information easier to navigate.
Hydro One needed service pages that could carry policy, billing, outage, and support content without making customers work to find the next step.
I translated complex service content into task-led page patterns.
The work focused on modular hierarchy, responsive structure, navigation logic, and repeatable sections for long-form utility journeys.
Before and after
Show the shift in the product experience.
Replace these placeholders with the strongest evidence of how the interface moved from an earlier state into the final direction.
Service architecture
Utility tasks need a visible next step.
The page system separates high-intent actions from educational content so customers can recover their path quickly, especially when they arrive with an urgent need.
The page structure gives customers clear starting points before they enter deeper utility content.
Critical support information is surfaced in a hierarchy that supports quick scanning under pressure.
Billing and rate content is broken into readable sections so users can understand context before acting.
Content UX
Long utility pages became structured stories.
The design language uses repeated blocks, contained imagery, and clear labels so customers can understand what each section is for before reading deeply.
Responsive behavior
The system had to survive long mobile pages.
Mobile layouts preserve content order, module rhythm, and touch-friendly actions while keeping important utility information visible.
The visual system helps different page types feel related, even when the content changes from education to account support.
Use hierarchy to separate urgent service tasks from educational content.
Emergency and account actions sit ahead of explanatory content so customers can act before reading policy detail.
Keep navigation close to the place where customers need it.
Related links stay beside the section they support, reducing jumps between page content and utility navigation.
Make reusable page blocks flexible enough for long utility journeys.
Reusable blocks let account, outage, rates, and support pages share structure without forcing identical content.
Protect readability and touch targets when pages move to mobile.
Mobile layouts keep copy, controls, and imagery within practical tap and reading ranges for long service pages.
Outcome
A utility experience that is easier to move through.
Hydro One's page system brings visible hierarchy, reusable content patterns, and responsive structure to customer journeys that could otherwise feel dense and difficult.