Old Mutual: Building theLogic Layer

48 tenant sites. Over 3,500 legacy pages. One structural mandate: engineer a bulletproof template system to scale across every financial vertical. Four weeks to design an architecture modular enough to absorb chaotic, shifting commercial priorities without breaking.

Back to Work
Role: Senior Product Designer Year: 2026 Stack: Figma UI3, Design Matrices, Structural Governance

// 01

Overview

Old Mutual presented a hyper-compressed sprint defined by a stark operational reality: a legacy infrastructure spanning 48 tenant sites and ~3,500 pages. Users were buried under exhaustive information, conversion paths surfaced far too late, and the Master Library V2 was essentially a locked, unstyled wireframe skeleton with no behavioural rules. Zero onboarding was available in a highly siloed, parallel-moving corporate environment.

The finding that steered the work: treat lead strategy as a modular slot in the page anatomy, so quote and contact paths could surface earlier without rebuilding every vertical.

My role was to engineer a Logic Layer—a solution-agnostic framework sitting atop this constraints-driven environment.

With functional priorities constantly fragmenting across Tax-Free Savings, Retirement, and Insurance, the mission pivoted from cosmetic templates to a purely structural solution: consolidate a scattered template landscape into four core page levels, then define scalable anatomies that could natively absorb severe mid-flight scope changes. This commercial logic, treated as structural modularity, is what was delivered.

Vertical Pipeline Assemblies diagram — Input Chaos (infrastructure, library debt, brief pivots) feeding the Logic Layer (four-level template suite, product comparison engine, 5-group anatomy) into assembled Old Mutual verticals.
Vertical Pipeline Assemblies — 48-site infrastructure chaos, library debt, and mid-sprint pivots on the left; the Logic Layer (four template levels, comparison engine, 5-group anatomy) in the middle; assembled verticals on the right.

// 02

Challenge

The live web infrastructure was running on architecture designed six years prior. Three compounding pressures dictated the sprint:

The Technical Vacuum

The newly deployed Master Library V2 provided components, but they lacked visual styling, depth, or high-fidelity definition. Without a systemic UI layer and rules for how these components should stack, proving the templates across complex financial verticals was impossible.

The Priority Carousel

The business directives were highly unstable. I was constantly forced to pivot focus across various disparate journeys. This left artifacts of half-finished explorations across the ecosystem and demanded a system that could handle severe scope changes mid-flight.

The Institutional Friction

A significant portion of the project timeline was absorbed by navigating rigid corporate silos and resolving contradictory stakeholder briefs. Governance pressure to "just use the library" consistently clashed with the technical inability to create new variables to override the system. I had to engineer workarounds within this highly constrained environment, leading to stakeholder friction that absorbed critical time.

// 03

Process & Architecture

Delivering static templates in a shifting environment would have failed at handover. Before touching layouts, I ran a System Mapping Audit cross-referencing live content against the bare Figma library, while partnering directly with the Information Architecture (IA) team. Together, we consolidated over 12 scattered template explorations down to four core structural levels:

L1Global Home

L2Intent Landing

L3Category Landing

L4Item Detail

Alongside these levels, I established a standalone Product Comparison Engine designed to be deployed flexibly across L2, L3, or L4 pages based on user intent and data density.

To power high-volume intent pages without requiring constant redesigns, I engineered the 5-Group Anatomy. Serving as the modular engine for L2 and L3 landing structures, it featured swappable Strategic Slots — more than one, configured by page template and product vertical. When commercial directives suddenly pivoted (such as driving lead generation or swapping journey objectives mid-sprint), new requirements were slotted directly into the anatomy without breaking the underlying page architecture.

To protect delivery against constant institutional friction and brief changes, I deployed an operational firewall: a chronological Decision Log in Google Sheets. Every blocker, pivot, and brief change was timestamped, creating an honest, unassailable record of architectural rationale.

// SYSTEM_SPEC_SHEET

PAGE_TEMPLATES :: STRUCTURAL_LEVELS

[ L1 Global Home ]Site-wide entryBrand, journey start, global nav
[ L2 Intent Landing ]High-volume journey start5-Group Anatomy applies
[ L3 Category Landing ]Taxonomy browse5-Group Anatomy applies
[ L4 Item Detail ]Product / policy conversionItem-level decision and CTA
[ Product Comparison ]Standalone engineDeploys across L2 / L3 / L4

// SYSTEM_FLOW

5-GROUP_ANATOMY :: STRATEGIC_SLOT_ROUTING

// PROCESS_RENDER :: ANATOMY_WIREFRAME

CSS_WIREFRAME :: PAGE_SKELETON_BLUEPRINT

[ ORIENTATION ]

> Contextual grounding before the user scrolls.

[ CORE ROUTING ]

> Primary navigation and feature toggles.

[ LEAD STRATEGY (SWAPPABLE SLOT) ]// MODULAR

> The commercial intercept. Can swap from Quote Input to Callback Form without breaking the section intent.

[ DECISION & ADVICE ]

> Comparative logic. Dense data contained in identical bento containers.

[ SUPPORTING ]

> Secondary reassurance and legal constraints.

// SYSTEM_LOG :: GOOGLE_SHEETS_DECISION_FIREWALL

CHRONOLOGICAL_DECISION_LOG :: OPERATIONAL_FIREWALL

[ 2026-10-12 09:14:02 ][ WARN: ARCHITECTURE_VACUUM ]
↳ System Mapping Audit complete. Bare V2 library offers zero visual system or structural hierarchy.
[ 2026-10-15 14:30:00 ][ SYS_UPDATE: LOGIC_LAYER ]
↳ Engineered 'Soft Bento' system to bypass variable creation blockers. Templates now assemblable via intent-based slots.
[ 2026-10-21 11:05:12 ][ CRITICAL: COMMERCIAL_PIVOT ]
↳ Stakeholder directive: Massive business push for lead generation. Journeys shifting across various financial verticals.
[ 2026-10-23 16:45:00 ][ RESOLVED: SLOT_SWAP ]
↳ Commercial pivot absorbed by swapping generic behaviour slot for modular 'Lead Strategy'.
SYSTEM_LOG :: Google Sheets Decision Firewall — chronological record of blockers, pivots, and resolutions.
Redacted excerpt from the Project Log: Product Journey Pivots Google Sheet — timestamped brief changes, blockers, and cross-functional pivots. Stakeholder names redacted.
The operational firewall in situ — Google Sheets Project Log of brief changes, blockers, and pivots (stakeholder names redacted).

// 04

Design Decisions & Rationale

// DESIGN_DECISION :: COMPARISON_MATRIX_BEHAVIOUR

COMPONENT_COMPARISON :: LEGACY_VS_PROTOTYPE

[ SYSTEM: LEGACY ]// [ STATUS: FAILED_MOBILE_UX ]

SpecProduct AProduct BProduct CProduct D
Attr 01
Attr 02
Attr 03
Attr 04

> ERROR: Horizontal scroll required. Choice paralysis detected in dense financial data.

[ SYSTEM: PROTOTYPE_LOGIC ]// [ STATUS: ENGAGEMENT_RETAINED ]

[ Product A ]

  • ↳ Attribute 01
  • ↳ Attribute 02
  • ↳ Show Differences Only (Toggle)

[ Product B ]

  • ↳ Attribute 01
  • ↳ Attribute 02
  • ↳ Show Differences Only (Toggle)

> RESOLVED: Fixed container constraints. Logic-driven comparison with native lead injection.

DESIGN_DECISION :: Comparison Matrix Behaviour — resolving choice paralysis and mobile overflow.

// 05

Outcome

In four weeks, I established the Logic Layer and defined the page architecture as a documented, reusable framework: four structural levels, a standalone Product Comparison Engine, and the 5-Group Anatomy as the modular engine for L2 and L3. I architected the foundational logic for various flows to prove the system could deliver complex, conversion-ready structures at pace.

What I provided was commercial logic made structural. A designer could take a vertical, select the structural level, deploy comparison where intent and data density required it, and populate the Strategic Slots required by that template and vertical, using the same grammar.

2026 Style Extension mood board — Soft Bento TFSA dashboard tiles: wealth headline, deposit action, balance, annual allowance, recent activity, and why-TFSA banner.
TFSA 2026 Style Extension mobile — Secure Your Future hero, Quick Invest form, and balance / contribution / tax-saved status cards.
2026 Style Extension — Soft Bento mood board beside the TFSA landing hero, showing the visual system applied to production components.
Product comparison prototype — desktop horizontal matrix and mobile card layout side by side, showcasing the intended logic for complex product comparisons.
Working Figma prototype — desktop and mobile. Showcasing the intended logic for complex product comparisons.

// 06

Reflection

This project reinforced what senior-level craft means at enterprise scale: the commercial outcome and the structural system are the same problem. Because the logic was modular, major shifts in commercial strategy could be treated as feature swaps.

However, a core challenge was a misalignment in design maturity. While the structural thinking was resolved, stakeholder focus remained heavily indexed on visual execution rather than systemic architecture.

The reality of this enterprise handoff was that structural integrity was sometimes compromised before reaching the final stakeholders. In final journey assemblies, meticulously planned sections were rearranged outside of their intended modular purposes. This sprint served as a sharp reminder that structural clarity and governance are incredibly difficult to maintain without strict, unified institutional alignment from the foundation up.