Micah Etheredge
TDS-Cover.jpg

Telstra Design System & new visual language

I was part of a small agile team that rolled out the new visual language and Telstra’s first Design System.

Overview

Overview

I was brought on to this project as a Visual Designer. But as this task of building a Design System was new to us all, collectively our roles could be more accurately describes as ‘problem solvers', ‘diplomats’, and ‘communicators’.

I worked closely with a small hand-full of other designers, a few developers, a Scrum Master and Product Owner in an agile framework.

Our team collaborated with 48 product teams across Telstra Digital to develop a system that would aim to speed up design and delivery, improve consistency of brand and free up time for designers and developers to be truely innovative. The expected outcome? A repository of common components for all platforms in UI and code.

TDS-Tcom.001.jpeg
The problem

The problem

While Telstra Digital had instituted various style guides in the past, the adoption was limited and the implementation by development teams was varied. As a result, we were left with a fragmented patchwork of products. All using slightly different colours, icons, form fields . . . the list goes on. This has resulted in a weak brand image and duplication of effort at every point in our products development.

TDS-research&priorities 2.jpg
Our process and my role

Our process and my role

Our team worked in 2 week sprints using the Agile framework.

We on-boarded teams to the new visual language. Assisting them in integrating the design system into their workflows. Prioritising feedback and working collaboratively with product teams to adjust or create new components to suit their needs.

My roles within our team included:

• Defining and refining Telstra's new visual language
• Creating new components and building out the UI Kit
• Communicating with 48 teams across Telstra Digital
• Conducting discovery workshops with various teams
• On-boarding teams to the Design System and visual language
• Prioritising feedback and working with my team to adjust or create new components to meet the needs of various product teams
• Creating detailed documentation to assist teams in their understanding of how to use the Design System
• Creating motion examples as an aid, to illustrate the intended use of components for designers and engineers alike
• Building interaction patterns for specific components

Scope and constraints

Scope and constraints

We had difficulty juggling the managing of feedback from teams and developing new components. Due to budget constraints our team wasn’t large enough to handle both tasks effectively.

Outcome & results

Outcome & results

As a team, we were able to build out a robust UI Kit with approximately 70% of the components required for the product teams involved.

Our team completed the first beta release of the Design System and successfully delivered:
• A documentation website
• A Sketch UI Kit with over 150 components
• Bit Bucket delivery method for the UI Kit
• New design language
• Code snippets for the most common elements
• An inspired and educated group of designers
• Increased speed of design
• Greater consistency of design across all assets

What we didn’t deliver was:
• A complete code library for developers
• Full adoption of the design system across all product teams.

It’s worth noting that a design system is a living, ever-changing entity that should never end. The team will continue to adapt and re-imagine this system to ensure it’s relevance and effectiveness for teams in Telstra and for our customers.