Harshal Malkan.HM.
Back to work

Teachers Mutual Bank

Client
Teachers Mutual Bank
Engagement
Edge Delivery Services build

Delivered a high-performance, block-based frontend architecture with a multi-brand theming system running on a single codebase.

  • AEM Franklin / EDS
  • Multi-brand theming
  • Figma-to-SCSS automation
  • Performance tuning
Teachers Mutual Bank homepage, desktop
Teachers Mutual
UniBank Starter Saver page, mobile
UniBank
Health Professionals Bank, Banking for good section
Banking for good
90-95mobile Lighthouse
90-95
mobile Lighthouse across key pages
1
codebase serving several brands

This build implemented a high-performance, block-based frontend architecture using AEM Franklin (Edge Delivery Services), maintaining 90 to 95 mobile Lighthouse scores across all key pages while diagnosing and resolving component-level performance regressions.

A multi-brand theming system was designed and delivered on a single codebase, alongside a Figma-to-SCSS design token automation script in Node.js that auto-generates typed SCSS variables from Figma exports, removing manual token translation for designers and engineers.

What shipped

  • Block-based frontend architecture on AEM Franklin
  • Multi-brand theming on a single codebase
  • Figma-to-SCSS token automation script (Node.js)
One component, four brandsThe same product comparison block, themed per brand site
  • The savings comparison on the Teachers Mutual Bank site

    Teachers Mutual BankRounded, condensed capitals, gradient band

  • The savings comparison on the UniBank site

    UniBankSquare, light sentence case, charcoal

  • The savings comparison on the Firefighters Mutual Bank site

    Firefighters Mutual BankSquare, capitals, navy with an orange stripe

  • The savings comparison on the Health Professionals Bank site

    Health Professionals BankRounded, bold sentence case, pill buttons

Next case studyPwC RAG AI