Visualising data — clarity not ambiguity
Designing Qubit Aura’s reporting interface.
We launched Aura back in July 2017 with the goal of improving product discovery on mobile. Aura sits on an eCommerce website and curates feeds of products specifically for each individual visitor based on their site activity. It was something different to anything we’d done before at Qubit. It’s consumer facing, and uses the best pieces of technology we have developed over the years in a tangible way.
In the early alphas and betas of Aura we focused purely on the consumer side. We iterated and tested fast until we had a product that was having an impact. We spent a good amount of time developing this consumer side, but an area that was lacking was the reporting interfaces to tell our clients how Aura was driving value.
So we defined metrics that were useful for marketers and in line with what they were being asked for when proving ROI. These metrics seemed to fall into 3 distinct categories: Revenue, Engagement and Product specific.
Getting started
Once we had an idea of the metrics it would be useful to display, we starting thinking about how to make these easy to digest. Our initial designs for the reporting page had revenue and engagement metrics split across two separate pages.
But we started to see that we needed a dashboard that catered for practitioners looking for in depth reporting as well as people just looking for an overview of performance. So we combined these areas together to create a single block within the Aura section of the Qubit platform.
Iterating on the way we visualise data
We ran another round of user testing with this new format and discovered some interesting challenges. This was when the real fun started!
Feedback from our customers was that without a base figure to compare with, the main stats were hard to put into perspective. It makes sense — you know that being charged 25p for a Freddo is outrageous because you remember that they used to be 10p. Without that benchmark I’d be none the wiser when picking a sweet treat in my local supermarket.
These metrics were all nicely housed in the same format, but different approaches were needed for displaying these comparisons depending on the metric in question.
For most of the revenue metrics — Conversion rate, Revenue per visitor and Revenue per converter — we compared Aura openers against people exposed to Aura. This worked well as a simple line chart, showing the day to day change.
But this did not work so well for Assisted Revenue, which was one of our key metrics. With assisted revenue we had two figures — an upper and lower bound — and both needed to be displayed alongside a comparative value.
Not only that, up until this point Aura’s metrics had been displayed as independent daily figures. This makes sense for averages, but with a figure that is constantly growing like revenue, presenting this as daily measures means that you don’t see the growth in terms of the bigger picture.
So we switched to a cumulative chart for this metric and explored a lot of different ways to visualise it. We tried line graphs, area charts, stacked area charts, bars, steps — below is just a snapshot of the mammoth sketch file.
The challenge we faced was that each level of the chart was made up of the previous levels. We had the strict attributed revenue metric at the bottom that Aura had definitely impacted, then a second measurement of what that attributed revenue would be if using a standard attribution calculation, all of which was part of the total mobile revenue.
Because of this, and after a lot of talking and testing, we settled on a stack area chart, allowing you to quickly see the growth of each value in relation to each other.
Product interactions
The second section of our reporting page is the product interactions section. This gives people insights into which products are getting most interactions in Aura.
We already had design patterns for lists of products from elsewhere in the platform but we wanted to see if we could improve this so that it was easier to digest. They say a picture speaks a thousand words so we added product shots rather than forcing a marketer to learn the full names of their entire catalogue.
Though this was really visually engaging and got good feedback from clients, it was limiting in terms of the amount of data we could display here. Also, in terms of the page as a whole, it immediately caught your eye, which started to conflict with the importance of the revenue and engagement metrics at the top of the page. So we created a hybrid between the two patterns by having a table with smaller images. These images act as a visual cue but without being overpowering or distracting.
Today — total clarity
So here it is — our latest and greatest reporting screen! During the design process we’ve had a platform refresh, we’ve even had a rebrand of the whole company. It’s been a big team effort working out what to display and how to display it.
There’s still work to do here. As we develop Aura itself and add new features, we’re looking at how that can be reflected in this interface. That’s on top of assessing and reassessing the usefulness and layout of the information being displayed here.
This post is part of a series about the business facing interface of Aura. For an overview of where this sits in the bigger picture, click here.
Sarah Benson. Product Designer at Qubit — busy writing the next in the series. Give me a bell on twitter @sarahbenson18
Thanks to Giovanni Luperti for help with editing.
