Sometimes usability problems are caused by the smallest of details. This was the case with our financial statistics display in the old version of Fiverr.
For most people, making sense of financial data is a painful task. Both new and veteran users often get puzzled while trying to understand what led to their current account balance. This was a good reason for them to turn to our customer support, which was a big time waster both for them and for our team.
Here’s how revenue statistics used to look like:
As you can probably see, it’s hard to tell why in this case, the seller has a total of $260 available and how the other financials work together. There’s also a lot of clutter caused by lots of small text which was put there in order to explain what this stuff mean.
As part of the site’s redesign, we worked hard on making everything as simple as possible. The financial statistics area was one of our primary targets to overhaul.
The beauty of scientific typography
I was always intrigued by the typographical qualities of math and physics formulas. The fact that complex ideas can formulate into simple, short, mathematical expressions written in the universal language of science is nothing short of magic.
Grabbing typographical inspiration from formulas felt right, but also presented some challenges:
- How do you make a simple formula that everyone could understand at first glance?
- How do you avoid the clutter of having too many details for people who don’t need them?
- How do you reveal the formulas only when the time is right?
A deeper look into related support tickets revealed that our users are looking at their statistics for two reasons:
At the heart of the Fiverr experience lies gamification. People want to see how well they are doing. They want to watch numbers grow and bars move. We all like green gauges but can’t stand the red ones. This is a fun and rewarding experience on a very basic level. We find sellers focus much of their energy on improving their stats.
When you want to see how you’re doing, there is no need for anything other than a set of big, key figures, nicely laid out on the page. Any small type text or explanations will just diminish the experience.
Account Balance Evaluation
Unlike vanity gazers, users who are looking to really understand why a number is what it is, need a different set of tools, or in our case, a different display. We assumed that people looking for deeper understanding would be interacting with the display more than others, potentially looking for tooltips. This was the trigger of creating a live formula that comes to life as the user hovers over it. As you can see in the video below, a mouse hover action triggers the appearance of the formula operators who ‘wrap’ the stats with logic. It’s as if users can unveil a hidden layer of information merely by looking at the numbers (well, actually by pointing their mouse).
Here’s the Live Statistics bar in action in the New Fiverr:
I invite you to try this and other innovative ideas built into the New Fiverr: Try Now!