Transforming Ruleguard’s UX: Building the Dashboard

Redesigning the Invoices Module for Worldpay Dashboard

My Role:

Senior Product Designer

Client:

Worldpay Dashboard

Project Duration:

Q1 2023

Project Scope:

Web application

Background

Worldpay Dashboard is a B2B payment processing portal used by SMB and corporate merchants to manage sales and transactional data. As the main design resource of Worldpay Dashboard, I was tasked with redesigning the Invoices module to improve usability, efficiency, and overall user experience.

Business Need

The business required a solution that enabled merchants to autonomously manage their invoices, reducing the influx of inquiries directed to customer support agents.

Problem Statement

The current invoices table was causing confusion and impacting the efficiency of managing invoices. Specifically:

The table was cluttered and difficult to read, leading to errors and delays in payment processing.
The design did not prioritize overdue invoices, making it hard for users to focus on critical tasks.
The user experience was not intuitive, resulting in user frustration and decreased productivity.

Discovery Research and Insights

To gain a deeper understanding of the problem, especially from the users’ perspective and their pain points, I conducted the following discovery research activities:

Stakeholder Interviews

I interviewed key stakeholders, including subject matter experts such as members of the Billings and Finance operations teams, as well as product managers, customer support agents, and sales teams to understand the business requirements and user pain points.

Key Insights:

Product Managers emphasized the importance of reducing customer support inquiries and improving the overall user experience.
Customer Support Agents shared firsthand experiences with user frustration and confusion when navigating the current invoice module.
Team members from the Billings team shared concerns about legacy infrastructure limiting the potential for changes to the invoice payment system.

User Interviews

I conducted in-depth interviews with 10 merchants, including SMB and corporate users, to understand their current workflows, challenges, and expectations from the Invoices module.

Key Insights:

Merchants struggle to navigate the current Invoices module, finding it difficult to access relevant information and manage their invoices efficiently.
Users expressed frustration with the lack of clear and concise information about invoice status, leading to confusion and errors.
Merchants want a more proactive approach to payment management, with clear call-to-actions and reminders for overdue invoices.
Users appreciate the ability to filter and sort invoices, but find the current implementation cumbersome and limited.

Competitor Analysis

I analyzed the invoice management features of 3 competitor products, identifying best practices and opportunities for differentiation.

Key Insights:

Competitor products offer more streamlined and intuitive invoice management experiences, with clear and concise information and proactive payment management features.
Best practices in invoices management include using clear and consistent language, providing contextual help and guidance, and offering flexible filtering and sorting options.

Project Constraints

Product Team Limitations: The product team was not open to more innovative solutions that would require significant development time, restricting the design to iterative improvements rather than a complete overhaul.
Time Constraints: The redesign had to be completed within a tight 4-week timeline, limiting the scope of changes.
Legacy Infrastructure: The invoice payment system couldn’t be redesigned to the fullest extent due to legacy infrastructure constraints, limiting the potential for major changes.

Wireframing and User Flows

Using existing components I designed wireframes and user flows then reviewed with design peers, product team members and developers.

Design Solution

To address the problem statement, business needs, user needs, and constraints, I employed the following design solutions:

1. Functional Invoices Table

Introduced a Status Column to provide a clear overview of invoice status, addressing user struggles with accessing comprehensive and relevant details.
Added Status Filters to enable users to quickly sort and prioritize invoices, improving navigation and management.
Included a “Make a Payment” Button to facilitate easy payment of overdue invoices, addressing user concerns about missing due dates.
Used color-coding and visual indicators to prioritize overdue invoices, enabling users to focus on critical tasks.

2. Enhanced User Experience

Streamlined the payment process with a clear call-to-action (CTA) for each invoice, reducing user errors and increasing efficiency.
Introduced filtering and sorting options for efficient invoice management, addressing user frustrations with the current implementation.
Improved error handling and feedback to reduce user frustration and confusion.

Usability Testing

After designing high fidelity prototypes, I conducted usability testing with 5 users to validate the design decisions and identify any areas for improvement. The testing revealed:

Users appreciated the simplified invoices table and prioritized overdue invoices, finding it easier to navigate and manage their invoices.
The “Make a Payment” button was well-received, with users noting it reduced errors and increased efficiency in the payment process.
Filtering and sorting options were praised for enabling efficient invoice management, with users expressing satisfaction with the improved user experience.

Result & Impact

Close to 70% reduction in customer support inquiries

The redesigned Invoices module empowered merchants to autonomously manage their invoices, resulting in a significant decrease in customer support inquiries relating to invoices. This reduction in inquiries not only alleviated the workload of customer support agents but also improved the overall user experience.