Empower

Overview

I led the design and scaling of a unified design system that became the foundational UI infrastructure for Empower's large-scale financial platform. The system supported multiple product teams and complex financial workflows, enabling consistent user experiences and significantly improving design–engineering efficiency across the organization.

Context

Empower is a large-scale financial platform serving millions of users across personal finance, retirement planning, and enterprise retirement products. Prior to this initiative, teams worked with fragmented UI patterns, inconsistent components, and ad-hoc design decisions. As the platform scaled, these inconsistencies increasingly slowed development, created UX debt, and introduced risk into core financial flows.

Problem

As the platform scaled, the lack of a shared design system became a structural bottleneck. Teams duplicated work, component behavior drifted across products, and design–engineering alignment degraded. As a result, feature delivery slowed and maintaining consistent, predictable UX at scale became increasingly difficult.

Key issues included

•No shared design system across products, leading to duplicated work
•Inconsistent component behavior and visual drift between teams
•High friction between design and engineering, slowing feature delivery

My Responsibility

I owned the design system end-to-end and acted as the primary driver of its architecture, adoption, and evolution.

•Defined system architecture, interaction principles, and visual foundations
•Designed and maintained tokens, components, and responsive patterns
•Established governance processes and contribution guidelines
•Led internal reviews and alignment with design and engineering teams
•Ensured system adoption across products and teams

This role required balancing UX quality, technical feasibility, and long-term scalability.

Solution

I designed and implemented a unified design system that standardized UI foundations, component behavior, and interaction patterns across the platform. Beyond creating components, I established the system as shared product infrastructure with clear ownership, governance, and adoption processes. The system was designed to scale with the organization and support long-term product evolution rather than short-term UI fixes.

Empower Design System - Corporate Site UI Kit — Comprehensive UI component library for Empower's corporate website, featuring reusable components, design tokens, and interaction patterns that ensure visual and behavioral consistency across all touchpoints.

150+

Components

Including 33 with documentation

Dashboard widgets

12+

Projects using 2.0

Empower Corporate Website - Desktop and Mobile Homepage — Empower's corporate homepage demonstrating responsive design and consistent user experience across desktop and mobile platforms. The page showcases how the design system enables seamless adaptation of hero sections, feature blocks, statistics displays, and call-to-action elements while maintaining visual and behavioral consistency across all device sizes.

Empower Financial Dashboard - Design System in Action — The design system in action: a comprehensive financial dashboard showcasing how reusable components, design tokens, and UX patterns come together to create a cohesive user experience. The dashboard demonstrates data-heavy interfaces, complex financial workflows, and consistent visual language across accounts, goals, retirement planning, and investment management sections.

Approach

I followed a structured, iterative approach aligned with large product teams:

•Audited existing UI patterns and identified inconsistencies
•Collaborated with designers and engineers to understand constraints and workflows
•Built a token-based foundation for color, typography, spacing, and motion
•Designed core components with clearly defined states and behaviors
•Created responsive patterns to support multiple breakpoints and use cases
•Validated system decisions through internal reviews and cross-functional feedback
•Documented usage guidelines and established review and contribution processes
•Iterated on the system based on real product usage and feedback

Empower Design System - UI Components: From Library to System — System architecture showing the evolution from a component library to a comprehensive design system, including foundational elements (typography, colors, icons), platform considerations (desktop and mobile), and key principles: single source of truth, federated adoption, built-in accessibility, and design-development alignment.

Empower Design System - Design Variables and Tokens — Comprehensive design token system including color palettes, typography scales, spacing units, and semantic variables that enable consistent theming and easy maintenance across all platforms and products.

Empower Design System - Pictogram Style Guide — Visual style guide for pictograms and iconography, ensuring consistent visual language and clear communication across financial interfaces and data visualizations.

Empower Design System - Component States and Interactions — Comprehensive state definitions for interactive components including default, hover, active, focus, disabled, loading, and error states. Each state was carefully designed to provide clear visual feedback and maintain accessibility standards, ensuring consistent user experience across all interactions.

Empower Design System - Core Components — Core reusable components designed for financial interfaces, including data tables, form inputs, navigation elements, and interactive controls that support complex financial workflows.

Empower Design System - Responsive Breakpoints and Layout System — Responsive design system with defined breakpoints and layout grids ensuring consistent experiences across desktop, tablet, and mobile devices while maintaining usability for data-heavy financial interfaces.

Empower Design System - Component Use Cases and Documentation — Comprehensive component composition documentation demonstrating thorough exploration of all possible combinations for using the same component across different breakpoints. The design system includes detailed guidelines for desktop and mobile variations, ensuring consistent implementation while providing flexibility for various use cases and screen sizes.

Empower Design System - Advanced Component Patterns — Comprehensive component composition documentation demonstrating thorough exploration of all possible combinations for using the same component across different breakpoints. The design system includes detailed guidelines for desktop and mobile variations, ensuring consistent implementation while providing flexibility for various use cases and screen sizes.

Empower Design System - UX Patterns and Interaction Models — Documented UX patterns for common financial workflows including data entry, transaction flows, dashboard navigation, and information architecture that guide consistent user experiences across products.

Empower Design System - Animation Specifications — Animation and motion design guidelines that enhance user understanding of financial data transitions, state changes, and system feedback while maintaining performance and accessibility standards.

Empower Design System - Design to Development Workflow — Established collaborative workflow between design and engineering teams, ensuring seamless handoff, clear specifications, and alignment throughout the product development lifecycle.

Impact

•Reduced design-to-development handoff time from weeks to days
•Accelerated feature delivery across multiple product teams
•Eliminated recurring UI inconsistencies caused by ad-hoc implementations
•Improved predictability and usability across core financial workflows
•Design system became a core enabler of product velocity and UX quality

Reflection

"This project reinforced that a design system is not a collection of components, but shared product infrastructure. Its success depended as much on governance, adoption, and collaboration as on visual or interaction design. By aligning design and engineering around a single, scalable system, the team was able to focus on solving product problems instead of re-solving UI fundamentals."