The Customer Billing User Interface
The Customer Billing User Interface (CBUI) was intended to be the central billing portal for all Rackspace customers and their varied products. The portal had been neglected for some time and customers needed more than what we were giving them.
My Role
As the new Lead UX/UI Designer for CBUI I needed to get leadership onboard with some much needed changes. This meant synthesizing research to form a design plan and communicating that plan in a compelling way so we could get the much needed resources. I was involved in all phases of the projects, from synthesizing research, leading sprints, creating user stories, flows, wireframes and final designs. I worked with product teams, front end devs, engineers and research teams from beginning to end..
The Problem
Research had revealed our customers wanted additional functionality in the portal to meet their business needs. In addition, CBUI was lacking several industry standard functions that were supported by our competitors. Normally I would start with a heuristic analysis but we had quite a bit of research done in previous phases so I started there.
Reviewing Past Research
I was able to utilize past research that included interviews with many different user types, Support Team members, Account Managers and Product Managers. Sorting through it all, the end result was an affinity map that pointed to some major issues.
When I pulled the team together and we looked across the common themes, user stories instantly began forming. With some teamwork and discussion, we narrowed it down to 10 very powerful stories.
We then paired up the stories with some common personas and began mapping out the workflows. By the end of the session we determined there were three main problems to solve first:
Users want the ability to monitor their usage costs at any time during the billing cycle.
Users are unable to easily see what has changed from one invoice to the next.
Users need flexibility in handling their invoices, be it separating or combining charges based on their business needs.
The Challenge
I’ve identified some major challenges and the first step is to convince leadership to allocate the needed resources.
The Story
To gain traction with leadership, I used a modified user journey, called a Customer Experience Index (CEI). It’s a in easily consumable format that tells the story, screen by screen, over a timeline with an emotional grading system. The end result is a very impactful presentation that spoke to the real difficulties we forced upon our users.
With our list of pain points I took the following steps:
Translated the pain points into actionable items
Prioritize them based on impact
Sectioned the work into phases and made a design plan
Built a roadmap with the help of our Product and Dev Managers
The Result
The reason CBUI didn’t have a dedicated Product Manager and wasn’t being maintained was because it isn’t a product that generates revenue. To really get the attention of leadership I showed them the number of billing support calls, support tickets created, time spent by Account Managers and chargebacks due to customer billing complaints.
All together, if these issues were fixed we could save over $150k per month.
CBUI was immediately placed on the roadmap for that year and we started work the next quarter.
Highest Priority - Current Usage Costs
Users want the ability to monitor their usage costs at any time during the billing cycle.
Current Usage Costs
The System Administrator persona is responsible for managing systems, deploying sites and provisioning virtual machines. They need to check usage during the billing cycle to ensure they stay within budget. For this to happen, we needed to supply the user with real time usage figures within the billing portal. This is an extremely common feature and one that our competitors offer right out of the box.
Working with the support team had shown that customers are sometimes unexpectedly bumped up to a new support tier when they have higher activity than usual. The new design gave them their current spend, threshold alerts as well as a future projection based on their past usage.
We tested wireframes remotely, asking users to complete a few tasks based on current usage costs. Users completed all tasks easily and gave us some critical feedback on priorities. Ultimately they were please with the end result and enjoyed the ability to view their data in different visualizations.
Final designs were completed with the additional feedback and worked into upcoming sprints.
Next Up - Invoice Changes
Users are unable to easily see what has changed from one invoice to the next.
Changes From Previous Invoice
The Finance Specialist persona is ultimately responsible for paying the invoice but doesn’t have the deep technical knowledge and background from project to project to know why this months invoice has increased. They needed a way to see which individual charges had increased without having to put two invoices side by side and reading them line by line.
We again tested multiple concepts remotely with multiple user types by giving them access to our interactive prototype and series of tasks. Because this was a feature that our users had not encountered before, we got the impression that unless you were looking for the change you wouldn’t understand what was being presented.
We supplemented our final design with some tool tips as well as a notification email that alerted users to the newly added feature.
Finally - Invoice Management
Users need flexibility in organizing their charges based on their business needs.
Flexible Invoice Management
Our Reseller persona needs to attribute individual costs to various departments or organizations and have those invoices paid independently. At the same time the Finance Specialist would prefer to pay a single invoice for the multiple products and accounts owned by their company.
This feature would require sweeping changes to the backend and how invoices were managed. I worked with engineering to understand how invoices were managed and together we came up with a solution that was not only possible but solved many issues for our users.
The IA
With the potential for a change in account hierarchy, there was a need to add an additional layer to the IA. But for those who didn’t need the layer, i wanted to keep things the same.
Divide Your Charges
For customers that need a portion of their charges paid by another department, business unit or client, we needed to offer the flexibility for them to manage their invoice as needed.
Add an Invoice
For some of the other customers who already have multiple Rackspace accounts/products, we needed to provide them with the ability to manage these invoiced accounts simultaneously.
The Final Product
Current Usage
Reduction in customer support calls and tickets for customers who were unexpectedly bumped up to a new service tier because they were unable to effectively monitor their usage costs or set thresholds.
Reduction in credits given to customers over those same issues
CEI score improvement
Changes from previous invoice
Reduction in customer support calls and tickets with specific charge related questions
Invoice Management
Reduction in time by Account Managers creating custom invoices
Reduction in credits given to customers because of human error
CEI score improvement