The Brief: Turn Boodles photography and brand guidelines into a modular email system. The goal was to create a flexible set of components that work across different campaign types while keeping the brand consistent.
CLIENT | boodles.com
BRAND | Boodles
The Process:
AI Wireframing:
Used a combination of manual editing in Figma and Claude via the Terminal console MCP tool to develop the initial component logic and wireframe structures.
Figma Library Build:
Built the full UI component library in Figma, covering headers, heroes, product grids, editorial sections, CTAs, and footers.
Component Testing:
Tested the system in practice by assembling full email layouts directly in Figma. This highlighted real-world design issues, such as Figma automatically applying crop to images, which has stretch issues if components are resized. Known figma issue to be aware of.
Campaign Stress-Testing:
Tested component flexibility across five distinct briefs:
- Ashoka Cut
- High Jewellery
- Classic Gifting
- Pink Diamonds
- Bridal Rings
The Solution: Combining AI-generated wireframe logic with Figma UI design produced a practical, fully tested component library. A single set of UI components can now power varied campaign layouts, from direct sales to editorial storytelling, without having to design new templates from scratch.