Laura King
Group 2447.png

PBS.org Dark Mode

For a PBS.org hack day our Director of Web Technology, Chip Cullen, set up Dark Mode in the backend. I was excited to jump in after Chip’s initial implementation to define our Dark Mode color palette, text styles, and hover states.

I lead visual design and stakeholder presentations for this project. I collaborated with Mary Crocamo, Design Director, and Chris Koth, Director of UX Design.

I started with research and a competitive analysis with my Design Director, Mary Crocamo.

I started with research and a competitive analysis with my Design Director, Mary Crocamo.

Our 2 main resources for design standards were UX Planet and Material Design.

This lead me to our 3 main goals for design.

This lead me to our 3 main goals for design.

  1. Avoid saturated colors, pure black, and pure white. For the PBS Brand, we needed to keep pure white in all PBS logos.

  2. Communicate depth.

  3. Allow users to easily switch between Light Mode and Dark Mode.

I started with many, many color explorations across our major PBS.org pages at mobile and desktop breakpoints.

I started with many, many color explorations across our major PBS.org pages at mobile and desktop breakpoints.

The biggest challenge was allowing the brand colors to shine, but not feel over saturated for Dark Mode. I quickly realized that we needed a new, darker color palette.

I created 4 new brand colors for Dark Mode. These colors have blue undertones to fit our brand palette while remaining dark and desaturated.

I created 4 new brand colors for Dark Mode. These colors have blue undertones to fit our brand palette while remaining dark and desaturated.

Every color serves a specific purpose in Dark Mode and was created with accessibility in mind.

  1. All text at Dark Mode is Cloud, not pure white.

  2. All large swatches of PBS Blue in Light Mode are Blue-Gray in Dark Mode. I created this color by darkening and desaturating PBS Blue.

After refining all Dark Mode designs, I documented all global background colors, button styles, text styles, and hover states.

After refining all Dark Mode designs, I documented all global background colors, button styles, text styles, and hover states.

My biggest challenge with the Dark Mode designs was the sticky PBS.org navigation.

My biggest challenge with the Dark Mode designs was the sticky PBS.org navigation.

The PBS Blue navigation is important to brand and strategy teams to maintain the PBS Brand. From a design perspective, this navigation is too saturated and distracts from other elements on the page.

The desaturated Charcoal gray navigation follows Dark Mode design standards.

We were able to find a happy medium between maintaining the PBS Brand and designing a user-first Dark Mode experience. The navigation is PBS Blue at the top of the page and changes to Charcoal on scroll.

I was then able to document all Dark Mode updates to global elements including the navigation, footer, show rows, and more.

I was then able to document all Dark Mode updates to global elements including the navigation, footer, show rows, and more.

Chip’s work allowed users to change their system settings to Dark Mode, but in order to meet our goals, we needed Settings for users to easily switch between Light Mode and Dark Mode on PBS.org.

Chip’s work allowed users to change their system settings to Dark Mode, but in order to meet our goals, we needed Settings for users to easily switch between Light Mode and Dark Mode on PBS.org.

I started with Dark Mode settings sketches in Procreate on my iPad.

I then created options for how Dark Mode settings would appear in both Light and Dark Modes at desktop and mobile breakpoints.

I then created options for how Dark Mode settings would appear in both Light and Dark Modes at desktop and mobile breakpoints.

After reviewing with stakeholders, we decided to provide Dark Mode settings for signed in users only.

After reviewing with stakeholders, we decided to provide Dark Mode settings for signed in users only.

We added Dark Mode settings to the signed in user menu. For signed out users, we added a tooltip hover state to the Sign In button to encourage more of our PBS.org users to sign in for access to Dark Mode, My List, and PBS Passport benefits.

Group 2447.png