Role: Lead Digital Product Designer
During the summer of 2020, the Mayor's Office of Workforce Development partnered with our agency to create a site that helps New Yorkers prepare for and find a job through free job and adult education programs. My primary role on this product is to manage the brand identity and lead the design strategy working closely with the product manager, content strategist, and lead engineer. Since the initial launch, I have established a UX process that combines qualitative and quantitative feedback mechanisms to lead design research and feature development on the site.
Product Development and Launch
My primary challenge with the Working NYC launch was to create a new brand and user interface that templatizes 30+ programs from multiple providers serving a diverse population of New Yorkers across 9 industries.
Program Taxonomies. This table showcases 3 of the 7 finalized taxonomy collections for programs on the site that I would need to accommodate for in the product's design.
|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|
|Low-income New Yorkers||Maintenance and janitorial|
|LGBTQ+ New Yorkers|
|People with justice involvement|
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. I extracted the token set from the project, including typography and colors, and expanded it to create a brand identity system. The brand logotype was set in the same typeface, Montserrat.
Drawing on the foundation of other products in our portfolio, I was able to design and build (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.
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) on mobile devices. 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.
Content priority guide. This table showcases the content priority for the individual program page template created by our content specialist.
|Program Page Content Priority Guide|
|Program title, provider, and agency|
|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 program page content priority guide to build out the view and 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.
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 relevent information in the site based on their interests. This inludes a questionaire, 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.
|Global site alert|
|Site name and tagline|
|Program Collection 1|
|Program Collection 2|
Questionaire. The questionaire turns the program taxonomies into a friendly question and answer format to help users filter and view programs based on their responses.
|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|
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).
The design of the site 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 would be able to understand my decisions. The GitHub repository and the Figma file can be browsed following the links below.