Accordion is a reusable component designed to organize complex content into smaller, more manageable sections. I explored how a single pattern could support many different product experiences, from booking flows and service details to event information, forms, FAQs, and settings. The project focused on creating a flexible component that balances clarity, scalability, accessibility, and consistency across multiple use cases.
The work started with research into how different products use expandable content and where existing patterns create friction. I reviewed booking experiences, service flows, event pages, multi-step forms, account settings, and help centers to understand when users need content to stay visible and when progressive disclosure improves usability. This led to defining different accordion behaviors, such as single-open and multi-open patterns, nested content, optional icons, rich content areas, and mobile-specific interactions.
From there, I designed the component as a complete design-system asset with clear anatomy, states, spacing, content rules, and accessibility guidelines. The work included hover, focus, expanded, disabled, and error states, as well as keyboard behavior, screen-reader support, motion, and responsive behavior. The final outcome was a reusable system component that gives teams a consistent way to manage dense information while reducing custom solutions across products.
Accordion Across Products
