Challenge
The challenge was to clear up clutter on pages so that they can be dedicated to a focused task-forward approach to help users accomplish distinct goals. We needed to support wayfinding and content clarity without overwhelming users or derailing them from their goals.
example disability page with FAQ
Solution
To streamline the development process we leveraged the burger menu component to provide a dismissible on-screen container for contextual content. Unlike the burger menu this container would be available at all screen breakpoints.
Example landing page with faq.png
Example FAQ
Example FAQ with accordion
Learnings
While it has not yet been implemented for it’s original purpose, the design on the site has been leveraged in other contexts because it is so useful. Overall, the contextual FAQ is a critical tool for complicated interactions such as the login page and field office locator.
The big takeaway from this project is that sometimes a solution that you make for one problem is an even better solution for a problem you didn’t realize you had.
Example Pension page with FAQ
Functional specifications
Below are the functional specifications for the SSA FAQ drawer modal
Figma component
Below is the figma component for the SSA FAQ drawer modal
Figma library FAQ component