Product launch

My primary challenge with the Working NYC launch was to create a new brand identity and user interface that templatizes 30+ programs across 9 industries from multiple providers serving a diverse population of New Yorkers.

Program Taxonomies. This table showcases 3 of the 7 finalized taxonomy collections for programs on the site that I would need to accommodate in the product's design.

Provider Services Populations Industries
Help finding a job Youth in foster care Transportation
High School Equivalency (HSE or GED) prep Young adults Healthcare
Internship or short-term job Immigrants Technology
Improving English skills People with disabilities Construction
Training for a new job NYCHA residents Media and entertainment
Adult reading, writing, and math Public assistance recipients Food service
Adults Industrial and manufacturing
Older adults Security
Low-income New Yorkers Maintenance and janitorial
LGBTQ+ New Yorkers
People with justice involvement

Brand identity

The direction for the brand identity was to use design tokens from a previous project created in collaboration with the Mayor's Office of Workforce Development to keep the product within a family of Workforce products. This project was called the Workforce Data Portal. I extracted the token set from the project, including typography and colors, and expanded it to create a brand identity system.

A screenshot of the Workforce Data Portal
The direction for the brand identity was to use design tokens from the Workforce Data Portal to keep the product within a family of Workforce products.
An image of the color swatches used for Working NYC.
I tokenized and expanded the color scales from the Workforce Data Portal to an equal range for each color.
An image of the typography used for the Working NYC brand identity, Montserrat and Lato.
The font families extracted from the Workforce Data Portal included Montserrat and Lato.

The initial sketches for the brand identity logotype include considerations for the different industries and services offered by programs.

An image of the Working NYC website logo.
The Working NYC brand identity features a logotype set in Montserrat, an open-source and free alternative to Gotham recognized by its equalized geometric features. The typeface used is the same for other Workforce projects, keeping it in the family of brands.
An image of four sector taxonomy icons.
I created icons representing different industry sectors. The four major sector taxonomies are represented here; Technology, Healthcare, Construction, and Culinary.

User interface

Drawing on the foundation of other products in our portfolio, I designed and built (in code) a production-ready version of a pattern library explicitly created for New York City resident-facing products. This library includes 38 elements, components, and utilities; multi-lingual stylesheets with support for 11 languages, left-to-right, and right-to-left reading orientations; and meets Web Content Accessibility Guidelines (WCAG) AA compliance.

A screenshot of various website UI patterns such as typography, components, question inputs, and buttons.


Our strategy for the site was to have the content to lead the user experience. To build the views, I used content priority guides (created by our content strategist) in place of wireframes. I applied the finished pattern library to build the site's primary view templates in static HTML pages. The views were designed and engineered to make the product feel like a progressive web application to accommodate our end-users browsing behavior (observed through analytics of other products in our portfolio). We reviewed these pages internally and with our agency partners, and because they were live prototypes, the team could experience and review the designs as they would exist in production.

Program pages

Content priority guide. This table showcases the content priority for our content specialist's program page template.

Program Page Content Priority Guide
Program title, provider, and agency
Program description
Services and outcomes; what the program offers; certifications; industry sector
Who it’s for; eligibility at a glance and what makes someone a good match.
Schedule; duration, location, and other details.
Next Steps; how to apply and deadlines.
Contact; website, phone, or email.

Static HTML design. I used the content priority guide to build out the view. I added UI elements such as the sticky utility navigation, breadcrumbs, recruitment badge, typography styling of the content, newsletter sign-up module, site footer, and mobile navigation and menu.

The static HTML prototype I created using the Working NYC pattern library.

View the full design


Homepage Outline. I designed the homepage by developing an outline for interactive features and UI elements. The features on the homepage help funnel users to the most relevant information on the site based on their interests, including a questionnaire, scrollable program collection template, and announcement template. I then worked with our content specialist to develop UI copy, program collections, and announcements for the page.

Homepage Outline
Global site alert
Site name and tagline
Program Collection 1
Program Collection 2

Questionnaire. The questionnaire turns the program taxonomies into a friendly question and answer format to help users filter and view programs based on their responses.

Homepage Questionnaire
Answer a few questions to get started.
Which of these best describes you? Select one category from the population taxonomy
What kind of program fits your schedule best? Select one category from the schedule taxonomy
What do you want to gain from job services? Select one category from the services taxonomy
Submit button

The initial sketches for the homepage include considerations for the different user behavior flows and background graphics to help balance the page's design.

The static HTML prototype I created using the Working NYC pattern library.

View the full design

User acceptance testing

We conducted remote user acceptance testing with program managers and participants from the NYC Parks Opportunity Program to gauge interest and uncover usability issues with this product iteration. With their valuable input, we could make all of the changes needed to launch the project's first version.

A total of 5 content, design and engineering sprints began in May 2020 and ended in a launch on August 20th (13 weeks).

Final final

The site's design is a collection of open-source code and public Figma file that can be scaled up as the product evolves. I also created internal documentation for all of the historical context behind the design so that team members can understand design decisions. You can browse the GitHub repository and the Figma file following the links below.

Next project

Feature development framework

View all Working NYC projects