Revamping High-Complexity SaaS for Operations
POG (short for Pot of Gold) was an internal SaaS tool used by airG’s Sales and Marketing teams.
Over time it had grown organically with no unified design direction. Components behaved inconsistently, visual styles varied across screens.
At the same time, airG planned to expand POG into the foundation for a broader suite of internal tools, including Asset Manager and Localization. That made the redesign more than a UI cleanup—it needed to establish a scalable system.
My Role as UI Lead & Design System Designer
I partnered closely with a Product Manager who led discovery and workflow mapping. My focus was translating those insights into a cohesive interface system — defining the visual language, component structure, and scalable foundations for future internal tools.
The Problem
POG had evolved reactively over time:
Components varied in style and behavior
No shared visual language or design system
Interfaces were difficult for new team members to learn
UI inconsistencies slowed development
Without a consistent foundation, scaling the platform into additional internal tools would compound these problems.
Establishing a Practical Design System
Rather than building an overly complex system, I focused on a lightweight, practical foundation the team could realistically maintain.
The system included:
Core UI components (tables, forms, modals, buttons)
A consistent type hierarchy
A spacing scale
A simplified color system
This created enough structure to standardize the interface while allowing the product to evolve without heavy process overhead.
Visual Identity
The product name already existed, so the goal was to establish a visual identity that felt cohesive without being overly literal.
Gold and yellow were the obvious starting point but proved difficult to use accessibly. Instead, I drew inspiration from the green of the Canadian $20 bill — a familiar color associated with stability and value, while subtly referencing the “Pot of Gold” concept.
Aligning Design and Development
Midway through the project, development velocity began slowing due to the growing number of custom components.
To address this, we pivoted to a development approach using the Angular component library with Tailwind CSS.
This shift brought design and development closer together, simplified component implementation, and made long-term maintenance significantly easier.
Scaling Across the Tool Suite
Once the design system was established, it became the shared foundation for additional internal tools.
Each product received its own theme color while sharing the same layout structure, typography, and component library. This approach kept the suite visually cohesive without making every product feel identical.
Outcome
Following launch, POG reached 99% user satisfaction among internal teams.
More importantly, the design system became the foundation for subsequent internal tools, enabling faster development and more consistent user experiences across the platform.
Reflection
Internal tools rarely have robust product analytics, and this project was no exception beyond the satisfaction score.
If revisiting the project, I would push earlier for lightweight success metrics—such as onboarding time for new employees or support requests related to the system—to better quantify the long-term impact of the redesign.