Debtograph, UX design case study

Debtograph is great for our sales teams as it adds a dimension to the value of the client – their payment status
— Matt McKinley Koolivoo Cairns, Queensland, Australia
One of the best analytical tools in the xero ecosystem
— Thomas Bombotas btom chartered accountants Sydney, Australia


Prototype, wireframe and then design a distinctive XERO debtor tracker app, that delivers an engaging experience.



Debtograph is now a five-star rated Add-On to leading accounting platform XERO.

I designed Debtograph with the end user in mind. The simple information architecture that helps users understand the data with minimal effort. It’s never pleasant to look at debts, so making it more fun and intuitive helps users engage, make the right decisions and understand who’s their best client. My concept was to create a simple structure of most important metrics and classify debtors into four categories that were represented by different sailing-boat symbols. With the icons one can easily spot the problematic clients and make better decisions. I helped appropriate debtor metrics, data architecture, infographics, icons and navigation.

Debtograph is the fun way to see who owes you money. It turns the debtors in your XERO accounts into big, bold pictures. Use it every day. It’s free.”
— XERO user feedback from New Zealand


01 The process started by identifying the the end user for debtograph who is an accountant, small business owner, or a finance/sales department of a company that uses XERO as their accounting software. I spent time understanding XERO and its community and also the way people benefit from the software. XERO is a leading platform in Australia gaining big market in the US and even in Europe. Co-founder James B a US based accountant provided feedback as per the end user, helping us reach solutions that help people make the most of this add on. Clearly, the job of tracking debts is never pleasant and we made the assumption that people can easily neglect it or want to spent little time dealing with the issue and more time moving their business forward. Therefore we needed to find a way to transform the unpleasant numbers into something that is actually pleasing to view and users can immediately grasp with minimal amount of effort.

02 I worked with co-founder Jonathan Clarke, a software engineer, from our studio in Southwark to help structure and wireframe the service. Jonathan would then implement the concept before final design and fine tuning. It was obvious that good charts and infographics would be vital to creating and engaging experience. I suggested to use a card paradigm that would help layout each debtor in a clean way, using a selection of right metrics on those cards. We then identified the right metrics and set to decide the right kind of diagrams for each metric.

03 CONCEPT As the product started to take shape, we identified four types of debtors. These were 1) fast payment - big debt, 2) fast payment - small debt, 3) slow payment - big debt and 4) slow payment - small debt. This would make sense to the majority of users. I then proposed a metaphor to replace the dull data and represent debtors by using a symbol or image for instance animals, vehicles etc. We ended up using boats as the people of NZ, where the project was launched, are quite familiar with yachting.

04 The site structure was beginning to evolve around the metrics pages. We had to decide what type of diagram would best represent each metric. Part of the exercise was to simplify the data and beautify the diagrams. The metric pages are:

  1. How much debtors owe you, as a percentage of your total debt.
  2. Debtors who spent more money
  3. How much time debtors take to pay
  4. Debtors taxonomy in four categories represented by boat types
Working with Jonathan Clarke in our Southwark studio wall

Working with Jonathan Clarke in our Southwark studio wall


05 We then worked at micro level to select and design the icons and navigation. This stage concluded the very early iteration of debtograph and allowed the team to develop it into a functioning product.

06 USER RESEARCH Although the feedback was immediately positive the user base was quite small to gain sufficient feedback. We observed and analysed the built-in analytics to see how users interacted with Debtograph, how much time they spent and identify areas of improvement in the UX of the app.

What is next?

There are many improvements to do in the UI, and the implementation of the design. This post covers only the first iteration of Debtograph. Debtograph allows businesses to borrow money easier, based on what is owed to them. The team is currently working on FINANCIERY which will provide this feature starting in New Zealand.

Here is some of the feedback taken from the XERO site:

Just thought I’d let you know that I’m really impressed with the look and feel of your application. You’ve found a good balance of keeping it simple but using high impact graphical representations to help focus on the core issues – something that I think SMEs need rather than endless lists, and I like the payment/billing trend for individual customers.
— Ian, Australia
Love the way you are looking at this data. A living breathing thing to be cherished on a regular basis

— Jon Jenkins Smart Accountancy Systems Bournemouth, Dorset, UK
We’re already a global success. From a ketchup manufacturer in the USA to an Irish wine importer to an Australian gardener.
— Jonathan Clarke, Co-founder

Tools used: Adobe CS6, Fontlab Studio, Flipboards, post-its, 
Team: Spyros Zevelakis UX Desiger, Jonathan Clarke Co-founder & Software developer, James Bremner co-founder & Accounting expert US
Market: New Zealand, Australia, US, UK.

Try Debtograph v1.0