Experience Unfolding
Please wait, user experience is unfolding
Logo Black Logo White
  • Home
  • Portfolio
    • All Work
    • Mobile App
    • Web App
    • Graphics
    • Photos
  • Stories
    • All Stories
    • Corporate Stories
    • My Findings
    • Learnings
    • Travel Stories
  • About
  • Contact
  • More
    • Copyrights
    • Privacy Policy
Menu

Recent Posts

  • Designing Trust into AI-Assisted Pharmacovigilance Case Processing
  • Investing in Productivity: The Tools Behind My Best Work
  • Four Days of Rhythm, Stories & Smiles – Carnival 2026
  • A New Year Holidays Weekday Escape to Sinhagad Fort – Family, Food & Golden Sunsets
  • Most Popular & Productive Figma Plugins

Recent Comments

  1. A WordPress Commenter on Unveiling the Addiction: The Apple Ecosystem Chronicles
  2. Kawagoja on Geofencing
  3. A WordPress Commenter on Geofencing
Recent Posts
  • Designing Trust into AI-Assisted Pharmacovigilance Case Processing
  • Investing in Productivity: The Tools Behind My Best Work
  • Four Days of Rhythm, Stories & Smiles – Carnival 2026
  • A New Year Holidays Weekday Escape to Sinhagad Fort – Family, Food & Golden Sunsets
  • Most Popular & Productive Figma Plugins
Recent Comments
  1. A WordPress Commenter on Unveiling the Addiction: The Apple Ecosystem Chronicles
  2. Kawagoja on Geofencing
  3. A WordPress Commenter on Geofencing
  • October 6, 2024

Governing Telstra AU design system nobody owns alone.

  • All Stories
  • All Work
  • Corporate Stories
  • Design System
  • Learnings
  • UI/UX Insights
Post Image

Design System Governance at Scale — Case Study
Enterprise Design Systems · Telstra

How I helped a component library scale into a set of shared, enforceable rules — so dozens of squads building across an A–Z system stayed consistent without slowing down.

Role
Contributor, Design System Team
Organisation
Telstra (Enterprise DS)
Focus
Components · Governance · QA
Scale
Multi-squad, multi-brand
01

The context

Telstra is Australia’s largest telecommunications company — mobile, broadband, entertainment and enterprise products, sold and serviced across many teams, campaigns and platforms. The design system I contributed to wasn’t a single component kit; it was an A–Z library spanning content modules, data visualisation, form and media components, documented down to breakpoint, state and interaction — used by product squads who rarely spoke to each other day to day.

At that scale, the hard part of a design system stops being “which components exist” and becomes “who decides what changes, how a new pattern earns its place, and how drift gets caught before it ships.” That’s the governance layer I worked in.

A–Z
Component coverage
4
Brand colour systems
4
Responsive breakpoints spec’d
Multi
Product squads consuming the system
02

Where I worked in the system

Three overlapping areas of responsibility — design and documentation for what the system contained, rules for how it changed, and audits to check what actually shipped matched what was specified.

Design & docs

Component design & documentation

  • Specified components across states — default, hover, focus, active, error, loading
  • Documented usage at 320 / 768 / 1024 / 1360 breakpoints
  • Wrote do’s / don’ts and content guidance alongside the visuals
Governance

Contribution & versioning rules

  • Helped define how a new or modified component gets proposed, reviewed and approved
  • Worked within a tiered model — see the model below — that set different bars for different kinds of change
  • Kept version history so squads knew what changed and why
QA

Cross-squad design audits

  • Reviewed shipped screens against the spec to catch silent drift
  • Flagged one-off variants that should have been proposed as system changes
  • Fed recurring issues back into the documentation, not just the ticket
03

What governance was actually solving

A component library on its own doesn’t stop drift — it just gives drift better raw material. The recurring failure modes we were governing against:

01

Parallel variants. Two squads solving the same UI problem — a dropzone, a feature grid — differently, a few sprints apart, with no shared record of the decision.

02

Ambiguous ownership. When a component needed to change, it wasn’t always clear who could approve it, or whether a squad even needed to ask.

03

Documentation lag. Specs describing a state of the system that had already moved on in production, eroding trust in the docs themselves.

04

Inconsistent thresholds. A change to a colour token and a change to a whole new module pattern being treated with the same — or the wrong — level of scrutiny.

04

The governance model

The framework we worked within tiered components by how much scrutiny a change should get — so small, low-risk edits didn’t queue behind the same review as a brand-new pattern, and high-risk changes couldn’t slip through on a small-edit path.

TIER 01

Core

Foundational tokens and primitives used everywhere — colour, type scale, spacing, base controls. Changes here ripple across the whole system, so they carried the highest bar for review.

e.g. colour palette, video controls, dropzone
TIER 02

Extended

Composed components built from core primitives for recurring product needs. Reviewed for consistency with existing patterns before approval, with a lighter process than core.

e.g. data visualisation suite, campaign banner
TIER 03

Pattern / module

Larger, page-level modules assembled for specific product journeys. Faster to propose, but expected to be built from tier 1–2 parts rather than introducing new primitives.

e.g. in-page carousel, product feature grid

How a change moved through the system

01Squad proposes a new or changed component
→
02Tier assigned based on scope of impact
→
03Design + accessibility review against the spec
→
04Documentation updated — anatomy, states, breakpoints
→
05Versioned release, communicated to consuming squads
05

A slice of the system

Representative areas of the library I documented, governed or audited. Shown here as simplified recreations rather than the original internal specs.

Colour system

Four brand palettes (Pacific, Rockpool, Twilight, Sunrise), each with extended and neutral scales plus defined digital primary/secondary pairs.

Data visualisation

Pie, donut, bar, bubble, stacked-bar and line/area charts — specified with legend placement, labelling and traffic-light variants.

Bar & column charts

Mobile bar graphs, comparison bars and highlighted-value states, documented for consistent use across billing and usage screens.

DROP FILES
HERE
Dropzone

File attachment component with default, active, loading, attached and error states, specified separately for desktop and 320px mobile.

In-page carousel

Tabbed video and animation carousel, specified across 1360 / 1024 / 768 / 320, with play, pause and progress states.

Product feature grid

2/3/4-column responsive grids with default, hover, active and inactive interaction states for product tiles.

Grid & layout system

Margin, gutter and column specs from 328px up to 1920px, including collapsed and open side-navigation states.

Accordion title–
Accordion title+
Accordion title+
Accordions

Expand/collapse patterns for nested menu levels, specified across default, hover, pressed and inactive states.

Activity log

Chronological status timeline grouped by day, used to show progress history on a ticket or record.

Tables

Basic and advanced data tables — sorting, row selection, inline edit and icon/status columns — plus stacked card-style tables for mobile.

Modal title
Warning alert
Alerts, banners & modals

Inline, system-wide and modal alert patterns — primary, warning, transient and directional variants.

AA
Avatars

Photo and initials variants across five sizes (16–128px), with a defined fallback when no image is available.

Default › Default › Current page
Breadcrumbs

Long and wrapping breadcrumb trails, specified separately for mobile header contexts at 320 and 768.

Super button
This is a button
Super button
Buttons

Super, primary and secondary buttons across four sizes and a warning variant, plus hyperlink styles — every state from default to disabled.

Calendars & date pickers

Single and dual-month date pickers, date-and-time combos, and standalone time selectors for desktop and mobile.

Header, footer & mega menu

Global navigation chrome — basic header/footer, mega menu with nested links, and a collapsible side-menu variant.

This is a button →
Section title

A heading module with optional description, button and download link, restyled across 320/768/1024/1360 breakpoints.

Vert nav label
Vert nav label
Vert nav label
Vert nav label
Vertical tabs

Side-nav tab pattern pairing a label list with contextual content, plus an accordion fallback for narrower widths.

Cards

Dashboard and layout card patterns — default, hover and keyboard-focus states for content and summary cards.

Search
Menu Item 1
Menu Item 2
Menu Item 3
Dropdown

Select menus and search-lookup dropdowns, with numeric picker and mobile keyboard-aware variants.

Search ▼
Sydney, NSWIOM
Filter

Multi-field filter panel with lookup search, selected tags and an applied-filters summary bar, for desktop and mobile.

Form Label
Input Text
Error message
Forms & inputs

Text, select, textarea and search fields — inactive, focus, error, success and disabled states, plus calendar-style entry.

Download on the App Store
Get the app

App-download prompts in vertical and horizontal layouts, with an SMS-the-link flow for mobile.

Images & hero banners

A defined set of image aspect ratios (1:1 to 9:16) plus full-width hero banners specified at five breakpoints.

Icons

The master icon library — navigation, payment, device, government/enterprise and social sets, plus icon-with-action-label tiles.

Heading 20
This is a button →
Heading 20
Instructional tile & textblock

Icon-led step tiles and heading/body/CTA text modules, restyled across four breakpoints.

Elliot’s Visa→
Broadband$80
Lists

Account and action-item list rows — with icons, prices, usage bars and inline edit links.

Loading

Spinners for sub-4-second waits, and progress bars with percentage or time-remaining labels for longer ones.

Contact DetailsPayment Options
Navigation tabs

Inactive, active, hover and focus states for horizontal in-page tab navigation.

48
Notifications

Critical, informative and neutral count badges, plus a dot-only variant for lower-priority indicators.

Order tracker

Step-by-step timeline for tracking an order or request — to-do, in-progress, completed and error states, with carrier tracking cards.

Typography & spacing tokens

The master colour, type-scale and padding/margin symbols consuming teams swapped in-file to re-theme or re-space screens.

06

Where governance got hard

Tension

Rigour vs. squad velocity

Squads under deadline pressure treated any review step as friction. Too strict, and teams routed around the system; too loose, and the drift problem came straight back.

Response

Leaned on the tiering model so most day-to-day changes moved through a fast, predictable path — reserving the heavier review for the small number of changes that actually touched shared primitives.

Tension

Documentation as a moving target

Specs describing states, breakpoints and edge cases go stale fast if updating them is treated as optional once a component ships.

Response

Made documentation updates part of the definition of done for any approved change, not a follow-up task — and used audits to catch specs that had quietly fallen behind shipped UI.

07

Component accessibility

Accessibility wasn’t a separate audit bolted on afterwards — it was built into what “documented” meant for a component, and it was one of the things I checked for in cross-squad reviews.

Focus, not just hover

Visible keyboard focus

  • Interactive controls — video play/pause/rewind, carousel tabs — were specified with a distinct focus state, not just default and hover
  • Reviews checked that new or modified components kept a visible focus outline, so keyboard-only use wasn’t an afterthought
Colour + text

Never colour alone

  • Data visualisation and status patterns paired colour with an explicit label or number — percentages, values, legend text — rather than relying on hue alone
  • Traffic-light and status patterns kept a labelled legend alongside the colour coding
State coverage

Error & loading as first-class states

  • Components were expected to document default, hover, focus, active, error and loading — not just the happy path
  • Error states paired an icon with plain-language text, so meaning didn’t depend on colour recognition alone
08

Metrics

The figures that mattered most for a governance role — reach of the system, and how much drift the process was catching.

14 squads
Product squads actively consuming the shared system
 
60+ components
Components brought under formal governance
 
reduced by 30%
Duplicate or one-off variants caught in audit
 
under 2 sprints
Average turnaround, proposal to versioned release
 
09

Impact

The clearest impact wasn’t any single component — it was that decisions about the system became visible and repeatable instead of living in individual squads’ heads. Squads had a predictable place to check before building something new, and a predictable path to get a genuine gap filled.

Component decisions made ad hoc, per squad→Reviewed against a shared tier model
Documentation drifted from shipped UI→Updated as part of “done” for every change
Accessibility checked inconsistently→Verified in every cross-squad audit pass
New patterns built in isolation→Expected to compose from Core/Extended tiers
10

What this taught me about governance

A design system succeeds or fails less on the quality of its components, and more on whether the rules around changing them are clear enough that people actually follow them.

Working inside an enterprise-scale system reframed how I think about design systems generally: they’re a governance practice as much as a design one. The components are the visible layer — the durable value sits in the tiering, the review paths, and the discipline of keeping documentation honest about what’s actually shipping. That’s the lens I now bring to any system I lead: design the rules with as much care as the components they govern.

Design System Governance — Telstra
Case study prepared for portfolio use. Component recreations are simplified and original to this document, not reproductions of internal Telstra specifications.
Portfolio piece · v1.0
  • Tags:
  • CommunityBuilding
  • DesignInsights
  • Enterprise Design System
  • LearningExperiences
  • UIDesignTips
Prev
Enterprise Agentic AI Platform
Next
UX Case Study: Premium Digital Banking App
  • No Comments
  • Leave a comment
Cancel Reply

Go Top
2006-2026 © Lavesh Sumant.
Follow Me
  • Ld
  • Tw
  • Be
  • In