designing for simplicity

Alexa Internet 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.

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. 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 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.

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.

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, 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!