ITV
Built ITV's design system from audit to launch. Establishing component standards, usage guidelines, and cross-functional workflows for internal tools.
As the Design team and Product team scaled at ITV. inconsistencies across internal tools created inefficiencies and quality issues. I helped auditing existing products, defining atomic component standards, and documenting usage guidelines that became the single source of truth for cross-functional teams.
Category:
Productivity tool
My Role:
UI Designer
Year:
2018
Team:
1 PM, 1 Product Owner, 1 Design Director, 1 Tech, 4 Devs
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
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
Prioritised 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 established design systems (Material Design, IBM Carbon, Atlassian), documentation approaches, and component API patterns applicable to ITV's context.
Work process
Applied atomic design methodology
Created a design system based on atomic design principles, specifically tailored for ITV's internal tools, ensuring modularity and consistency.
Adapted brand guidelines for internal tools
Extended ITV's consumer-facing brand system to internal product contexts. Defining when to apply brand elements versus where functional clarity took precedence.
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
Improved design consistency
The new design system provided a single source of truth, reducing inconsistencies and enhancing the user experience across internal tools.
Generated stakeholder confidence
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.
