Verizon
Scaling and maintaining Verizon’s design system.
Design System management across mobile, tablet, desktop and TV
Jump to…
Overview
Verizon is one of the largest telecommunications companies in the world. They have an expansive range of digital products, one of them being their streaming platform. This is known as Fios TV - like the equivalent of Sky here in the UK.
Customers pay a subscription fee and receive a set-top-box that connects to their TV. They can then access streaming apps, live TV through a TV guide, on demand content and a store.
As an agency, we were in charge of the design system and libraries for the streaming products which include 2 set-top-box products, a TVoS product, a Fire TV product, mobile app and web experience. We used the client side core design system (used for Verizon telecommunications sites) as a foundation for colours, type and component styling.
This meant that we had some guidance as to how components should look and feel, and needed to be able to use this library to help build unique components needed for the streaming products.
My role as a Design System Lead
Over the past four years, I’ve been responsible for the end-to-end management and evolution of all design libraries, particular the 2 set-top-box TV products and accompanying mobile app and web experience.
My role in the design system over the years has become more significant and i am now the POC for any updates & maintenance and i lead any updates that are needed. I’ve ensured the system remains scalable, inclusive, and forward-looking — a unified foundation that empowers product teams to design and build with consistency, quality, and speed.
Summary of my responsibilities:
Central ownership of a cross-product design system
Collaboration with design, engineering, and brand partners
Governance and maintenance of component libraries
Leadership of multiple modernization and rebrand initiatives
Continuous evolution toward automation and future-ready scalability.
Being to POC for any library updates and changes.
Major Component Styling Overhaul
One of my first major contributions was implementing a new brand identity to our product. This involved taking lead from the core client design system (Verizon Design System or VDS) and applying those updates to the streaming product UI. This required an overhaul of the color palette, type and more.
Updates I pushed:
Color palette
Verizon’s core red and secondary colors were brightened to make the brand feel more vibrant. Improved accessibility with brighter colors that display better on digital screens, especially in dark mode.
Call-to-actions
Aligning naming conventions with VDS. Button styling aligned to the web/app experience, with the removal of grey out-of-focus buttons and icons.
Type
Revised type scale developed as part of the wider existing VDS scale. Tighter line-height and letter-spacing creates a more distinctly Verizon look for Title type.
Content cards
Adopts rounded corners across its components. They make the experience feel more modern and friendly. Focus states are clearer with a bold white outline, that contrasts against black backgrounds.
The future TV design system
Early on in my time working on Verizon, I helped lead an initiative to envision how our design system could scale for future TV interfaces, aligning structure and principles with our global design direction.
The idea was so start building the next generation TV design system, using all the existing components we need, but re-designing them to be completely aligned with VDS and most of all - built to be flexible enough for future changes in the industry.
One of the larger parts to this was to create content cards and rails that could handle multiple ratios and sizes. This would allow Verizon to update their UI in an instant when the industry calls for it.
We expanded our content card range from 2 sizes to 6.
Cards that will flex for the future
We worked on lots of updates across several components, the largest one being to our content cards. For the TV experience, the content cards are the core components. Its what we use to create rails that display content that the user can scroll through and its what makes up most of the product. Previously, Verizon had been restricted to 16:9 card rails in 2 different sizes and we wanted to design variations of rails that could use square, portrait and 4: 3 versions at many different sizes.
I started working on mapping out different column grids and what sizes and ratios would fit in each. This mean’t that we could be flexible with what column grid we wanted to use, and have a set of content card rails ready to go. We wanted these variations to work on our left and right margins and gutter of the existing product. This meant we could explore which number of columns would allow the most flexibility so i needed to map out every variation to pick out the ones that would work.
We now had the components to fully flex to any industry change. We were now able to keep up with TV best practices and industry shifts as well as have more ways to display content and create visual hierarchy.
The components i helped build have slowly been fed into the main experience. We introduced small 16:9 cards for apps, large cards for live content, portrait cards for our top 10 rail and 4:3 for our shortcut rails. As a result, we have now satisfied both client and user feedback around hierarchy.
Merging libraries
To streamline workflows and reduce design debt, I proposed and led the merger of two major design libraries into a single, unified system. This was a big change for our Figma workflow, not only for us as the design team, but for the client and developers who were always actively viewing these libraries.
I started with completing an audit of the components we had in both product libraries. What components could be shared? How many component needed to stay unique to each product? The sheet on the right outlines what i found. I mapped out which components could be shared, and which had to stay unique to a product, this way, we could shiw the client the reasoning behind this task.
Proposal & execution
This being such a big task meant that i had to propose the update in the right way to show the main benefits. I explained how this merge would encourage us to align and make cross platform decisions. If our goal is alignment, this is an important part in achieving that goal. We can now work with more synergy - we’ll now be able to propose a design solution that works for both products, then reflect that decision in one library. This also helps push us towards alignment more efficiently.
I managed the merge process across the design team, distributing work and creating an instructions sheet and tracker to manage the process. It was a big task, and took every member of the teams’ effort.
We’ve been using the merged library for a couple of years now and its been a great enforcer of alignment. Product teams are now forced to align on design changes cross platform which has improved consistency cross platform.
Second brand overhaul
In 2025, Verizon went through a larger visual change, this time focusing more on color and identity. They completely revived their logo to a single ‘V’ and updated colors to sit well with the newly added Stone shade. They also introduced a new shade - Neon Yellow, which we also proposed, shwoing how we could help bring more visual identity to the products. The cleint paused on this update and we ened up only updating our core red and greys.
Implementing variables
We had just unified our TV libraries and merged two design systems together. This meant we now had a TV Library and Web & App Library pulling from a master library. We needed to introduce variable tokens to our master library to keep up with Figma standards and align with development.
I led the initiative to replace styles with variable tokens along with a junior designer.
We set up shared collections for:
Protections/Opacities
Feedback colors
Radius values
Typogrpahy
We then built collections for the TV and Web & App libraries, creating component collection within them for more complex components like buttons, toggles and checkboxes.
Refinement of the Web & App library
When I started overseeing the Verizon Web & App Library, it was clear that it was i need of a major rebuild. I along with other designers had struggled with creating simple flows as so many components and template were out of date or poorly built. I led the effort to rebuild all Web & App Figma work from the component library to the design files. A junior designer and I set out 4 phases to tackle this:
Phase 1: Update our color and type styles to use the (then) new feature, Variables.
Phase 2: Rebuild all components in the library using these new styles. Tidy up using proper naming of layers, adding auto-layout, boolean properties and general tidy up of the library file.
Phase 3: Use the newly built components to then rebuild all core page template components. Again, re-name layers and pages, add auto-layout and do a general tidy up.
Phase 4: Rebuild all design/Epic files using the newly build templates. We created a new layout structure for all pages to follow so designs and flows were easy to find.
This was an extremely valuble task. We were able to massively reduce the amount of components we had due to booleans. One example being our card components. We went from over 300 variants down to 70.
We finally had some visual consistency throughout our files. Flows and sections were well organised, and due to their being so many breakpoints and devices, this was a huge win! The client appreciated this as they had also struggles with finding specific designs. We walked through the new layout with them and they along with our dev team have provided great feedback since.
Outcomes & impact
Implementing all these updates has helped workflow between client and designers. We now have more alignment between product teams due to the merged libraries. We have an organised design hand off for files and designs, and we have always met deadlines for new brand implementations. I am now the SME for any designs system changes, updates and processes not only for the design team but also the client. Senior designers, Verizon product owners, developers and fellow designers know they can rely on me for any questions regarding brand compliancy, color and type queries and anything component related.