UI pattern library

ACCESS NYC is designed to accommodate New York City residents with low digital literacy on mobile devices. It is also Web Content Accessibility Guideline (WCAG) AA compliant and accessible in 11 different languages with support for right-to-left reading directions. Many of the elements and user experience of the design patterns leveraged the US Web Design System. ACCESS NYC has won 4 government design and technology awards since its launch, and the principles used to create this product are the basis for all of the other products in our portfolio.

I felt the most compelling contribution that I could make to such a well-done and principled design would be to make it quickly replicable at scale and available as an open-source pattern library. The need for a reusable library became more apparent when we needed to develop new features and products that required design but couldn't as a product team with limited design resources.

To do this, I took the current site and cataloged all of the reusable patterns. Using cut-outs from printed pages of the site, I hosted a workshop to allow the team to name and organize the patterns using terms of which our team would be familiar. Then, I used these common names to create individual pattern modules, refactoring and simplifying the source's stylesheets and JavaScript. Finally, I published the library to GitHub and Node Package Manager (NPM) with corresponding documentation and demonstration site.

I hosted a workshop to catalogue ACCESS NYC's reusable patterns using cut-outs printed from the site.
Icon for Patterns Framework elements

Elements

Icon for Patterns Framework components

Components

Icon for Patterns Framework objects

Objects

The team named and organized the patterns under three main categories; elements, components, and objects.
A screenshot of the ACCESS NYC UI Patterns documentation homepage.
The NPM landing page for the ACCESS NYC UI Patterns.
A screenshot of the ACCESS NYC UI Patterns documentation homepage.
The GitHub landing page for the ACCESS NYC UI Patterns.
A screenshot of the ACCESS NYC UI Patterns documentation homepage.
The corresponding documentation and demonstration site. The team assisted with the content and plain language review of the documentation.

The first version of the library included 35 elements, components, and utilities. Over time, the set has expanded to over 50 patterns, including reactive component variants for Vue.js applications. Additionally, I introduced CSS utilities to the library by adding Tailwindcss, customized using design tokens from the pattern source. The accessibility of the patterns has also improved over time with manual testing by the Mayor's Office for People with Disabilities (MOPD) and automated accessibility testing using Pa11y.

The ACCESS NYC UI Patterns library includes user interface (UI) elements from the site such as buttons, inputs, icons and more.
The tailwindcss logo.
I introduced CSS utilities to the library by adding Tailwindcss, a utility-first CSS framework, customized using design tokens from the pattern source.
Over time, the set has expanded to over 50 patterns, including some reactive component variants for Vue.js applications.

The ACCESS NYC UI Patterns Library was released on November 29th, 2018 and integrated into the core ACCESS NYC website as a dependency. The UI Patterns Library served as the form patterns for the Online Applications Pilot and led to the creation of the NYCO UI Patterns Framework.

Next project

Field screener

View all ACCESS NYC projects