01 — Research & Audit
Before any design work began, I mapped the full user journey across every audience type — brokers, first-time buyers, remortgagers, and returning customers. This process exposed the structural problems in the existing site and informed every decision that followed.
Process: User journey mapping identified 13 steps, 2 decision points and multiple drop-off moments in the broker journey alone. This underpinned the sitemap restructure, navigation redesign, and page hierarchy decisions throughout the project.
Process — User Journey Map
Annotations — what this informed
The audit surfaced the following specific issues the redesign needed to address:
Inconsistent visual identity — No style system governing colour, type or layout across the site.
Staged photography — Disconnected from the real customers Pepper Money serves.
Reading age of 15 — Condescending, jargon-heavy copy excluding the people who needed clarity most.
Slow loading — Oversized imagery, video backgrounds and excessive JavaScript on every page.
WCAG failures — Across colour contrast, font choices and conflicting H1–H4 heading hierarchy.
Mega menu — Consumed the full desktop viewport. Mobile required excessive scrolling with no grouping.
Key information difficult to find — No clear user journey for customers or brokers across an extensive page count.
No global components — Repeated hardcoded elements across every page made updates slow and inconsistent.
02 — Information Architecture
The existing site had no logical structure tying its pages together. Content had grown organically without coherent IA, making navigation difficult for both users and search engines. I rebuilt the entire sitemap from scratch — categorising every page, grouping by user type, and establishing a clear hierarchy that drove the new navigation.
Process: Every existing page was audited and re-categorised into four top-level navigation areas: Broker, Customer, About Us, and Search. Each area was structured with logical sub-categories, ensuring no important content was more than two clicks from the homepage.
Process — Final Sitemap
Annotations — what this shows
03 — Homepage
With the sitemap confirmed, I moved into wireframing. The homepage wireframe established the structural logic — audience splits, content hierarchy, product discovery and social proof — before any visual decisions were made.
Wireframe
After — Live site
Wireframe to final — what was decided and why
04 — Broker Section
The broker landing page wireframe gave the broker audience a dedicated, structured entry point completely separate from the customer journey. The wireframe logic was carried forward and extended into the ‘Be more you’ campaign page.
Wireframe
After — Live site
Broker wireframe to final — what was decided and why
05 — Product Pages
The residential mortgage products page was among the most complex on the site — rates, criteria, calculators and broker tools all on one page. The challenge was clear visual hierarchy so brokers could scan quickly, while customers could understand without jargon.
After — Residential Mortgage Products
Annotations — what changed
06 — Product Detail
Each mortgage product now has a clean dedicated detail page — built from a reusable template with consistent components, clear criteria tables, and a global CTA block. New products can be published quickly without rebuilding each page from scratch.
After — Product Detail (Pepper48 Light)
Annotations — what changed
07 — Interactive Tools
The loan calculator was rebuilt as a clean, accessible interactive tool — stripped of background complexity, consistent typography, accessible colour ratios. Built as a global component, injectable into any relevant landing page via shortcode.
After — Homeowner Loan Calculator
Annotations — what changed
08 — Search
The previous site had no meaningful search. Finding specific criteria, products or guidance required users to navigate multiple levels deep. I built a new Algolia-powered search that continuously re-maps the entire site and presents results in grouped categories for customers, brokers and search engines.
After — Search Results
Annotations — what changed
09 — Campaign Pages
The annual Specialist Lending Study is one of Pepper Money’s highest-value content assets. The redesigned landing page applies all new brand principles — clear hierarchy, modular data sections, accessible colour usage and consistent CTAs.
After — Specialist Lending Study 2025/26
Annotations — what changed
10 — Full Scope of Work
Every change was deliberate and connected — from strategic decisions around architecture and navigation, through to execution of individual component design.
11 — Outcome
A coherent identity across every page — governed by a single design system with reusable global components.
Video removed, assets optimised, codebase streamlined — pages load dramatically faster across all devices.
Copy simplified from reading age 15 to 8 — genuinely inclusive for Pepper’s core customer base.
Colour ratios, fonts and heading structure all brought into compliance across every page and device.
