Boots.com’s outdated CMS restricted trading teams from optimising product discovery and engagement. This project modernised key pages with a scalable system, improving conversion and responsiveness to market trends. The redesign also aligned with the Boots brand refresh, creating a more dynamic experience to attract a younger audience.
Early research
As Boots underwent a brand refresh, we integrated its new identity into the CMS design through user surveys and testing of typography, imagery, and tone. A heuristic review and competitor analysis helped refine content hierarchy, ensuring a modern yet distinctly Boots experience aligned with UX best practices.
Requirements & Prioritisation
At the outset of the design phase, we conducted stakeholder workshops with trading teams to gather high-level requirements. These insights were then distilled into user stories, which were systematically prioritised based on their estimated impact and business value.
Mission & journey mapping
This project leveraged Adobe Experience Manager to deliver seamless omni-channel personalization across in-store, online, CRM, social, and .com. By mapping customer journeys and user behavior, we ensured a consistent design and messaging strategy to drive engagement and conversions.
To facilitate stakeholder discussions and prioritisation, I sketched a set of templates and new components as visual stimuli. I used a colour coded system to define hierarchy and content distribution, ensuring clarity in page structure and component usage.
Breakpoint analysis
Before designing components, we redefined Boots.com’s grid system by conducting a breakpoint analysis. I assessed Adobe’s OOTB breakpoints, site data, and industry standards to align with evolving customer device usage. This strategic update created a more user centric experience, improving responsiveness and usability
High fidelity Wires
We worked closely with engineers in an agile environment, delivering wireframes sprint by sprint. Using Sketch and Zeplin, we ensured seamless handoff, with components designed for maximum flexibility through configurable parameters. Wireframes were built to a high specification across all breakpoints, ensuring smooth integration with the final digital design language.
