2018 - 2019

Construct a solid base for progressive business

ITV internal tools design system

ITV - header.png

ITV is a British free-to-air television channel. 
 

ITV has a mature brand identity, but it is not applied well for their internal team. The UI for the internal tools is messy and not consistent. This becomes a blocker when their business grows and more tools are needed.

 

There is a dynamic need for a design system. I need to create a library for designers and developers to go to when they build a tool, as a single source.

I first started by working on a UI audit. Trying to understand the common use case of different components, and started to categorise them.

ITV design system problem.png

Inconsistent visual system across different internal tools

20180521 ITV visual system presentation 05.jpg

ITV existing design library. Without a clear explanation about the use of each component, it brings confusion to designers and developers.

bbc webcore.jpg

Research on library from different companies, to study how they categorise the design components

Introducing the brand visual elements to the UI design components

sc1024x768.jpeg

Bold, friendly, energetic are the keywords to the ITV brand image. 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.

The design system 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.

With the help from my Creative Director, we studied the visual elements and have picked the bulky rounded shapes to be the feature as a visual thread to unify the design and to bring out the brand characteristic. 

To start with, I looked at the most used component - the list.

 

It is used across all the internal tools. By exploring how the behaviour and visual work for these components, also allows me to look at how the "atoms" "modules" "organisms" could look like in the system, according to the atomic design theory. 

List - collapsed 

ITV - list view - collapsed.png

List - expanded - with section title

ITV - list view - section title.png

List - expanded - with column title

ITV - list view with coloumn title.png

From there, I am able to get familiar with how each component be used in practise. Below are examples of some components created after designing the list.

ITV - button.png

Button

Dropdown list

ITV - dropdown.png

Filter button

ITV - filter button.png

Date picker

ITV - date picker.png

Pagination

ITV - pagination.png

Form fields (left) & Modal window (right)

ITV - form field & modal.png

These examples demonstrate how I introduced the ITV brand personality when building the visual system. 

Apart from the brand colours (teal, and shades of grey) thick border and slightly bulky radius are used to present the boldness and fun characters of the brand. 

Since this library is designed for the family of internal tools. Different brand colours are also introduced for any sub-brands. See below for how colours are implemented on the header for different products.

Systematic shades for different brand colours

ITV - colour.png

Different colours shades on different brands navigation bar

ITV - navigation.png

To test with the component, I started to implement them when I was assigned to work on a few projects for ITV.
 

The following are examples of how different platform is adapting the design system. e.g. Contents acquiring tool, self-serve marketing site. They demonstrate that the components are providing a simplified language and create a more cohesive look and feel across different scenarios.

Design system in practise

The development of the design system

Nothing is more rewarding to see the ingredients you have prepared have turned into a good dish. I spent three months creating the base of the design library, and around another three months adapting them to the existing tools

Since then, other designers who participated in other ITV products have also started to develop their UI based on the library. A product designer has also taken over to continue refining all the details and grow the library.

I am happy to see how the components are being used, and it is still growing. To see other designers being able to strengthen the whole system by continuously expanding the library, I have achieved the original goal of this project, which is to set up a solid foundation for the UI system.

ITV sharing.png

Thank you for the trust, I was able to share this design experience with a wider group, to demonstrate the benefits a design system could bring.

* * * * * *

BBFC - header.png

Improve efficiency & effectiveness for films rating

Films classification tool for BBFC
VRed - header.png

Create scalable modules for brand communication

Virgin loyalty programme homepage