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.
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.
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.
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