TV Show Episodes Feature

Pictured here: The alt versions of the episodes feature that will live on every show page. This feature tells users about an upcoming episode, a previous episode, and most popular episodes from the show. These alternative designs account for when we inevitably have missing data points or a lack of information regarding a given episode. They also show affordances for users to contribute content as well when we may have gaps in our data.

Data Availability and Alternates

IMDb is host to over 7.5 million titles for both for movies and shows. The amount of data that we have for each show varies and as such must be represented as we design the new website. This means that we have to account for alternative versions of each feature when we design them, just in case there is missing or extra data for that particular show or movie. 

Building the Hero Feature

When a user lands on IMDb, the first thing they will see is what we call the “Hero”. The Hero displays all of the “need to know” info for a given title as deemed by extensive user research. There are thousands of data points throughout the page, but this main hero section draws all the top-level needs and delivers them to the user in a quick and concise way. It was my responsibility to define all of the small interactions that users will have across all breakpoints.

You’ll see that there are different versions of each hero element. A Video Game hero for instance, gets a different UX to serve that particular titles needs. Whereas a televisions show might need a set of controls to pan between episodes or filter episodes.

Shades

• Shades are used for the backgrounds for the page.

• All accents will lay on top of these shades.

• There are two sets of shades, we call them base and base alt

Accents

• Accents are added colors used to define primary, secondary etc. elements within the UI

• All accents except for the yellow one (brand yellow) must be fully accessible with each base shade’s “on color” and must also be accessible as text on both base and base al shades.

• There are 8 color accent variants total.

On Colors

• On colors are text/icon colors that go on top of the accent

• All text and icon variants must be AA accessible on top of each accent

We used this chart to help explain the complexities around the different uses of color.

When testing out colors, I worked backwards from their uses. I knew we had to have a success green, a failure red, etc. but each color also had to contrast well with the already established yellow that we use for the IMDb brand.

The colors couldn’t be too pastel, or too chromatic, so there was a lot of time spent scanning through different color wheels to find the exact right color. Once I thought I had it, I had to contrast it next to the others and adjust them accordingly. For instance, just as I thought I had found the perfect “success green”, I put it next to the red and the feedback I got was that it was too “Christmassy”. So, I had to go back to the drawing board and find colors that deviated away from Christmas red or green.

Each accent had to be accessible on every shade for every font style. So, as I scanned through the color wheel, I also had to type out example words in each text style to check to make sure that each color accent was at least AA accessible for all fonts, accents, and shades.