Tangram Design System
Transforming a neglected design system into a company-wide operating model
Systems Design
Strategic Leadership
Platform Thinking
Business Impact
TL:DR
When I stepped into the Principal Product Designer role at Trade Me, the mobile design system (Tangram) had lost trust and adoption had declined by 50%. Designers were bypassing it, visual consistency was breaking down, and the product no longer reflected the evolving brand.
I repositioned Tangram from a visual library to strategic infrastructure, restoring adoption, and enabling future platform initiatives like server-driven UI.
Scope
Scope: iOS and Android across 4 business units (Marketplace, Property, Motors, Jobs)
Timeline
3-month vision + rebuild phase, followed by phased engineering rollout
Role
Principal Product Designer leading vision, governance, and executive alignment
Impact
3x increase in system usage within 3 months, 10,000+ component insertions, reversed 50% efficiency decline
The context
Background
Trade Me operates across four business units with approximately 200 designers and engineers, 12 are witch product designers. The mobile apps represent the majority of company revenue. The existing design system, created in 2017, had not evolved alongside the brand or the product’s growing complexity.
While marketing had modernised the brand to appeal to a younger audience, the product experience lagged behind. The mobile apps appeared fragmented and visually inconsistent undermining the very brand investments the company was making.
The Problem
The decline of Tangram was measurable, not anecdotal. Figma analytics showed a 50% drop in component usage as the new visual direction emerged. Designers were bypassing the system to ship faster, which paradoxically slowed teams down and introduced long-term inefficiencies.
The breakdown manifested in:
- Multiple primary button styles across the same journey
- Inconsistent corner radii and colour usage
- Components in design that did not match production
- Engineering receiving bespoke UI styling requests
Simultaneously, 88% of designers reported not having time to contribute to Tangram improvements. The system had become a passive artefact rather than an active operating model.
Constraints
This work operated within meaningful constraints. This was not a greenfield rebuild. It required strategic sequencing and cultural reset without halting product delivery.
- Mobile apps drove over 60% of company revenue, making visual change medium risk
- Engineering resources were not initially dedicated to a system rebuild
- Designers were fully allocated to delivery squads
- Material 3 changes on Android introduced additional platform pressure
Vision and Design Strategy
Reframing Tangram as Strategic Infrastructure
Design is often a hard sell in an organisation due to the difficulty in attributing direct business value. However, I saw an opportunity. Two insights helped create urgency:
Pace: Designers were bypassing the system to move faster—ironically reducing efficiency across teams.
Customer feedback: Visual design scored low in satisfaction surveys, signalling a gap in user trust and brand perception.
I presented a case that showed how a modernised system would:
- Increase delivery speed and consistency
- Improve customer sentiment
- Enhance collaboration, onboarding, and team confidence
- Create brand alignment across marketing and product
- Reduce technical debt reduction
- Enable server-driven UI, which depended on Tangram components
- Achieve broader UX accountability goals
I reframed Tangram as strategic infrastructure rather than a visual refresh. I sold the vision and gained leadership buy-in.
Presentation to the heads of product
My Leadership
Shared Vision
I believe strong systems require a shared vision of the future. I created a clear vision for the product UI that provided direction while inviting input from designers, principals, and senior stakeholders. This ensured alignment without prescribing solutions too early.
Empowering the Team
My role was to empower, not dictate or become a single point of failure. I facilitated workshops, encouraged collaboration, and defined shared rules owned by the team. I identified designers with strong systems capability and empowered them to take ownership of the system’s evolution and governance.
Collaboration Without Drag
I prioritised alignment without slowing momentum. Through lightweight rituals, clear deliverables, and regular visibility, I ensured the system was both loved by designers and trusted by the business.
The process
1
Frame the Problem with Key Stakeholders
I began by aligning with the Heads of Product on the core issue: designers were bypassing the existing system to move faster, creating inconsistency and long-term inefficiency.
This conversation reframed the design system from a design improvement into a delivery and customer trust problem, creating urgency and securing early support to proceed.
2
Establish the Vision and Principles
Before designing any components, I ran a two-week vision workshop with the Principal Designers to define the future visual direction of Trade Me’s UI.
Together we defined:
- The visual principles of the system
- How brand, user content, and OS styling should coexist
- A shared definition of what “good” looked like across the customer journey
Stakeholder check-ins with senior leadership ensured alignment before moving into execution. This created a clear north star that would guide every system decision.
Vision
Product threads to show when to elevate different aspects (Brand, user content and platform
3
Facilitated a Component Design Sprint
Prior to this initiative, I had formed a Design System Governance Group of designers with strong systems thinking capability. This group became the foundation for delivering at speed without sacrificing quality.
With this group, I designed a two-week sprint involving the entire product design team to create the foundational component library.
In preparation, the governance group:
- Identified and prioritised the essential components
- Debated implementation approaches (type scaling, spacing logic, token structure)
- Created guardrails that enabled fast decision-making during the sprint
- This meant the sprint was not chaotic production. It was a pre-governed system build.
During the sprint, 12 designers built 80% of the component library while also up skilling in design system practices. This rebuilt confidence and ownership that had been missing from the previous system.
Component sprint fig jam presentation and workflow (Selection of screens)
4
Build the Business Case and Align Engineering
After the sprint, the governance group and I tested components in real product layouts to validate them in real scenarios and prepare for engineering adoption.
I then partnered with the Head of Product to create a business case for executive approval, focused on reducing long-term design and technical debt across multiple business units.
Once approved, I worked directly with Principal Engineers to define:
- The engineering approach to tokens and components
- Roadmap and rollout timelines
- How the system would be implemented across apps
This ensured the design system became an organisation-wide operating model, not a design artefact.
Execution
Component library
Refreshed the component library to create brand alignment across marketing and product. This aligns with our strategic goal to modernise our brand for a younger audience.
Foundation
We introduced a foundations library what includes new type, spacing, primitive and systemic colours and a comprehensive elevations structure.
Impact
Tangram shifted from a neglected library to a governed operating model. Designers regained trust in the system, and the mobile ecosystem now reflects a unified visual identity.
Strategically, Tangram now underpins server-driven UI and provides stable infrastructure for scalable UX experimentation across a majority of company revenue surface.
Within 3 months of release
10,000+
component insertions
3x
increase in system usage
50%
Reversed prior 50% efficiency decline
What This Demonstrates
Level Strategic Framing
Repositioned a declining design system as platform infrastructure tied to design pace, delivery speed, and future server-driven UI initiatives.
Strategy
Business Impact
Platform Thinking
Systems Thinking
Designed Tangram as an extensible architecture. Introducing structured colour systems, foundational rules, and platform differentiation. Prioritised long-term scalability rather than short-term visual polish.
Systems Design
Architecture
Scalability
Cross-Functional Influence
Partnered with a Head of Product and Principal Engineer to define rollout sequencing, including Material 3 alignment while future-proofing for server-driven UI.
Collaboration
Influence
Cross-Functional Strategy
Organisational Leadership
Aligned four business units and executive stakeholders around a shared vision. Established governance, clarified decision authority, and created contribution pathways.
Leadership
Alignment
Decision Clarity
Change Management
Reversed a 50% decline in design system usage by creating a focused reset moment. This rebuilt trust shifting behaviour across the design team.
Change Leadership
Adoption
Culture Shift
Capability Building
Upskilled 12 designers in system thinking and governance practices, embedding Tangram as an operating model rather than a static library.
Coaching
Team Growth
Practice Development
Gallery
iOS
Android
Tangram Design System
Transforming a neglected design system into a company-wide operating model
Systems Design
Strategic Leadership
Platform Thinking
Business Impact
TL:DR
When I stepped into the Principal Product Designer role at Trade Me, the mobile design system (Tangram) had lost trust and adoption had declined by 50%. Designers were bypassing it, visual consistency was breaking down, and the product no longer reflected the evolving brand.
I repositioned Tangram from a visual library to strategic infrastructure, restoring adoption, and enabling future platform initiatives like server-driven UI.
Scope
Scope: iOS and Android across 4 business units (Marketplace, Property, Motors, Jobs)
Timeline
3-month vision + rebuild phase, followed by phased engineering rollout
Role
Principal Product Designer leading vision, governance, and executive alignment
Impact
3x increase in system usage within 3 months, 10,000+ component insertions, reversed 50% efficiency decline
The context
Background
Trade Me operates across four business units with approximately 200 designers and engineers, 12 are witch product designers. The mobile apps represent the majority of company revenue. The existing design system, created in 2017, had not evolved alongside the brand or the product’s growing complexity.
While marketing had modernised the brand to appeal to a younger audience, the product experience lagged behind. The mobile apps appeared fragmented and visually inconsistent undermining the very brand investments the company was making.
The Problem
The decline of Tangram was measurable, not anecdotal. Figma analytics showed a 50% drop in component usage as the new visual direction emerged. Designers were bypassing the system to ship faster, which paradoxically slowed teams down and introduced long-term inefficiencies.
The breakdown manifested in:
- Multiple primary button styles across the same journey
- Inconsistent corner radii and colour usage
- Components in design that did not match production
- Engineering receiving bespoke UI styling requests
Simultaneously, 88% of designers reported not having time to contribute to Tangram improvements. The system had become a passive artefact rather than an active operating model.
Constraints
This work operated within meaningful constraints. This was not a greenfield rebuild. It required strategic sequencing and cultural reset without halting product delivery.
- Mobile apps drove over 60% of company revenue, making visual change medium risk
- Engineering resources were not initially dedicated to a system rebuild
- Designers were fully allocated to delivery squads
- Material 3 changes on Android introduced additional platform pressure
Design Strategy
Reframing Tangram as Strategic Infrastructure
Design is often a hard sell in an organisation due to the difficulty in attributing direct business value. However, I saw an opportunity. Two insights helped create urgency:
Pace: Designers were bypassing the system to move faster—ironically reducing efficiency across teams.
Customer feedback: Visual design scored low in satisfaction surveys, signalling a gap in user trust and brand perception.
I presented a case that showed how a modernised system would:
- Increase delivery speed and consistency
- Improve customer sentiment
- Enhance collaboration, onboarding, and team confidence
- Create brand alignment across marketing and product
- Reduce technical debt reduction
- Enable server-driven UI, which depended on Tangram components
- Achieve broader UX accountability goals
I reframed Tangram as strategic infrastructure rather than a visual refresh. I sold the vision and gained leadership buy-in.
Presentation to the heads of product
My Leadership
Shared Vision
I believe strong systems require a shared vision of the future. I created a clear vision for the product UI that provided direction while inviting input from designers, principals, and senior stakeholders. This ensured alignment without prescribing solutions too early.
Empowering the Team
My role was to empower, not dictate or become a single point of failure. I facilitated workshops, encouraged collaboration, and defined shared rules owned by the team. I identified designers with strong systems capability and empowered them to take ownership of the system’s evolution and governance.
Collaboration Without Drag
I prioritised alignment without slowing momentum. Through lightweight rituals, clear deliverables, and regular visibility, I ensured the system was both loved by designers and trusted by the business.
The process
1
Frame the Problem with Key Stakeholders
I began by aligning with the Heads of Product on the core issue: designers were bypassing the existing system to move faster, creating inconsistency and long-term inefficiency.
This conversation reframed the design system from a design improvement into a delivery and customer trust problem, creating urgency and securing early support to proceed.
2
Establish the Vision and Principles
Before designing any components, I ran a two-week vision workshop with the Principal Designers to define the future visual direction of Trade Me’s UI.
Together we defined:
- The visual principles of the system
- How brand, user content, and OS styling should coexist
- A shared definition of what “good” looked like across the customer journey
Stakeholder check-ins with senior leadership ensured alignment before moving into execution. This created a clear north star that would guide every system decision.
Vision
Product threads to show when to elevate different aspects (Brand, user content and platform
3
Facilitated a Component Design Sprint
Prior to this initiative, I had formed a Design System Governance Group of designers with strong systems thinking capability. This group became the foundation for delivering at speed without sacrificing quality.
With this group, I designed a two-week sprint involving the entire product design team to create the foundational component library.
In preparation, the governance group:
- Identified and prioritised the essential components
- Debated implementation approaches (type scaling, spacing logic, token structure)
- Created guardrails that enabled fast decision-making during the sprint
- This meant the sprint was not chaotic production. It was a pre-governed system build.
During the sprint, 12 designers built 80% of the component library while also up skilling in design system practices. This rebuilt confidence and ownership that had been missing from the previous system.
Component sprint fig jam presentation and workflow (Selection of screens)
4
Build the Business Case and Align Engineering
After the sprint, the governance group and I tested components in real product layouts to validate them in real scenarios and prepare for engineering adoption.
I then partnered with the Head of Product to create a business case for executive approval, focused on reducing long-term design and technical debt across multiple business units.
Once approved, I worked directly with Principal Engineers to define:
- The engineering approach to tokens and components
- Roadmap and rollout timelines
- How the system would be implemented across apps
This ensured the design system became an organisation-wide operating model, not a design artefact.
Execution
Component library
Refreshed the component library to create brand alignment across marketing and product. This aligns with our strategic goal to modernise our brand for a younger audience.
Foundation
We introduced a foundations library what includes new type, spacing, primitive and systemic colours and a comprehensive elevations structure.
Impact
Tangram shifted from a neglected library to a governed operating model. Designers regained trust in the system, and the mobile ecosystem now reflects a unified visual identity.
Strategically, Tangram now underpins server-driven UI and provides stable infrastructure for scalable UX experimentation across a majority of company revenue surface.
Within 3 months of release
10,000+
component insertions
3x
increase in system usage
50%
Reversed prior 50% efficiency decline
What This Demonstrates
Level Strategic Framing
Repositioned a declining design system as platform infrastructure tied to design pace, delivery speed, and future server-driven UI initiatives.
Strategy
Business Impact
Platform Thinking
Systems Thinking
Designed Tangram as an extensible architecture. Introducing structured colour systems, foundational rules, and platform differentiation. Prioritised long-term scalability rather than short-term visual polish.
Systems Design
Architecture
Scalability
Cross-Functional Influence
Partnered with a Head of Product and Principal Engineer to define rollout sequencing, including Material 3 alignment while future-proofing for server-driven UI.
Collaboration
Influence
Cross-Functional Strategy
Organisational Leadership
Aligned four business units and executive stakeholders around a shared vision. Established governance, clarified decision authority, and created contribution pathways.
Leadership
Alignment
Decision Clarity
Change Management
Reversed a 50% decline in design system usage by creating a focused reset moment. This rebuilt trust shifting behaviour across the design team.
Change Leadership
Adoption
Culture Shift
Capability Building
Upskilled 12 designers in system thinking and governance practices, embedding Tangram as an operating model rather than a static library.
Coaching
Team Growth
Practice Development
Gallery
iOS
Android