ITV

Design system for TV broadcasting internal tools

A design system guideline that's internal staff could be proud of

Summary

Both the Design team and Product team are growing. The business was in need for a design system where designers and developers can reference to as a single source of truth.

Background

ITV is a British Broadcast TV company. We have three teams of designers dedicated to work on three internal tools for ITV. But the current component library could no longer work efficiently as the business grows.

Role

  • Product Designer
  • Current Design System Audit

  • Create Design guideline

Team

  • Myself
  • 1PM

  • 1 Product Owner

  • 1 Design Director

  • 1 Tech Lead

  • 4 Devs

Contribution

Created a design system that fit the most urgent needs
Since we already have three existing products that the design team is building, I manage to focus on the most frequent used component and build a design system around. This approach helped to build a strong foundation for a scalable system, as well as allowing the designers to implement the design immediately.
Built a good business portfolio
The benefit of a design system is well-known among designers, but not for the business. After the first year, I was given an opportunity to present the comprehensive documentation of the design guideline to both ITV and even external team. We received great feedback and has earned a lot of business opportunities and buy-in.

Challenges

Understanding the context and usage of the current components
Internal tools all has their own usage and niche uses case. I cannot work isolated but to work closely with the designers from different product, so I won't ended up building individual blocks without knowing the users!
Long hours audit on existing component library
It's good to have three existing and growing product to reference to when we started to design audit, but with enormous and inconsistent of components usage, it also means that we have to spent a majority of our time on understand what are the core components, so we can prioritise and to ensure we work on something that benefit our designers the most.
Design process

“Let's start with the most frequent used component”

Design research on other design system
Learn to understand how other products implement the components and structure the layout to help users (designers and dev) learn the usage guideline.
Design audit on existing design components
Studied how current products works and the usage of the existing components. There are three existing products so I needed to also work with the designers to gather users' problems and needs.
Design result

Atomic design but specifically for ITV

Maintain ITV branding even it's not for 2C products
ITV already has a complete brand guideline, and the visual elements are applied to their customer-facing products appropriately. Therefore, I consider these visual elements when designing components.
Design system that the internal staff can be proud of
The design system is primarily for internal tools, and it has to be practical. But seeking every opportunity to highlight the playfulness of ITV brand is also important. So that there is a consistent visual language about how the interaction work, and what the brand represents.

Example of scalable components for crucial patterns - List of tasks

Old design library consist of inconsistent design usages and responsiveness was not taken into account
Old design library consist of inconsistent design usages and responsiveness was not taken into account
New design provides a fundamental usage that could be applied across different products.
New design provides a fundamental usage that could be applied across different products.
One of the options for the component on new design, which demonstrate the usage when a list item is expanded and secondary information, contextual actions could be displayed.
One of the options for the component on new design, which demonstrate the usage when a list item is expanded and secondary information, contextual actions could be displayed.
Another options when more complex of information is needed, including column title and notification.
Another options when more complex of information is needed, including column title and notification.
Outcome

Comprehensive guideline for components usage & a lessons to share

Upon the first release of the design system, I was asked to present the guideline and process to both the business stakeholder and external parties that we invited.

This project has prepared me with solid experience to take on more complex design system like I did for Global Relay. Since it concern security of financial industries, high accessibility is requested, and I needed to work across timezone with development team in Vancouver.

Conducting rapid prototyping for further user research on the end to end discovery user journey:

Search (top img), Brand page (middle img), Details page (bottom img)

The design has garnered exceptionally positive feedback from customers for its mobile-friendliness, ease of finding relevant information, and inviting, intuitive layout.
Me presenting the UX guideline and learnings on our design process to the external parties, including designers from BBC.
Prototype to demonstrate how components could be used on an existing product.
Prototype to demonstrate how components could be used on an existing product.
It was a fulfilling process to work with the PM on the UX guideline after completing all the components for first release. We manage to explain the project background, ways to use the guideline, as well as explanations on each component usage.
It was a fulfilling process to work with the PM on the UX guideline after completing all the components for first release. We manage to explain the project background, ways to use the guideline, as well as explanations on each component usage.
Working closely with other designers to test on the design system. Designing a design system is the same as creating a product, which needs constant testing with the users.
Working closely with other designers to test on the design system. Designing a design system is the same as creating a product, which needs constant testing with the users.
Example of new design system applied on the UIs for a self serve advertising platform.
Example of new design system applied on the UIs for a self serve advertising platform.

Other projects

Other projects

VIOOH

Advertising billboard inventory management platform

Advertising billboard inventory management platform

Advertising billboard inventory management platform

Research and concept piece for global stakeholders alignment

Ad-tech

Ad-tech

Ad-tech

Productivity

Productivity

Productivity

Media

Media

Media

BBFC

British National films & broadcasting classification tool

British National films & broadcasting classification tool

British National films & broadcasting classification tool

Improve efficiency in films rating for compliance team for the UK

Productivity

Productivity

Productivity

Compliance

Compliance

Compliance

Entertainment

Entertainment

Entertainment

Let's connect
or just say hi :)

eimajc@gmail.com

Resume

Linkedin

Let's connect
or just say hi :)

eimajc@gmail.com

Resume

Linkedin

Let's connect
or just say hi :)

eimajc@gmail.com

Resume

Linkedin