Overview
1/4
Context
Tait Communications is the leading critical communications provider in New Zealand and has a global network. The company has over 100 internal and external websites, and without a design system inconsistencies between various platforms are growing.
Another intern and I were tasked with developing the foundations of a cohesive design system for the company alongside providing highly comprehensive documentation. This would provide Tait with some visual consistency across the company to begin implementing.
Foundations
2/4
Typography was the first foundation that we worked on. It was something with which the company had a lot of indecision, so with the input of each stakeholder, we developed type scales and guidelines to provide consistency between different departments, e.g., Technical Publications, Marketing, Tait's Educational platform, etc.
Grids and spacing systems were crucial to the visual consistency of Tait. Clear spacing variables and breakpoint-specific grids were developed to ensure spatial consistency and ease of use for those implementing them.
We began working on colour towards the end of the internship, only leaving us time to establish status colours and neutral colours. We ensured all colours met AA WCAG colour contrast standards to improve visual accessibility.
Workshop
3/4
We developed some usage guidelines for users of the design system at Tait and decided to conduct a workshop to test the ease of use and accessibility among the UX team. From this workshop we uncovered some valuable feedback, which we implemented into the guidelines soon after.
Summary
4/4
Key Learnings
User needs and functional requirements often take priority over purely aesthetic decisions. Good design foundations ensure that form supports function, leading to interfaces that are both beautiful and highly usable
Critical consistent patterns, components, and behaviours are for usability and brand integrity, especially across a large suite of products
Thinking systematically rather than just stylistically — understanding how every button, colour, and layout rule needs to scale and apply universally
Working closely with developers, designers, and other stakeholders to align on naming conventions, documentation, and how foundations would be implemented
Documenting design decisions clearly — making systems easy for others to understand, adopt, and maintain after hand-off