Anatomy of a Design: Credit Reports

The Duedil team is really excited about last week’s soft launch of our new credit reports.

A key part of the ethos at Duedil is to present data in a beautiful and clear way. Besides the myriad technical challenges of building this service, there were a lot of important design decisions to address to make sure that we got this right. 

To give you guys a look behind the scenes at Duedil, I’m going to highlight a few key steps in the development of the look and functionality of our new reports.

We’ve always thought that a credit score on its own is a fundamentally flawed concept. Simply listing a number, with no context or surrounding explanation, really doesn’t help you understand a company’s creditworthiness.

However, if it’s given some context, comparing one company’s credit score to all the others in its area, of its size, and in its industry, you can gain some genuine insight from this humble number…

image

Anacott Limited’s credit score is 45, but is this a good or bad score? In our first version of the design (note the lorem ipsum), we started with a colour-coded credit dial at the top of the page to show the company’s credit score. Alongside the dial are recent changes to the credit score, and the company’s credit limit.

Below, the blue bars represent the average credit scores of active companies in the same region, industry, employee range, and age.

Knowing the average credit score for a group is useful, but we think that understanding the distribution of scores is even more interesting.

To show the distribution of credit scores, we have paired these averages with a box plot. A box plot shows the key elements of a sample: its minimum, maximum, quartiles and median. The minimum is the lowest value in the sample, the maximum its highest. Quartiles divide the sample into four equal sets; the 1st quartile contains the lowest-scoring 25% of the companies considered; the 2nd quartile contains the next 25% of companies, up to the 50% midpoint (median); the 3rd quartile the next 25%; and the 4th quartile those companies with the highest 25% of credit scores.

If you were to rank all the companies in a sample from lowest to highest credit score, the score in the middle is the median.

This allows us to quickly see that Anacott Limited’s score of 45 is higher than other companies in London, about the same as its industry counterparts, and lower than companies of a similar age.

image

We then decided to use the colours from the credit score dial at the top, and apply them to the industry averages. This we found a bit more visually arresting, but perhaps too distracting for the box plots, so we turned it down a notch:

image

Now, the averages are nicely represented alongside the box plots. Previously the fully coloured-in bar was a little confusing - it seemed like a total, rather than an average value for the group. It’s key for us to be critical and to carefully consider any parts of a design which may be easily misunderstood.

We then changed our focus to the box plot aspect of the chart. Inspired by the histogram shown on GitHub, we thought a great way to show the distribution of credit scores in a sample would be with a histogram.

image

In this sketch, the industry’s credit score is 45. The height of the bars represents the frequency of different credit scores, from 0 to 100. On top of this, the box plot shows the sample minimum and maximum (the ends of the box plot line), the 1st and 3rd quartiles, the median, and the mean (or average), indicated in red.

The advantage to the histogram is that credit scores are not normally distributed. Why is this important? Well, if you just look at your industry’s average score, it may appear that your company’s credit score differs drastically. However, if credit scores across the industry are distributed bi-modally, you may see that your score matches that of many other companies, either above or below the industry average. We think that it can be reassuring if you are able to see that, while your credit score may appear low, it is actually at a normal level for your type of firm.

image

By this point in the design phase, the background technical work allowed us to start using a sample set of real data in the charts. Above is our next iteration, with the histogram bars now visible, with the improved box plot overlaid.

image

The next version was inspired by the coloured bands on resistors. This way, we are able to show the average values within the box plot, without distracting from the height of the histogram bars.

After further discussion, testing, and tweaking, we arrived at the final look:

image

When the mouse is hovered over the industry averages, we show a breakdown of the key stats for that grouping. For Tesco, we can see that of the other companies that were incorporated in 1947 and are still trading today, most of them tend to have fairly high credit ratings, with half of them having a score of 81 or higher, and an average of 74.

As you can see, as features are developed, we go through many iterations, with each new version addressing issues with previous designs. A Hopefully, this time we arrived at what we wanted: a way to show a company’s credit score that gives enough context to understand how credit scores look for companies that share some of the same characteristics.

As we are constantly looking to improve and refine Duedil, it’s crucial that each new feature is released at a level that 1) works, 2) conveys the most important information, and 3) is easy to understand. We hope that we achieved this with the release of credit reports, and that you enjoy using them just as much as we enjoyed building them