Portfolio: Heap

By Joshua Krohn

Data is everywhere around us. For those who run websites or mobile apps, making sense of all this data requires a ton of work: writing tracking code, building a data pipeline, writing SQL queries, designing the reports, and a bunch of other stuff that takes business owners away from their real work.

If you're a non-techie, understanding this data is a chore. Unless you're working with Heap. Heap is a web and mobile analytics tool that, when installed, automatically captures every interaction within your site or app. When you need to analyze the data, you do it instantly through a simple visual interface using nothing but points and clicks. The best part is: no writing code. Ever.

alt text

Making essentially anyone in an organization a data scientist is pretty powerful; Heap came to us to help tell that story. We worked with them to extend their current brand onto a site that sets them apart and positions them well for continued growth.

Our first step was to wireframe the pages. Although marketing sites can be pretty straightforward, it still helps to lay the home's foundation and structure before moving on to the paint and finishing touches.

alt text

Once wireframes were approved, we headed straight into visual design. Words are great, and images can tell a powerful story, but it was clear we wanted to use motion to help communicate Heap's powerful features. While not used in the live site, getting motion ideas like the one below helped set the tone for the rest of the project.

alt text

Our idea for motion on the homepage evolved over the course of the project but the end result helped tell the story of Heap's unique features.

alt text

Heap's existing brand makes use of a pink-and-orange gradient that they really liked (and so did we). Because that scheme conveys a youthful vibe, we paired it with a deep purple to help create a professional and mature experience.

alt text

Being careful not to stray too professional, we paired the color scheme with custom-made icons and illustrations. This allowed us to maintain the right balance of friendliness and professionalism.

alt textalt text

In the end, we delivered a site that better helped Heap tell their story. They were a total pleasure to work with, giving us great direction and then the creative freedom to communicate it.

Check out some more photos of the work and view the live site at heapanalytics.com.

alt textalt textalt text