Crazy Egg: Screen Recording Tool v1.0

Project Overview

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

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

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.

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.

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

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.

The hardest challenge was determining what type of information was valuable to customers and what was feasible from an engineering standpoint.

Usability Testing

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.

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) and design specifications.

It gave our team a high-level understanding of the feature - it explained the “What,” and details on 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 to keep our remote team up-to-date.

Final Designs

Here are the final designs that demonstrate the Recordings product.