Crazy Egg_JavaScript Code Snippet Installation.png

Crazy Egg JavaScript Installation Flow

Crazy Egg JavaScript Installation Process 

A case study on how I redesigned the JavaScript installation process for Crazy Egg:

Goal

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:

  1. Make it fast and easy-to-use for marketers to install their JavaScript code snippet.
  2. Increase users' confidence by limiting and managing users' time spent floating in limbo.
  3. Increase the feedback loop where completed tasks are reciprocated with success states.

My role

I led the design and implementation of the installation experience and collaborated with an amazing designer Sarah Thomson.

Before & After

Here are the before and after shots of the installation process.

Before                                                              

After


Process

At the beginning of the project, we didn’t have a clear mission.

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

EARLY INSIGHTS FROM USABILITY TESTING

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

  1. 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.
  2. 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. 

MAPPED OUT TOUCHPOINTS

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. 

Sketches

Attachment-1.jpg

Task Flow

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.

Crazy Egg - JavaScript Installation Redesign - Task Flow Chart.png

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.

Wireframes

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

Flow chart.png

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.

Final Designs 

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.


Customer Feedback

Crazy Egg - User Quote #1 - JavaScript Installation.png
Crazy Egg - User Quote #3 - JavaScript Installation.png
User Quote #6 - JS Installation.png
Crazy Egg - User Quote #2 - JavaScript Installation.png
User Quote #4 - JS Installation.png
Crazy Egg - User Quote #5 - JavaScript Installation.png