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// 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.

// 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:
L1 – Global Home
L2 – Intent Landing
L3 – Category Landing
L4 – Item 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
// SYSTEM_FLOW
5-GROUP_ANATOMY :: STRATEGIC_SLOT_ROUTING
// PROCESS_RENDER :: ANATOMY_WIREFRAME
CSS_WIREFRAME :: PAGE_SKELETON_BLUEPRINT
// SYSTEM_LOG :: GOOGLE_SHEETS_DECISION_FIREWALL
CHRONOLOGICAL_DECISION_LOG :: OPERATIONAL_FIREWALL

// 04
Design Decisions & Rationale
// DESIGN_DECISION :: COMPARISON_MATRIX_BEHAVIOUR
COMPONENT_COMPARISON :: LEGACY_VS_PROTOTYPE
[ SYSTEM: LEGACY ]// [ STATUS: FAILED_MOBILE_UX ]
| Spec | Product A | Product B | Product C | Product 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.
// 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.



// 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.