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.
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 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 created the NYCO UI Patterns Framework.
View all ACCESS NYC projects