Designing B2B and B2C digital portals – one stop solution to register, manage and track complaints.
Design Brief
At the Ombudsman Service, the organisation was undergoing a major digital transformation aimed at improving how both B2B and B2C users engage with their services. Their goal was to create a responsive, user-centric self-service portal that would improve efficiency, transparency, and overall user satisfaction across business and consumer audiences.
What we solved!!
Problem
- Manual tracking with Excel is inefficient
- Difficult to assign and follow up on cases
- Consumers lack visibility into case status
- Emails and documents are easily lost
Solution
- Digital portal centralises case management
- Real time tracking to streamline follow ups
- Consumers can track and access all case info
- All updates and documents stored in one place
Approach
1.Empathise
Research & Analysis
Co-discovery workshops with stakeholders and users to map current journey and identify opportunities
2.Conceptualise
Interaction Design
Mapping interaction flows and creating prototypes validated through usability testing
3.Design
Visual Design
Comprehensive design library of reusable components for visual consistency and scalability along with mock-ups
Workshop facilitation- Research and Analysis
Objective
- Explore user journeys collaboratively
- Identify user pain points
- Align stakeholders and users on key insights
- Develop a shared understanding of user challenges and needs through co-discovery workshops
Outcome
- Gained clear understanding of user needs and pain points
- Identified key insights to inform design decisions
- Used findings to guide interaction flow design
- Informed visual design components to address user challenges
Touchpoint Map - Research and Analysis
- Visualised key user interactions across the journey.
- Identified major touchpoints (e.g., initial contact, onboarding, post-interaction)
- Highlighted critical moments impacting user satisfaction
- Gained clear understanding of user engagement
- Prioritised improvements to optimise interaction and experience design
Journey Map - Research and Analysis
- Visually represented user experiences and key touch-points
- Identified pain points and emotional responses
- Mapped user journeys through collaborative workshops
- Included emotional arcs to capture user feelings at each stage
- Revealed opportunities for design improvements.
- Informed the next steps in interaction and visual design
Interaction Flow - Interaction Design
- Visualised sequence of user actions and system responses
- Outlined user steps based on journey mapping insights
- Ensured intuitive navigation and smooth transitions
- Included arrows and decision points to show key interactions
- Used as a blueprint for wireframes and prototypes
- Aligned design with user needs and pain points
Interactive Prototype - Interaction Design
- Built interactive prototypes based on validated interaction flows
- Simulated real user journeys to test navigation, functionality, and system feedback
- Presented prototypes to Business Analysts, Development Teams, and
- Product Owners for early alignment
- Facilitated discussions to clarify requirements, address technical constraints, and capture feedback
- Used Adobe XD and Figma to create clickable, high-fidelity prototypes
- Supported iterative improvements through collaborative review and user testing
Design Library - Visual Design
- Created a design component library for visual and functional consistency
- Included reusable elements like buttons, input fields, and navigation components
- Aligned all components with brand guidelines
- Ensured a structured and uniform design across the portal
- Used Adobe XD to create clickable, high-fidelity prototypes
- Improved usability through consistent design patterns
- Streamlined the design process for web and mobile interfaces
UI Design - Visual Design
- Translated user-centered insights from work shops into high-fidelity visual designs .
- Applied the design component library to ensure consistency in color, typography, and layout .
- Created intuitive and engaging UI elements aligned with the brand identity .
- Optimised interactive components for usability and visual clarity .
- Delivered a cohesive design system that supported a seamless, aesthetically pleasing user experience .
- Established the visual foundation for the final interactive prototype.
Sign up / Sign in
- Simple and user-friendly sign-in process for all users.
- Multiple authentication options, including email, phone number, or social accounts .
- Familiar login methods to ensure ease of access and reduce friction .
- Secure and quick access to the application for both Respondents and Consumers .
- Supports faster onboarding and a seamless user experience.
Landing Page
- Translated user-centered insights from work shops into high-fidelity visual designs .
- Applied the design component library to ensure consistency in color, typography, and layout .
- Created intuitive and engaging UI elements aligned with the brand identity .
- Optimised interactive components for usability and visual clarity .
- Delivered a cohesive design system that supported a seamless, aesthetically pleasing user experience .
- Established the visual foundation for the final interactive prototype.
Case Details
For Respondents
- Track case updates in real-time without external follow-ups .
- Update case details directly on the portal for instant visibility .
- Access and manage all documents from one central location.
For Consumers
- Live view of complaint status and progress .
- Direct messaging with your case investigator .
- All case documents in one easy-to-access place .
- Respond to requests through a clear, actionable interface.
Upload Doc
For Respondents
- Upload case evidence directly into the portal – no more email exchanges..
- Support for multiple formats for seamless submissions .
- Faster case handling through streamlined document sharing.
For Consumers
- Easy, secure evidence submission from any device
- Broad file compatibility for hassle-free uploads .
- Live progress tracking for peace of mind
- Quicker resolutions with centralized document sharing.
Usability Testing
Goal
- Assess ease of use, task success, and friction in the complainant portal prototype.
Methodology
- Assess ease of use, task success, and friction in the complainant portal prototype.
Participants
- 8 UK-based users with recent or active FOS cases.
Outcomes
- Identified usability blockers and navigation issues
- Captured user expectations and content clarity gaps
- Delivered actionable insights to inform next design iteration
Value addition to the users
Business org (Respondents)
Transparent
Clear view of open, closed, and aged cases with prioritization.
User focussed
Dashboard with tailored insights, quick stats, and easy case search.
Effecient
Minimizes manual effort in reconciling cases with internal systems.
Self serve
Upload responses, export data, and manage cases online.
Consumers (Complainants)
Transparent
Consumers can view case details, actions, and updates easily.
User focussed
Mobile-friendly design for easy case tracking anytime
Effecient
Lets professionals manage and track cases independently.
Self serve
Manage documents and withdraw cases independently.
