An example of Product Design and handling scope creep

.:Subtitles:.

Role: Lead Designer

Problem: As a user browses the application and focuses on content, a trailer will autoplay in the background video frame. The trailers must include subtitles regardless of the video frame size or device. Design subtitles in a browse format for all audio & video playback on the platform for all devices.

Preliminary Context: How do subtitles work?

The first thing I needed to understand were my constraints. I had no idea who, how or where subtitles were generated nor did I have any understanding of what I could dictate to the developers. There were also many considerations regarding device capabilities, user settings and legal that all needed to be part of the conversation.

I connected with legal to understand their needs, then connected with accessibility to understand theirs. After that I reached out to all the different core video teams for each device and finally, connected with our cable division to understand how “pillaring” and how the system assigns X,Y positions for each subtitle.

Our system is still using an old school method to generate subtitles on TV screens, so I created a crash course for my team so in the future there is no need to find all the information again. This was also a good moment to get creative and I was able to, with a little math, figure out a way for us as designers using figma to account for screens at both 16:9 and 4:3 aspect ratios.

.:TV:.

Applying subtitles to our various video playback screens on TV was tricky. Unlike many other streaming services, Peacock surfaces it’s meta data bottom aligned from left to right. This design meant I couldn’t simply bottom align. You might think well, maybe subtitles sitting top aligned to the meta data makes sense, however if a user has the max settings for subtitles (something they would need as a user with difficulty hearing and seeing) the bulk of the center screen is covered.

The resulting designs dictated a maximum width window frame as well as an adjustment to our default font sizes.

When the placement and sizing issues were worked out, it was only a matter of applying the rule sets to the three video screen sizes present on the TV platform (Hero Rails, PDP and Spotlight).

At Peacock, it is important that we are as clear as possible since the start up like culture can sometimes lead to miscommunication. Likewise, documenting the app’s functionality for future designers and engineers is just as important. Motion is a huge aspect of working on a streaming platform and subtitles need motion defined.

Sometimes user flows aren’t enough and to help illustrate motion to the developers I also create animations.

Believe it or not, but during the time I delivered this only three other streaming services has subtitles available during browsing of the app on TV’s putting Peacock in company with Apple and Netflix.

Pixel perfect screens are always a must.

.:Web:.

Subtitles for web offered its own unique challenges as we had to content with responsive behavior in harmony with a users needs. A max setting subtitle has a very specific purpose to a specific person and it was paramount to honor that when those users changed browser sizes.

For this I worked directly with our web core video team and my good friend Ron at accessibility to establish font sizes and window sizes at each breakpoint.

Motion documented.

Once again I think its important to note that only two other streaming services (at the time) surfaced subtitles during their video playback in a browse format.

Pixel, perfect.

.:Mobile & Tablet:.

The mobile and tablet screens were significantly more challenging. Video playback in a browse format was routinely occluded by title art, covered with a dark linear gradient and worst of all, our developers confirmed that subtitle positioning was off the table as these devices had accessibility rules preset.

Here is a snapshot of all the rules that needed to be applied to surface subtitles on these devices.

For mobile, I needed to overhaul the entire layout of the PDP screen. No more title art occlusion and no more gradient sitting over the video. The new design pushed all meta data below the video frame and when video was playing no gradient would obscure viewing. In addition, I took the opportunity to make the case for interactive controls of video playback (Play, Pause, Restart) along with a progress bar to give users more visibility of the system. Fortunately, my SVP loved that idea.

On Tablet in portrait mode, it was relatively cut and pate from the mobile screen.

However in landscape mode there was no getting away from the occlusion of the title art and meta data and since I had no ability to re-position the subtitles, I decided to use a diamond gradient adjusted well enough to keep the screen looking clean while also not obscuring the subtitles.

Defining these new gradients, layout changes and rule sets meant I needed to establish max use cases and stress test all of them to ensure the app wouldn’t break. This was also done in multiple languages.

Documenting the new diamond gradient was more complicated than I expected as the dev’s obviously needed something more than my figma file. The hand off process here was a bit like writing a manual!