Crazy Egg: JavaScript Installation

Our goal for the project was to revamp the installation process. The premise was simple: install the Crazy Egg tracking script, track click data.

The high-level goals included:

Without pre-existing insights, I interviewed customers to understand how Crazy Eggers were installing the code snippet.

I tested the existing installation flow with 8 participants. The goal was to understand the challenges Crazy Egg users faced.

Issue #1: Crazy Egg users were annoyed when they were dropped straight into the installation page after creating their first heatmap report. They expected to see a confirmation page after they created their first heatmapreport.

‍Issue #2: Users were confused by a lack of feedback because they weren't sure if they successfully installed the JavaScript code snippet. They expected a success-confirmation within their dashboard after they finished going through the installation flow.

I mapped out each touchpoint and analyzed what worked well and what didn't work well.

I was mindful of what our users were pursuing at each step so that I can help shape their expectations for the next one.

In addition to the sketches, I created a flow chart that served as an artifact to align the team on the scope of the project.

The flow chart also provided our team of engineers a high-level understanding of the multiple flows. In addition, the task flow helped our remote team dig into the weeds of specific states and ensure there were no dead-ends.

I created low fidelity wireframes to focus on the copy, information architecture, layout, and flow.

I explored multiple design approaches in the form of a low fidelity interactive prototype. I discussed with the team the strengths and weaknesses of each approach, and iterated based on internal feedback.

Visual Design: I worked on the visual treatment to align it with our brand. We iterated on how to draw users' attention to the different installation options and how to use the space effectively.

Specifications for Development: I created a specification document that was used to cover each touchpoint within the flow, hover states, and micro-interactions. This document, along with a red-lined visual specification I created, helped our remote engineering team reference the specifics of the design during the implementation phase.

Development Oversight: I worked with a team of engineers to answer questions and tweak designs to ensure that the new installation process worked and looked as expected.