Crafting a new billing experience
Gorgias is a helpdesk that turns customer service into profit by monitoring and automating support tickets.
It consists in several tools — helpdesk, automation, voice and SMS support, etc.
For a few years Helpdesk had been the main product, and Automation, Voice and SMS just add-ons. When I joined Gorgias as a freelance Product Designer in 2023, the company wanted to make them independent, standalone products.
This mere strategy pivot results in thinking the billing and product subscription experience all over again. Let's dive into this project step by step.
A better billing menu
This is how the billing menu looked like when we first met.
There was a lot of information on this screen.
Although all the content was stacked on the page and is accessible, the overall layout felt misleading.
Let's have an overview of what had to be changed.
Helpdesk is too privileged
On this menu, Helpdesk takes most of the visible space, on top of the page.
It is full-width and takes as much length as 3 add-ons.
Helpdesk was so privileged, that it was just named "Plan Details".Nowhere was it labelled as Helpdesk on the page, because it was obvious that without a subscription to Helpdesk, there could be no plan at all.
For all products to be equal, we needed them to occupy the same visual space. We had to craft new product cards!
There were a few unsuccessful tries.
But they lead to the version we wanted:
Now that we had figured out how our Product cards would look like, we had to tackle the structure of the whole page.
Sections are just stacked one on another
This is a common issue. It is somehow tempting to have all information at glance, thinking that less clicks to get through a flow are always better.
I firmly disagree with this when it comes to finding the right info at the right moment.
The following screen speaks for itself: there's just too much content on top of each other.
An easy way to tackles this is to use navigation tools.
We decided to go for tabs, which can be really handy in this case.
Here is the navbar below.
We have been through revamping the content (product cards), and make navigation clearer for the user. Now, let's see what our new menu looks like!
What does it look like now?
Here are below the three tabs at the end of this project.
Usage & plans displays all product cards to show the different subscription and their statuses.
Payment information gathers payment method, billing frequency and billing address.
Payment history is a table recap of all expenses made by the client to Gorgias.
