The DataHero Blog

Designing The New DataHero Homepage

February 4th, 2014


DataHero recently unveiled a redesign to a key part of our app: the homepage. We wanted to make the homepage easier for users to navigate, enable us to send users important notifications, and make it more visual overall. This post describes the process we went through to create our new homepage, from feedback to testing (to more feedback and more testing) and through to implementation.

Here is what the DataHero homepage looked like before the redesign:

All services were displayed in the left hand rail, with imported files shown just above the files available for import.

The first step in our redesign was to gather data through surveys and hundreds of interviews with our users, and combine that with feedback and suggestions that users had previously submitted. The top requests from users were for easier access to their most recently created and updated charts and for the time of the most recent updates and next scheduled updates to be more apparent.

After prioritizing the goals of the homepage redesign, we entered an iterative phase of designs in Adobe Illustrator. We went through several (27) initial iterations of the new homepage internally and with select users. Below are a few examples of the early designs that we explored.

The first one below had too much focus on visual elements. The charts were prominently displayed, but there was little organization and the relationship between charts, datasets and connected services was not at all apparent.

The homepage prototype below showed a clearer relationship between datasets and charts, but put too much focus on the featured news, which was not meant to be the focal point.

This next design improved the navigation using the bar at the top but required too many clicks to access the information that users found most important.  It also did not offer the ability to view a lot of information at a glance.

The design below clearly communicated the relationship between charts and datasets, but did not help navigate through datasets or charts that had been updated recently.

These iterations (and many more) helped us to prioritize the elements of the homepage redesign and ensure that these elements were combined in an easily navigable and visually appealing way.  The result was the following design, in which visual elements like charts were the focal point, a prominent clock highlighted when the next update was scheduled, and navigating between collections of charts and datasets (“New Projects”) was easy.

We took this design to the next step, implementing a fully-functional prototype, which we tested with a larger sample of users.  What we discovered in user testing was that although this homepage was visually pleasing, highlighted scheduled updates, and included important DataHero notifications, users had trouble navigating through it and ultimately got confused.

From there we took what we had learned in the iterative process and moved back to the left rail as a way to navigate through services and datasets. We still wanted to de-clutter this space and make moving through services, datasets and charts as smooth as possible.

In the iteration below, you’ll see an important element that was later adopted into the most recent version of the DataHero homepage. Services are still listed in the left rail as in the first iteration of the homepage, but users connect other services through a popup modal so the unconnected services do not clutter this area. Files available for import are also not mixed with files that have already been imported.

From here we continued to iterate, incorporating all that we had learned through our user testing process and quantitative analysis. The screenshot below is the final version of the homepage, a culmination of many iterations and months of design and user testing.


Services and connections stayed on the left rail (you can see below that I’m accessing data from Google Drive), allowing the user easy navigation through their services. Both the latest datasets with all relevant information and editing capabilities are visible right in the middle, complete with the time they were last updated. Most recent charts are found below the listed datasets, so users can access them in a single click. Also on the left rail below connected services in an unobtrusive space are notifications for news in DataHero, allowing users to stay up to date on announcements.

The ultimate goal in redesigning the homepage was to make data easily accessible, include important notifications, and display scheduled updates. We’ve had really positive feedback on this version, users find it easier to use and spend much less time learning how to navigate between services, datasets and charts. Each time we introduce a redesign to our site, we watch carefully from both a qualitative user interview perspective and a quantitative perspective. Many parts of the site are a constant work in progress, so we’ll continue to update you as we move forward in our design process.

Want to see how we did? Sign up and check out our homepage while getting answers from your data.

Create a Free DataHero Account

By Gail Yui

Create my Free DataHero Account

Get the fastest, easiest way to understand your data today.