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 including server-driven UI and Android Material 3.
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, with 12 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:
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.
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 within the compony strategy. Improve delivery Pace through internal systems and process to enable our teams to deliver at a scaleable space. Addressing customer feedback with the visual design scoring low in satisfaction surveys, signalling a gap in user trust and brand perception.
I presented a case that showed how a modernised system would:
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 UX that provided direction while inviting input from designers, 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.
Typically you would have a team working across this rebuild but instead I secured two weeks of the entire product design teams time. I used this time to format a component design sprint which we designed a 80% of the high values components.
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:
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 concepts
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 of 12 designers to create the foundational component library.
In preparation, the governance group:
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
User testing the designs
Mobile drives over 60% of revenue, we validated updates to key conversion components before rollout. Unmoderated testing confirmed 100% task completion on updated primary CTAs, indicating no conversion risk .
We also tested variations of the Watchlist button to understand which elements felt recognisably “Trade Me.” Rather than testing for subjective preference, we focused on behavioural clarity and brand recognition. Research showed the yellow colour, top-right placement, and signature “dog ear” fold were core to its identity, so we retained and refined this interaction rather than modernising it unnecessarily .
5
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:
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
50,000+
component insertions in the first 3 months
3x
increase in system usage
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
Reflection
If I repeated this today
This work highlighted the importance of sequencing, positioning, and balancing short-term adoption with long-term system maturity.
Sequencing over speed: Earlier design → engineering alignment could have accelerated delivery, but would have expanded the scope into a full platform transformation. Positioning Tangram as a design-led initiative made it more adoptable and allowed momentum to build before introducing engineering complexity.
Need for a dedicated platform team: While governance enabled contribution, embedding Tangram within a central platform or design systems team would have improved focus on engineering implementation, tokenisation, and long-term system scalability.
Technical trade-offs in implementation: The system was layered onto existing codebases (iOS: Swift UI, UIKit / Objective-C and Android legacy Views, Jetpack Compose) to increase the speed of delivery. This required the modern design system code to be wrapped in legacy code increasing complexity. A full rebuild would unlock greater long-term efficiency, but required significantly higher upfront investment and alignment.
Positioning as a leadership lever: A significant part of this work was aligning the initiative to company priorities, particularly pace and brand consistency. Securing buy-in was critical, and while support existed, it required consistent reinforcement of design leadership to ensure decisions were upheld at scale.
Designing the system is the easy part, aligning the organisation around it is the real work.
Gallery
iOS
Android
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 including server-driven UI and Android Material 3.
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, with 12 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:
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.
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 within the compony strategy. Improve delivery Pace through internal systems and process to enable our teams to deliver at a scaleable space. Addressing customer feedback with the visual design scoring low in satisfaction surveys, signalling a gap in user trust and brand perception.
I presented a case that showed how a modernised system would:
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 UX that provided direction while inviting input from designers, 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.
Typically you would have a team working across this rebuild but instead I secured two weeks of the entire product design teams time. I used this time to format a component design sprint which we designed a 80% of the high values components.
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:
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 concepts
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 of 12 designers to create the foundational component library.
In preparation, the governance group:
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
User testing the designs
Mobile drives over 60% of revenue, we validated updates to key conversion components before rollout. Unmoderated testing confirmed 100% task completion on updated primary CTAs, indicating no conversion risk .
We also tested variations of the Watchlist button to understand which elements felt recognisably “Trade Me.” Rather than testing for subjective preference, we focused on behavioural clarity and brand recognition. Research showed the yellow colour, top-right placement, and signature “dog ear” fold were core to its identity, so we retained and refined this interaction rather than modernising it unnecessarily .
5
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:
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
50,000+
component insertions in the first 3 months
3x
increase in system usage
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
Reflection
If I repeated this today
This work highlighted the importance of sequencing, positioning, and balancing short-term adoption with long-term system maturity.
Sequencing over speed: Earlier design → engineering alignment could have accelerated delivery, but would have expanded the scope into a full platform transformation. Positioning Tangram as a design-led initiative made it more adoptable and allowed momentum to build before introducing engineering complexity.
Need for a dedicated platform team: While governance enabled contribution, embedding Tangram within a central platform or design systems team would have improved focus on engineering implementation, tokenisation, and long-term system scalability.
Technical trade-offs in implementation: The system was layered onto existing codebases (iOS: Swift UI, UIKit / Objective-C and Android legacy Views, Jetpack Compose) to increase the speed of delivery. This required the modern design system code to be wrapped in legacy code increasing complexity. A full rebuild would unlock greater long-term efficiency, but required significantly higher upfront investment and alignment.
Positioning as a leadership lever: A significant part of this work was aligning the initiative to company priorities, particularly pace and brand consistency. Securing buy-in was critical, and while support existed, it required consistent reinforcement of design leadership to ensure decisions were upheld at scale.
Designing the system is the easy part, aligning the organisation around it is the real work.
Gallery
iOS
Android
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 including server-driven UI and Android Material 3.
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, with 12 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:
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 required strategic sequencing and cultural reset without halting product delivery.
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 within the compony strategy. Improve delivery Pace through internal systems and process to enable our teams to deliver at a scaleable space. Addressing customer feedback with the visual design scoring low in satisfaction surveys, signalling a gap in user trust and brand perception.
I presented a case that showed how a modernised system would:
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 UX that provided direction while inviting input from designers, 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.
Typically you would have a team working across this rebuild but instead I secured two weeks of the entire product design teams time. I used this time to format a component design sprint which we designed a 80% of the high values components.
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:
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 concepts
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 of 12 designers to create the foundational component library.
In preparation, the governance group:
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
User testing the designs
Mobile drives over 60% of revenue, we validated updates to key conversion components before rollout. Unmoderated testing confirmed 100% task completion on updated primary CTAs, indicating no conversion risk .
We also tested variations of the Watchlist button to understand which elements felt recognisably “Trade Me.” Rather than testing for subjective preference, we focused on behavioural clarity and brand recognition. Research showed the yellow colour, top-right placement, and signature “dog ear” fold were core to its identity, so we retained and refined this interaction rather than modernising it unnecessarily .
5
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:
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
50,000+
component insertions in the first 3 months
3x
increase in system usage
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
Reflection
If I repeated this today
This work highlighted the importance of sequencing, positioning, and balancing short-term adoption with long-term system maturity.
Sequencing over speed: Earlier design → engineering alignment could have accelerated delivery, but would have expanded the scope into a full platform transformation. Positioning Tangram as a design-led initiative made it more adoptable and allowed momentum to build before introducing engineering complexity.
Need for a dedicated platform team: While governance enabled contribution, embedding Tangram within a central platform or design systems team would have improved focus on engineering implementation, tokenisation, and long-term system scalability.
Technical trade-offs in implementation: The system was layered onto existing codebases (iOS: Swift UI, UIKit / Objective-C and Android legacy Views, Jetpack Compose) to increase the speed of delivery. This required the modern design system code to be wrapped in legacy code increasing complexity. A full rebuild would unlock greater long-term efficiency, but required significantly higher upfront investment and alignment.
Positioning as a leadership lever: A significant part of this work was aligning the initiative to company priorities, particularly pace and brand consistency. Securing buy-in was critical, and while support existed, it required consistent reinforcement of design leadership to ensure decisions were upheld at scale.
Designing the system is the easy part, aligning the organisation around it is the real work.
Gallery
iOS
Android
