DEI Resource

Branding and Accessibility Design

Problem

In 2020, National Association of Broadcasters formed a Diversity, Equity and Inclusion internal committee for the company as well as a board advisory committee. I was requested to create a landing page for two audiences: the internal audience of employees at NAB and the external audience of those holding membership at NAB working in the broadcast industry. On top of a landing page, I was also told we would need branding for two event series as well as an interactive toolkit listing resources.

Goals

Create a landing page with DEI resources and mission statement for the internal company audience
Create a landing page with DEI resources for an external audience working in the broadcasting industry
Create an interactive resource toolkit
Design a web platform that meets the Web Content Accessibility Guidelines (WCAG)

User Personas

Internal Audience

Users currently working at National Association of Broadcasters wanting to learn more about the company’s mission to improve diversity, equity and inclusion in the workplace
Users who are potentially looking to be future employees wanting to learn more about the company’s DEI efforts

External Audience

Users working in the TV and radio broadcast industry
Users wanting to attend a DEI event series hosted by NAB for personal and professional growth
Users looking for resources to create conversation, elicit change and seek opportunities within their organization
Users wanting to improve diversity in their workplace

Internal Audience Landing Page

The internal audience DEI landing page was placed under the About section in the Careers @ NAB page. The reasoning for this was since this page is for job applicants and current employees, the about section will help highlight the company’s mission and efforts towards creating a diverse and inclusive work environment. A one stop shop for job openings, employee documents and DEI information.

External Audience Landing Page

Since the external audience landing page is catered more towards those with membership working in the broadcast industry, this page highlights the DEI efforts, resources, events and missions revolving broadcasting.

Event Page and Branding

For the members in broadcasting who utilize the DEI webpage to find resources in broadcasting and advocacy, I was asked to create a new look and feel for three different event sessions.

Resource Center

Part of the goal of creating a DEI webpage for members in broadcasting was to create an evergreen DEI resource center that lists a variety of resources ranging from organizations to speakers. I was given an excel sheet with a list of different resources and tools where I categorized the different types of resource in order to create a filterable search left hand tab for users to be able to narrow down the type of resources they are looking for. The goal is to continue to grow this resource center by adding new resources and the hope is that the filterable categories will aid users to quickly and easily filter down to their specific resource need.

View the resource center

Accessibility Testing

After building out the first iteration, given that this site is focused on DEI, it was important to make sure that the design of this site was a representation of those goals and was compliant to Web Content Accessibility Guidelines (WCAG) standards.

Removing Automatic Carousel
One of the first changes that I made to the first iteration was to get rid of the automatic carousel banner that highlighted the different webinars and forums. After researching how users with screen readers and keyboard navigation interact with websites, it made sense to do away with anything automatic and any type of carousel that would require a user to click through every screen to get to the main content.

Website Hierarchy
Since screen readers and keyboard navigation are used based on the hierarchy structure of the website in the <body>, it was important that the website structure included the different headers <h1><h2><h3>, that every image and url included alt titles and alt descriptions, and the navigation was simple enough to quickly navigate through pages using the tab key.

Font and Color
The next thing to test was to make sure that the <p> font sizes were at least 16px throughout the page and to do a color contrast test. Doing the color contrast test was helpful to see the contrast ratio between the text and background colors to make sure that it was easily viewable for color blind users and meeting the 4.5:1 contrast ratio. For users with color deficiencies, it was also important to make sure that buttons and url links were clearly defined using colors to make them stand apart from regular text.

DEI Resource