Enterprise Web Design System & Components
Designed and scaled a global system of reusable Figma components and documentation, establishing a unified UX standard that increased development speed across the digital ecosystem.
Role
Design Systems Architect
Industry
IT & SaaS
Focus
Design System & Components
The Goal
To eliminate design debt and accelerate development velocity by building a global system of reusable Figma components and documentation. I focused on creating a "single source of truth" that standardized the user experience across all HPE web properties.
Phase 1: Audit & Foundation
I began by identifying the friction points that were slowing down the design-to-development pipeline.
Component Audit: Conducted a comprehensive audit of existing web properties to identify inconsistent patterns, redundant styles, and "one-off" components.
Stakeholder Interviews: Interviewed designers and engineers to understand bottlenecks in the current workflow, discovering a high rate of design inconsistency due to lack of documentation.
Defining the Core: Established the foundation of the system, focusing on "Atomic Design" principles by starting with base tokens (color, type, spacing) before building complex components.
Phase 2: Modular Figma Component Library
This phase was about building the most robust, flexible assets possible to ensure the system was "foolproof" for other designers. The focus was on creating a robust library in Figma that was both flexible and easy for other designers to adopt.
Intelligent Figma UI: I utilized advanced Figma features, including Booleans, Instance Swapping, and Component Properties, to create a library that was intuitive for designers of all skill levels. This allowed designers to toggle complex layout options on or off without "breaking" the component's underlying logic.
Variable-Driven Logic: By embedding variables and design tokens into the components, I ensured that elements like buttons, inputs, and links remained consistent while allowing for variable content lengths.
Developer-Ready Specs: Every component was engineered with clear naming conventions and property structures that mapped directly to the technical requirements of the engineering team.
Phase 3: System Architecture & Component Design
Once the "atoms" were built, the focus shifted to how these components behaved in real-world layouts across a global enterprise scale.
Breakpoint Fluidity: I architected the core web components to be natively responsive, ensuring seamless transitions across five distinct breakpoints from mobile to ultra-wide displays.
Scalable Page Templates: I developed a suite of "plug-and-play" templates that allowed teams to assemble high-fidelity layouts rapidly while maintaining a unified information architecture.
Systemic Flexibility: These templates were designed to accommodate variable design layouts, providing the necessary "flex" for marketing and product teams without breaking the underlying design system rules.
Phase 4: The Self-Service Platform & AI-Assisted Documentation
To ensure the system functioned as a dynamic "Single Source of Truth," the team moved beyond static docs to a live ecosystem.
Standardized Documentation Framework: I authored comprehensive component guidelines following the Google Material Design structure. This ensured every asset included a clear Component Description, Anatomy diagram, Usage guidelines, and "Dos and Don’ts" to prevent design misuse.
AI-Assisted Documentation Workflow: Created a reusable prompt template for designers to convert component properties, variants, and tokens into pre-formatted Markdown specs, reducing documentation drafting time by 60%.
Unified Documentation Hub (Supernova): We integrated the Figma token library and component sets into Supernova, establishing a centralized, self-service hub where stakeholders across the organization could reference the latest design standards.
Syncing Design to Code (Storybook): Collaborated with front-end engineering to align Figma design tokens 1:1 with code variables in Storybook, eliminating handoff friction and establishing true parity between design canvas and production environments.
Centralized Reference: This effort provided a reliable, self-service environment for cross-functional teams, accelerating both design and development cycles while maintaining global brand consistency.
Outcomes & Impact
Once the system was built, the focus shifted to how these components behaved in real-world layouts across a global enterprise scale.
Accelerated Velocity: Reduced design rework and accelerated the path from concept to code through a self-service model.
Scalable Templates: Designed page templates that allowed marketing and product teams to launch new pages 25% faster while maintaining design integrity.
Standardized UX: Successfully unified the user journey across disparate business units.
Next Steps & Personal R&D: AI Page Layout Generation
To push the design system beyond static documentation, I conducted personal R&D exploring how the Figma AI agent can leverage structured component libraries to accelerate layout assembly.
Figma AI Agent Integration: Established a structured guideline framework that aligned the Figma AI agent with the design system’s underlying auto-layout rules, component hierarchies, and variant properties.
Automated Layout Generation: Developed a prompt-driven workflow where the Figma AI agent intelligently selected and assembled core system components to generate a diverse set of marketing web layouts.
Designer-Centric Tooling: Built this workflow as an evolving designer tool to reduce repetitive manual assembly and empower designers to explore dozens of brand-compliant layout variations in seconds.