Digital Design System
Transforming AssetMark's Product Development Through Unified Design &
Establishing UI Foundations for the leading independent Wealth Management Platform
The Challenge
AssetMark's rapid growth led to a fragmented design ecosystem that was hindering innovation and user experience.
Design Inconsistency
50+ unique button variants across products, No Governance
Development Bottlenecks
75% of dev time spent on repetitive UI work
Maintenance Overhead
Technical debt accumulating faster than features
Team Friction
Designers and developers working in silos 80% Defects from not aligning on Design
AssetMark, a leading wealth management platform, faced the common challenge of maintaining design consistency and optimizing development efficiency across its rapidly expanding suite of digital products. With multiple product design and engineering squads working independently, the need for a unified Digital Design System (DDS) became paramount to ensure a cohesive customer experience and accelerate feature delivery.
Portfolio Engine Dashboard UI
Wealth Manager Dashboard UI
Investor Portal Dashboard UI
MorningStar Dashboard UI
My Role & Solution Architecting a Unified Digital Experience
As the Lead Design Systems Product Design Development Manager at AssetMark, I owned the strategic evolution and implementation of the Digital Design System. My mission was to bridge design and engineering, creating a single source of truth for all UI components and patterns.
Strategic Leadership & Guidance
I provided design leadership and strategic guidance to over 5 product design and 10 engineering squads. This involved ensuring alignment on digital product initiatives and fostering a collaborative environment that prioritized the cohesive development of all web and native mobile applications.
A Single Source of Truth
I owned and evolved the DDS within core design and development tools like Figma (for design artifacts) and Storybook (for coded UI component documentation). This involved leading the product design, UI, and UX for multiple unique applications from concept through launch, with a focus on building a scalable system.
Design Efficency
A core part of my role was to streamline the design process. By implementing new workflows and optimizing existing ones, we achieved significant improvements in efficiency.
Product Guides + Governance
I actively contributed front-end development support (HTML, CSS, JavaScript, Tailwind) during technical implementation and QA to ensure pixel-perfect fidelity.
A 12-month transformation that revolutionized how AssetMark builds digital experiences.
Discovery & Audit
Comprehensive audit of existing components, user research, and stakeholder interviews to understand pain points and requirements.
- Component Inventory
- User Journey Mapping
- Technical Assessment
Foundation Building
Established design tokens, core principles, and built the first set of atomic components with comprehensive documentation.
- Design Tokens
- Core Components
- Documentation Portal
Developer Integration
Created React component library, established CI/CD pipelines, and integrated with existing development workflows.
- React Library
- Storybook
- NPM Package
Adoption & Scaling
Migrated pilot projects, trained teams, established governance processes, and measured impact across the organization.
- Team Training
- Migration Tools
- Governance Model
Developer Workflow Integration
Seamlessly integrated into existing development processes without disrupting productivity.
Design Documentation
Figma components automatically sync with code components, ensuring 1:1 parity.
Development
Pre-built, tested components reduce development time by 40% on average.
Quality Assurance
Automated testing and accessibility checks built into every component.
Measurable Impact: Driving Efficiency & Consistency
Data-driven results that transformed our development velocity and user experience. The implementation and strategic evolution of AssetMark's Digital Design System yielded significant, measurable improvements across the organization:
Development Speed Improvement
Charts showing development velocity improvements over time.
Component Consolidation
Visual representation of component reduction and standardization.
UI Toolkit Features
Comprehensive tools and resources that empower developers to build consistent, accessible interfaces.
Component Library
250+ React components with TypeScript support
Design Tokens
Centralized theme system with CSS variables
Development Tools
Direct updates from Figma to Storybook, CLI tools, linting, and automated testing
Documentation Portal
Interactive guides and API references
Migration Support
Automated codemods and migration guides
Conclusion: A Strong Foundation for Future Growth
By establishing and championing the Digital Design System, AssetMark gained not only a unified visual language but also a powerful operational advantage. This initiative not only streamlined internal processes but also laid a robust UI foundation crucial for the ongoing growth and successful delivery of high-quality, consistent digital experiences to AssetMark's expanding user base.
What's Next
Continuing to evolve and expand the Digital Design System ecosystem.
