Component design
Contributed across the component library, reviewing component structure, variants and interaction states represented in the design documentation.
LIBRARY CONTRIBUTION ENTERPRISE DESIGN SYSTEMS TELSTRA AU
Consistency is
built together.
A contributor’s perspective on shaping, documenting and quality-checking a shared design language across a complex digital ecosystem.
SCROLL TO EXPLORETSHARED
LANGUAGE
LANGUAGE
Components ↗
Foundations ↗
Documentation ↗
Quality ↗
ONE SYSTEM · MANY CONTRIBUTORS
01 / THE CONTEXT
One ecosystem.
Many touchpoints.
Large digital ecosystems are rarely designed by one team. Multiple product groups work on different journeys, at different speeds, and with different delivery constraints. Without shared patterns, familiar interface elements can gradually become inconsistent.
The Telstra AU design system provided a common reference for interface foundations, reusable components, responsive behaviour and interaction states. My involvement was as a contributor within the Design System team, working across the component library and its supporting documentation and quality practices.
“A design system is not just a library of UI. It is a shared agreement about how experiences should behave.
ORGANISATIONTelstra · Australia
DOMAINTelecommunications
WORKING MODELCross-functional
CONSUMPTIONShared design documentation
02 / MY CONTRIBUTION
Contribute across
the system.
My role was hands-on and collaborative: helping make components usable, understandable and more consistent for teams referencing the shared library.
Documentation
Worked across visual specifications and supporting guidance so that component behaviour, responsive treatments and usage details were easier to reference.
SHARED DESIGN DOCSQuality reviews
Participated in design audits and quality reviews, checking interface work against documented patterns and identifying inconsistencies for follow-up.
DESIGN QAGovernance & adoption
Contributed to governance conversations and helped reinforce adoption through clear shared documentation and consistent component references.
COLLABORATIVE GOVERNANCEScope clarity — These are contribution areas within a cross-functional design-system team. This case study does not position me as the sole owner or decision-maker for the programme.
03 / INSIDE THE LIBRARY
From foundations
to everyday patterns.
The original reference screens show a broad component language: visual foundations, responsive layouts, interaction states and reusable interface patterns.
FOUNDATIONS · COLOUR
Colour with a system behind it.
The palette reference documents four named colour families — Pacific, Rockpool, Twilight and Sunrise — with extended and neutral scales, gradients and digital primary/secondary pairings.
Rather than treating colour as decoration, the documented structure gives teams a repeatable vocabulary for brand expression and interface hierarchy.
A DESIGN-SYSTEM LENSFrom one-off UI
From one-off UI
to shared patterns.
Move the control to compare an illustrative, locally defined one-off interface with a more consistent pattern-led treatment. This is a conceptual comparison, not a measured project result.
04 / ORIGINAL DESIGN SYSTEM EVIDENCE
The source screens.
Unedited and intact.
Every supplied design-system mockup is included below as an original image file. Browse by topic, open any screen for a larger view, and inspect the source visual without overlays or alterations.
REFERENCE LIBRARY
36 original screens
Source integrity: the gallery uses the supplied PNG screens directly. No screen content, colour, layout or annotation has been edited.
COMPONENT EXPLORER
Patterns made explicit.
Select a component family to explore what the reference screens communicate about its variants and states.
01 / 06
Accordions
Expandable content patterns documented across default, hover, pressed, expanded and inactive states, including nested menu levels.
- Responsive examples for compact and wide layouts
- Nested hierarchy and active-item treatment
- Clear open and closed affordances
Account overview ＋
Manage services －
Mobile services
Broadband services
Usage and billing
Broadband services
Usage and billing
Support options ＋
Default ＋
Hover state ＋
Expanded －
DATA DISPLAY02
Tables
Sorting, selection, inline editing, status indicators, calls to action and pagination.
ServiceStatusAction
Mobile planActiveView ↗
BroadbandActiveEdit ↗
Usage recordPendingView ↗
FEEDBACK03
Alerts & banners
Primary and warning treatments, with optional headings, supporting text and actions.
ⓘ InformationYour request is being processed.View details →
⚠ Attention requiredReview the details before continuing.
DECISION SUPPORT04
Modals
Confirmation, directional, transient and session-timeout patterns.
Confirm your changes
Review the information before you continue.
CancelContinue →
WAYFINDING05
Breadcrumbs & navigation
Long and wrapping breadcrumb trails, responsive header treatments and tab patterns.
Home › Services › Account
ACTION06
Buttons
Super, primary and secondary button families, size variants, warning styles and interaction states.
The component examples above are lightweight visual interpretations of the supplied reference screens, created for this portfolio page. They are not live Telstra components or production UI captures.
04 / RESPONSIVE BEHAVIOUR
Designed to adapt.
Not just shrink.
The supplied references show component and navigation treatments at multiple viewport widths. This matters because layout, hierarchy and interaction affordances need to remain understandable as available space changes.
320Compact mobile
768Tablet / compact layout
1024Small desktop
1360Wide desktop
T ☰
T Search Sign in ☰
T Search Sign in Menu
05 / GOVERNANCE IN PRACTICE
Consistency needs
shared habits.
Governance is not a title held by one person. It is the set of shared practices that helps a distributed team maintain quality as the system evolves.
01Reference
Start with the shared component and its documented usage.
→
02Review
Compare the proposed or implemented interface with the documented pattern.
→
03Identify
Surface differences, missing states or unclear guidance.
→
04Clarify
Feed observations into team discussion and documentation follow-up.
MY OPERATING LENSMake the right thing
Make the right thing
easier to repeat.
My contribution to governance was collaborative: participating in reviews, supporting consistency across the library and reinforcing shared documentation as the reference point for product teams. The available evidence does not establish a formal approval framework or sole ownership of governance decisions.
06 / QUALITY & ACCESSIBILITY LENS
Quality lives in
the details.
The original screens make component states visible. A useful review looks beyond the default appearance and considers the states and contexts that shape real use.
STATE COVERAGE
DefaultHoverPressedActiveInactive
More than the happy path
Check whether important interaction states are represented consistently in the component reference.
RESPONSIVE CLARITY
32076810241360
Behaviour across viewports
Review whether layout, hierarchy and affordances adapt appropriately to the documented screen sizes.
CONTENT & FEEDBACK
ⓘClear status message
Supporting information
Supporting information
Meaning users can understand
Look for clear labels, meaningful feedback and status treatments that do not rely on visual styling alone.
07 / WHAT I TOOK FORWARD
Systems scale when
people can trust them.
Working as a contributor in a cross-functional design-system team reinforced that consistency is sustained through the combination of thoughtful components, usable documentation and ongoing quality conversations.
The most important lesson was practical: a component library only becomes useful when teams can understand how to apply it, recognise its states and know where to look when a pattern does not fit.
This experience continues to inform how I approach design leadership: create clarity, invite contribution, make decisions visible and treat quality as a shared responsibility.
01Design for reuse
02Document for action
03Review with consistency
04Govern collaboratively
EVIDENCE & TRANSPARENCYGrounded in the
Grounded in the
original references.
This portfolio narrative is based on the verified description of my contribution and the complete set of supplied Telstra design-system reference screens. All supplied PNG mockups are reproduced in the original-screen gallery without visual modification.
Provided reference screens35 original PNG screens across foundations, components, navigation, data patterns, feedback and messaging
Verified contributionComponent library · Documentation · Governance contribution · Design audits · Adoption support
Not claimedUnverified adoption figures, delivery savings, performance uplift or sole programme ownership