Users think in use cases, not internal categories
Participants grouped products by what they wanted to achieve, not by business structure.
Design impact: renamed categories in user language and organised navigation around tasks.
Overview
Project overview
Capita’s sales processes were manual, which delayed order fulfilment and created operational inefficiency. There were no standard templates for key documents such as proposals and SLAs across departments, which made the workflow even harder.
The goal was a self-service storefront where Capita business buyers and procurement teams could browse entitled services, see custom pricing and place orders without waiting on a sales rep.
The challenge
Problem statement and pain points
- Manual data entry caused 40% of order-processing delays.
- No standard templates for proposals and SLAs across departments.
- Sales reps spent 60% of their time on admin tasks.
- High support-ticket volume caused by confusing interface patterns.
Approach
My approach
A structured, user-centred process focused on fast validation and stakeholder alignment.
- Discovery and research: 8 stakeholder interviews and 8 user observation sessions to map pain points.
- Information architecture: navigation restructured around task frequency, cutting clicks-to-action by 50%.
- Wireframing and prototyping: high-fidelity Figma prototypes tested with 15 end users.
- Design system: a modular component library, consistent across 40+ screens.
- Handoff and build support: worked alongside developers for pixel-accurate implementation.
Process
My design process
Human-centred and iterative: empathy for end users, creative problem-solving, and prototyping to validate early.
Empathise
Discovery, research, survey
Define
Persona, empathy map, journey
Ideate
IA, user flow
Design
Wireframes, visual design, accessibility
Test
Usability check, improvements
Stakeholders
Stakeholder and client engagement
I presented progress every two weeks to the Director of Digital Commerce and the VP of Sales. Every presentation was framed around business KPIs (cart completion rate, average order processing time and support-ticket volume) instead of design terms.
Stakeholders asked for 12 extra fields on the order form. A card-sorting workshop and abandonment data aligned the team on 4 essential fields, and form completion rose by 35%.
Audience
Target audience
Capita business buyers and procurement professionals in specific Lines of Business (LOBs). They expect a consumer-grade experience, but their organisations have structured purchasing: entitlement-based product visibility, custom pricing and account-level order history.
- From experienced buyers who know exactly which SKUs they need, to first-time users exploring the catalogue.
- Bulk ordering, quote generation and integration with back-end systems such as RCA.
- Branding and UI customisation to reflect each LOB and build trust.
Leadership
Team leadership
I led one junior UX designer and set up processes that improved both output quality and team growth.
- Design critique framework: weekly critiques that sped up iteration by 40%.
- Mentorship: paired with the research lead, leading to their first independent user study.
- Process ownership: final calls on component library architecture and interaction patterns.
- Cross-functional alignment: daily syncs with engineering to clear blockers early.
Design strategyProblem solvingInformation architectureEmpathy mappingUsability testingUser flowPrototypingProject managementUser personaWireframesUser researchBusiness analysisVisual designHTML/CSS implementation
Timeline
Project timeline
A phased rollout across Release 1 and Release 2, covering sandbox testing, QA handover, SIT/UAT and production builds on Salesforce’s Lightning Web Runtime. About 12 weeks, plus time for training and post-launch support.
UX design
UI design
Week 1
Week 2
Week 3
Week 4
Week 5
Week 6
Week 7
Week 8
Week 9
Week 10
Week 11
Week 12
Empathise
Research and discovery
I ran 8 contextual inquiry sessions with B2B buyers across 3 customer segments:
- Procurement managers prioritised quick reordering and order tracking.
- Field sales reps needed mobile-friendly catalogue browsing that works offline.
- Finance teams needed invoice downloads and payment history in self-service.
Key questions
How easy is it to find what you need, and is product information and pricing clear?
What challenges do you face when placing orders, and how do you work with account managers on complex purchases?
Do you feel confident sharing sensitive business information, and what do you think of the security features?
Card sorting
What users told us
- Participants
- 20 (10 power + 10 standard)
- Method
- Open sort + closed validation
- Tools
- Optimal Workshop, UserTesting
- Duration
- 20 min / session
- Analysis
- Affinity maps, dendrograms
Strong consensus on top-level navigation
Closed sorting showed high agreement on primary categories across both user groups.
Design impact: locked the top-level IA and focused iteration on deeper levels.
Shallow navigation and powerful filters win
Users preferred fewer category levels and relied heavily on filters.
Design impact: reduced depth and moved high-value filters earlier.
Clear, consistent language builds confidence
Ambiguous or overlapping labels caused hesitation and wrong turns.
Design impact: standardised terms across navigation, filters and specs.
Define
User personas
Three personas covered the range, from a process-driven procurement manager to a casual buyer who orders a few times a year.
Jackson D. Willam
38 · School Business ManagerGodinton Primary School, London
Biography
Jackson manages a team of buyers and makes sure raw materials and parts are ordered on time and within budget. He is process-driven and values efficiency, accuracy and cost-effectiveness above everything else.
Needs
- Clear product descriptions and pricing
- View all orders under the school account
- Streamlined checkout and enquiry options for bespoke items
Pain points
- Limited visibility into past purchases made by other staff
- Difficulty with bespoke pricing and quotation processes
Goals
- Purchase training programmes and services for staff
- Ensure budget compliance and audit readiness
- Access product details, pricing and order history
Shara Colmen
29 · Trust Finance DirectorRegents Park College, London
Biography
Shara constantly sources components, researches technical specifications and checks compatibility across multiple schools in the trust.
Needs
- A central dashboard for multi-account visibility
- Role-based access control for buyers
- Exportable reports for finance and audit
Pain points
- Fragmented access to order data across schools
- Manual coordination with administrative staff
Goals
- Oversee purchases across multiple schools
- Manage buyer accounts and permissions
- Ensure financial oversight and reporting
Maria Jimenez
39 · Casual buyerRegents Park College, London
Biography
Maria is an office administrator who sometimes orders supplies and consumables. She is not a procurement professional; she wants the task done quickly so she can return to her main job.
Needs
- Admin tools for storefront configuration
- Permission sets for buyers and buyer managers
- Seamless integration with RCA and SAP systems
Pain points
- A complex interface with too many options
- Part numbers and technical jargon she doesn’t understand
- Difficult account management and approval process
Goals
- Easily find and reorder common consumables
- Quickly get approval from her manager
- A simple, step-by-step checkout
Market
Competitor analysis
I compared leading B2B commerce platforms to find UX opportunities and feature gaps, and to inform design decisions for Capita’s Salesforce storefront.
| Feature | Capita Salesforce B2B | SAP Commerce | Magento B2B | BigCommerce B2B |
|---|---|---|---|---|
| Storefront framework | Lightning Web Runtime (LWR) | Spartacus (Angular) | PWA Studio | Stencil |
| Customisation | Apex, Flows, LWCs | Java-based | PHP modules | Open APIs |
| Buyer group control | Entitlement-based visibility | Role-based | Customer groups | Price lists |
| Search & navigation | Keyword search | Faceted search | ElasticSearch | AI search |
| Checkout | PO optional, dynamic fields | Multi-step | Customisable | One-page |
| Order history & inquiry | Detailed tracking, inquiry forms | Order logs | Reorder tools | Order APIs |
| Integration | ERP (SAP), RCA, SSO | SAP-native | ERP plugins | Open connectors |
| Performance | Optimised via LWR | Heavy but scalable | Moderate | Fast & lightweight |
Ideate
Task flow
Mapping each touchpoint, from login to order confirmation, showed where to streamline steps and where users needed more reassurance.
Low-fidelity wireframes
Greyscale wireframes of every key screen
Each greyscale wireframe follows the layout of its final screen, block for block: the same header, grid, pricing panel and footer. That let stakeholders sign off structure and content before any brand styling.
01Login
▌Capita
Welcome to the Capita B2B portal
LoginEnter your account details to loginEmail address *firstname.lastname@email.comPassword *••••••••••Login to your accountForgot password?
02Home
The fire service college is a leading organisation for fire prevention and protection and response.
Top selling products and servicesNew or promotional items
Tactical Ventilation Instructor
ICL3 Qualification Offsite F2F
Accommodation
Incident Command : ICL3 Qualification FSC
Fire Risk Assessment (Medium)
Fire Service College catalogue
←→
Events and Venue
Leadership & Management
Open Program
Events and Venue
Events and Venue
Resources & supportFSC catalogueHelp centre / FAQsSubmit an enquiry
Contact details
Accreditations & certifications
▌Capita
© 2025 Copyright Capita plcModern slavery act · Cookies · Privacy · Terms · Accessibility
03Product detail
Fire Service College (FSC) / Tactical Ventilation Instructor
View product brochure (PDF)
Tactical ventilation instructorFire cart | SKU#LPP-C37-BProduct detailed description
The 5-day course includes:
Pricing and quantity
Course duration3 days
Course start date24 March 2025 ▾
Number of delegates−5+
Accommodation
Delegates for accommodation−3+
Course end date23 March 2026
Course modeFace-to-Face
Total course price£4370.12
Total accommodation price£330.00
I have read and agreed to the terms and conditions.
Add to cartor Raise an enquiry
Suggested products
Incident command: ICL3 Qualification FSC
Level 4 Certificate in Fire Safety
ICL3 Qualification Offsite F2F
Resources & supportFSC catalogueHelp centre / FAQsSubmit an enquiry
Contact details
Accreditations & certifications
▌Capita
© 2025 Copyright Capita plcModern slavery act · Cookies · Privacy · Terms · Accessibility
04Cart
Product/Service cart
Tactical Ventilation InstructorFire Craft | SKU#LPP-H37-F03Course duration: 4 days | Start: 24th June 2025
Quantity−18+
£32.00 / Quantity£320.00
Fire Behaviour InstructorFire Craft | SKU#LPP-H37-F01Course duration: 5 days | Start: 10th June 2025
Quantity−7+
£32.00 / Quantity£320.00
Tactical Fire InstructorFire Craft | SKU#LPP-H37-F02Course duration: 4 days | Start: 17th June 2025
Quantity−17+
£32.00 / Quantity£320.00
Level 2 Award in Carrying Out Fire Safety ChecksFire Safety | SKU#LPP-H37-FS01Course duration: 2 days | Start: 5th August 2025
Quantity−14+
£32.00 / Quantity£320.00
Pricing and summary
Subtotal£320.00
Discount£28.00
Total price(Excl. VAT)£932.00
Proceed to checkoutResources & supportFSC catalogueHelp centre / FAQsSubmit an enquiry
Contact details
Accreditations & certifications
▌Capita
© 2025 Copyright Capita plcModern slavery act · Cookies · Privacy · Terms · Accessibility
Design
High-fidelity screens
A dark, high-contrast brand theme with cyan primary actions, designed for buyers placing large multi-delegate course orders.
01Login
02Home
03Product detail
04Cart
Rationale
Design rationale and decisions
Each major decision is traced back to a user need and a measurable outcome.
| Design area | Rationale | Key decision | Outcome |
|---|---|---|---|
| Core design principle | B2B commerce has complexity that must be managed, not removed | Shifted complexity from users to system logic and UI structure | Lower cognitive load with enterprise-level control |
| User-centred foundation | Power users and standard engineers have different needs | Role-aware experiences without fragmenting the UI | Efficient for experts, guided for occasional users |
| Information architecture | Users struggled with deep hierarchies and inconsistent categories | Open card sorting, validated by closed sorting and dendrograms | Better findability and faster navigation |
| Product discovery | Buyers need confidence in specs, compatibility and price | Spec-first layouts and meaningful grouping | Faster, better-informed purchasing |
| Decision support | Too many choices slow decisions down | Fewer visible options, progressive disclosure | Faster tasks, less decision fatigue |
| Task efficiency | Repeat and bulk buying are critical in B2B | High-frequency actions made prominent and consistent | Less time on task for power users |
| Checkout | B2C-style checkout caused friction | Streamlined multi-step checkout with bulk and reorder | Fewer errors, smoother completion |
| Consistency | Users rely on known patterns | Followed Salesforce and enterprise eCommerce conventions | Shorter learning curve, more confidence |
| Visual clarity | Dense information overwhelms users | Clean layouts, strong hierarchy, minimal decoration | Better scanning and focus |
| Accessibility | Interfaces must work in real-world conditions | Readable type, spacing and contrast | Inclusive and usable on every device |
| Validation | High build cost demands confidence | Usability testing and affinity mapping | Less rework, stronger stakeholder buy-in |
| Business alignment | Must scale with growth | Modular, reusable components | Future-ready, lower maintenance cost |
Principles
Design laws applied
Proven UX laws guided decisions where research alone didn’t settle the choice.
Decision complexityHick’s Law
Applied: Reduced category depth using card-sorting insights, and put advanced filters behind progressive disclosure.
Impact: Faster product discovery and less hesitation.
Cognitive loadMiller’s Law
Applied: Grouped specifications into clusters (performance, compatibility, pricing) and broke checkout into smaller steps.
Impact: Better understanding of technical data, fewer checkout errors.
Interaction efficiencyFitts’s Law
Applied: Enlarged primary CTAs (Add to cart, Reorder, Checkout) and placed frequent actions in the same spot on every screen.
Impact: Quicker tasks, especially for repeat and bulk orders.
FamiliarityJakob’s Law
Applied: Followed familiar B2B eCommerce patterns (PLP → PDP → Cart → Checkout) and Salesforce conventions.
Impact: Shorter learning curve, faster onboarding.
Gestalt principleLaw of Proximity
Applied: Grouped pricing, availability and delivery info, and clustered filters with technical specs.
Impact: Clearer information, less visual noise.
Perceived easeAesthetic–Usability Effect
Applied: Consistent spacing, type and components, balancing dense data with white space.
Impact: More user confidence, lower perceived complexity.
Accessibility
WCAG 2.1 AA, aligned with UK GDS
Accessibility was designed and validated against UK Government Digital Service guidelines and WCAG 2.1 AA, so the platform stays usable and compliant through long, task-heavy workflows.
PerceivableWCAG 1.x · make content perceivable
- Contrast ≥ 4.5:1 for text
- No colour-only indicators
- Readable at 200% text zoom
Readable for users with visual impairments.
OperableWCAG 2.x · make it operable
- Full keyboard navigation
- Logical tab order
- Visible focus states
Users can complete every task without a mouse.
UnderstandableWCAG 3.x · make it understandable
- Plain, consistent language
- Clear form labels and instructions
- Descriptive error messages
Fewer errors in complex B2B workflows.
RobustWCAG 4.1 · make it robust
- Semantic component structure
- Accessible forms and alerts
- No fragile custom interactions
Works reliably with assistive technologies.
Enterprise dataWCAG 1.3, 1.4 · GDS patterns
- Proper table structures
- Icons paired with labels
- Clear spacing for dense data
Dense data stays scannable and unambiguous.
Feedback & errorsWCAG 3.3, 4.1
- Inline validation
- Clear success and error states
- Status messages announced properly
Users always know the system state and next step.
Validation & governance
- Reviewed designs against UK GDS checklists
- Validated against WCAG 2.1 AA
- Keyboard-only and screen-reader testing
- Developer handoff with accessibility notes
Solution
Design solution
- Smart search: faceted search with predictive suggestions and recent searches for returning buyers.
- Streamlined checkout: 5 steps reduced to 3, with a persistent order summary and inline validation.
- Order dashboard: status, tracking, invoices and quick reorder in one place, reducing support calls.
- Bulk order table: spreadsheet-style bulk ordering with CSV upload.
- Mobile-first catalogue: product grid and filters built for touch, for field sales reps.
Results
Outcomes and business impact
Results of the Salesforce B2B Commerce transformation.
+52%Projected sales
−35%Order fulfilment time
−40%Support tickets
+28%User satisfaction
Closing
Key takeaways
- Drag-and-drop customisation: Experience Builder lets teams change pages, layouts and branding with no code.
- LWR architecture: fast page loads and responsive performance for B2B buyers.
- Dynamic buyer journeys: search, cart, checkout and order history tailored to buyer groups and entitlements.
- Flexible checkout: purchase with or without a PO number, with confirmation after checkout.
- Connected systems: integration with CRM, billing and scheduling tools.
FigmaAdobe XDPhotoshopIllustratorSalesforce B2B CommerceExperience BuilderMiroAzure DevOpsJiraOptimal WorkshopDocuSignMicrosoft 365 Copilot