Design Systems
Building Scalable Component Lirabries for Seamless User Experiences Across Organizations
My Work Evolving & Managing Design Systems
State Street
Fidelity
Vistaprint
State Street Design System Evolution
How might we build and implement a new design system with existing legacy systems in a way that preserves functionality while enhancing consistency and user experience?
The Challenge
Specific Goals
Expand the component library, clarifying usage guidelines, and facilitating a smooth transition from legacy systems to increase adoption and ultimately improve client satisfaction.
Key Metrics
Success was measured by increased team utilization, improved product consistency, and demonstrable efficiency gains in the design and development process.
From Legacy to Launch: Orchestrating a Design System Revolution
This project focused on the comprehensive evolution of State Street's design system, addressing both legacy system challenges and the need for a robust, modern component library.
My role encompassed deep assessment of existing systems and componentry, strategic gap analysis, and meticulous tracking of work-in-progress to align with product modernization efforts. This involved not only direct contributions to the library's expansion but also oversight of team contributions, ensuring seamless handoff to development, and ultimately managing the entire design lifecycle from concept to deployment.
Planning & Deployment
Communication and teamwork were crucial to this project's success. We utilized shared, segmented trackers for cross-team collaboration, ensuring components were not only functional in design but also clearly prepped, handed off, and developed. Weekly check-ins with development teams, along with asynchronous testing and feedback, and pre-deployment QA sessions facilitated a smooth process. Post-deployment, we encouraged organization-wide feedback, fostering continuous improvement and expansion to address emerging use cases. This collaborative approach prioritized clarity, simplicity, and partnership throughout the entire design system lifecycle.
Behind the Scenes:
Designing for Optimal Functionality
When it was time to design, my work went beyond aesthetics, focusing on rigorous testing with scenarios derived from insightful sessions with product partners and extensive research into industry best practices. This process, informed by leading design system specialists, resulted in beautifully crafted components and patterns designed for both visual appeal and clear communication. With deep critical assessment, these designs were future-proofed, considering scalability and feature additions as the library grew and user needs evolved. This forward-thinking approach ensured the design system could adapt to expanding business requirements and remain a valuable asset over time as user needs expanded into new use cases for increased functionality.
Responsive Modals
Responsive Uploads
Responsive Status Monitor
Responsive Progress Indicators
Webpage Designs
Results
The impact of this design system evolution was significant, modernizing applications for increased performance, efficiency, and client productivity. We translated conceptual initiatives into tangible results through technology enhancements and streamlined operations. This included co-creating and implementing our product design process across fourteen product initiatives, designing responsive components and web pages, and refining complex requirements into highly functional products. Beyond design, I championed the company's first UX team, advocating for its value, managing product engagements, and overseeing design resources. Ultimately, this work not only elevated the user experience but also established a foundation for future design system growth and scalability.
In just the first 12 months our work
35+
OPTIMIZED PRODUCTS & TEAM ENABLEMENTS
75+
CONSULTATIONS & PARTNERSHIPS
585+
EMAIL INQUIRES TO WORK TOGETHER
2 to 11
EXPANDED OUR SMALL TEAM TO A FULLY SCALED DESIGN TEAM
Including Visual Designers, Interaction Designers, Communication Strategists, Off-shore Teams in China and India, and Product Lead Interns
21
NEW COMPONENTS DEPLOYED
With an entirely new Design System website, and 4 new educational sections for guidance, principles, and usage. As well as an entirely updated color palette with all AA and AAA accessibility requirements met.
11
UX METHODOLIGES LEVERAGED IN OUR USER RESEARCH STUDIES
21
COMPONENTS TESTED FOR USER FEEDBACK AND ITERATIVE DEIGN IMPROVEMENTS
95+
HOURS OF USER TESTING CONDUCTED INTERNALLY AND EXTERNALLY ACROSS THE ORGANIZATION
