designing flexible components

ROLE Experience Design Sr Associate | TOPICS Component Architecture, Cross-Platform Design, VQA Testing, Accessibility | TIMELINE 2023 - Present

Atomic Elements

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 legacy components into flexible atoms that teams could combine as needed, fundamentally changing how over 200 product teams build interfaces

Legacy text input
Label
Input
Alert
Microcopy
Validation message
Validation message
Validation message
Atomic components
Before and after applying composability principles
Label Component
Input Field Component
Alert Component
Microcopy (Label Component)
Validation Group Component

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 several legacy components from audit through VQA testing across all platforms, collaborating closely with PMs, engineering, design leads, and our ADA Advisor.

Timeline & Process

Phase 01
Research & discovery
Audit existing components, review enhancement requests, and research industry best practices
Phase 02
High-level architecture & collaboration
Present scope to cross-functional leads, update specifications, align with engineering on feasibility and accessibility compliance
Phase 03
Design & iteration
Present hi-fi designs for approval, iterate based on feedback, and maintain close collaboration with engineering through handoff
Phase 04
Quality assurance
Conduct VQA testing across Web, iOS, and Android to verify UI matches specifications, color tokens are correct, and accessibility requirements are met

Research & Discovery

  • 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

Auditing form elements across Chase revealed that inputs, selects, and datepickers all shared the same structural wrapper. Rather than rebuilding that logic in each component, I designed an input label wrapper for the surrounding context and a flexible input field component that could serve as a text input, select, search, or datepicker so teams could compose any form field without duplicating work

Schedule transfer

Composition Example

To demonstrate the power of composability, here's an example of a table that utilizes an input field subcomponent for data entry.

Example of a table component composed with input field subcomponents demonstrating flexible component composition

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
back arrow Back