Screen Shot 2018-01-24 at 8.32.47 PM.png

Crazy Egg JavaScript Installation Flow

Crazy Egg Installation Process Redesign

A case study on how I designed the 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 data. However, we weren't trying to reinvent the wheel. Our ambitions were to redesign the process and ship the project quickly to increase the # of successful installs. 

Our high level goals were to:

  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 one other designer on the illustrations.

In addition, I worked alongside one designer, a Support person, and a team of engineers.


Before & After

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

Before                                                                                     After

CrazyEgg_-_Install_Tracking_Script.png

Process

At the beginning of the project, we didn’t have a clear mission or specific goals for the installation experience. Without pre-existing insights, I interviewed customers to  explore how Crazy Eggers were installing the code snippet.

EARLY INSIGHTS FROM THE FIELD

I reviewed existing user feedback from our customers by sleuthing through Support tickets, tweets and Support emails to better understand the limitations of the installation process.

MAPPED OUT TOUCHPOINTS

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

It was important to go through the entire setup process, documenting every step that's either required (like signing up with Google) or seems super important for getting value out of the Crazy Egg (in this flow, it's adding the Crazy Egg tracking snippet to your site.) 

Once I documented all the touchpoints for the onboarding experience, I went back and did the same thing for all the other top entry points such as Google Ads and even people who arrive through word-of mouth. 

It was important to evaluate them for consistency. For example: did the description of the Google search results match up well with the content of the homepage it pointed to?

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

REQUIREMENTS AND SPECIFICATION REVIEW

I created documents on our competitors, success metrics, user flows, scope and and detailed requirements.

Wireframes

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

Final Designs 

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

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

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

Customer Feedback

Screen Shot 2018-01-24 at 6.15.31 PM.png