Cover Image_Snapshot Creation Flow.png

Crazy Egg Snapshot Creation Flow

Crazy Egg Snapshot Creation Flow

A case study on how I redesigned the Snapshot Creation Flow for Crazy Egg.

Crazy Egg Snapshot Creation Flow Demo.gif

Crazy Egg pioneered click-mapping technology. It was the first company to create heatmaps - reports that show where people clicking and not clicking. 

 Crazy Egg Snapshot Report

Crazy Egg Snapshot Report

Crazy Egg's Snapshot feature consisted of five reports (including heatmaps). It provided data for digital marketers so they could improve their website, increase engagement and increase conversion rates. 

The Problem

Crazy Egg's Snapshot Creation process was originally designed to create one Snapshot at a time.

I interviewed 15 customers to identify pain points. 

Problems included:

  • The process was inefficient. Customers complained that creating multiple Snapshot was a major pain point. One customer said, 

    “I have to run 8 or 9 Snapshots at a time. It's one of my biggest gripes with Crazy Egg.” 

  • Setting up advanced tracking options like wildcards and regular expressions felt like rocket science. Our customers sent in emails asking for our team's help to check if they did things correctly. Users were confused and lacked the confidence to use our most powerful features. 

The Challenge

I led an effort to redesign our Snapshot Creation Flow that aimed to:

  • overhaul the visual design so that it adhered to our new style guide
  • introduce a new feature that allows users to create Snapshots in bulk
  • improve the set up of advanced tracking options such as custom URL tracking, wildcards, and regular expressions
  • provide a review page that gives users a full summary of what they will get 

Snapshot Flow Before & After

Here are before and after shots of the Snapshot Creation flow interface.

Before - Here's what the Snapshot Creation flow looked like as of June 6, 2015 without a bulk creation experience:                                                                                    

Crazy Egg - Snapshot Creation Flow - Before.png

After - This is what the redesign looks like with a bulk creation experience:

Snapshot Creation Flow - After.png

Here's How I Did It

Understand Needs

Meet Michael, a digital marketer. 

This need can be summed up with a user story statement:

[As a <type of user>, I want <some goal> so that <some reason>] 

To put this in perspective for Michael or any similar persona, here’s what a complete user story statement looks like:

As a digital marketer, I want to create 10 Snapshots at a time so that I don't have to waste time creating one at a time. 

HOW CAN I HELP Michael?

After crafting a persona and user story, I wrote down epics and needs. The purpose of the epic and the needs is to understand the scope and figure out how to meet your users’ needs.

With the design stories, we can address each story one at a time in the task flow.

Task Flow

Snapshot Creation - Flow Chart.png

Explorations

I partnered with another designer to explore alternative designs. Here are a few examples:

Snapshot Creation Flow - 1.jpg
Snapshot Creation Flow -1.jpg
Snapshot Creation Flow - 3.jpg

Create Prototype and Validate with Real Users

I created a clickable prototype and conducted successive rounds of usability testing. 

Final Results

Snapshot Creation Flow - Final - 1.png
Snapshot Creation Flow - Final - 2.png
Snapshot Creation Flow - Final - 3.png
Snapshot Creation Flow - Final - 9@3x.png
Snapshot Creation Flow - Final - 4.png
Snapshot Creation Flow - Final - 5.png
Snapshot Creation Flow - Final - 6.png
Snapshot Creation Flow - Final - 7.png
Snapshot Creation Flow - Final - 8.png

User Quotes

User Quote #4 - Snapshots.png
User Quote #2 - Snapshots.png
User Quote #1 - All.png
User Quote #6 - Snapshots.png
User Quote #1 - All.png

What did I learn

  • Stay focused on the problem. Test ideas with the Crazy Egg audience. Don’t get attached to solutions.