Capita.com Redesign: Drupal CMS (Low-Code/No-Code)

The challenge

Problem statement and pain points

The site had fragmented UI, an outdated technology stack and weak responsiveness, which hurt engagement, SEO and stakeholder satisfaction.

User experience

Navigation complexity: users struggled to find services across 200+ pages
Content fragmentation: duplicate, inconsistent messaging
Technical debt: legacy CMS limited design and content updates
Mobile: 60% of traffic on mobile, with a weak responsive design

Technical limitations

Drupal 8 → 10 migration underway, but legacy modules and themes still hurt performance and security
No central governance for UI/UX decisions across Drupal, SEO, content and design

SEO & content

Inconsistent heading tags and anchor-link behaviour
Missing hover states and semantic markup for accessibility and SEO

Responsiveness & accessibility

UI broke on mobile because of oversized spacing and elements
Missing alt text, keyboard navigation and contrast fixes

Goals

Seven goals for the redesign

A modern, accessible site that communicates Capita’s value to clients, candidates and investors, on a CMS editors can update quickly.

Capita.com
redesign goals

Improve user experience

Enhance accessibility

Strengthen brand consistency

Optimise SEO & performance

Support stakeholder needs

Scalable content management

Drive digital campaigns

Approach

Solutions to the challenges

Persona-based journeys: journey mapping and usability testing with real users.
Responsive design: responsive frameworks plus automated accessibility testing with AXE and NVDA.
High-fidelity validation: prototypes tested before development.
Drupal 10 migration: standardised modules and themes for performance and security.
Cloud-native architecture: aligned with Capita’s enterprise security principles.
Cross-functional governance: UX, SEO, content and tech decide together.
Agile delivery: sprints with regular stakeholder feedback loops.

Design process

A six-phase delivery timeline

About five to six months, balancing strategy, design, build and stakeholder engagement.

Phase 1Discovery

Stakeholder interviews, UX audits and technical assessment.

Phase 2Design & prototyping

4–6 weeks of IA, wireframes and high-fidelity prototypes.

Phase 3Development & integration

8–12 weeks building on Drupal 10 and Site Studio.

Phase 4Content migration & QA

3–4 weeks moving and checking content.

Phase 5UAT & stakeholder review

2–3 weeks of acceptance testing and sign-off.

Phase 6Launch & post-go-live

2 weeks of launch support and fixes.

Audience

Target audience

Public- and private-sector clients across the UK, Ireland, Germany, Switzerland, India, South Africa, Bulgaria and Poland, plus internal teams and investors.

Existing clients already working with Capita.
Prospective clients exploring outsourcing, digital transformation or CXM.
Industry decision-makers: procurement leads, operations managers, transformation officers.
Internal stakeholders using campaign hubs, service plans and documentation.
Investors and shareholders looking for reports, share price and governance.

Roles

My roles and responsibilities

Design strategyProblem solvingInformation architectureEmpathy mappingUsability testingUser flowPrototypingProject managementUser personaWireframesUser researchBusiness analysisVisual designUI implementation via HTML/CSS

Research

User research

One-to-one interviews, surveys and observation sessions, organised around five themes.

Needs & pain pointsWhy do you visit Capita.com, and what blocks you?

NavigationDo you prefer browsing by category, search or guided prompts?

Device & accessibilityWhich device do you use, and what accessibility features do you wish existed?

ContentIs content tailored to your industry and interests?

Trust & brandDoes the site reflect Capita’s brand, and would you recommend it?

Card sorting

How users organise services

Participants: 20 (10 power + 10 standard)
Method: Open sort + closed validation
Cards: 8 services, 9 industries, 15+ outcomes
Tools: Optimal Workshop, UserTesting
Analysis: Affinity maps, dendrograms

Problem first

Most grouped services by business problem (reduce costs, improve CX) rather than service type.

65% problem · 25% industry · 10% service

Industry is critical

Users wanted industry-specific solutions; government buyers skipped non-government cases.

72% used industry as their main filter

Terminology mismatch

Service names didn’t match user language (“Improve customer service”).

58% confused by current naming

Progressive disclosure

Standard users wanted simplicity; power users wanted everything. One size didn’t fit.

70% simplified · 30% advanced

Role-based paths

B2B: problem → industry → solution. Job seekers: role → culture → benefits. Investors: financials → growth.

Key insight

Users think in business problems and industries, not service features. Navigation should match that.

Market

Competitor and reference analysis

Competitor and best-practice sites were compared on visual design, IA, content, SEO and accessibility, alongside Capita’s internal audits.

Reference	Strengths	Capita.com gap	Design recommendation
Infosys Cortex	Interactive feature cards, hover effects, dark-mode transitions	No hover interactivity or visual depth	Feature cards with hover transitions and dark styling
Finbuzz theme	Animated cards with CTA reveal on hover	Static cards with little engagement	Animated service cards with CTA reveal
Orken theme	Statistics counters, vertical tab layouts	No dynamic counters or tabbed content	Animated counters and vertical tabs
Tesla / DHL	Lazy loading, performance tuning	Heavy images, slow rendering	Lazy loading and optimised assets
Capita internal audit	Drupal upgrades, accessibility tools, cookie fixes	Inconsistent components, outdated modules	Upgrade Drupal core, unify components
Capita UI review	Detailed spacing, font and alignment issues	Excessive spacing, inconsistent type, broken forms	Standardise spacing, align CTAs, fix forms
Capita global search	Faceted filters, auto-suggest, AJAX filtering	Basic search, no filters	Search with filters, suggestions and AJAX

Define

User personas

Three personas from Capita’s pension-services audience, from a first-time registrant to a retired beneficiary.

Emma Martin

29 · Early Career Teacher
Local Education Authority · Manchester

Biography

A newly qualified teacher in a public school. Tech-savvy but unfamiliar with pension systems; she values clarity and expects mobile-friendly access.

Needs

Clear onboarding
Mobile-friendly access
Simple language

Pain points

Confusing registration process
Dense content

Goals

Register for her pension
Understand benefits
Track contributions

David Hedson

58 · Senior Administrator
NHS Trust · Birmingham

Biography

Preparing for retirement. Cautious with digital platforms; he prefers straightforward, secure interfaces and values trust in financial services.

Needs

Secure, simple navigation
Reliable benefit estimates
Accessibility support

Pain points

Difficulty navigating forms
Accessibility issues

Goals

Estimate retirement benefits
Use calculators
Update personal details

Margaret Barnet

67 · Pension Beneficiary
Retired civil servant · Bristol

Biography

Uses Capita.com to manage her pension, usually on a tablet. She likes clear instructions and dislikes frequent password resets.

Needs

Easy login
Clear instructions
Tablet-friendly design

Pain points

Complex login process
Frustration with passcodes

Goals

View benefit statements
Track payments
Contact support

Recommendations

Top priority recommendations

Based on research and design testing; each one has a predicted impact we agreed to track.

Progressive disclosure navigation

Show 5–6 primary services by default; specialist services sit in expandable sections.

Predicted: −75% navigation time

Problem-based IA

Organise by user problems: “Reduce costs”, “Improve CX”, “Scale operations”.

Predicted: −57% find time, −86% errors

Progressive forms

Three essential fields first, then conditional fields based on answers.

Predicted: −40% abandonment

Role-based homepage

A role selector (B2B, careers, investor, news) with tailored content paths.

Predicted: +65% engagement

Problem → solution → proof → action

Every service page follows one clear narrative arc with case studies.

Predicted: +188% form submissions

10 more recommendations

Industry landing pages, structured error messages, homepage hierarchy, quantified results, design system and WCAG AA.

Predicted: +133% total conversions

Ideate

Information architecture

A rebuilt sitemap with problem-based services, industry pages and role-based entry points, plus global search and accessibility tools on every page.

Capita.com

Homepage

Hero banners

Featured services

News slider

About us

Executive committee

Company overview

Policy & legal pages

Industries

Industry solutions

Service templates

Breadcrumb navigation

Services

Problem-based groups

Expandable specialist services

Insights

Thought leadership

Author cards

Tag navigation

News & events

Newsroom

Events

Careers

Workday job listings

Culture & benefits

Contact

Contact forms

Auto-predict fields

Location-based routing

Internal search

Filters & suggestions

Accessibility tools

Recite Me toolbar

Customisable views

Global footer

Sitemap links

Legal notices

Investors

Annual reports

Share price

Sketch

Paper sketching

Quick sketches across desktop, tablet and mobile settled the layout grid and how components stack before anything went into a design tool.

Paper sketches of the Capita.com home page at desktop, tablet and mobile sizes

Low-fidelity wireframes

Greyscale wireframes at three breakpoints

After paper sketching, each breakpoint was wireframed in greyscale with the same sections, order and components as the final design: desktop, tablet and mobile. Teams agreed content hierarchy and component behaviour before any brand styling.

Desktop · 1920 px

▌Capita

Industries ▾Expertise ▾Insights & News ▾About us ▾Careers ▾Investors ▾

Shaping tomorrow together towards technology & innovation

Discover Capita More ↗Full Year 2021 Annual Report ↗

Industries We ServeWe Provide Tailored Solutions For Each Industry

Business OperationsRead More ↗

People SolutionsRead More ↗

Government ServicesRead More ↗

‹›

View All Industries ↗

Case StudiesSee How We Deliver On The Power of Digital

People Solutions

Education Sector

Finance Sector

Health Care Sector

Software & Technology

View All Case Studies ↗

Services We ProvideAreas of Services For Each Sectors

Education and LearningRead More ↗

Financial ServicesRead More ↗

TelecommunicationsRead More ↗

‹›

View All Services ↗

Key Points From LeadershipKey Features of Leadership and Broadcast Story

To know about the our Leadership thoughts and future planning please contact us online

Get in Touch ↗or+44 (0) 20 7799 1525

▶

Insights and ThinkingCapita Latest Insights and Thinking

INSTITUTEThe great opportunity? Pulse 1: March 2021By Capita☐ 20/09/2021 ◷ 5 mins read

DIGITALThe great opportunity? Pulse 1: March 2021By Capita☐ 20/09/2021 ◷ 5 mins read

CENTRAL GOVERNMENTThe great opportunity? Pulse 1: March 2021By Capita☐ 20/09/2021 ◷ 5 mins read

View All Insights ↗

Capita NewsOur Latest News and Updates

September 15, 2021 · 5 mins readThe spending review lifelong learning…Read More

September 15, 2021 · 5 mins readThe spending review lifelong…Read More

View All News ↗

Subscribe Your Newsletter Directly in Your Inbox

Full Name*Email Address*Get Free Newsletter

▌Capita

Quick LinksCareersInvestorsResponsible business

Who We AreAbout CapitaIndustries We ServeServicesNewsroom

LegalLegal noticePrivacy noticeCookiesAccessibility

Follow usTwitterFacebookLinkedIn

Tablet · 768 px

▌Capita

Shaping tomorrow together towards technology & innovationDiscover Capita More ↗Full Year 2021 Annual Report ↗

Industries We ServeWe Provide Tailored Solutions For Each Industry

Business OperationsRead More ↗

View All Industries ↗

Case StudiesSee How We Deliver On The Power of Digital

People Solutions

Education Sector

Finance Sector

Health Care Sector

Software & Technology

View All Case Studies ↗

Services We ProvideAreas of Services For Each Sectors

Education and LearningRead More ↗

View All Services ↗

Key Points From LeadershipKey Features of Leadership

To know about the our Leadership thoughts

▶

Get in Touch ↗

Insights and ThinkingCapita Latest Insights

INSTITUTEThe great opportunity? Pulse 1

View All Insights ↗

Subscribe Your NewsletterFull Name*Email Address*Get Free Newsletter

▌Capita

Quick Links›

Who We Are›

Legal›

Mobile · 460 px

▌Capita

We believe to simplify the links between businesses & customersDiscover Capita More ↗Full Year 2021 Annual Report ↗

Industries We ServeWe Provide Tailored Solutions For Each Industry

Business OperationsRead More ↗

View All Industries ↗

Case StudiesSee How We Deliver On The Power of Digital

People Solutions

Education Sector

Finance Sector

Health Care Sector

Software & Technology

View All Case Studies ↗

Services We ProvideAreas of Services For Each Sectors

Education and LearningRead More ↗

View All Services ↗

Key Points From LeadershipKey Features of Leadership

To know about the our Leadership thoughts

▶

Get in Touch ↗

Insights and ThinkingCapita Latest Insights

INSTITUTEThe great opportunity? Pulse 1

View All Insights ↗

Subscribe Your NewsletterFull Name*Email Address*Get Free Newsletter

▌Capita

Quick Links›

Who We Are›

Legal›

Design

High-fidelity screens

Capita navy and cyan, bold section labels, image-led case studies and a newsletter band, built as reusable Site Studio components across every breakpoint.

Rationale

Design rationale and decisions

Four decisions that shaped the redesign, each backed by research.

Problem-based vs feature-based navigation

Challenge: Service names like “Customer Experience Management” didn’t match how users talk (“How do we reduce costs?”).

Evidence: 65% grouped by problem; 58% confused by current names.

Decision: Renamed navigation in user language, e.g. “Improve customer experience”.

Progressive disclosure for services

Challenge: 8 services + 9 industries = 40+ visible options, causing decision paralysis.

Evidence: 70% preferred simplified navigation.

Decision: 5–6 primary services by default; specialist services expandable.

Progressive forms over long forms

Challenge: 7–8 field forms caused about 70% abandonment.

Evidence: A/B benchmarks: progressive forms cut abandonment ~40%.

Decision: Three essential fields first; conditional fields appear as needed.

Role-based homepage segmentation

Challenge: Job seekers, B2B buyers and investors have very different goals.

Evidence: Card sorting revealed different mental models by role.

Decision: Role selector in the hero, with tailored content and CTAs.

Principles

Design laws applied

UX laws that informed decisions where research alone didn’t settle the choice.

Fewer choicesHick’s Law

Applied: Visible services reduced from 8 to 5–6.

Impact: Faster decisions.

Familiar modelsJakob’s Law

Applied: Problem-based language that matches how users think.

Impact: Less hesitation.

Limited memoryCognitive Load Theory

Applied: Progressive disclosure lowers information density.

Impact: Fewer form drop-offs.

GroupingGestalt principles

Applied: Services grouped by problem with consistent visual treatment.

Impact: Clearer hierarchy and navigation.

Distinct = memorableVon Restorff Effect

Applied: CTAs stand out through colour, size and position.

Impact: Higher CTA engagement.

5–7 itemsMiller’s Law

Applied: No more than about seven visible options at once.

Impact: Less cognitive friction.

Accessibility

WCAG 2.1 AA, aligned with UK GDS

Accessibility was audited at the start and given a target for launch, with a pre-launch checklist for every template.

Standard	Current	Target	Improvement
WCAG 2.1 Level AA	23%	95%+	+312%
Keyboard navigation	60%	100%	+67%
Screen-reader support	40%	100%	+150%
Colour contrast	50%	100%	+100%

Visual

Colour contrast ≥ 4.5:1
Visible focus indicators
No colour-only information
Text resizable to 200%

Structural

Proper heading hierarchy
Landmark regions
Associated form labels
Errors linked to fields

Keyboard & navigation

Every element Tab-accessible
Logical tab order
No keyboard traps
Skip links

Screen reader & ARIA

ARIA labels on buttons
aria-live for dynamic content
Descriptive link text
Page structure announced

Results

Outcomes and business impact

Results of the Capita.com redesign and the design library behind it.

+40%Usability scores

−25%Navigation time

+35%Application conversion (Workday)

−60%Design inconsistency, 15+ designers

Launch targets agreed with stakeholders

Engagement (30 days)	Current	Target	Change
Avg session duration	2:45	4:15	+70%
Pages per session	2.0	3.5	+75%
Bounce rate	56%	35%	−37%

Conversion (90 days)	Current	Target	Change
Contact submissions	150/mo	350/mo	+133%
Form completion	52%	75%	+44%
Demo requests	20/mo	65/mo	+225%

Closing

Key takeaways

Low-code at enterprise scale: built on Acquia Drupal with Site Studio for modular themes and custom components.
Connected content: Workday powers live job listings, and REST APIs bring in external data.
One design system: Adobe XD and ZeroHeight keep components, colour, type and logo usage consistent, though the documentation still needs work.
New components: navigation blocks, homepage slider and banners, and better “Get in touch” and case study pages.
Shared ownership: UX, content strategists, writers and SEO engineers worked together for consistency and discoverability.

Adobe XDPhotoshopIllustratorFigmaMiroAcquia DrupalSite StudioZeroHeightAzure DevOpsJiraAXENVDAMicrosoft 365 Copilot

Problem statement and pain points

User experience

Technical limitations

SEO & content

Responsiveness & accessibility

Seven goals for the redesign

Solutions to the challenges

A six-phase delivery timeline

Phase 1Discovery

Phase 2Design & prototyping

Phase 3Development & integration

Phase 4Content migration & QA

Phase 5UAT & stakeholder review

Phase 6Launch & post-go-live

Target audience

My roles and responsibilities

User research

How users organise services

Problem first

Industry is critical

Terminology mismatch

Progressive disclosure

Role-based paths

Key insight

Competitor and reference analysis

User personas

Emma Martin

Biography

Needs

Pain points

Goals

David Hedson

Biography

Needs

Pain points

Goals

Margaret Barnet

Biography

Needs

Pain points

Goals

Top priority recommendations

Progressive disclosure navigation

Problem-based IA

Progressive forms

Role-based homepage

Problem → solution → proof → action

10 more recommendations

Information architecture

Paper sketching

Greyscale wireframes at three breakpoints

High-fidelity screens

Design rationale and decisions

Problem-based vs feature-based navigation

Progressive disclosure for services

Progressive forms over long forms

Role-based homepage segmentation

Design laws applied

Fewer choicesHick’s Law

Familiar modelsJakob’s Law

Limited memoryCognitive Load Theory

GroupingGestalt principles

Distinct = memorableVon Restorff Effect

5–7 itemsMiller’s Law

WCAG 2.1 AA, aligned with UK GDS

Visual

Structural

Keyboard & navigation

Screen reader & ARIA

Outcomes and business impact

Key takeaways

Thanks for reading

AbsenceSoft: Medical Leave & Accommodation Platform