Crazy Egg Recordings
A case study on how I designed and launched a recording tool as a Minimal Viable Product (MVP) for Crazy Egg.
The goal was broken down into two parts, design and build:
a recordings tool as a minimal viable product (MVP)
an upgrade flow for this new product that included a pricing page and billing flow
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 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. 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.
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).
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.
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