Designing for Digital Transformation
PROJECT OVERVIEW
Modernizing Manitoba Hydro's digital presence
Manitoba Hydro began a website modernization project to create a better digital experience for customers, build trust, and support the "Energy for Life" vision.
This phase of work focused on strengthening the foundation: content structure, a reusable design system, and extending Manitoba Hydro's existing Hugo site so future features could be added with more confidence.
MY ROLE
Design Firm | Q30 Design Inc.
Front end developer
Design system architect
Content structure specialist
TIMELINE
Phase 0: Nov 2023 to Apr 2024
Phase 1: May 2024 to Dec 2024
TECHNOLOGIES
Hugo (static site generator)
HTML, CSS, JavaScript
WCAG 2.1 AA standards
THE CHALLENGE
How do you modernize a large utility website while building internal capacity for ongoing updates?
Manitoba Hydro needed to modernize their site in a way that would let internal teams add and update features on their own in the future. The challenge had several parts: creating a comprehensive design system that meets WCAG 2.1 AA accessibility standards, implementing Hugo CMS for the first time, developing clear guidelines that enable internal teams to maintain consistency, auditing and migrating extensive existing content to a new information architecture, and establishing an agile approach to website product management.
THE PROCESS
Phased modernization strategy
The work was broken into phases to keep progress manageable and keep stakeholders aligned along the way:
01
Phase 0: Minimally releasable product
Set the foundation by creating an interconnected set of responsive digital patterns, building out the core design system in Hugo, and documenting how components should be used. I helped translate design decisions into reusable, accessible templates and patterns that would support future phases.
02
Phase 1: Modernize the existing experience
Used the new patterns to build out flexible page layouts and components, refining styles and interactions as we tested them against WCAG 2.1 AA. I partnered with project leads to adjust content into the new design system, making sure the Hugo implementation stayed maintainable and consistent.
03
Phase 2 and beyond: Building a modern digital experience
Ongoing work on more complex features and new technology, supported by a product roadmap. This continues alongside day to day operations.
DESIGN SYSTEM
Created a detailed design system and web guide that now act as the single source of truth for Manitoba Hydro's digital presence.
Foundations
Typography, color, spacing, and grid layouts that keep pages consistent and readable.
Content creation guidelines
Clear do and don't guidance for content structure, including how to use lists and how to keep content accessible.
Brand standards
Logo usage, imagery, and illustration guidelines to maintain brand consistency.
Component library
Reusable UI components with live examples, shortcodes, and simple implementation notes.
Accessibility standards
WCAG 2.1 AA guidance built into the system so accessibility stays part of every decision.
Style patterns
Headings, text styles, links, buttons, and interaction styles that keep the experience cohesive.
THE OUTCOMES
100%
WCAG 2.1 AA compliance across all components
Built on Hugo
Extended the client's chosen Hugo platform for flexibility and growth
Organization-Wide
Content squad engagement and training
KEY TAKEAWAYS
A scalable design system has to balance clear structure with enough flexibility that teams can ship quality work without constant developer support.
Working more deeply with Manitoba Hydro's existing Hugo implementation sharpened my understanding of its layered architecture, markdown-driven content, and how to fit real content into new layouts. It reinforced the value of documenting decisions and patterns so others can safely extend the site.
Building WCAG 2.1 AA into the system from the start, and rolling changes out in clear phases, made accessibility and iteration part of the normal workflow instead of after-the-fact fixes.
