Designing easy-to-use analytics tools

Alexa Internet (a subsidiary of Amazon since 2002) is well known for it’s site rankings and trend data. But in order to help the company reach profitability, Alexa set out to create a new class of products focused on delivering on-site analytics to site owners. I was leading the UX design effort for the new products. Dashboard information systems can be complex, and it is important to get the user experience just right. Even more challenging was how little time there was to complete everything.


The Summary

  • Good design for dashboard information systems is more about good storytelling.

  • Summarize at the top, details underneath (progressive disclosure).

  • Tested wireframe prototypes to understand interaction models and iterate.

  • Usability testing is a really effective "soft launch" that helps you discover significant issues BEFORE you ship!


The Problem

How might we design an easy-to-use web analytics tool?

Google Analytics is the most commonly used tool for collecting web traffic data. No doubt it is a powerful tool, often used by experts, but that leaves a lot of non-experts wanting. There are a segment of people looking to create online businesses, but need easier tools to help them understand what's happening on their sites!


The Customer

Alexa Internet has been a tool used by site owners, online marketers, and webmasters for many, many years. As one of the early web analytics products, people have used Alexa's panel-based, web rankings to understand how popular their site is, in the hopes of being able to get more traffic.


What are their goals?

These kinds of customers are trying to grow their online businesses, not just in terms of revenues, but also reach.

What are their pain points?

Understanding analytical data can be daunting for the novice. I heard time and again that Google was too complicated for people to understand. In addition, once they do figure out what's happening on their site, it can be just as difficult to understand what to do with that information. People know that they need the information, but it's difficult to make heads or tails of it, in a way that's actionable.


The Idea

User data was very scarce. There was a lot of inferred information based on the past usage of the Alexa website, but these inferences would not help us design a new data product for a new age of the Internet. So the first order of business was to start establishing a user-centered design discipline to help us focus on the right things.


I started the design process by mapping out how site owners use analytical data to take action. We discussed this a lot internally and also interviewed some customers to ensure that it was focused on the right things.

Based on what we learned from the initial mapping, I then started mapping product flows. There were lot of different concepts and pages to keep organized to make sure that users could get value from the product.

In another phase of the project, I also mapped out how a given data point within the system connected to other data points. To understand what the data is saying, these analytics are best understood when used in comparison. There is never really a time when a single data point is used in isolation. By mapping these connections, it helped give the team a sense of how complex web analytics can be, and how much we would need to do to help simplify the experience.

This is the first wireframe created for the main dashboard page. Typically, the dashboard page should be focused on summarizing metrics in a simple yet compelling way. But we were given the additional complexity that the user had to be able to access multiple different sites and products. So the page morphed into more of an access point to many different kinds of content as opposed to a true information dashboard page.

After selecting a website on their main dashboard, the user would be taken to a metrics page for that site. This page would summarize the critical metrics for that site.

Continuing on the “dashboard as access point” requirement, I iterated further on the features of the dashboard. One feature that I added was the notification system to alert users of the system to important events with either their site traffic, or features to help them manage the system.

I also continued to iterate on the wireframes for the metrics overview. A single data point on its own has very little value. So an important aspect of the conceptualization of these screens was to always show information in comparison to something, either to another data point, or to itself from a previous time period.

Another wireframe concept for presenting information on the metrics overview. In this concept, rather than having panels for each metric comparison, the user could browse the main tabs across the top of the main panel.

One important concept behind these wireframes was to try to make the data interactive. It doesn’t come across very well in a static wireframe, but the idea was that the charts were not just static images, but interactive elements also. A user could click on any point on the line to then drill down even further to very specific information display about that data point.

Instead of a data table that lists all sites you own, I developed a concept for using specific panels that summarize information for your site. The panel was intended to provide more of the key metrics up front, as opposed to always having to click through to the subsequent metrics page.

Based on all the work that we did, and some usability tests conducted on some wireframe prototypes, we eventually settled on this simplified content architecture for the system.


The Implementation

While the concept continued to evolve, my team members worked on the visual design for the product. I established and managed a small design team to handle a variety of different design tasks. I had them start work on the site dashboard (seen below).


This page is intended to provide the big overview of all the different metrics that affect all the different sites that they are managing.

As they dig deeper, they can see more metrics that affect a specific site.


The Outcome

We had successfully completed a lot of UX work in a short amount of time. We did multiple rounds of user testing, iterated on designs, and completed a visual rendering of all the wireframes. Despite achieving our design goals, it was decided to launch with a significantly reduced feature set, which was unfortunate since those kinds of changes can have a negative impact on the user experience of a product. In scenarios like these, it is critical to keep focus and quickly follow up with additional product iterations to both react to feedback and integrate the features that were left out. Your users will greatly benefit from it!


The Takeaways

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

All Topics