DataHero has grown to include a variety of new features, services, and tools. Over time these additions started to outgrow the homepage design and navigation. A few months ago I was tasked with updating DataHero’s homepage to better showcase the range of our product, encourage them to use our features, and aid in their data visualization process.
Through research, a series of internal Q&A sessions and discussions with the product team on our goals and objectives I narrowed down our goals for the homepage re-design to 3 key factors:
With those goals in mind, we sketched out multiple looks into quick wireframes. Since speed is a must in the concepting phase, a good portion of initial process was done on paper. Doodled ideas without a structured environment can give you quick insights into what will and won’t work, while laying out a guiding path for the prototyping phase.
From paper, I moved onto Sketch and Invision for prototyping. These tools allow me to design within DataHero’s aesthetics and navigation flow rapidly. The quick mock-ups also allow us to do quick inhouse testing on the design and iterate on the go.
A few of the quick wireframes I worked through to explore different layouts and designs.
Once the basic layout was figured out, we followed it up by reviewing our internal analytics to find behavioral patterns that we could use to better guide the experience.
An example of this was the number of datasets we would allow a user to view. Our old homepage showed a never-ending list of all of the datasets a user uploaded into DataHero.
Old DataHero Homepage
This set up is useful as a data library, but cumbersome when it came to gaining quick access to the data you’d been working on last. Our analytics showcased that almost all of our users engage with only 3 datasets at a time. This meant that we could focus on just highlighting the last three datasets and use the real estate to showcase our users’ charts and dashboards.
Through out the research phase I realized that our UI would need to be card based. It was both contextually appropriate and flexible for our product. By doing this we went from a long list view to an easy to read datacard:
Through the design of this new homepage, we knew we’d need to bring a few more colors into our palette to create a stronger visual hierarchy. Balancing the colors to integrate seamlessly into our current design was key. A variety of colors were tested from the initial lay – out mock up phase to our final prototyping phase. We must have gone through 25 different greens before deciding on the right one. Our final additions to our color palette included four new tones of blue, a base grey and a green as the call to action.
The design for mobile was done in parallel to the desktop view. There are a lot of designers currently stipulating that all design should start with mobile. Though I largely support the thought process, one must also take into consideration the product and its market. Data visualization and analytics thrive in a desktop environment. Having said that, designing responsively across the board is always the best practice. Below are some of my rough sketches for mobile and an early mock render.
Finally all of this came together to create a robust homepage environment. From the empty state to a power user the card design adapts to our clients needs. Sign up today to check out our new design.
New DataHero Homepage
New DataHero Homepage Empty State Design
Get the fastest, easiest way to understand your data today.Sign up for free