OneStop 2.0 — architecting an entire regulatory platform.
For the Alberta Energy Regulator I did more than design screens — I architected the information model, designed every flow across 60+ regulatory journeys, built and owned the Storybook design system, and ran the developer hand-off as product owner. A single, governed, WCAG-conformant platform for two very different audiences.
OneStop 2.0 operator dashboard — reconstructed from the shared component library, tokens and grid I built.
Every energy & water application in Alberta runs through one system.
The Alberta Energy Regulator (AER) governs energy and water development across the province. OneStop is the digital system industry uses to apply for, amend, renew and cancel licences — and the system AER staff use to review and adjudicate them.
OneStop 2.0 was the modernization of that platform: one responsive web experience serving two fundamentally different audiences — external operators submitting complex regulatory applications, and internal AER staff working through high-volume review queues.
By the time I joined, the product had grown organically for years. The result was a platform that worked, but didn't cohere: every flow was its own dialect of the same language.
Complexity, multiplied across 60+ flows.
This wasn't a visual refresh. It was untangling a regulatory system where every inconsistency carried compliance risk.
Fragmented patterns
The same table, form, modal and wizard were rebuilt dozens of times — each subtly different, none documented.
Two audiences, one app
Operators need guidance and forgiveness; reviewers need density and speed. Both lived in the same screens.
Regulatory weight
Policy, legislation and water-volume math sat behind every field. A mislabelled input is a compliance problem.
Slow to ship
With no shared foundation, a small policy change rippled unpredictably and cost weeks of rebuild.
Accessibility drift
Focus order, labels and contrast varied flow-to-flow — a real barrier for a public-facing government service.
No source of truth
Design lived in scattered files; engineering re-interpreted each one. Drift was guaranteed.
Four hats, one accountable owner.
I was brought in as a senior consultant and ended up owning the spine of the product. Across the engagement I wore four hats — and the value was in connecting them.
Information architect
Modelled the platform's structure — the application/submission/authorization model, navigation and the dynamic-forms engine that powers every flow.
Product designer
Designed the end-to-end experience for all 60+ flows and every screen state — applicant onboarding, multi-step wizards, review queues, bulk upload, errors and edge cases.
Design-system owner
Built and maintained the Storybook design system and tokens; defined a contribution model so teams extend it without fragmenting it.
Product owner & dev partner
Managed the backlog and roadmap, wrote the specs, and ran the developer hand-off — pairing with engineering to ship pixel- and policy-accurate.
I started by mapping the system as it really worked.
Before drawing anything, I built an evidence base — interviewing both audiences, auditing every flow, and translating policy into design constraints.
What I did
- Stakeholder & user interviews with external operators and internal AER reviewers to understand goals, mental models and pain.
- Workflow & task analysis of each regulatory journey — where work stalled, looped or required off-system workarounds.
- Heuristic & content audit of all 60+ flows, scoring usability issues by severity and frequency.
- Policy translation — sitting with regulatory SMEs to convert legislation into validation rules, field logic and copy.
- Service blueprints & journey maps connecting front-stage screens to back-stage review and decisioning.
| Sev | Flow | Issue | Type |
|---|---|---|---|
| 3 | Water Term Licence | Volume units inconsistent across steps | Critical |
| 2 | Amendment | Unclear what a change replaces | Major |
| 2 | Pay / Submit | Error message doesn't say why | Major |
| 1 | Bulk upload | No progress feedback on large files | Minor |
| 1 | Review queue | Filters reset on navigation | Minor |
The audit surfaced one pattern again and again: the system asked users to hold complexity in their heads that the interface should have carried for them.
One model underneath everything.
The breakthrough was treating OneStop as a layered system — a single foundation that every regulatory flow draws from, rather than 60 standalone products.
Information architecture
I restructured navigation around what people came to do — apply, track, review — instead of around internal org structure.
Dashboard
- Active applications
- Submissions in progress
- Authorizations
- Action required
- Notifications
Apply
- Water Term Licence
- Temporary Diversion
- Amendment
- Renewal / Cancellation
- Water Transfer
- Bulk upload
Track & manage
- Application detail
- General summary
- Disclaimers
- Documents
- Correspondence
Staff console
- Review queue
- Assignment & routing
- Decision & conditions
- Reports
- Admin
At the centre sat a dynamic-forms engine: every regulatory flow is configured from the same form primitives, validation framework and review pattern. New legislation becomes new configuration — not a new codebase.
Designing the hardest flow first.
The Water Term Licence is one of the most complex applications — multi-step, document-heavy, with real water-volume math. If the system worked here, it would work everywhere.
Multi-step wizard with a persistent stepper, inline validation, calculated fields, and a forgiving “save draft” at every step — so a 40-minute application is never lost.
Problem solving in the details
- Calculated fields — the system derives daily rates from annual volume so operators never do regulatory math by hand.
- Forgiving by default — every step autosaves; nothing is lost on timeout, a top complaint in the audit.
- Explain, don't just reject — error messages say what's wrong and what to do, sourced from policy.
- Review before submit — a single summary + disclaimer screen lets operators verify everything before it becomes a legal filing.
A dense, fast console for AER reviewers.
The same components, retuned for density and speed — reviewers triage queues, not fill in forms.
My assignments
| ID | Type | Licensee | SLA | Stage | Status |
|---|---|---|---|---|---|
| WL-04821 | Water Term | Bow River Energy | 2 days | Technical review | In review |
| AM-77210 | Amendment | Bow River Energy | 5 days | Completeness | Info requested |
| WT-66104 | Transfer | Prairie Hydro | 9 days | Decision | Recommend approve |
| RN-50194 | Renewal | Foothills Water | 12 days | Assigned | Not started |
Same table, drawer, filter and tag components as the operator portal — composed for triage. One system, two experiences.
One governed source of truth.
Tokens at the base, 180+ documented components above, and a contribution model so the system stays coherent as it grows.
Colour tokens
| Token | Value | Role | Contrast |
|---|---|---|---|
color.brand.navy | #18496D | Headers, primary chrome | AA · 8.6:1 |
color.action.primary | #066EA8 | Links, active, focus | AA · 4.9:1 |
color.action.submit | #D01D26 | Submit / destructive | AA · 5.3:1 |
color.status.success | #639144 | Approved / complete | AA · 4.6:1 |
color.surface.info | #E6F1F6 | Selected rows, info | — |
color.text.default | #243B4D | Body copy | AA · 11.8:1 |
Type scale · Selawik
28 / 36 · Semibold22 / 30 · Semibold18 / 26 · Semibold15 / 24 · Regular13 / 18 · RegularSpacing scale · 4-pt base
space.1 — 4pxspace.2 — 8pxspace.4 — 16pxspace.6 — 24pxspace.8 — 32pxspace.12 — 48pxComponent library · the inventory I built & owned
Owned like a product
- Backlog & roadmap — I prioritised system work alongside feature delivery and reported on it.
- Contribution model — a clear path for teams to propose, review and merge new patterns without forking the system.
- Versioning & docs — every component documented with usage, states, do/don't and a11y notes in Storybook.
- Adoption tracking — measured uptake so the system earned its keep.
Documented states
Every component shipped with its full state matrix — not just the happy path:
Designed once, shipped accurately.
Hand-off wasn't throwing files over a wall — it was a shared contract. Tokens, specs and Storybook kept design and code in lock-step.
How the hand-off worked
- Single token source — colour, type, spacing and radius defined once, exported via Style Dictionary to CSS, so design and build can never drift.
- Storybook as contract — devs built against the same documented components I designed; QA checked against it.
- Specs & redlines — annotated states, props and a11y requirements for every component.
- Pairing — I sat with engineering through implementation, reviewing PRs against the system.
WCAG 2.1 AA, baked into the system.
For a government regulator, accessibility is a legal and ethical requirement. Rather than retrofit each of 60+ flows, I built conformance into the components themselves — so every flow inherited it.
Contrast tokens
Every text/surface pairing tested to AA before it shipped.
Focus & keyboard
Consistent, visible focus order through every multi-step flow.
Semantic labels
Screen-reader names & descriptions documented per component.
From 60 dialects to one language.
Moderated usability testing on the rebuilt submission flows reduced task errors and streamlined operator workflows. More durably, the system changed how the team works: policy changes now flow through configuration and shared components instead of bespoke rebuilds — so AER ships faster, with accessibility and consistency guaranteed, not hoped for.
When the table, the form and the wizard are solved once — properly, accessibly, and owned — every team gets to spend its energy on the regulation, not the rebuild.— Reflection on owning OneStop 2.0