Cover Image_Crazy Egg Recordings.png

Crazy Egg Recordings

Crazy Egg Recordings

A case study on how I designed and launched a recording tool as a Minimal Viable Product (MVP) for Crazy Egg.

Crazy Egg Recordings Demo.gif

In early 2016, I joined Crazy Egg. It had one tool: Snapshots. I was tasked with designing, researching, and executing an MVP launch of its 2nd tool: Recordings


Goal

The goal was broken down into two parts, design and build:

  1. a recordings tool as a minimal viable product (MVP)

  2. an upgrade flow for this new product that included a pricing page and billing flow

Process

CONCEPtuALIZATION with CONCEPT MAPS

At the start of the project, I worked with our CEO, Hiten and CTO, John Butler to come-up with a vision for this recordings tool. Before any design, I translated our ideas into concept maps. 

 
Crazy Egg - Recordings - Concep Map - Analyzer & Search.png
 

The concept map enabled our entire team to develop a common understanding of the features we aimed to develop for the Recordings tool.

It was used as a guidepost to judge our sketches and prototypes.

FLOW CHARTS

I constructed a flow-chart to visualize the logical flow of information.

The mapping helped clarify requirements and the different use cases that had to be addressed within the application.

 
 

Early concept WIREFRAMES

The first iteration of the recordings tool surfaced demographic information about the visitor: location, job title, gender, age. 

Crazy Egg - Recordings - Wireframe 2@3x.png

The hardest challenge was determining what type of information was valuable to customers and what was feasible from an engineering standpoint. I went with a user-centered approach by interviewing customers to find out what was valuable to customers and created a matrix in excel to map out perceived customer value and engineering effort.

DESIGN AND INTERACTION DEFINITION

I detailed the interactions using Sketch. I also worked with our Design team to refine the visual design patterns.

 
 

Working with our engineers on defining the mousement was the hardest challenge. The red mousetrails caused unleashed a plethora of problems: 

  • The mousetrails would render in staging and not render in production

  • The fading mousetrails would not work.

  • The mousetrails were problematic when a person would go from Wepbage A to Webpage B to Webpage C.

I worked with our front-end engineer and we came-up with a simplified approach by scrapping the mousetrails. We moved forward with the implementing the mouse hover and mouse click interactions. 

IMPLEMENTATION

Implementing the Recordings tool was a crucial phase of the design process. At Crazy Egg, we work in small teams without product managers.

To execute the “Build It” phase, I created a product requirements document (PRD).

Crazy Egg Recordings Product Requirements Document - Part 1.png
Crazy Egg Recordings Product Requirements Document - Part 2.png

It gave our team a high-level understanding of the feature - it explained the “What,” not the “How.”

I kept the PRD trimmed down to the core: overall purpose, features, release criteria, and timeline for the product. 

Any designer, engineer, marketer or stakeholder could use this living document as the “bible of truth” to understand the purpose as well as the status of the Recordings product.

I updated the document daily. 

Final Design

Here are the final designs that demonstrate the Recordings product. You can also try out a free demo of the tool: https://app.crazyegg.com/recordings/demo/player

Crazy Egg - Recordings - Mockups - #1@4x.png
Crazy Egg - Recordings - Mockups - #3@4x.png
Crazy Egg - Recordings - Mockups - #7@4x.png
Crazy Egg - Recordings - Mockups - #5@4x.png
Crazy Egg - Recordings - Mockups - #6@4x.png

User Quotes

User Quote #1 - Recordings.png
User Quote #1 - All.png