Project Overview

This product involved the development of an entirely new web-based platform for a debt collection company to use with their registered debtors to manage debt cases. The aim was to create a user-friendly interface for handling debtor information, case history, and communication. This new product was designed to improve the debt collection process and significantly enhance the overall user experience.

Time frame

The project spanned 6 months, moving swiftly through research, design, development, testing, and deployment. With iterative feedback and agile updates, we adapted to stakeholder input and evolving needs throughout the process.

My role

I led the end-to-end UX and UI design process, from wireframes and prototypes to UI development and developer handoff. I collaborated closely with Business Analysts, Product Owners, and developers, gathering feedback and iterating designs through user testing to ensure the product met both user needs and business goals.

The Challenge

The project was necessary to address several key inefficiencies in the debt collection process. The business needed a streamlined solution to manage debtor information and debt cases more effectively. Specifically,

• Update Debtor Details Effectively: Provide an easy-to-use interface for managing and updating debtor information.
• Achieve Zero Case Handler Engagement: Minimize the need for manual intervention by automating processes, enabling debtors to manage their cases independently through self-service capabilities.
• Handle Debt Cases More Efficiently: Improve the tracking and management of debt cases to ensure timely resolutions.
• Align with the Brand: Update the portal's look and feel to reflect the debt collection company's branding, ensuring consistency across all touch-points.

Pain Points

When I started designing this web application, we identified several problems in the existing debt collection process. Through discussion sessions with our Business Analyst (BA), stakeholders, and the company’s domain experts, we reviewed the current workflows to understand the main pain points.

• Debtors faced delays and frustration: Debtor information updates were handled manually by case handlers. Debtors could not update their own details, which caused delays and increased workload for staff.
• High Dependency on Case Handlers: Even small actions required case handler involvement. This created unnecessary bottlenecks and prevented staff from focusing on higher-priority tasks.
• Inefficient Debt Case Management: The existing system lacked an efficient way to manage debt cases, making it difficult to track case progress and complete important actions quickly.
• Manual Payment Processes: Actions such as making part payments were usually completed over the phone. This process was slow and sometimes led to misunderstandings between debtors and case handlers.
• Inconsistent Branding Experience: Aligning with the debt collection company’s brand from the start to ensure user trust and confidence.

The Solution

“To address these issues, we designed a self-service debtor portal with a smart, self-guided action flow that guides users through case actions, achieving zero case handler engagement, along with a design system supporting brand variations and prioritizing clarity, accessibility, and scalability. Additionally, we implemented a mobile-first responsive design to ensure seamless performance across all devices.”

Process Highlights

Reveals what users like, what they want

Validated a persona to represent an ideal user of the application

Mapping how users move through those tasks

Research & Discovery

Collaborated with the Business Analyst, Product Owner, and domain experts, conducted current-state mapping, and analysed similar financial self-service platforms to understand what users like, what they want, pain points, and key challenges for both portal users and case handlers, resulting in insights and design patterns to guide self-service and case management features.

Ideation & User Flows

Mapped end-to-end user journeys, task flows, and information architecture for key actions such as viewing case details, updating information, and making payments to create a simple, guided self-service experience that reduces user confusion and dependency on staff, resulting in clear flows that prioritize primary actions and provide a strong foundation for prototyping.

Prototyping and Testing

Developed wireframes and interactive prototypes to simulate key user flows, conducted usability tests to validate design solutions, and gathered feedback from users and stakeholders to refine and improve the designs.

Collaboration

Engaged continuously with the Business Analyst, developers, and QA through meetings and daily stand-ups to align on business goals and technical feasibility, ensuring a balance between user needs and business objectives.

UI Development

Developed a reusable design system with responsive layouts and UI components, implemented using HTML, SCSS, Bootstrap, and Angular. SVG icons were used to ensure scalable, high-quality visuals and consistent styling across screen sizes, resulting in a cohesive, brand-aligned interface and more efficient development.

Wireframe

Style guide: Colors & Typography

Style guide: Forms styles & Icons

UI Design

UI Design

UI Design

UI Design

UI Design

UI Design: Mobile browser support

Developed a scalable design system using Sass variables.

Used Sass mixins to create reusable CSS and maintain consistency.

Iterations & Improvements

To enhance self-service, the action menu was moved from the payment page to the main navigation, giving users easier access to key actions and enabling independent task completion. In hindsight, testing this change earlier could have revealed additional opportunities to simplify navigation and further improve usability.

• Moved FAQ menu to main navigation: made key resources more accessible, reducing user confusion and clicks.
• Added case status check without login: allowed users to quickly see their case updates independently, supporting self-service.
• Implemented multilingual support: improved accessibility for users from different language backgrounds.
• Configured Google Analytics with event-based tracking: monitored user interactions such as navigation clicks and self-service actions to understand behavior and support future design improvements.

Using these insights, we developed a solution that resolved key challenges and established a foundation for a more efficient user experience and improved business performance.