Jamie Chow Tsz Man

ITV

ITV

ITV

A scalable design system guideline which makes internal staff proud

A scalable design system guideline which makes internal staff proud

A scalable design system guideline which makes internal staff proud

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

Category:

Productivity tool

My Role:

UI Designer

Year:

2018

Team:

1 PM, 1 Product Owner, 1 Design Director, 1 Tech, 4 Devs

Impact

Impact

Established a scalable design system

Developed a comprehensive design system tailored to ITV's internal tools, ensuring consistency and scalability across products.

Enhanced internal collaboration

By creating a unified design guideline, facilitated better communication and efficiency among designers and developers.

Me presenting the UX guideline and learnings on our design process to the external parties.

Challenges

Challenges

Understanding diverse component usage

Each internal tool had unique use cases, necessitating close collaboration with different product designers to comprehend specific requirements.

Auditing inconsistent component libraries

Existing products had varied and inconsistent component usage, requiring extensive audits to identify core components for standardisation.

Old design library consist of inconsistent design usages and responsiveness was not taken into account

My approach

My approach

Focused on high-impact components

Prioritised the most frequently used components to build a strong foundation for the design system, enabling immediate implementation by designers.

Conducted thorough design research

Analysed other design systems to understand effective component implementation and layout structuring, guiding the creation of ITV's design guidelines.

Work process

Work process

Developed an atomic design Framework

Created a design system based on atomic design principles, specifically tailored for ITV's internal tools, ensuring modularity and consistency.

Integrated ITV branding

Applied ITV's existing brand guidelines to internal tools, maintaining brand consistency even in non-customer-facing products.

Design outcome example - List

Design outcome example - List

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.

Another options when more complex of information is needed, including column title and notification.

Results

Results

Improved design consistency

The new design system provided a single source of truth, reducing inconsistencies and enhancing the user experience across internal tools.

Increased business opportunities

The comprehensive design guidelines received positive feedback internally and externally, leading to new business opportunities and greater buy-in from stakeholders.

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.