designing for simplicity

Alexa Internet is well known for it’s site rankings and data on internet trends. 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.

project goals

  1. Provide critical KPI’s (key performance indicators) at a high level.
  2. Establish context to convey meaning at the next level.
  3. Use context to compel users to action.

roles and responsibilities

the process

User data was very scarce. Within the company, 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 the modern era of the Internet. So the first order of business was to start establishing a user-centered design discipline to help us focus on addressing 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.

To help users understand the data, it is best to use comparisons to present the analytics. There is never really a time when a single data point is used in isolation. So I also mapped out how a given data point within the system connected to other data points. 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, a dashboard should summarize a given set of metrics in a simple yet compelling way. But we were given the additional complexity that the user first 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. Because a single data point on its own has very little value, an important aspect of this design concept was to always show information in comparison to something, either to another data point, or to itself from a previous time period. This way, we can establish context to help the user better understand their metrics.

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

One important idea behind these wireframes was to try to make the data interactive. It doesn’t come across very well in a static wireframe, but it was important that any charts shown in the product were interactive elements and not just static images. The idea was that 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.

visual designs

conclusions and take-aways

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. It was unfortunate because those kinds of last minute changes can have a negative impact on the user experience of a product, and more importantly, many of the business metrics that you’re trying to improve. 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!