Driving website engagement through updated visual communication, information architecture and clear documentation

Web overhall

desktop and mobile screens of the Post Office website landing page acccented with a pink background and an inflatable red crab holding a travel money card in it's right claw

Company

Post Office Ltd

Team

UX, Research, Development and Conversion rate optimisation teams. Owned the design execution, documentation handover, and QA through to delivery

Timeline

2022-2024

View website

My Role

As Senior Visual UI Designer I elevated the visual direction of the website redesign, translating user data and UX strategy into scalable components that simplify complex user journeys across web and mobile.

Key outcomes

Reduced drop-offs on high-traffic product pages like Travel Insurance by 25% through IA redesign
Boosted task completion and CTA conversions by 20% through simplified navigation across key products
Increased CMS efficiency through updated design system documentation & component walkthroughs with product teams
Enabled faster delivery across 20+ services with scalable UI patterns
Cut dev and QA time by 40% through clear documentation

❓ The problem

The legacy Post Office website lacked a clear structure across its core product and service pages such as Travel and Insurance. Users found it difficult to convert, navigate or compare offerings due to inconsistent layouts and a flat, template-driven content approach.

This led to measurable problems:

Based on analytics over 40% of users dropped off key pages like Travel and Insurance before reaching critical actions.
Content heavy sections like tabbed modules are often ignored, driving unnecessary scrolling and lower engagement by hiding important information - These and similar components took considerable time for CMS teams to populate due to old formatting logic.
Return visits and conversions were low, suggesting users weren’t finding enough value or clarity to continue exploring or complete tasks

I noticed CMS editors were duplicating old components or abandoning tab layouts on new product pages because the content wasn’t fit for purpose, resulting in big sections of dense information that were often hidden or scrolled past.

User testing revealed:

Moderated user testing found users struggled to navigate to specific pages and follow a clear user journey through the funnel due to lack of content hierarchy and clear CTA placement
Mobile-first usability testing revealed content heavy interfaces like tabs varied in placement, behaviour, and screen reader compatibility where content was not implemented correctly - navigating tabbed information also led to scroll fatigue, particularly on mobile
The visual inconsistency across product pages caused friction between SEO and CMS teams and slowed publishing. Internal interviews highlight a need for workshops in understanding how the component library works and guide them in using the correct modules for specific content

These problems affected both user trust and the team’s productivity. A scalable, modular, and accessible UI solution that could support a large volume of transactional and informational journeys (forms and payment funnels) without increasing the workload for content or dev teams is required.

⚙️ The process

Audit & Research

Reviewed the website’s IA across Travel, Mails, and Insurance to spot where users dropped off or lost momentum - which was mostly mid-scroll or before CTAs.
Observed user sessions where tab modules were skipped or they resorted to the back button - suggesting confusion or low content trust.
Benchmarked GOV.UK and fintechs competitors to find scalable patterns for dense service content and mobile-first layouts.
Focused on layouts that supported task clarity, low scroll fatigue, and trust-building.
This insight shaped both the revised IA and what I chose to prototype next - not just visuals, but structural choices that improved orientation and flow.

IA Mapping & Content Hierarchy

Restructured content around user goals to reduce drop-offs and improve task clarity.
Introduced accessible tabbed layouts to help faster decision-making and reduce support queries.
Optimised mobile hierarchy to surface high-value actions and drive conversions.

Core Component Redesign

Prototyped three different layouts based on observed user pain points:

Tables – for faster scanning and comparison on desktop
Sticky CTA – to maintain core CTA orientation in longer journeys, especially on mobile
Vertical tab modules – optimised for mobile usability and load performance

Built with full keyboard control, screen reader support, and fallback logic
Partnered with devs to minimise layout shift and improve perceived load time

Content & CMS Collaboration

Paired with content leads to align content labels with plain language principles.
For example, “Sending Abroad” outperformed “International Deliveries” in usability testing
Created Figma documentation and pattern guidance for CMS editors, reducing reliance on 1:1 training

Accessibility & Responsive Design

Built components to meet WCAG 2.1 AA standards, AAA wherever possible specifically core funnels with low colour contrast.
Optimised touch targets and spacing on mobile-tap areas that exceeded 44px to reduce input errors and ensure usability for users with motor impairments or limited dexterity
Prioritised legibility, focus states, and spacing to help users navigating with assistive technologies or in high-pressure, on-the-go contexts

Design System Contribution

Updated the Tables, Sticky CTA and Tab modules to the design system with responsive variants
Documented design specs, usage dos/don'ts, and paired with devs for handovers and walkthroughs
This enabled a full content refresh across Travel, Insurance, and in early tests for future product services like Life Cover, Branch Finder and Mails

✅ The Solution

I rebuilt the page structure so users could find what they needed faster, without getting lost in blocks of copy or confusing layouts. A big part of this was tightening how content worked across tabs and making sure it actually helped users make decisions.
I focused the page layouts around core user tasks — not just how the business grouped services
I standardised the tables component and rolled it out across product and campaign pages, improving user’s ability to compare offerings and scan content quickly to promote easy decision making
Leading with a mobile-first approach, I encouraged the use of sticky CTAs to reduce scrolling and prompt user interaction
Dev-ready documentation in Figma as source of truth reference for all teams - paired with devs to carry out QA and future-proofing annotations

💡 Note: Some areas, like Banking and Savings, still have excessive content within tabbed layouts. I flagged this during QA as a pattern mismatch-suggesting a future content strategy adjustment or component rework.

📊 Impact

Business Metrics

25% decrease in drop-off on Travel Insurance pages
Users reached core tasks faster, improving product understanding and reducing exits before converting
60% increase in tab usage across CMS
Editors adopted the new pattern, improving scannability and consistency of major product pages and service offerings
40% increase of click through rates of main CTAs
Accessible and responsive button solution that has been universally adopted to enhance other product funnels and user experiences

🔑 Key Learnings

Structure needs to support real tasks
I redesigned core components on pages like Travel Insurance using clearer design patterns and sticky CTAs. This helped users stay on track and reach key actions without scrolling past them.

Reusable components reduce friction
I rebuilt components with clear hierarchy and accessibility baked in. Then I paired with devs and content leads to document usage, which made it easy for teams to roll it out to other products.

Mobile requires intentional designI restructured mobile layouts from the ground up - prioritising key user actions like getting a quote or comparing offerings. Tap targets were widened, and screen-reader support logic was built in from the start