When designing reporting tools, the metric that is always a constant is time-frame. Is this a daily, weekly, quarterly or annual report? Tools such as Google Analytics set a predefined time-frame when you arrive (starting at today and going back a week). Elastic Grid reports on Multi-Touch digital campaigns that can run for around 14 weeks. So, we made our Analytics tool accommodate an extended time-frame to satisfy marketer needs in the context of pulling lead reports of campaigns currently in progress or just completed. It also meant we weren’t trying to load too much data in one hit on page load.
This was sufficient for ninety percent of user needs, they wouldn’t need to adjust time-frames at all. However, what we hadn’t noticed is that they probably didn’t know how to adjust time-frames either. We started getting support requests from users, complaining about missing data, only to discover they hadn’t expanded the reporting time-frame to cover the full campaign lifespan. Or, they weren’t moving the time-frame back far enough to see the data from a campaign they ran earlier in the year.
Now, granted, this wasn’t happening often. But, often enough to suggest it wasn’t isolated to a particular user base. More concerning was that we encourage users to really look at what is going on with their campaigns. Even if they are seeing all the expected data, time-frame filtering is not just a means to see what happened overall. It lets you see what is happening on particular days or weeks to help prepare for future campaign executions.
In short, it was important to determine whether users expected data from all time to load by default or whether they were unaware that the time-frame was filtered at all. So, rather than jumping right into solution mode for this particular use case, we needed to make sure we were looking at this the right way.
This was the perfect job for Crazy Egg (recommended tool for layout optimization). We set up a snapshot on the site reporting page to see what users were doing:
Crazy Egg let's us target a page and record user behavior.
The filtering options above look at how a company can define their reports, by all campaigns they are executing, view Leads Generated, Site Visits or the performance of email batches. Traffic can also be filtered by source (email, social or anonymous). It’s quite clear from the interactions that all filtering mechanisms are used, including the contextual menus. For example, if a campaign is selected, its modules appear in another drop-down menu next to it for further refinement.
However in the top right hand corner you can see the time-frame range isn’t used as much as the other options. It is only used as much as the source options which are given much less prominence in the hierarchy.
Early discussions were along the lines of adding tutorial pop-ups etc to explain what was going on and other extreme measures. We were in the midst of an overhaul of the top navigation layout (to tighten it) for the entire navigation area across the platform. So, we took the opportunity to try something very simple here before we took more drastic measures: a simple layout update to the time-frame range picker to give it more prominence. But, we were also wary of interfering with what was already working for users on the page. Scroll reach, pagination and emailing of report actions at the bottom of the page were all getting used as expected, as well as the main filtering options at the top of the page.
We moved the time-frame range picker front and center below the navigation and above the filtering options. Coinciding with the top navigation tightening meant that the page didn’t really grow in height:
After re-testing the changes, we found that we saw improvement on the usage of the time-frame range picker. It was pleasing to see that such a small change could garner drastic results. However, we’ve also yet to receive support tickets around the issue of data not being found due to time-frame parameters. It was also important to note that we hadn’t seen any change in the other elements on the page and that our new layout didn’t cause other filtering problems.
Here’s what we noticed:
Heat map indicated the time frame filters have jumped into the top 3 hotspots on the page.
We have lots of ideas on how to present our reporting data and many more improvements on the application overall. However, we don’t neglect the obvious. If timing is a thing, make it front and center and always test your “best-practice” layouts and make sure the simple things are working. Also, keep your improvement ideas small, you need to get something done and validated quickly… Do. Fail. Repeat.
“I am amazed by how it works. Very easy to use. It saves a lot of time.”
– Partner Quote from our Marketing Specialists BIG (Before I Go) questions initiative.
Lead UX designer and Design Team Lead at Elastic Grid, responsible for the user experience of the platform and the products visual brand. Lorenzo has extensive experience designing simple digital solutions for large, complex commercial projects, including e-Commerce, marketing campaigns and content management platforms.