Project Background
As the organization standardized on modern frameworks (React, SwiftUI, Jetpack Compose), the Manhattan Design System's legacy components became a bottleneck: bloated, bug-prone, and hard to maintain. The solution was composability: breaking monolithic components into flexible atoms that teams could combine as needed, fundamentally changing how hundreds of product teams build interfaces
The Text Input component before and after applying composability principles
Main Goals
- Rebuild legacy components as flexible, composable atoms consistent across Web, iOS, and Android
- Support adoption with comprehensive documentation
- Implement a robust testing framework to maintain component quality
The Team & My Role
As an Experience Design Sr Associate, I lead the re-architecture of legacy components from audit through VQA testing across all platforms, collaborating closely with PMs, engineering, design leads, and our ADA Advisor.
Research & Discovery
To ensure a thorough redesign, I led a multi-faceted research approach:
- Auditing existing legacy components to identify pain points and inconsistencies
- Analyzing competitor design systems for best practices
- Reviewing enhancement requests from external teams to surface unmet needs
- Collaborating with product teams to understand their specific use cases
This process sheds light on the fact that different product teams have very different, and often complicated, needs from the same component.
Timeline & Process
- Discovery & Research: Audit existing components, review enhancement requests, and research industry best practices.
- High Level Architecture & Collaboration: Present scope to cross-functional leads, update specifications, align with engineering on feasibility, and work with the ADA Advisor on accessibility compliance.
- Design & Iteration: Present final designs for approval, iterate based on feedback, and maintain close collaboration with engineering through handoff.
- Quality Assurance: Conduct VQA testing across Web, iOS, and Android to verify UI matches specifications, color tokens are correct, dynamic behaviors function properly, and accessibility requirements are met.
Composition Example
To demonstrate the power of composability, here's an example of a table that utilizes an input field subcomponent for data entry. By combining simple, focused components, teams can build complex interfaces while maintaining consistency and accessibility.
A table utilizing various subcomponents, including the input field subcomponent, showing how composable atoms can be combined to create complex, functional interfaces.
Project Impact
The Composability Initiative fundamentally transformed how Chase designers and developers build interfaces. By breaking down monolithic components into flexible, composable atoms, we created a more maintainable design system that could evolve with changing technology and user needs.
Key accomplishments include:
- Successfully re-architected multiple legacy components for React, Swift, and Jetpack Compose
- Reduced component complexity and improved code maintainability across platforms
- Established a repeatable process for component redesign that balanced design quality, technical feasibility, and accessibility
- Enabled product teams to build more flexible interfaces using composable building blocks