Devon Hirth

ACCESS NYC

ACCESS NYC has been my primary product assignment at the Mayor's Office for Economic Opportunity. The site is a public benefits platform offering the following features:

NYC Opportunity initially launched the product a few months before I joined the team in May 2017. Over the past several years, I have participated in numerous sprints using my expertise in front-end engineering, user interface/experience design, and digital product feature development. When I began working with the team, we established a release cadence and deployment flow following a 2 to 3-week sprint cycle. In that time, we have delivered 60+ new releases of the code and design, including performance optimizations, security accreditation, feature enhancements, and new features.

Awards

ACCESS NYC has won several Government Design and Techonology awards since it's launch. Our team was also recognized internally with a customer service award in the midst of the COVID-19 pandemic.

 


 

COVID Response

When New York City became the epicenter of the COVID-19 pandemic, ACCESS NYC became a front-line digital resource for local, state, and federal aid information. It made sense for our organization to publish this information on ACCESS NYC because of the relative ease of using the platform to post content and its good SEO ranking. The site saw an increase in traffic by 200% as a result of the pandemic.

I designed, implemented, and oversaw several functional and user interface enhancements in response to the pandemic over 3 release sprints.

Sprint 1
Sprint 2
Sprint 3
Homepage Redesign

NYC Opportunity designed ACCESS NYC for New York City residents seeking information on public benefit programs. The pandemic and corresponding economic shut-down created a much larger audience for the site and nearly doubled the traffic. The user behavior flow patterns also dramatically shifted to our frequently updated COVID-19 resources page. The homepage redesign's primary challenge was to ensure visitors were more easily finding content relevant to their needs directly from the homepage and maintaining familiar patterns for returning visitors.

I synthesized user behavior flow by observing click-through rates from the COVID-19 resources page to begin the redesign. The data illustrated a hierarchy of 5 themes that users were the most concerned about; health, agency service updates, food, unemployment, and applying to programs. These helped me contextualize the use of different UI patterns to use.

The theme applying to programs represents a link in the top banner of the homepage to ACCESS HRA. This product is similar but separate from ACCESS NYC and helps New Yorkers apply to benefits directly. The traffic to the site suggested that this was the fifth need of users, so I created an alternate placement for it on the bottom of the page and replaced the callout with a link to our internal COVID-19 program guides. However, our team decided not to move forward with this change.

I created the redesigns in Figma, and after reviewing the new page updates with the team, implemented the updates in code.

Special Announcement Schema

The Special Announcement schema is a form of Structured Data markup provided to help major search engines understand that content on a website is relevant to the COVID-19 pandemic. Content relevant to users based on their locality marked up with the Special Announcement schema is likely to be presented to them when they search. For example, when a New York City resident searches for information on a particular benefits program, such as "Pandemic Unemployment Insurance," a search engine such as Google would present the information on ACCESS NYC to them because it is most likely to assist them.

The primary challenge of implementing this schema was automating the mapping of the existing content on ACCESS NYC to the different forms of the schema and only displaying it for pandemic-related content.

I worked with our junior developer to document how our content mapped to the schema. This document would be used as a reference for product and content managers to review and ensure that we were representing the content correctly. Then, I made discrete Jira tasks based on our documentation for our junior developer to follow and implement the code on the site. I oversaw the progress, quality assurance, and completion of these tasks.

The implementation gave content managers the ability to designate what content was relevant to the pandemic and the flexibility to add multiple pandemic benefit guides as they rolled out from the federal government. Featured program guides include Pandemic Unemployment Insurance, Federal Stimulus Payments, and a COVID-19 Vaccination Guide.

In addition to pandemic program guides, the main site alert banner that links to ACCESS NYC's frequently updated pandemic resources page was also marked up with the Special Announcement schema. This markup ensures that visitors searching for ACCESS NYC in Google will be presented with a prominent link in search results to the COVID-19 resources page.

ACCESS NYC 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 be easily recreated for 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 Node Package Manager (NPM) with corresponding documentation and demonstration site.

The first version of the library included 35 elements, components, and utilities. Over time, the set has expanded to over 50 patterns, including some 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 developer tooling used to create this pattern library has also proven helpful in establishing other product pattern libraries. It was released as a stand-alone command-line interface (CLI) and has been used to create 4 additional pattern libraries, including Working NYC Patterns, Growing Up NYC Patterns, Generation NYC Patterns, and NYC Opportunity Patterns. I also used it to stand up a static documentation site for the NYC Benefits Screening API.

These tools and libraries have been used in multiple internal and external projects by product managers, designers, and engineers, greatly expanding our capacity for more complex design challenges.

The GitHub repository can be browsed following the link below.

ACCESS NYC Field Screener

In the summer of 2018, our team partnered with the Mayor's Public Engagement Unit to develop a version of the ACCESS NYC Eligibility Screener that their Outreach Specialists would use to screen New York City residents in person. These specialists go door-to-door to help residents with tenant support issues, managing cases in the field using tablets. This project's primary challenge was to optimize a 10 step benefit screener the specialists could use with their tablets in the short amount of time they have with New York City residents in the field. My role on this project was as lead developer.

We started the research process by shadowing the Outreach Specialists to get a sense of the challenges they encounter supporting tenants in the field. During this research, we discovered that the specialists usually have very little time to engage with tenants. Once we had finished our research and synthesis, we began designing and developing a minimum viable product throughout 4 development sprints. During each sprint, a design fellow would design the interface. Then, I would take the design and develop the functionality. Finally, we would conduct usability testing with specialists to gather feedback and iterate on the product.

The final design was a two-page screener with the original 10 steps compressed into collapsable sections. The specialists could more easily jump back and forth to fill these in through a more natural flow of conversation with tenants. I chose to build the screener using Vue.js to take advantage of the state, reactivity, and form validation Vue.js brings to front-end applications.

Development Contributions

Since joining the team in May 2017, I have contributed to front-end features, operations, and product management process enhancements to ACCESS NYC. Below is a summary of some of my primary development contributions.

Development Operation Contributions

Open-source Repository

ACCESS NYC has been an open-source project since it's launch. The GitHub repository for ACCESS NYC can be browsed following the link below.