Just Released: ACCESS NYC UI Patterns for Screening and Enrolling in Government Benefits
The Patterns of ACCESS NYC are a shared vocabulary between the code, design, and user interface (UI) of ACCESS NYC created for the Mayor’s Office for Economic Opportunity (NYC Opportunity) Service Design Studio and Product Teams. ACCESS NYC aims to increase the accessibility and convenience of discovering and enrolling in government benefits. The Patterns support this work by defining the UI and behavior that New Yorkers experience as they use the site.
This resource further supports NYC Opportunity’s mission and belief that government services should be:
- Created with the people who use and deliver them
- Equitably distributed
- Prototyped and tested for usability
- Rigorously tested and evaluated for effectiveness and impact
- Accessible to all
This is the foundation on which we build and deliver all of our digital products. The Patterns are built with these principles in mind to make ACCESS NYC accessible for design and development teams internally and externally for peers in the field.
Prelude
ACCESS NYC was relaunched in 2017 to address the barriers New Yorkers face when trying to seek information about or apply for benefits. This involved an iterative prototyping process that engaged residents, social workers, case managers, and government agency staff to deliver a new design and core user experience. The user interface started with the U.S. Web Design System as a boilerplate for UI Elements and WCAG AA compliance. It was extended for New York City residents by including support for seven different languages with RTL and LTR reading orientations.
Learn more about the initial launch of ACCESS NYC through these two case studies:
In late summer of 2017, NYC Opportunity and the Mayor’s Public Engagement Unit (PEU) began designing, developing, and testing a version of the ACCESS NYC Eligibility benefits screener optimized for their Outreach Specialists. This process involved taking the core user interface elements of ACCESS NYC and repurposing them for the Outreach Specialists with a nuanced and advanced understanding of enrolling New Yorkers in benefits.
Learn more about the NYC Opportunity and Public Engagement Unit partnership in this article.
During the development of the PEU Screener, the Product and Design teams were tasked with replatforming the ACCESS NYC interface, but there was no common language or easily accessible documentation for the designers and developers to reference. This realization highlighted the need to formalize the ACCESS NYC interface and Service Design Studio principles into a Design System.
Design Systems
To further the purpose of ACCESS NYC as a digital product, we realized the need to create and document the Patterns used to launch it. This additional documentation would help us complete our design system, which is defined nicely in Alla Kholmatova’s book, Design Systems; A practical guide to creating design languages for digital products.
“A design system is a set of interconnected patterns and shared practices coherently organized to achieve the purpose of digital products.”
As our practice develops we will be able to utilize the Patterns conventions and documentation as a starting point for understanding within our team.
Naming Convention
The first step we took to create the Patterns was performing an audit of the existing ACCESS NYC modules and grouping them according to a naming convention influenced by “BEMIT: Taking the BEM Naming Convention a Step Further.” Our four buckets included Elements, Components, Objects, and Utilities. This structure will sound very familiar to those who have read Brad Frost’s Atomic Design.
As a team, we picked names that resonated with us for each of the Patterns and assigned them to each group. The hope was to develop a common language that would enable us to work together more effectively to focus on the users we serve.
Elements
Element Patterns are the most primitive building blocks of a web page. They include some of the most standard HTML tags such as links, buttons, lists, and tables. They do not have complicated markup or any dependencies on other modules.
Components
Component Patterns are more complicated modules that may contain one or more Elements, complex markup, styling, or JavaScript dependencies. They are often repeated within a view.
Objects
Object Patterns contain the most complicated markup-specific styling. They may contain one or more Elements or Components. Objects generally do not repeat within a view but they may be globally visible across different views.
Utilities
Utilities are single-purpose classes that allow teams to change specific styling features of Elements, Components, and Objects. For the ACCESS NYC Patterns, we are leveraging Tailwind CSS. By using utilities, the design system becomes far more flexible.
Development
With the naming convention in place, it came time to put practice to code. The Patterns source code is a Node.js application that uses various libraries — including Express, Rollup.js, Node Sass, Nodemon, and HTML Sketch App — to run a development environment for bundling and distributing Styles, JavaScript, SVG files, etc into library files that can be delivered to multiple projects. All of the source is organized around the naming convention so it can all be exported and imported independently as modules. This enables a flexible distribution system for lean integrations depending on a project’s needs.
To aid in the adoption and support of the Patterns, documentation was built into the library that is hosted as a static site on GitHub Pages. The content was developed with plain language and accessibility in mind following our design principles.
More information about the developer toolset and documentation for the ACCESS NYC Patterns can be found on the GitHub Pages Site.
Vision
We hope that the ACCESS NYC Patterns along with the Benefits & Program API, and ACCESS NYC Repository are helpful for developers, designers, and project managers alike and accelerates our efforts to create an open product for all New York City residents. Very soon we’ll be releasing another component of ACCESS NYC that will further this effort so stay tuned!
