Laptop showing the redesigned OneStop 2.0 applications dashboard, with the OneStop logo in the corner

OneStop 2.0

  • WEB APP
  • 2024-2026

Overview

Role
Product Designer
Platform
Enterprise Web Application
Timeline
2024-2026
Deliverables
Design System, UX Research, User Flows, Wireframes, High-Fidelity Prototypes
Team
Product Owners, Business Analysts, Solution Architects, Developers, QA, SMEs
Overview

OneStop 2.0 is a large-scale enterprise platform developed for the Alberta Energy Regulator (AER) to streamline regulatory application processes and support more informed decision-making. The platform is used by industry professionals and internal AER teams to manage complex regulatory workflows.

When I joined the project, the existing platform had been built without a dedicated design system. The interface felt outdated, inconsistent, and difficult to navigate, making complex workflows even more challenging for users.

As a Product Designer, I collaborated with a big team to redesign key user experiences, establish a scalable design system from scratch, and create intuitive, user-centered solutions that balanced both business objectives and user needs.

The Challenge

Problem Framing

OneStop 2.0 was built on top of an existing platform that had been developed without a dedicated design system. While the product successfully supported complex regulatory workflows, the user experience had become inconsistent as the platform continued to evolve.
The challenge was not to redesign the platform from scratch, but to modernize the experience while preserving
business-critical workflows that users already relied on. Every design decision needed to balance usability, technical constraints, regulatory requirements, and business objectives.

What Users Experienced

  • Legacy OneStop — application form

    No Design System

    Different components, colors, typography, and spacing created a disjointed and unprofessional experience.

  • Legacy OneStop — integrated applications table

    Dense Tables

    Dense information with minimal visual hierarchy created cognitive overload and made scanning difficult.

  • Legacy OneStop — authorization ID search results

    Inefficient Search Experience

    Users had to manually scan large amounts of search results, making it difficult to quickly find the right record.

  • Legacy OneStop — cancel existing authorization dialog

    Inefficient Information Layout

    The placement of key elements did not support a logical scanning pattern, increasing the effort required to complete the task.

The Goal

The goal was to modernize OneStop's user experience while preserving the complex regulatory workflows that users relied on. By establishing a scalable design system and redesigning key workflows, I aimed to improve usability, reduce cognitive load, and create a more consistent, efficient experience.

Key Objectives

  • Build a scalable design system
  • Simplify complex workflows
  • Balance user needs with business and regulatory requirements
  • Improve information hierarchy

Building a Scalable Design System

Before redesigning individual workflows, I established a scalable design system that would become the foundation for the entire platform. The goal was to create consistency, improve collaboration with developers, and enable the product to scale as new features were introduced.

Grid System

I established a responsive 24-column grid that created a consistent layout foundation across the platform. It improved alignment, spacing, and collaboration between design and development.

  • 24-column responsive grid

    Flexible layouts for different screen sizes

  • 16 px gutters

    Consistent spacing between columns

  • 8pt spacing system

    Consistent spacing between columns

Grid system — desktop 1440px and tablet 1024px

Applying the Design System

With the design system in place, I shifted my focus to redesigning key product workflows. Working in Agile sprints, each feature followed a consistent process: understanding business requirements, collaborating with cross-functional stakeholders, validating assumptions with users, and designing scalable solutions. Every sprint included user stories, acceptance criteria, interactive prototypes, design reviews, and developer handoff to ensure smooth implementation.

Design Process

  1. Requirements

    Understand business needs and constraints.

  2. Discovery

    Stakeholder workshops, POs, and user interviews.

  3. User Stories

    Define user needs and acceptance criteria.

  4. Wireframes

    Explore workflows and validate concepts.

  5. High-Fidelity Design

    Design scalable, accessible solutions.

  6. Developer Handoff

    Provide specs, prototypes, and implementation guidance.

*this process was iterative and adapted to each feature.

Dashboard

Challenge

Users managed dozens of applications every day. The previous dashboard made it difficult to prioritize work, monitor application status, and quickly locate important information.

Primary User Groups

  • Olivia Martinez, Environmental Compliance Specialist

    Reviews environmental applications and needs quick access to regulatory requirements, application history, and amendment details.

  • David Liu, Operations Director

    Oversees multiple renewable energy projects and needs a fast way to monitor application status and coordinate submissions across teams.

  • Matthew Davis, Environmental Compliance Officer

    Manages drilling and water applications, tracks submission progress, and ensures compliance with regulatory standards.

Initial Design

Dashboard — initial design

Key Pain Points

  • Dense table layout
  • Limited visual hierarchy
  • Hard to identify application status
  • Lack of global filtering

Design Goals

  • Improve organization

    Present application data in a structured and predictable way.

  • Global filtering

    Enable users to quickly narrow large datasets using centralized filters.

  • Status visibility

    Make application states easy to recognize at a glance.

  • Removed expandable table rows

    Replaced row expansion with a clearer layout to reduce visual complexity and improve readability.

Solution (Redesigned Experience)

Dashboard — redesigned experience

UX Improvements

  • Color-coded status badgesm
  • Better information hierarchy
  • Improved scanability
  • Flexible sorting & filtering
  • Stronger visual hierarchy

Trade-offs Considered

Enterprise users rely on access to large amounts of information, but displaying everything at once makes the interface difficult to scan. I prioritized the most relevant information in the dashboard while keeping secondary details accessible through dedicated pages and actions.

Global search

Discovery

To understand why users struggled to find applications, I combined stakeholder workshops, user interviews, and workflow analysis. Rather than focusing solely on the interface, I examined how different roles searched for information throughout their daily work and identified the biggest sources of friction.

Research Insights

  • Different users searched differently

    Compliance Officers, Specialists, and Operations Directors relied on different search criteria depending on their responsibilities.

  • Search was task-driven, not ID-driven

    Users rarely searched by a single application ID. They combined project names, statuses, authorization types, and dates to locate records.

  • Finding information took too many steps

    Users often refined searches repeatedly because filters were limited and important information wasn't surfaced early.

  • Large result sets increased cognitive load

    Displaying all information with equal visual weight made it difficult to scan, compare, and prioritize results.

Initial Design

Global search — initial design

Key Pain Points

  • Search was difficult to scan and use
  • Results lacked hierarchy
  • No result count / empty-state signal
  • Users had limited filtering options

Design Goals

  • Improve searchability

    Make it easy to find what users need, fast.

  • Faster scanning

    Reduce cognitive load with clean, scannable layouts.

  • Better hierarchy

    Organize information to support quick scanning.

  • Flexible filtering

    Give users more control to narrow down results.

Solution (Redesigned Experience)

Global search — redesigned experience

UX Improvements

  • Faster Search Experience
  • Flexible Filtering
  • Multiple Viewing Options
  • Clear Information Hierarchy
  • Data export

Turning Complex Business Rules into Intuitive Experiences

Some features started with annotated wireframes that combined business rules, validation logic, and stakeholder feedback. These living documents helped align Product Owners, Solution Architects, SMEs, developers, and UX before moving into high-fidelity designs.

Business Requirements

Wireframes

Validations on lenth:

  • cannot be negative
  • higher than 0
  • no decimals
  • If 10 or higher, display mandatory textbox question: “Provide information to support a longer term”

Must be for licenses that have:

  • not canceled
  • not expired
  • surface PoDs
  • specific areas must display confirm
  • can search by licenses owned by any BA
  • have to reconcile between a GoA client ID and AER BA

Validations on lenth:

  • should display the GoA PoD data if an EPA license is selectes

Wireframe — TL transfers application framework

Wireframe — licence search (transferring from)

Wireframe — point-of-diversion table

Final Design

Final design — TL transfer form

Final design — TL Transfer search modal

Key Takeaway

Enterprise UX goes beyond creating intuitive interfaces. It requires translating complex business rules, validation logic, and technical constraints into experiences that feel simple and predictable for end users. This collaborative process ensured that every requirement was reflected in the final design while maintaining consistency across the platform.

200+ screens

  • 200+ screens — Storage Notification

  • 200+ screens — New TDL application

  • 200+ screens — Notification — water release locations

  • 200+ screens — Summary details

  • 200+ screens — Notification — water release location expanded

  • 200+ screens — Emergency Response Planning Exercise Notification

  • 200+ screens — Water application details

  • 200+ screens — General — associate and consultant details

  • 200+ screens — All Events — select an event

Throughout the project, I designed 200+ screens across multiple enterprise workflows. The examples shown in this case study highlight a small selection of features that best demonstrate the design process, key decisions, and collaboration involved in building OneStop 2.0.

Reflections

What This Project Taught Me

  • Design systems are products, not libraries.

    Building reusable foundations early made future features faster to design and more consistent.

  • Enterprise UX is about reducing complexity, not removing it.

    The challenge was helping users navigate complex regulations without hiding critical information.

  • Great enterprise products are built through collaboration.

    The strongest solutions came from continuous iteration with Product Owners, Solution Architects, SMEs, developers, QA, and end users.

Impact

Across multiple enterprise workflows
200+SCREENS
improve consistency and scalability
80+COMPONENTS
translated into end to-end user experiences
50+USER STORIES
Next Project

Tattoo Day App

Product & Brand Design

LET'S TALK

And make something meaningful.

Say hi

Thanks for scrolling all this way ✦