Hotjar Activation

A series of projects aimed at revamping Hotjar's onboarding and activation experience. I led the design efforts to guide new users from the moment they sign up to the moment they find their first valuable insight, measurably improving user activation and conversion.

Company

Hotjar

Timeframe

Nov 2021–Feb 2023

The new Hotjar 'For You' page on a laptop
Challenges and goals

Boosting activation and delivering value early

Hotjar empowers product and marketing teams to empathize with their users, combining quantitative data and qualitative research to uncover the 'why' behind user behaviour. However, Hotjar's onboarding for new users had significant room for improvement. Many users were getting lost during the initial setup, faced with a one-size-fits-all experience that failed to deliver immediate value. This led to low installation rates of our tracking code, the critical first step to using the product.

A user journey map of the old onboarding flow, highlighting user pain points.
Mapping the original user journey revealed several points of confusion where new users would drop off.

A key initiative I pushed for was to define and optimize the user "golden path". We defined our "core users" as those who converted and retained best. Working with our data team, we analyzed their behavior to identify the specific steps these users took to become successful. Our primary goal was to redesign the new user experience to guide more people along this path, boosting conversion and retention.

Beyond the initial setup, we identified a second major opportunity: the main dashboard. Once a user completed the getting started guide, the page offered little guidance, becoming a static jump-off point rather than a place for discovery. For a platform that generates vast amounts of data, helping users find meaningful insights was crucial for long-term retention.

My role and the team

Driving design strategy for activation

As a Staff Product Designer, I was embedded in the Activation squad, and I oversaw design in the Conversions tribe, helping define strategy and mentoring designers in the other squads that made up the Conversions tribe. I worked closely with product, engineering, content design, and data to shape our roadmap, leading design work from discovery and research to final implementation. I championed a data-informed, experimental approach, which was key to improving our activation metrics.

Design process

From onboarding to continuous value

To achieve our goals, we relied heavily on a combination of qualitative research and quantitative methods like A/B and multivariate tests to iterate quickly and clearly understand the impact of our design choices. We decided to focus on a couple of key areas:

Focus Area 1: Sign up and tracking code installation flow

Through user research, analytics, and journey mapping, we confirmed our initial hypothesis: users were confused and didn't see the value right away. Our first challenge was getting the tracking code installed. We explored several solutions, and validated that a more focused, personalized, step-by-step approach worked best for new users.

3 redesigned screens: new sign up flow, tracking code installation page and the Overview with the new Getting Started Guide.
Some key screens from the new onboarding, showing part of the new sign up flow, tracking code installation page and the new Getting Started Guide.

The final solution addressed the problem from multiple angles. We introduced a dedicated Getting Started Guide (GSG) that provided clear, actionable steps. We completely overhauled the Tracking Code Installation (TCI) page, adding testimonials and addressing common user objections to build trust. A key improvement was introducing personalization based on factors like user goals, company size and more, which allowed us to tailor the setup instructions and increase relevance. We also created a dynamic system of unobtrusive prompts to push users to take the actions that we identified in our "Golden path" analysis, like inviting team members or creating "highlights".

Design specs for guide card, suggestion tile, and floating panel.
Some components from the Hotjar Activation Toolkit (HAT), with clear guidelines for their use.

To encourage deeper engagement beyond the initial setup, we also designed a set of patterns and components named Hotjar Activation Toolkit (HAT) that other teams could easily use across various areas of the product. All of this work also had a considerable impact on the look and feel of Hotjar because it was the first time that the recent rebranding was borught into the product in a prominent way.

Focus Area 2: The "For You" page

The old 'Overview' page was static and didn't help users navigate the wealth of data Hotjar provides. Our vision was to create a dynamic, personalized hub. After exploring various drafts, including a full-screen "featured insights" concept that proved too overwhelming, we landed on the "For You" page.

Two screenshots of the 'For You' page.
The new page shown before and after tracking code installation, showing relevant personalized content throughout the user's journey.

This new page adapts to the user's journey and is tailored to the user's goals and their expertise with Hotjar. Before the tracking code is installed, it provides clear guidance and steps to get set up. After installation, it transforms into a powerful dashboard. It features relevant articles and guides, and uses a recommendation engine, whose rules I helped define, to surface key insights from the user's data, helping them discover the "aha!" moments without having to dig for them.

Outcomes

Driving significant growth in activation and conversion

Our systematic, user-centred approach to activation paid off, delivering significant, measurable improvements across the entire funnel.

You can learn more about my work on Hotjar's Activation in this interview I gave for an episode of Appcues' Behind The Experience podcast.
One more thing: Project Emerald

Defining Hotjar's Product Direction

Beyond my work on the Activation team, I initiated and led Project Emerald, a company-wide strategic initiative to define a cohesive product direction for Hotjar. While individual squads were shipping excellent work, the company had many siloed visions and lacked a single North Star to align them. As I put it, “we’re building beautiful houses, but we’re not planning the city.”

People and sticky notes in a design thinking workshop.
Photos from a design thinking workshop I facilitated during an offsite, to brainstorm around the new product direction.

The goal was to create a product direction that was both aspirational and realistic, built collaboratively with input from senior leadership and the broader team from the start. I designed and facilitated a series of async and in-person workshops, bringing together stakeholders from across the company to contribute. We synthesized hundreds of ideas into two core opportunity statements: making insights actionable, and clarifying the value of our multi-product offering.

These statements formed the foundation of a new Product Direction I drafted, which centered on four pillars: Value, Understanding, Ease-of-use, and Seamlessness. The final deliverables from Project Emerald were presented to the executive team and used as a primary input for shaping Hotjar's official, long-term product vision, creating a shared language and strategy for the future of the product.