Work by Henry Gomes
Work by Jackie Zen
Work by Sean Cooley, Matt Denton
Work by Emma Tak, Sean Cooley, Jenny Du
Work by Matt Denton, Sean Cooley
PeacockTV Design Systems, Joint Component Library
2021 – Ongoing | Status: In Progress
Role & Contribution Part of a Design System initiative between Commerce and Viewing Product Designers to help standardize and improve design practices within PeacockTV. 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. Also contributed to redesigning iconography within our component libraries to abide by a new standard.
Teammates Viewing - Sean Cooley (Senior Manager of Product Design, Design Systems), Henry Gomes (Senior Product Designer) Jacquelyn Zen (Senior Product Designer), Emma Tak (Product Designer) | Commerce - Matt Denton (Senior Product Designer), Jenny Du (Product Designer), Andrew Corrica (Product Designer)
Problem & Solution Within PeacockTV, there are multiple teams using very different styls and components, causing inconsistencies for our brand. We needed to align to a single joint Design System where we would refer and pull from. Initially, we wanted to merely align the Commerce and Viewing team’s component libraries, but we discovered multiple areas in need of improvement for usability, design flow, components, and accessibility.
2021 – Ongoing | Status: In Progress
Role & Contribution Part of a Design System initiative between Commerce and Viewing Product Designers to help standardize and improve design practices within PeacockTV. 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. Also contributed to redesigning iconography within our component libraries to abide by a new standard.
Teammates Viewing - Sean Cooley (Senior Manager of Product Design, Design Systems), Henry Gomes (Senior Product Designer) Jacquelyn Zen (Senior Product Designer), Emma Tak (Product Designer) | Commerce - Matt Denton (Senior Product Designer), Jenny Du (Product Designer), Andrew Corrica (Product Designer)
Problem & Solution Within PeacockTV, there are multiple teams using very different styls and components, causing inconsistencies for our brand. We needed to align to a single joint Design System where we would refer and pull from. Initially, we wanted to merely align the Commerce and Viewing team’s component libraries, but we discovered multiple areas in need of improvement for usability, design flow, components, and accessibility.
Process Overview
Iconography
One such area is iconography. Commerce had their own icons which did not match any of the Viewing team’s, while we borrowed a lot of our icons from Viewing, we also historically borrowed and created our icons from a variety of sources, leaving them to appear unbalanced. As a team, we did an audit of around 30 icons on Commerce, and 50 icons on Viewing, spanning across 3 different sizes; 16x16, 24x24, and 32x32. In total, our new icon library totals to around 80 icons at a 24x24px size.
After our audit, where we deprecated obsolete icons, marked up irregularities, and compiled a deck to show leadership. Afterwards, we redesign them to be optimally centered and as pixel perfect as possible. Ensuring the icons were abiding by the new standard of 2px bounding box, 2px stroke-width at a 24x24px size to allow for scaling (up to 32x32px and down to 16x16px).
Component Library
As a contributor to the Design System, my role is to constantly find ways to build and improve our kit to ensure consistency and coherence throughout both the Commerce and Viewing Product Design teams on Web, Client, Mobile, and App. As well as note inefficient design flow which causes delay of designs for our teams as many designers were unsure which designs were in production. Each week we would have working sessions between the Commerce and Viewing designers to consolidate and review components between the two different teams. While auditing different spaces within our designs, we would research materials and decide best practices within the app front-facing focused Viewing team and the consumer, account facing Commerce team.
Learnings & Reflections Moving forward in the process, we will continue to have a weekly design sync where we consistently speak on and improve on our styles and components. To improve our process within the team, we will need to run sessions to teach our designers best practices, as well as implement documentation about recent changes. While we currently notify designers about changes, much of it is text-based, so it gets lost within all of our daily messages and threads. It might be best to have a visual change-log or notify designers at stand-up about what was implemented and can be used in production now.
Iconography
One such area is iconography. Commerce had their own icons which did not match any of the Viewing team’s, while we borrowed a lot of our icons from Viewing, we also historically borrowed and created our icons from a variety of sources, leaving them to appear unbalanced. As a team, we did an audit of around 30 icons on Commerce, and 50 icons on Viewing, spanning across 3 different sizes; 16x16, 24x24, and 32x32. In total, our new icon library totals to around 80 icons at a 24x24px size.
After our audit, where we deprecated obsolete icons, marked up irregularities, and compiled a deck to show leadership. Afterwards, we redesign them to be optimally centered and as pixel perfect as possible. Ensuring the icons were abiding by the new standard of 2px bounding box, 2px stroke-width at a 24x24px size to allow for scaling (up to 32x32px and down to 16x16px).
Component Library
As a contributor to the Design System, my role is to constantly find ways to build and improve our kit to ensure consistency and coherence throughout both the Commerce and Viewing Product Design teams on Web, Client, Mobile, and App. As well as note inefficient design flow which causes delay of designs for our teams as many designers were unsure which designs were in production. Each week we would have working sessions between the Commerce and Viewing designers to consolidate and review components between the two different teams. While auditing different spaces within our designs, we would research materials and decide best practices within the app front-facing focused Viewing team and the consumer, account facing Commerce team.
Learnings & Reflections Moving forward in the process, we will continue to have a weekly design sync where we consistently speak on and improve on our styles and components. To improve our process within the team, we will need to run sessions to teach our designers best practices, as well as implement documentation about recent changes. While we currently notify designers about changes, much of it is text-based, so it gets lost within all of our daily messages and threads. It might be best to have a visual change-log or notify designers at stand-up about what was implemented and can be used in production now.