Avoiding the Unruly Wall of Data
Marketing campaigns with Google and Facebook come with a large footprint of data. There are many types of metrics that go into a performance report, such as spend, clicks, impressions, reach, and a whole suite of site and ad conversions. It is a challenging problem to solve both technically and visually. The asynchronous nature of waiting for data from two separate ad platforms requires dynamic updates as data streams in. As well as managing how the page looks while retrieving and displaying all that data. It is very easy for the report to turn into an endless amount of unruly tables.
A recent refresh of our ad platform performance reports provided an opportunity to rethink how we can present more data that communicates a return on investment for the retailers using our service.
Goals
- Demonstrate the value of our service.
- Show our retailers the info they care about the most.
- New ways to present data that tells a specific story about their ad metrics.
- Build upon what has worked in the past.
Approach
When designing the report mock up, I took some inspiration from the concept of the inverted pyramid often used in journalism. Present the most newsworthy information first, followed by important details, and the less important details that are nice to know for the people who are deeply invested.
Data Organization
The page itself was broken into several sections with report
highlights being at the top and it would get progressively more
detailed. To avoid an overwhelming amount of data being shown at
once, I created a custom tab component with dynamic named slots
passed in as a prop array. This would allow sections to be
created on the fly depending on when data was loaded. One thing
many tab components in popular UI libraries cause the content to
jump up and down between different tabs because the height of
each tab varies based on content. One way to get around this was
to get the content height after it was loaded and maintain its
value in an array. As a user switched tabs and the index changed
the max-height. CSS transitions would allow it
smoothly animate between the two values and reduce the otherwise
instant content jump.
Engaging Charts
As a user moves from tab to tab, they are presented with an engaging chart as well as tables for detailed info. The charts are vital to quickly show and compare metrics to spend or performance by device. One of the newest charts I am most proud of is a bubble scatter chart. This chart shows a specific metric like clicks, impressions, or purchase to the spend of all the campaigns during the report time frame. It was a great way to show how the amount they spent for a campaign impacts its performance as users can select a metric to compare to the campaign spend. The challenging part was handling ad platform data as it came in at different times and it was further complicated by Google and Facebook having some platform exclusive metrics. In a nutshell, I used a Vue computed property to dynamically build metric options based on the available platform metrics. Computed properties were also used to dynamically format the data for the chart component based on the user's selected options. This required extensive knowledge of Vue's reactivity, JavaScript array methods: map, filter, reduce, from, as well as the object from entries method. In total there were three separate sources of data: Google key metrics, Google conversions, and Facebook metrics.
The performance report page is full of custom components like a gantt chart that utilized CSS grid to show when campaigns started and ended in comparison to each other, and a drill down table with breadcrumb navigation that would swap between tables when a user clicked on a table row.
Back-end Collaborators: Avery Gonzales, Andrew Towe, Preston McCumber