GSP Design Systems for NBCUniversal, Joint Component Library
2021 – Ongoing | Status: In Progress
Brands PeacockTV (United S, SkyShowtime (Europe), ShowMax (Africa), NOW TV (Europe)
Role & Contribution Designer working for an initiative between Commerce and Viewing Product Designers within NBCUniversal to standardize and improve design practices within a variety of domestic and international propositions e.g. PeacockTV, SkyShowtime, ShowMax, and NOW TV, titling the project as the GSP (Global Streaming Platform) Design System.
2021 – Ongoing | Status: In Progress
Brands PeacockTV (United S, SkyShowtime (Europe), ShowMax (Africa), NOW TV (Europe)
Role & Contribution Designer working for an initiative between Commerce and Viewing Product Designers within NBCUniversal to standardize and improve design practices within a variety of domestic and international propositions e.g. PeacockTV, SkyShowtime, ShowMax, and NOW TV, titling the project as the GSP (Global Streaming Platform) Design System.
Enforced design best practices for members of the Commerce Product Design team for Web and Client, while simultaneously creating standards and removing inconsistencies between Commerce and Viewing.
Teammates Sean Cooley, Jacquelyn Zen, Emma Tak, Henry Gomes, Shamar Joseph, Matt Denton, Andrew Corrica, Jenny Du
Problem & Solution Initially, an effort to align the Commerce and Viewing team’s efforts for PeacockTV, there was multiple areas in need of improvement for usability, design flow, components, and accessibility, and as NBCUniversal continues to expand across many international landscapes, there is a large need to provide designers within the company, as well as our partners with components and templates to build consistency across our brands. Brand styles, components, and templates built utilizing these consistent, yet flexible assets for all four brands help product designers solve problems faster, decrease human error, reduce time and increase output.
Teammates Sean Cooley, Jacquelyn Zen, Emma Tak, Henry Gomes, Shamar Joseph, Matt Denton, Andrew Corrica, Jenny Du
Problem & Solution Initially, an effort to align the Commerce and Viewing team’s efforts for PeacockTV, there was multiple areas in need of improvement for usability, design flow, components, and accessibility, and as NBCUniversal continues to expand across many international landscapes, there is a large need to provide designers within the company, as well as our partners with components and templates to build consistency across our brands. Brand styles, components, and templates built utilizing these consistent, yet flexible assets for all four brands help product designers solve problems faster, decrease human error, reduce time and increase output.
Process Overview
Building for Web and Client - Our Component Libraries
Our goal is to provide coherency and guidance across our streaming platforms for web, client, and app. There were many areas of opportunities for improvement between both teams including systematizing iconography, typography, brand color, buttons, and more. Bigger issues we were also tackling included documentation for in-production designs as well as education within Figma for use and adoption of the Design System.
Brainstorm & Define
Weekly, the design system team will meet to discuss new areas for improvement, brainstorming and defining projects and needs. One area, iconography was defined early in 2022.
Building for Web and Client - Our Component Libraries
Our goal is to provide coherency and guidance across our streaming platforms for web, client, and app. There were many areas of opportunities for improvement between both teams including systematizing iconography, typography, brand color, buttons, and more. Bigger issues we were also tackling included documentation for in-production designs as well as education within Figma for use and adoption of the Design System.
Brainstorm & Define
Weekly, the design system team will meet to discuss new areas for improvement, brainstorming and defining projects and needs. One area, iconography was defined early in 2022.
Iconography between Commerce and Viewing was inconsistent, meaning many of our user-facing screens were inconsistent, providing users with unideal experiences within our user flows. Historically, the Commerce team borrowed many icons from the Viewing team as well as royalty-free files from the Web (this is extremely bad practice, I know), this created many unbalanced icons meaning one icon within the same set could have very different weights and corner-radiuses. An audit was done on 30 icons from Commerce and 50 icons from Viewing, spanning across three different sizes - 16x16, 24x24, and 32x32 on web, client, and app.
Design
After spending a few months going back and forth between both teams, as well as any stakeholders, we deprecated obsolete icons, marked up and redlined irregularities, and provided a new library totaling around 80 icons at a 24x24 size. Redesigning them to be optimally centered (similarly visually center-alignment between square cornered icons and circular icons), ensuring all icons were abiding the new 2px bounding box, 2px stroke-width at a 24x24px size to allow for scaling (up to 32x32px and down to 16x16px).
Build, Test, & Review
Design
After spending a few months going back and forth between both teams, as well as any stakeholders, we deprecated obsolete icons, marked up and redlined irregularities, and provided a new library totaling around 80 icons at a 24x24 size. Redesigning them to be optimally centered (similarly visually center-alignment between square cornered icons and circular icons), ensuring all icons were abiding the new 2px bounding box, 2px stroke-width at a 24x24px size to allow for scaling (up to 32x32px and down to 16x16px).
Build, Test, & Review
After presenting our work to various stakeholders and gathering approval and review, the team will provide specs and guides to each icon for tech delivery to developers for web and client. We will review and test on our individual spaces and platforms and provide feedback, this process can go through several iterations before launch for domestic and international propositions.
Similar design processes and iterations are done for other aspects of the design system. For iconography, minimal brand-specific needs are required but for assets such as navigations and buttons, we will ensure the brand requirements are met i.e. text-style, colors, etc before handing off to developers.
Screen Templates Built Utilizing Design System Best Practices & Components
Learnings & Reflections While this project is still ongoing, it is not completely void of learnings and reflections. After taking a look at previous progress, we continue to find new ways to innovate. Throughout the past three years working with the team, we are continually learning and updating the way we build and curate our libraries and design system.
Right now, the design system team works with no PMO support, so a lot of documentation and scheduling relies on designers; in the near future, we would like to change that and be able to get admin support on our projects for better roadmapping and timelines. We also would like to better engage designers within our larger teams (who all have varying degrees of Figma knowledge) to teach them best practices and usage.
While we currently notify designers about changes, much of it is via Slack, and so it gets lost within all of our daily messages and threads. In the near future, we would like to implement a more detailed visual change-log where designers can see the changes immediately and provide documentation/guides to the usage for all streaming brands at NBCUniversal.