Product Design Task

The Brief

My brief was to design a billing dashboard section for hosting provider, that allows users to manage their services/subscriptions. I need to deliver a high-fidelity design, as a bonus, I’ll also deliver rationale for my process and wireframes.

I’ll start by answering a few questions.

Who is the user?

Things that I know about users: well people who host their personal websites, agencies that host websites for others, and bigger business entities that host their sass, or other resource-demanding websites like high traffic e-shops, etc.

What is the user trying to achieve in the billing section?

• check payment history
• renew subscription
• pay for a receipt
• download a receipt

What is the business trying to achieve?

Well, I guess hosting provider wants to make subscription renewal easy and automatic so that users don’t experience any pain points. In addition, so that the billing process scales well, and doesn’t require additional support/maintenance.

What am I trying to achieve?

I’m thinking of playing safe this time by searching for the highest value for business solutions, and not going the experimentation route since there is a risk of not finding anything valuable which will certainly leave a poor impression on the design team and my job is to get hired. Which business does not like an employee doing things that creates the most value, right?

I have a reference for the current design, and my first impression is that fundamentally it looks alright, only small problems here, and there if I fix those problems and refractor UI to be a bit better I assume it will be enough for this stage.

Also, I’ll run a session of ideation and explore what might it look like after further iterations.

Gathering of ideas & insights

At first, I’ll get familiar with the current UI’s, by redrawing them in the lo-fi version on paper.

Lo-fi paper wireframes

Here are two screenshots of the task to get familiar with the current solution.

Actual screenshots

After that, I purchased a domain from hostinger for less than 1$ to access the dashboard and check it out myself and get missing pieces. Such as payment method & how UI’s look in different languages (Suprise!, Lithuanian version is pretty bugged):

Select a payment method screen

Then I’ll run a few usability tests to see if something obvious pops out.
An example of a usability test:

After a few runs, I’ve compiled a list of insights and pain points of the current design on each section.

UNPAID RECEIPTS

• Close/delete receipt button could be better and dos not show pointer icon on hover
• Download/view receipt could be better

SERVICES

• Auto-renewal turn on/off text does not fit
• Status of service active/inactive cold have a color indicator
• There could be a notification screen when service is about to end
• Maybe the date could change color based on how long until expiration
• When auto-renewal is on, CTA Renew Now could hide since it’s no longer needed
• The auto-renew mechanism could be different
• Notification icons with “!” could appear when the expiration date approaches.

PAYMENT HISTORY

• If there is a huge number of receipts, some filtering system would be useful.

PAYMENT METHODS

• More details could be displayed on the selected method
• Set as default, does not switch language and breaks
• When I click the add method, I see only 2 options, which could be more.
• When there is no selected method, instead of a “no payment method” field, a display of available options could be visible giving more information to the user and increasing the likelihood of him taking action.

Checking out the competitors

Now I decided to check out what competitors are doing since I guess they have similar goals/challenges and maybe I’ll find something useful.

After browsing through a few competitor websites, I found that only Godaddy lets me access their billing section without buying anything.
And what I saw was rewarding, since some things such as filers which I suggested were already implemented by them, also I saw more payment options.

And I’ve had an account in Lithuanian hosting provider interneto vizija, which I also checked out. But the design was outdated and not up to the current standard.

The findings

I’ve found that Godaddy implemented a filter, which solves a major pain point of managing a huge amount of receipts/services and somewhat proves that this solution solves some of the problems for the users and make them more efficient in managing their services.

Out of the other options and small bugs here and there, I assume that implementing a filter and feature that allows users to select multiple items/manage them is the highest value for a business move. As well as customers, ones that really need this feature are the big boys, who have 100’s of receipts/services, the highest paying customers, they will be able to complete some of their tasks much faster and experience less pain.

Wireframing/Sketching Ideas

Now is the time to do draw some wireframes on the paper, it’s not the crazy 8 method, but something similar, each wireframe takes about 5–10 minutes. And let's say after drawing 6–8 versions of some screen there is enough material to build something decent, and later iterate to improve it.

For me sketching is an essential step in the design process. This gives me enough understanding and empathy to merge/generate useful ideas, see how good/bad approach is, and if it is worth it to implement that concept.

Sketches of Billing/Payment methods

Billing/payment methods screen

Sketches of Billing/Services

Billing/Services screen sketch

After these sketches, I have enough understanding of the case to make a tangible High-fidelity version that can be further improved with iterations/design critique, where various versions can be made to do some A/B tests, decide which version can be implemented by the developer's team.

High-Fidelity screens

Before I start putting together a high-fidelity version, I’ll mention a few restrictions. One is the colors, I can only use ones from this source below, which is part of the Hotingers Design system I assume.

And other restrictions is to follow Material design guidelines. Which is more challenging, although I read those in the past, and skimmed through them now, I’m not an expert and some fails can appear.

Colors from Hostingers design system

Colors used.

High-fidelity design made in Figma

And that's it. I believe the initial goal was achieved. As it solves some of the current pain points, especially the filtering system.

What’s next?

I’d dive deeper into material design guidelines, it’s not a theme that can be mastered in 5 minutes, and will take some time to utilize guidelines in an intended way. And refractor UI’s by following material guidelines.

Also work on spacing, sizing, display on various screens. Run further tests, iterate improvements of this design. Maybe even discard some of them and move into a different concept/idea that is more suitable. I believe that the best design comes out of a team of designers, discussing and improving on each other ideas as every person sees things differently, and by merging the vision of each individual something truly remarkable is likely to happen.