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

Crazy Egg JavaScript Installation Flow

Crazy Egg Installation Process 

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

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 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 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 report.
  2. Issue #2: Users were confused by the lack of feedback, they were not sure if they installed the JavaScript code snippet. They expected a 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.

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.

Sketches

Attachment-1.jpg

Task Flow

In addition to the sketches, I designed a flow so that the team could have alignment on the scope of the project. The flow chart provided our team of engineers a high-level understanding of the flows and helped us get 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.

Here's a snippet of the prototype:

Crazy Egg Installation Wireframe.gif

Final Designs 

Visual Design: I worked on the visual treatment and 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 as effectively.

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 a team of 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
Screen Shot 2018-04-05 at 3.33.22 PM.png