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 library which provides one single source to share between designers and developers to go to when they build a tool. 

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

20180521 ITV visual system presentation 04.jpg

Inconsistent visual system across different internal tools

20180521 ITV visual system presentation 05.jpg

Existing design library. Without 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 take into these visual elements into consideration when designing components.

Design system has to be practical. But seeking every opportunities to highlight the playfulness of ITV brand is also important. So that the design isn’t only systematic on its specification, but also on its brand communications.

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 brings 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 this components, It also allow me to look at how the "atoms" "modules" "organisms" could look like 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

Starting 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 clearly how I blend in the ITV brand personality when introducing the visual system to their design components. 

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 the internal tools. Different brand colours are also introduced for any sub-brands. See below for how colours are implemented on the header for different product.

Systematic shades for different brand colours

ITV - colour.png

Different colours shades on different brands navigation bar

ITV - navigation.png

Colours used for header - example with wizard

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

 

The following are the 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 creating a more cohesive look and feel across different scenarios.

The development of the design system

Nothing is more rewarding to see the ingredients you have prepared has turned into a good dish. I spent three months creating the base of the design library, and around another three months to adopt 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 have also taken over to continue refining all the details and grow the library.

I am happy to see how the usage of the components being realised on real case studies, and to see other designers able to strengthen the whole system by continuously expanding the library.

ITV sharing.png

Thank you for the trust, I was able to share this design experience with 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

Creating scalable modules for brand communication

Virgin loyalty programme homepage