v3 Job Ready NYC rebrand

Working NYC is now known as Job Ready by Jobs NYC. This includes public-facing UI changes, including new logos and changes to wording in the theme, but no changes to files and folders with names referencing Working NYC. In particular, the theme will still be named Working NYC. Future releases may include updates to the code to reflect the new site name.

In addition, a search feature, using the Relevanssi plugin on the back end, has been added to the site.

Display fix and plugin installation

• Suppress "Last Updated" text on certain parts of the site
• Install PublishPress Future plugin

v2 Guide content and redesign

Working NYC was created by the Mayor’s Office of Talent Workforce Development in collaboration with the Mayor’s Office for Economic Opportunity. It was developed through a user-centered and iterative process with input from City agencies, provider organizations, and the New Yorkers it aims to serve. Version 1 of the site launched in August 2020. The team continues to maintain Working NYC as a resource created for and by City residents. Since then, we’ve shipped many technical improvements to the site, including advanced search engine optimization, inclusive design patterns, and accessibility enhancements. Our content and feature development combine quantitative and qualitative insights, such as customer feedback forms, website analytics monitoring, and usability interviews.

During the summer of 2022, we began creating version 2 of Working NYC based on our learnings from the previous two years, listening to job-seekers' desires for family-sustaining careers. We are now providing them with a redesigned site with more resources to help them navigate New York City’s workforce landscape. This process is ongoing as we seek to meet the needs of employers looking to tap into New York City’s greatest resource, its diverse talent.

The code for Working NYC is open source, leveraging the WordPress CMS and The Mayor’s Office for Economic Opportunity’s Design System for digital services. We also receive support from the NYC Office of Technology and Innovation to host the website on nyc.gov through the WP Engine platform. Through engagement with the Mayor’s Office for People with Disabilities, we also ensure that the website meets Web Content Accessibility Guidelines AA compliance.

Some of the improvements in this release include.

• New content guides to help those under served navigate the City's public workforce programs.

• An expanded catalog of 70+ workforce programs.

• Installation and integration of The Mayor’s Office for Economic Opportunity’s Design System for digital services.

• Updated product design and branding.

• A redesigned landing page with graphical enhancements such as typography, imagery, and iconography.

• Updated CMS enhancements;

  • Guides post type.

  • New shortcodes for content managers such as buttons, cards and accordions with accessible design pattern support.

  • External vs. internal program display, enabling users to navigate to programs without needing to read a guide.

  • Automated open graph images.

  • Updated taxonomy categories.

• And various bug fixes.

Visit Working NYC to see more and provide feedback.

Job Posting and Accessibility Enhancements

New Features

• Add CMS architecture, content mapping, templates, and structured data for Job postings

• Implement NYCO WP Archive Vue for Program and Job filtering

Accessibility Enhancements

• Update the ARIA labels for accessibility and language accommodations to be more actionable

• Update the ARIA labels for single page anchor links to say “copy link to this section”

• Fix a bug where the learn more links for cards are not reading out load for screen readers

• Update all instances of "Sitemap" to "Site Map"

• Mobile Menu adjustments; remove redundant labels and aria attributes, change the placement of the menu in the DOM, move the close button above the navigation

• Implement new ARIA labels for the footer and navigation menus

• Make the ARIA labels for program feature icons more prescriptive

• In the program cards, make the heading level 4 a paragraph

• Make "showing x of x" for the program archive a heading level 2 and focus on this element after closing the filters

• Remove extra primary navigation ARIA label or role for the main navigation

Bugs

• Fix a bug where single page headers don't span the full width of the page

• Fix a bug A and B tests removing programs once they are appended to the Programs Page

• Add filter reset to program archive

Core, Plugin Maintenance, and Other Enhancements

• Update OG metadata with more reasonable defaults

• Add copy url button outside of the share menu

• Add template for single announcement posts

• Core and Plugin Maintenance

• Upgrade to Bit.ly API v4

New Light Color Scheme and Theme Toggle

We tested the previous Working NYC website color scheme (dark) alongside a new light color scheme design. After the usability tests, we implemented design revisions based on the feedback we received. We also conducted desk research on color blindness to further help inform our design revisions.

Color assignments and combinations are more standardized between the light AND dark modes. This means updates to the dark mode are also going to be implemented using the learnings from our usability interviews alongside the introduction of a light mode.

Enhanced color scales

• Extended the light (new) and dark background scales with more tints and shades.
• Extended the primary (blue), secondary (green), and tertiary (yellow) scales with more tints and shades.
• Made the primary, secondary, and tertiary scale values more saturated.

Color blindness accommodation using updated primary, secondary, and tertiary color combinations

• The primary color (blue) and secondary color (green) cannot be easily distinguished by users with certain types of color blindness (Tritanomaly and Tritanopia). Therefore, they should not be depended upon for differentiating site functionality (for example blue for buttons and green for links). They should both be considered for similar functional text assignments equally (either/or).
• The tertiary color (yellow) should be more easily distinguished against blue and green by users with certain types of color blindness, therefore, it should be used for emphasizing non-functional text.
• The use of underlining text for hyperlinks has been reinforced. Previously we removed underlines for program card headers in an effort to create visual space. However, this goes against standard practice.

The mobile menu and modal patterns use a bright blue background with dark blue text

This stark contrast between the rest of the UI (bright text with dark background) creates a disruptive experience for those with color sensitivity. It has been updated to reflect the rest of the UI to create a less disruptive experience.

Improved contrast

We have improved WCAG compliance to either AA and AAA in some scenarios following these rules.

• Blue is used for the majority of links, alert backgrounds, and form elements in both color modes, however, one scale lighter is used in the dark mode and one scale darker is used in the light mode for higher contrast with the background scales.
• The use of the tertiary (yellow) button is reduced in both color modes.
• The use of secondary (green) links is reduced in both color modes.

Improved legibility with different updated font families and font sizes used.

• The secondary font, Lato, which is used for body copy is now used for headings at level 4 and below. Previously they used the primary font, Montserrat. Reducing the dependency on font switching between two fonts in the body text should help the content be more legible.
• The page header component which contains the page title and subtitle uses smaller font sizes that break more cleanly in smaller viewports.
• Improved focus state. A focus state for interactive elements has been designed and implemented. Previously, the native browser focus state was used.

Enable color preference using a color toggle.

The color toggle enables users to switch between different themes based on their preferences: a dark mode or light mode.

Tasks

• Release Patterns v-latest and install in WordPress Theme

Other Fixes

• ARIA Labels. While accessibility testing, it was recommended we modify some of the ARIA labels for different regions of the page templates to be written in plain language.

• Swap out navigation element with list element for next step links

• Add Loading Spinner to programs archive

• Update Program Detail page headings font size

• Add screen reader labels to feature icons

• Program cards start at H2. Change to start at H3

Google Optimize and Feedback Module A/B Test

• Add Feedback Module Variants
• Refactor Integrations using NYCO WP Assets
• Add/Install Google Optimize Snippet

Theme Short-codes

Short-code System using Working NYC Patterns. This release consolidates the theme short-code implementation in the theme directory under /shortcodes and adds new short-codes.

• Accordion
• Airtable Link
• Blockquote
• Card
• Icon
• Program

New short-codes and big fixes

Bug

• Remove H2 tag wrapping for block content in the single page template

• Updating a post doesn't work after a period of time

• Missing section title on pages throws a JS error in the console

• Jump Navigation on Chrome Desktop

Story

• CMS Shortcode for card Working NYC UI pattern

• CMS Shortcode for existing Working NYC Programs

Task

• Remove h2 and h3 from WYSIWYG editors

Jump Navigation Feature for Single Page Templates

Enhancement

• Jump Navigation for Single Page Templates

Bug

• Fix "Powered by Google..." logo on mobile is hidden

Task

• Add sticky section header pattern to Single Program pages

• Make sure web share url input IDs are unique

• Replace Mobile Menu with shared Menu pattern module

• Replace Navigation with shared Navigation pattern module

• Add "Back to top" button in page template

• Do not add blank title to jump navigation or section if it doesn't have a title

• Add Members and Adminimize plugins for user management support

• Update mobile menu markup to reflect WAI ARIA spec

• Update breadcrumb markup to reflect WAI ARIA spec

• Add Extra Spacing Between Headers

• Translate icon spacing