Social Security Administration Design System - User Experience Framework (UEF)
Design Systems, User Testing, User Research, Accessibility, Web Components
I spent several years as a senior contributor to the formation, development, and maintenance of the administration's first design system. This system predates the design system developed by US Digital Services by several years, which later became the poster child of "good government design." The UEF has continually evolved over time with support for mobile-first, continued ADA Section 508 Accessibility compliance, and rigorous user-research driven iterative design.
Framework's Target Users
- The public; the UEF is used on all public-facing platforms for the agency, this could be websites as well as mobile apps. The public introduces much variability in technical skill levels, comprehension, and disabilities.
- The employees; agency employees had their own "internal" UEF optimized for developing in-house applications; we had to ensure the UEF did not get in the way of doing their jobs, rather enhance their productivity.
- The developers; one of the main drivers for the establishment of the UEF was to unify and expedite development and maintenance of agency web properties; so code modularity and implementation efficiency was critical.
- The product designers; I was one of them, but my design group at large relied on the UEF to help them build out the numerous public- and internal- facing products, each with their own unique business needs. The UEF workgroup had to ensure that the pattern library itself met the designers' business needs. We also reviewed designs for UEF-compliance, as well as developed new patterns per request and consensus.
An exploration in responsive upload widgets. The one thing about dealing with the SSA is that there is a high likelihood that you'll need to provide proof of something, so file uploading is key.
This is the same upload widget design, but responsive for tablet/desktop
The meat and potatoes of a pattern library, input patterns. An aperitif if you will, as we had a whole bunch of these.
Working With Developers
- Some things not shown here but were critical to the success of the adoption and implementation of the UEF design library was the close partnership the UEF workgroup established with the front-end developers.
- Specifically, all of our UI components were designed using web-component principles meaning they functioned like Lego blocks, both on the design side, but also on the development side. Each component had it's own code snippet, linked to it's accessible stylesheets and scripts.
- Additionally, long term maintenance was engineered into each component's code snippet in that when a component was updated, all existing products using the code would update automatically.
- Maintenance was a critical driving factor when dealing with hundreds of different internal and public web properties, which historically were designed and developed by their own design and development teams. We essentially made maintenance concerns a thing of the past as all components and subsequent designs now operated from a single codebase.
Working With Accessibility
- As the Social Security Administration is a government agency, it is required to be accessibility compliant according to Section 508 of the Americans with Disabilities Act.
- We had to ensure our designs were not only visually accessible, but also compatible with assistive technologies like screen readers and alternative input devices.
- The UEF workgroup worked hand-in-hand with the agency's accessibility group who would help verify our components were fully accessible.
- We also conducted ample end-user testing with disabled users, ranging from vision impairment, to mobility, to cognitive.
User research snapshot. Here's an example of our user research documentation for the facilitator and note taker, including prompts, screenshots, and "happy path" (where appropriate). We designed evaluations to capture qualitative feedback as well as measurable quantitative metrics.
Some examples of components in use in a mockup application, used for user evaluations.
What I Learned
- Design Systems is much like running a business, with the strategy, the product development, the marketing, the communication, and the feedback loop. I loved being a part of the UEF workgroup. I was able to gain immense insight in working with developers, exploring the ins and outs of Section 508 Accessibility compliance, as well as providing design leadership and guidance to product designers and managers.
- Partaking in the what essentially was revolutionary change on the agency's approach to product design was very eye opening. It was like a culture shift, from siloed and conflicting, to cohesive and communicative. It was truly transformative.
- As an added bonus, I was also able to scratch my graphic design itch, as I don't always "pixel push" nor do i identify as one, so this was a fun exercise.
