Film classification web application
Client
BBFC
Case study 1
Case study 2
UI design system
Client
ITV
Case study 3
Mobile app UI and brand visual
Client
Wonder City
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 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.
Inconsistent visual system across different internal tools
ITV existing design library. Without a 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 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
List - expanded - with section title
List - expanded - with column title
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.
Button
Dropdown list
Filter button
Date picker
Pagination
Form fields (left) & Modal window (right)
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
Different colours shades on different brands navigation bar
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.
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.
* * * * * *
