Design system at scale, enabling digital productivity and unity
Design systems
Company
Post Office Ltd
Team
Collaborated with UX, research, and development teams.
Timeline
2022 – 2025
My Role
As Senior Visual UI Designer, I led the rebuild of Post Office’s design system during a CMS upgrade rollout. I shaped how components were designed, tested, and documented to better support revenue journeys like Travel Money, Mails, Insurance and Banking, while enabling faster production by dev and content teams.
Key outcomes
+40% increase in component reuse across core revenue journeys
~30% fewer product page QA rounds via cleaner design specs, guideline docs and stakeholder walkthroughs
£4.5K saved per quarter by enabling CMS teams to ship pages together with product owners with less UX intervention
+23% uplift in user engagement via updated component modules across core Travel Money, Mails, Insurance and Banking product pages
❓ The Problem
Without a structured design system, components across the site were inconsistent, inaccessible, and often detached and broken - nightmare. This directly affected users and conversions in key journeys - especially in funnels where tasks like card top-ups, document uploads, and quote generation required high confidence.
Key Challenges
Legacy components were hard to reuse and often detached and reformatted by different team members to fit alternative types of content
CMS editors lacked confidence using existing modules and justifying use-cases to product owners - leading to layout errors and misaligned content that negatively impacted the user journey
QA flagged visual, spacing, and interaction inconsistencies across funnels for Travel Money, Mails, Insurance and Banking. Each journey had different third-party dependencies, so consistent handoff and guidance was critical throughout
The brand refresh required scalable iconography and illustration designs that work with component builds in order to bring visual consistency across 20+ product journeys and ongoing campaigns
⚙️ The Process
Scaling design through structure
I joined as the CMS upgrade was underway, using it as an opportunity to overhaul the component and illustration library and establish clearer design standards. My work focused on refining components that directly impacted high-traffic, revenue-generating journeys—then scaling those updates across the broader site.
Rebuilt core components like homepage hero components, dynamic content cards, CTAs, product tiles and help & support modules using set variables, consistent spacing, and responsive logic
Created a new "Parcels Online" module which allowed users to personalise postage quotes based on location – this simplified the user flow and improved conversion from the homepage and campaign pages
Redesigned outdated modules that had poor responsiveness and poor interaction states - prioritising the ones used most in product journeys like buying travel insurance, ordering currency, or sending parcels
Developed a library of scalable illustrations that integrated with the design system making it easier for the product teams to populate mockups, as well as applying Post Office's updated branding to UI elements like buttons, alerts, and other messaging styles
Elevated the overall layout of the design system to improve usability by adding additional dev-ready documentation, specs and functional prototypes
Documentation & Dev Collaboration
I embedded documentation directly into working files and hosted sessions with developers and CMS stakeholders to reduce dependencies and support faster delivery.
Created inline guidance for each component, including interaction behaviour, padding logic, and variant rules
Ran walkthrough sessions with CMS editors and product owners to demonstrate intended uses and edge cases - reducing implementation errors
Flagged reusable components in Jira tickets during QA, directly unblocking workflows for product owners and CMS team
Created master guidelines for product-specific component use as well as how to populate components following outlined production design standards, such as exporting web-ready imagery
🔎 Design Validation
Measuring impact before and after rollout
To validate design decisions, I combined analytics, usability testing and feedback from real CMS editors responsible for implementing content at scale.
Tested redesigned homepage modules including campaign banners and product cards - these saw a +23% increase in engagement compared to legacy modules, with higher CTRs on financial and mailing journeys
Added a “Buy Online” Parcels Online module to the homepage - allowing users to quickly access personalised postage quotes. This simplified and improved task success in moderated tests
Usability testing sessions showed clearer component structures improved task completion across different user journeys - especially for mobile users scanning help or pricing info
Internal CMS teams were able to build pages 40% faster using structured system components, with fewer UX intervention requests or blockers
✅ The Solution
A scalable, tested system that supports critical Post Office journeys:
Reusable component library embedded with usage documentation and developer specs
Scaled module design updates across Travel Money, Mails, Insurance and Banking pages with measurable improvements to engagement and publish time
Enabled CMS editors and product owners to deliver consistent UI without blockers
Delivered branded illustration and icon library for consistent storytelling across all Post Office product journeys
📊 Measurable Impact
Metric | Outcome |
+40% component reuse | Reduced design and dev work across revenue-generating journeys |
~30% fewer QA rounds | Fewer visual inconsistencies, better stakeholder alignment before going live |
£4.5K saved per quarter | CMS and product owner teams shipped faster with reduced UX dependencies |
+23% module engagement | Improved click through rate on new homepage and Parcels Online components |
-40% CMS build time | Editors built product and landing pages faster using structured modules |
+12% task completion increase | Higher completion rates in user testing on redesigned product flows |
🔑 Key Learnings
Design systems unlock business and delivery value
Clear component standards and guidelines gave product owner, dev, and CMS teams the tools to deliver faster and more consistently - especially across high-traffic funnels like Travel Money, Insurance and Mails where third-party funnel integration still affects user engagement as they are often not as user friendly or visually up to date with PO branding due to styling limitations.
Components must be built with intent
Modules like “Parcels Online” worked because they simplified complex journeys. Giving users quick access to personalised postage quotes directly improved conversion from the homepage. Placement matters as this slightly affected user access to travel insurance funnels as they shifted down the page.
Documentation drives scale
Embedding clear spec and guidance information inside design files reduced QA feedback and helped CMS teams work more independently - shipping campaigns and product updates with fewer delays or blockers.
Visual consistency only matters if it’s usable
Illustrations, button styling, and layout patterns improved 20+ core journeys because they were tied to user data and return tasks like getting quotes and travel money top-ups.
There’s still a balance to find
As mentioned, while modules like Parcels Online improved engagement, we need to make sure updates don’t overshadow other high-value journeys like Insurance or Travel Money. Prioritising visibility across funnels will be key to future iterations.