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 not writing code. Ever.

Our task was making analytics–a potentially dry subject–approachable to anyone who’s interested in data. We worked with them to extend their current brand onto a site that sets them apart and positions them well for continued growth.

Making a data scientist out of anyone in an organization is pretty powerful; Heap came to us to help tell that story.

Heap Process@2X

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.

Heap Wireframes 01@2X
Heap Wireframes 02@2X

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.

Heap Ui Family@2X
Heap Hero@2X
Heap Ui Detail 01@2X
Heap Ui Detail 02@2X

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

Heap Icons@2X
Heap Illustrations@2X