Designing a responsive and accessible layout system
Role
Solo Designer, Design Systems Team (with engineering partnership)
Scope
Responsive layout system, progressive disclosure pattern, AI chat panel
Impact
Adopted system-wide across the application
Overview
The application had a mobile usability problem serious enough to cause failures on a VPAT accessibility audit. The navigation was cluttered and scattered across the app and nothing in the system anticipated how an AI chat interface should live alongside the core application.
I led from problem definition through shipped components, partnering closely with engineering to plan and build it out. The work centered on three new components to deliver a responsive layout foundation. A drill-down pattern for progressive disclosure that let dense screens collapse gracefully on mobile without losing functionality, a side panel for AI chat that gave every team a ready made pattern, and grid utility components to content within pages.
Underneath all three, the project unified how every application area handled page structure and routing.
Drill down
Progressive disclosure pattern for displaying more information in a panel that animates in from the right of the page content triggered from an in page action.
Panel
Accessible via a global action and sits along side the app and remains persistent even while the user navigates the app.
Grid utilities
Provided grid component to handle content layouts within a page so content behaves consistently across all screen sizes.
Responsive layout
Meet VPAT accessibility requirement of reflow, allowing the app to be responsive down to mobile screens. Provide guidance and built in systems that handle responsive layouts automatically.
Enabling AI chat
With no existing pattern to build on, I designed a side panel that lets the AI chat interface sit alongside the core application rather than competing with it or requiring a separate view.
Consistant page loading
Moved routing to a single page application. Allowing the unification of how pages load and providing a consistent user experience when navigating the app.
Previous project
Seeds icons
Next project
Navigation redesign