Billing Dashboard

Designing UI for a CRM / Helpdesk Software for Better User Experience and Increase Revenue

Designing UI for a CRM / Helpdesk Software for Better User Experience and Increase Revenue

—Deskpro
Date :
12 – 22 Oct 2020
Role :
UX, UI Design
Competitor Research
Information Architecture
Team :
Product Manager
CEO

Deskpro is a customer service software that allows companies to provide better support, sales, and customer engagement.

However, the platform is dated and not user-friendly. In the midst of re-designing the software UI, our team has spotted particular pain points and a lack of functionality in the billing dashboard.

Objective

Over the years, software modules had been bolted-on, which added to the complexity of the billing section. Not only the UX had rarely been thought about, but we were also missing out on the chance to up-sell.

With this project, we aim to establish a sense of trust between the customers and Deskpro, and allow them to make more informed purchase decisions onwards.

Research

Given the limited timeframe and resources, we weren’t able to conduct user research or usability tests. Instead, I began this project by conducting the following research:

•　Competitor analysis
•　Best UX practices regarding billing (e.g. Baymard Institute Articles)
•　Getting feedback from our sales and support team
•　Understanding new functionalities we’re adding

Key findings

While our primary customers are small to medium-sized companies with sales and marketing teams, the design has to be able to serve not-for-profit organisations, start-ups, and educational bodies as well.

Compared to our competitors, our UI lacks a consistent content structure and lacks sentiment-based product pitches. However, the main takeaway was learning about the appropriate editing UX, as well as to compare and identify common features in the billing section in CRM software.

Current Design
Current Design

Current Problems

After assessing and identifying our clients’ pain points, we identified certain areas to improve on:

 

Discoverability, up-selling, disorganised layout:
  • Information hierarchy and layout
  • Include relevant information and visual cues to provide a clear overview of the current plan subscription at all times
  • Display relevant premium plans and benefits available for upgrade
  • Adding a way for users to cancel the subscription plan

 

UX-wise:
  • Allow annual subscription users to upgrade or switch plans immediately or at the start of the next billing cycle, ensuring that the outcome fits their needs
  • Streamline the process of adding service credit, including one-off purchases, monthly subscriptions, and when credit falls below a certain amount
  • Encourage users to switch to upfront annual payments for discounts
  • Alert users when the billing cycle is about to end.
  • Allow users to add several payment cards and backup payment methods

What’s Next?

After specifying the issues and analysing the client’s needs. I was prepared to produce solutions.

 

Brainstorming

By consolidating the issues, prioritising information, and functionalities, I was able to narrow down to an appropriate design approach.

 

Sketches

By doing pen and paper sketches, I came up with several potential layouts for the billing dashboard before moving on to high-fidelity designs.

Structuring the page

New Design

Information Hierarchy

The page is restructured to something that feels like more of a dashboard to group and organise information effectively. Charts are used to represent the billing cycle and avatars are added for agents on the plan so that the page feels more native. Payment method and Invoices are separated and put under other tabs.

Annual Subscription Plan
Upselling

Upsell blocks are added to provide easy access to growing customers and increase revenue.

 

Discoverability

Widgets, such as up-sell block, plan summary, service credit are added accordingly depending on the exact plan and step of the payment process the clients are at.

Monthly Subscription Plan - Full Page
The up-sell block changes according to the current plan you're on
Plan comparison table urges user to reconsider when downgrading plan
Keeping Information Organised

One challenge was to accommodate easy editing whilst keeping ‘changes being made now’ and ‘changes made at the beginning of the next billing cycle’ separate. We came to a solution by separating out a ‘Plan Renewal’ session for all upcoming changes and using a ‘Update Your Plan’ session for any one-off purchases.

Editing the number of agents
'Update your plan' session
Multi-payment added

Multiple payment methods are added for the ease of clients, as well as to increase on-time and successful subscription payments. We also added ‘preferred payment method’ tags for plan renewal and service credit subscriptions to accommodate our customers’ needs.

Payment Method

Reflection

Analysing different CRM software, prioritising user needs, and modelling more efficient UX processes helped me come up with a design that will improve the overall user experience.

It’s been a real pleasure working with the Product Manager and CEO on this project and I am undoubtedly pleased with the outcome — I can’t wait for our company to make the most of the redesign this year and contribute to increasing the revenue of Deskpro.