01 — Research & Audit
User feedback and internal workflow analysis identified a set of compounding problems across the product pages. The issues were not just visual — they ran through the data architecture, accessibility compliance, and broker workflows. Each problem made the others worse.
PNG images, not real text — Product tables were rasterised images — not indexable, not accessible, impossible to render responsively or read with screen readers.
Colour-coded tables failed WCAG — Colour was used as the sole differentiator between product types, presenting significant contrast and comprehension failures for users with visual impairments.
Full PDF download required — To view any product detail or criteria, brokers had to download the entire product guide PDF — regardless of whether they needed one product or fifty.
Three disconnected systems — Product tables, calculators and sourcing system API connectors were entirely separate, causing data discrepancies, version conflicts and regular failures.
No product filtering — Brokers had no way to filter or search products by criteria. Every visit required manually scanning the entire table to find relevant products for a client.
Tripled update effort — Any rate change required manual updates to the product tables, calculators and sourcing systems independently — a 2-day turnaround for every update cycle.
No mobile optimisation — PNG image tables could not reflow for smaller screens. The pages were effectively unusable on mobile or tablet devices.
Screen real estate — The product range was extensive with no accordion or grouping system, creating page overwhelm and making it difficult to locate specific product tiers quickly.
02 — Wireframes
After conducting broker user research and discovery sessions, I wireframed two distinct page types: the product listing overview and the individual product detail page. The wireframes were built to solve the specific problems uncovered in research — accordion grouping, real HTML tables, block-based segmentation, and a dedicated single-product view.
Wireframe — Product listing
Wireframe — Single product
Wireframe decisions — product listing page
Wireframe decisions — single product detail page
03 — Product Listing Page
The new product listing page replaced the previous PNG image tables with a fully accessible, filterable HTML system. Products are grouped by range in tabs, each displaying a condensed rate table with a direct link to the full product detail page.
Wireframe
After — Live site
Annotations — what changed on the live product listing page
04 — Single Product Page
Each product now has a dedicated detail page built from a reusable template. Brokers can view full criteria, fees, incentives and related products without downloading anything — and print a clean single-product output directly from the page.
Wireframe
After — Live site
Annotations — what changed on the live single product page
05 — Data Architecture
The most complex challenge was not the visual redesign — it was the data. Product rate information arrived as Excel spreadsheets, then had to be manually re-entered into the website tables, the calculators, and the sourcing system endpoints separately. Every rate change required three parallel manual updates, took two days, and introduced regular data discrepancies.
The problem: Three disconnected systems. Three manual update cycles. Two-day turnaround per rate change. No single version of the truth. Any error in one system would not be reflected in the others until the next manual update — meaning brokers could be working from inconsistent data across different tools.
Before — The triple-entry problem
↑ Excel spreadsheet → 3× manual entries → 2-day turnaround → high risk of discrepancy
After — Single CSV data source
↑ One import → all systems updated simultaneously → 20 minutes total
The interim solution: A long-term backend rebuild was the eventual goal but required time and budget. Working with the product and development team, I designed an interim system using custom WordPress post types to generate a single structured CSV. The Excel spreadsheet format was updated to align with the input fields required, making the export → import process fast and consistent. This became the single source of truth — one file, one update, everything in sync.
06 — Full Scope of Work
07 — Outcome
The product page rebuild delivered measurable improvements across accessibility, broker workflow efficiency, data accuracy and commercial performance.
A unified CSV data architecture reduced mortgage rate update time by 98% — keeping Pepper ahead of competitor response times.
The speed advantage delivered by the new system directly contributed to a 20% revenue increase in the following year.
Real HTML tables, removed colour-coding and accessible typography replaced all PNG image-based product tables across the site.
One CSV now feeds product tables, mortgage calculators and sourcing system endpoints — eliminating data discrepancies and version conflicts.
