Price calculator usability review & benchmark

01Context

The page where a buyer prices a setup

Arvan Cloud is an Iranian cloud and CDN provider. Its website had a price calculator for the services it sells: cloud servers, security packages, live streaming, video, storage, DNS and support. A buyer picked what they wanted, pressed Calculate and got an invoice-style summary, with a button to sign up and order.

In January 2020, as part of the job, Sina reviewed that page. The redesign that followed shipped. This study covers the review that came before it: what came first, how every problem was logged, who the page was compared with and what was measured. It closes with two screens of the redesign. Arvan has updated its website since, so the calculator online today is not the one described here.

02Approach

Five days, three sessions, one board

Sina worked alone, from 19 to 23 January 2020, on one Trello board. The page was used the way a buyer would use it: filling in each section of the form, pressing Calculate, reading the invoice and changing an option to see what moved.

Every problem became one card: a short title, usually a label for its kind (usability, interface or copy), often a screenshot and sometimes a note on what to change. The lists follow the calculator’s own parts, such as its inputs, its invoice and each product, so a card sits where the problem was found.

Three sessions logged 48 of the 50: 22 on 19 January, then 13 on 20 January and 13 on 21 January. Two more followed on the 22nd. Between sessions the board took on the rest of the work.

The page was measured before it was judged: the speed run came before the first finding.

03Findings

Fifty problems, in eight themes

Of the 50 cards, 26 carry the usability label, 15 the interface label and 13 the copy label. A card can carry more than one, and three carry none. Read together, they fall into eight themes.

In the third session, 11 of the 13 notes are written as a buyer would say them.

04Benchmark

Twelve other calculators, measured the same way

Each of 12 other cloud price calculators got a card of its own. All 13 pages, Arvan’s included, went through GTmetrix and into one spreadsheet: PageSpeed and YSlow scores, load time, size and number of requests. The twelve were Google Cloud, Microsoft Azure, AWS TCO, Open Telekom Cloud, Oracle Cloud, Rackspace, Firebase, Huawei Cloud, NetApp, DigitalOcean, FME Cloud and Selectel.

Measured this way, Arvan’s page was the second heaviest: 2.65 MB, against a median of about 1.2 MB for the others, with only Oracle’s 3.13 MB above it. It made 106 requests against a median of 65, the third most. Its PageSpeed score of 56 was joint third lowest, and at 6.7 seconds it was the fifth slowest to load. On YSlow it sat mid-table.

Each page was run once, on GTmetrix’s free tier, from Vancouver on 19 and 20 January 2020, so the numbers are a snapshot, not a verdict. They were enough to place the page among its peers.

Beyond the twelve, two designs from elsewhere were kept as idea cards: pay as you go, from a mobile plan app, and a card layout for the packages.

Arvan’s page weighed more than all but one of the 12 other calculators.

05Search

A 22-character title and no subheadings

The page was also checked for how search engines would read it. A browser SEO extension flagged a title of 22 characters and a description of 53, with no keywords and no canonical tag. The page had one H1, the word “calculator”, and six H6 tags that were really menu items; it had no H2 to H5. It carried 56 images and 144 links.

A site audit added two smaller items: a certificate close to expiry, and one page with a temporary redirect.

06Redesign

The redesign, in two screens

The redesign that followed the review shipped. Sina has two screens of it, shown below. They are all this study has of the redesign, so this chapter says only what they show.

Under a row of tiles, one for each of nine services, the page holds two cards side by side. One has the settings of the chosen service, here cloud storage: its region, its size, its requests and its outgoing traffic, with a button that adds it to the invoice. The other is the invoice itself.

With nothing added, the invoice says it is empty and what to do first: customise a service and add it. Once services are added, each one is a line in the invoice that can be folded or removed, and its tile carries a yellow dot.

On the old page the invoice came last, after Calculate. In the redesign it is on screen before anything is added.

07My role

Sina’s part

Sina reviewed the calculator alone in January 2020, as a product designer at Arvan Cloud. The notes record one person’s use of the page; no test with other people is part of this study.

Owned

The review: every session, finding and label
The comparison with 12 other cloud calculators
The speed measurements and the spreadsheet they went into
The SEO check
The two idea cards
The two redesign screens shown here

Co-owned

—

Collaborated

—

08Outcomes

What the review produced

A review and its evidence, not a result. The redesign that followed shipped and two of its screens are shown, but the evidence holds no figure for what it changed.

problems logged: 50; Over five days and three sessions, nearly all labelled usability, interface or copy; Delivered output · Review board, 19–23 Jan 2020
pages measured: 13; Arvan’s calculator and 12 others, each run once through GTmetrix; Delivered output · Speed spreadsheet, 19–20 Jan 2020
themes: 8; Words, controls, units, the invoice, inputs, the order of the form, errors and the maths left to the buyer; Delivered output · Grouped from the board
ideas kept: 2; Pay as you go, and a card layout for the packages; Delivered output · Idea cards, 21–22 Jan 2020

What was delivered

A board of 50 findings, labelled and listed by part of the calculator
A spreadsheet of speed numbers for 13 pages
An SEO check of the page

09What I learned

What I’d change

01
Watch someone else use it
The notes record one person’s use of the page, and eleven of them speak as a buyer would. That finds problems, but it can’t say which ones stop a buyer or how often. A few sessions with real buyers would have ranked them.
02
Rank the problems as they are logged
All 50 cards carry the same weight: the board has labels for the kind of problem, but nothing for how much it matters, who owns it or when it is due. A severity mark at logging time would have left a list ready to act on.
03
Run each speed test more than once
One GTmetrix run per page, on one day and from one place, is a snapshot. Several runs at different times would show a range, and the gaps between pages would stand on firmer ground.

Language