2018 - 2019
Construct a solid base for progressive business
ITV internal tools design system
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.
Inconsistent visual system across different internal tools
Existing design library. Without clear explanation about the use of each component, it brings confusion to designers and developers.
Research on library from different companies, to study how they categorise the design components
Introducing the brand visual elements to the UI design components
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
List - expanded - with section title
List - expanded - with column title
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.
Form fields (left) & Modal window (right)
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
Different colours shades on different brands navigation bar
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.
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.