Case Study
divider

Responsive Modular Templates

Email Design System for Lloyds Banking Group

At Oracle, I worked on the design, development, and documentation of a fully responsive, accessible, and dark mode-optimised modular email template design system for Lloyds Banking Group. This involved creating a master HTML framework and a set of re-usable content modules which could be flexibly stacked and re-arranged in any configuration to build out custom emails efficiently and at scale for high volumes. To standardise the design process and drive cost-savings, modules were reskinned for multiple brands (using custom fonts, logos, colours, and imagery), and saved out as separate modular templates, each maintaining a strong visual identity that adheres to its individual brand style guidelines. Brands include: Lloyds Bank, Halifax, Bank of Scotland, MBNA, and more.

Module layouts range from simple to complex, and are coded to support personalised and dynamic content, meaning creatives and copy can be specifically targeted and optimised based on customer data (name, location, age etc.) using the Oracle Eloqua platform. Several advanced kinetic modules (such as sliders, carousels and accordions) were also developed and added to the modular templates, to allow customers to interact with elements within the email and increase their level of engagement.

Each module was rigorously tested using Litmus (across 70+ email client configurations) as well as live devices (on desktop, tablet and mobile - both Android and iOS) to identify potential rendering issues and enable bugs to be fixed prior to code deployment. This not only ensured a seamless experience for end users, but also meant our internal Campaign team spent significantly less time render-testing emails on an ad-hoc, campaign-to-campaign basis.

Scope

UI/UX, Dark Mode, Accessibility, HTML/CSS

Year

2019 – today

Softwares Used

Snapshot of the retail modular template matrix document
Wireframes (both desktop and mobile), guidelines (image sizes, character counts etc.) and example visuals

Get in touch

Would you like to work together or simply chat about a project? Don't hesitate to contact me.