IMAGE IMAGE
Our company hadn't agreed on what an accordion was, and our product teams were creating custom, less-intuitive patterns to replicate accordion behavior since we had a gap in our design system regarding an accordion component.
"Death to the accordion! Long live the accordion!" - an engineer.
It was so interesting to see people's reactions to this work. Many engineers said, "wait, I thought we already had an accordion?" By engineering an accessible, flexible accordion component by reusing a few patterns across our product, I was able to demonstrate the usefulness of collapsing all the patterns into one.
The pattern that existed in the product had multiple custom implementations of "Expandable" components. Since there was a vacuum, engineers and designers alike called anything with expandable behavior an accordion.
I studied accordions across multiple design systems and noted their core behaviors to address the situation. I also adhered to design principles and used explicit language norms. In addition, I ensured that the component was accessible by implementing ARIA.
IMAGE IMAGE The accordion component designed and engineered has eliminated the need for multiple custom implementations of expandable components (sure, that's cool). But it's now being used in our clinician-focused tool for collapsing and expanding long sections of dense medical information. It's made medical providers more efficient and effective at providing critical care.
This lasting result of my work was enjoyable to see. I got to see a live demo of it being used in a context I wasn't expecting at all but clearly fit. It simplified our patterns across the board, yes, but more importantly, I was able to roll out an accessible solution that improves the user experience for clinicians in EHRs, ultimately allowing them to focus more on what they do best.