Home / Work / Digital Product + Experience Design / Gigawatt Design System
Gigawatt Design System
Powering a Brand Evolution
OVERVIEW:
Foundation for Enterprise Modernization
Translating Brand Identity into Digital Utility.
Following a comprehensive brand overhaul at IGS Energy, the organization required a digital-first design system that could translate their new visual identity into a scalable, high-performing ecosystem. Gigawatt was developed to replace a fragmented legacy environment with a unified "source of truth," ensuring that every digital product—from internal campaigns to the primary consumer site—felt like a cohesive part of the new IGS narrative.
ROLES:
Lead UI/UX Design
Systems Architect
Accessibility & Compliance Lead
Visual Strategy & Governance
TOOLS & RESOURCES:
INSIGHT:
Bridging the Gap Between Brand and Compliance
An initial audit of the existing digital landscape revealed significant "design debt." Legacy components were not only visually inconsistent but, more critically, failed to meet WCAG and ADA accessibility standards.
Color contrast ratios, inconsistent button behavior, and a fragmented iconography library were creating friction for users and legal risks for the organization. The mission was clear: fix the foundation while building for the future.
STRATEGY:
Parallel Development: Building While Sailing
My strategy focused on an "Audit-First, Pilot-Parallel" approach. Instead of building the system in a vacuum, I integrated the development of Gigawatt into the active workflows for IGS.com and high-priority campaigns (CNG, Biogas, and Choosing Solar).
This allowed us to pressure-test components in real-world scenarios immediately, ensuring the system was adaptable and battle-ready from day one.
OBJECTIVE:
A Scalable, Accessible, and Adaptable Future
The primary goal was to align the digital experience with the new corporate brand guidelines while establishing a rigorous set of standards for typography, color, and component logic.
We aimed to create a system that wasn't just a UI kit, but a functional framework that empowered a small development team to build faster and more accurately.
PROCESS + WORKFLOW:
From Audit to Atomic Deployment
I led the transition from fragmented modules to a structured Atomic Design architecture, focusing on the most critical pain points identified during discovery.
1. The Accessibility Overhaul (Color & Type)
Addressing the "red flag" of non-compliance, I rebuilt the color palette from the ground up. This involved expanding the brand team's vision into a digital-ready palette that passed WCAG AA/AAA standards, ensuring legibility across all user groups.
2. Component Standardization
I prioritized the "Big Three" inconsistencies identified in the audit:
Buttons:
Standardized character limits, hit areas, and visual hierarchy to ensure universal legibility.
Form Inputs & Drop-downs:
Re-architected these high-friction elements to ensure a predictable user flow across all digital products.
Iconography & Storytelling:
Icons are a central narrative pillar at IGS. I established a foundational visual language for iconography, utilizing a precise keyline approach inspired by Material Design to ensure every icon felt custom yet consistent.
3. Development & Pressure Testing
Working in an agile environment with a small dev team, we prioritized items based on campaign schedules.
Storybook Integration:
Components were deployed and verified in Storybook, ensuring a mirrored environment between my Figma architecture and the final code.
Live Testing:
Components were immediately applied to the IGS.com product pages and specialized campaigns to ensure responsiveness and scalability.
RESULTS:
A Modernized Digital Engine
Gigawatt transitioned from a pilot project to the foundational framework for IGS Energy’s digital future. It effectively turned a "brand evolution" into a "digital reality."
100% Compliance:
Achieved WCAG and ADA accessibility standards across all new system components.
Increased Velocity:
Enabled the rapid launch of three major campaigns (CNG, Biogas, Choosing Solar) by utilizing the pre-built, standardized component library.
Brand Unity:
Successfully aligned the internal design language with the external brand overhaul for the first time in the organization's history.
Scalability:
Provided a modular foundation that continues to support the development of modernized, revamped digital products.
