The SSA Design System is the official design system of the Social Security Administration. The designs are rendered by the User Experience Framework (UEF), a web components framework built by SSA.
A design system is a definition of visual style and interactions, achieved via a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.
Design systems take several steps to build a pattern right from researching industry standards to prototyping, usability testing, and then developing it.
All of our components are used each day by millions of Americans. For this reason, each pattern in our library is designed and tested with real users to solve real problems.
The SSA Design System provides the following benefits:
- Provides a uniform user experience across an enterprise
- A Unified Language
- Solves Problems Holistically and At Scale
- Defines Usage Guidelines
- Uses a Well-Defined Process for Extending the System
- 508 Accessibiltiy integrated into UEF
- Usability tested
The SSA Design System Team completed several rounds of testing in various locations with multiple different user groups. All patterns were tested in one or more rounds and on various types of mobile devices.
Below are the dates and locations of all the testing sessions.
| Round | UEF Version | What We Tested | Date |
|---|---|---|---|
| Round 1 | UEF 2.x | Public Template, Container (Basic), Container (Tabs), Buttons, Address (US), Check Box, Drop List, Password, Phone (US), Radio List, Modal (Lightbox), Form Controls, Show/Hide Content | August 7, 2013 |
| Round 2 | UEF 2.x | Public Template, Container (Basic), Container (Tabs), Buttons, Address (US), Check Box, Drop List, Password, Phone (US), Radio List, Modal (Lightbox), Form Controls, Show/Hide Content | August 14, 2013 |
| Round 3 | UEF 2.x | Public Template, Address (International), Phone (International), Definition, Container (Basic), Container (Summary), Check List, Radio List, PDF, ZIP Code, Country, Social Security Number (SSN), Help, Form Controls, Date (of Event), State, Print (Page), Modal (Lightbox), Date (Text Box), Name, Text Area, Print (Region), Single Row Action Table, Drop List, Text Box, Notice, Email Address, Yes/No, Application Sections, Sex | October 3, 2013 |
| Round 4 | UEF 2.x | Definition Link, State, SSN, Date (of Event), Error Summary, Password (Create), Save this Page Link, Secondary Navigation | October 23, 2013 |
| Round 5 | UEF 2.x | Template Navigation, State, Definition Link, Password (Create), Agreement Check Box, Container with Tabs, Address (International), Check List (Select All), Bank Information (International), Radio List (Other) | May 5, 2014 |
| Round 6 | UEF 2.x | Template Navigation, Sign In/Create Container, Password (Create), Container with Tabs, Document Viewer, Archive File Type, Email Link, Error Summary, Date Picker, Help Link, Informational Modal | August 27, 2014 |
| Round 7 | UEF 2.x | Container with Tabs, Date Picker, Navigation/Steps, Review Summary, Document Viewer, Buttons (Standard & Secondary) | November 13, 2014 |
| Round 8 | UEF 2.x | Password (Create), Date Calendar, Application Steps (new pattern), Basic Table, Summary (Enhanced and Receipt), Document Viewer, Standard Template Footer | February 5, 2015 |
| Round 9 | UEF 2.x | Date (Calendar), Multi-Select Modal, Single-Row Action Table (new pattern), Pagination Table (new pattern), Review Summary Error, Document Viewer, Portal Navigation (viewports > 768 pixels), Username (Create) | May 7, 2015 |
| Round 10 | UEF 2.x | Date (Calendar), Multi-Select Modal, Multi-Row Action Table | July 23, 2015 |
| Round 11 | UEF 2.x | Badge, Container Show/Hide, Critical Check Box, Danger Notice, Date and Time, Dismissible Compact Notice, File Upload, Flag Notification, Popover, Progress, Time, Time Zone, Tree Structure | April 27, 2016 |
| Round 12 | UEF 2.x | Dropdown Button, Loading Button, Progress, Popover, Full Page Calendar, Tree Structure | June 7, 2017 |
| Round 13 | UEF 2.x | Progress Bar, Tree Structure, Multi Select, Yes/No, Toggle Button | October 24, 2017 |
| Round 14 | UEF 2.x | Pro Template Tab with Drop List, Pro Template ‘+’ Tab, Pro Template Collapsible Side Panels, Table Search, Table Column Selector, Table Column Reordering, Input Table, Horizontal Radio List, Horizontal Check List, Dismissible Compact Notice, Date & Time, Button with Icon Only | April 17, 2018 |
| Round 15 | UEF 2.x | Password (Enter), Show/Hide, Text Area (Rich Text), Badges Dismissible, Drop Down Button (Split), PRO Template Collapsible Content Area, Sub-Navigation (Nested Groups), Table (Column Selector), Table (Column Reorder), Table (Search), Back to Top (New Design), PRO Template Drop Down Tab | November 14, 2018 |
| Round 16 | UEF 2.x | Password (Show/Hide), Download Link, Amount/Percent Toggle, Template (More Menu), SSN (Show/Hide), Drop Down Button (Split), Radio List (Series), Back to Top | February 27, 2019 |
| Round 17 | UEF 2.x | PRO Template Responsive Tabs, PRO Template Mega Menu Tab, PRO Template Collapsible Panels, Mobile Mega Menu, Input Table with Errors, Input Table Inline Editing, Table Column Selector, Back to Top (A/B grey and orange colors), Radio List Series, Text Area (Rich Text), Phone (US) (new formatting), EIN (new formatting) | June 18-19, 2019 |
| Round 18 | UEF 2.x | PRO Template Responsive Navigation, PRO Template Drop Down (Mega Menu) Tab, PRO Template Collapsible Panels, Date and Time, Mega-Select (Radio), Advanced Table Filtering, Table (Column Selector), Summary(Show/Hide) | October 15-16, 2019 |
| Round 19 | UEF 2.x | PRO Template Themes, Badge with Border, Show/Hide with Badge, Figure, Summary (Show/Hide), Mega-Select (Radio), Mega-Select (Check), Button (Toggle), Table - Chart View - Advanced Filter - Column Settings - Reorder - Show/Hide | August 17-21, 2020 |
| Round 20 | UEF 3.0 | Textbox with Autocomplete, Smart Search, Lists (Static), Lists (Drag and Drop), Container (Drag and Drop Rows), Negative numbers, Re-Entry Number, Table Sorting, Dark Mode, Page Template Header | February 22 - March 5, 2021 |
| Round 21 | UEF 3.0 | Address (Business), Container (Drag and Drop Rows), International Input Field Toggle Update, Multi-Select, Lists (Drag and Drop), Table Sort Icon and Row Banding, Table Advanced Filter, Table Column Customization, Table Mobile Layout Sort, Table Mobile Layout Advanced Filter, Table Mobile Layout Column Customization | August 23 - August 27, 2021 |
| Round 22 | UEF 3.0 | Alert, Confirmation Number, Tooltip, Button Group Placement, Inline Editing, Switch, Card, Tag, Pill, Table Column Customization | March 28 - April 1, 2022 |
| Round 23 | UEF 3.0 | Public Template, Address International, Link Confirmation Modal, File Input and Error Messages, Button Group Placement in Dialog, Datepicker, Alert Compact, Summary with Accordion, Confirmation Alert | March 6 – March 13, 2024 |