Hotjar had an image problem. Their iconic 'flame' looked a little too much like Tinder’s, and user feedback had told them their brand was 'too startup-y' and not inclusive enough. In the years since it was founded in 2014, Hotjar had enjoyed exponential growth and their brand needed to catch up. Now an essential tool for millions, their industry-leading product allows companies to understand how users behave on their websites—allowing them to see what they need, and measure how they feel. 

We were approached by Hotjar to collaborate on their rebrand (including animation and illustration packages), and to design and build their new headless CMS website. We wanted to craft a brand for the future. One that took into account three hugely important factors: their Audience, their Vision (to put people at the centre of every product) and their Purpose (to inspire change through empathy).

Combining these three into an icon that had to work primarily—and most importantly—at 16px by 16px (the most visible touchpoint of the Hotjar brand), was a complex design problem to solve. Starting with an expressive line to represent the user journey, we then duplicated it to show the human connection and support the product gives. Adding a gentle curve helped to suggest heat from the iconic Hotjar flame, as well as the H inherent in the company’s name.

As the product shows the full spectrum of human emotion—from angry clicks to happy, contented browsing—we developed a design system structured around effervescent lines, and ponderous orbs or ‘auras’. In this emotion meritocracy, no feeling is superior to another—as all help to offer better understanding of the user’s journey and experience. Lines therefore can have a combination of happy curves, and angry jagged ones. 

Our colour palette was inspired by the two component warm and cool colour-sets in a flame. This also helped to convey the warm and cool emotions visualised in the product itself. Ambit by CoType Foundry was chosen due to its friendliness and distinct ‘curls’ which mimicked the expressive lines of user’s cursors browsing websites. 

The Hotjar website is the primary sales channel for their product, so a digital-first approach to the brand was essential. From colour choices to brand assets, each element was considered for accessibility, file size and motion behaviour. As Hotjar’s primary audience comprises of digitally-savvy product teams—and their product is about helping these in turn make better products—the website we designed and built had to be both functionally and aesthetically as robust as we could make it. Consistently hitting 100s on our Lighthouse scores was a must. We also implemented a dark mode option (favoured by the target audience) to aid in energy efficiency and give the user control over their preferred viewing mode.

Featured in:
Design Week
Brand New: Under Consideration
Print Magazine
Branding Temple
The Goods Magazine
Designers Bookshop
Mindsparkle Magazine

Visualising the full spectrum of human emotion, in the rebranding and relaunching of the global user insights platform.

Hotjar Brand Identity, Website Design & Website Development

Celebrating the full spectrum of human emotion in the rebranding and relaunching of Hotjar: the global user insights platform.

Visualising human emotion for a global user insights platform

Hotjar

HJ-Landing-1920x1080_1_1.webm

HJ-Landing-1920x1080_1.mp4

HJ-Landing-1080x1080.webm

HJ-Landing-1080x1080.mp4

We're a creative, branding and digital design agency based in London & Lisbon & LA. We create brands and websites for forward-thinking companies.

How&How | Digital Branding Design Agency in London, Lisbon & LA

We use Google Analytics to track and record your movements on the Website, where you came from and what pages you access. This data is not connected to any personal information.

We use Hubspot for Website analytics and marketing automation. This data is anonymous unless you fill in a form and your contact details are added to our database with your consent.

We use Leadfeeder to see what company IP addresses our traffic is coming from. This data is not connected to any personal information.

We use Hotjar to record session information to see how people use our website. This data is not connected to any personal information.

Our Website uses Cookies to ensure you get the best experience on our Website.

HJ_Logo Story_1920x1080_1.webm

HJ_Logo Story_1920x1080.mp4

HJ_Logo Story_1080x1080_1.webm

HJ_Logo Story_1080x1080.mp4

One of the most challenging elements of the rebrand, was having to design an icon which could easily be legible and recognisable at 16px by 16px. From the outset, all design considerations had to work on this scale first and foremost as it was the most important touchpoint of the Hotjar brand (seen on small website feedback widgets across the globe).

The icon also needed to be able to scale up with ease, and include implicit references to Hotjar's unique Purpose and Product Vision.

Designing at 16px

small

HJ-LogoStructure-1920x1080.webm

HJ-LogoStructure-1920x1080.mp4

Flame Colour Palette

HJ-ColourPalette-1920x1080_1.webm

HJ-ColourPalette-1920x1080.mp4

'Curly' Typography

HJ-Typeface.webm

HJ-Typeface.mp4

Design Asset: Emotional Line

HJ-Trace Line_1920x1080_1.webm

HJ-Trace Line_1920x1080.mp4

Design Asset: Auras

HJ-heatmaps-1920x1080.webm

HJ-heatmaps-1920x1080.mp4

Heat Blur Photography

Hotjar_Photography.webm

Hotjar_Photography.mp4

Design System

HJ-OOH-03-1920x1080_3.webm

HJ-OOH-03-1920x1080.mp4

HJ-OOH-03-1080x1080.webm

HJ-OOH-03-1080x1080.mp4

HJ-Webscreens-01-1920x1080.webm

HJ-Webscreens-01-1920x1080.mp4

HJ-Webscreens-03-1920x1080_1.webm

HJ-Webscreens-03-1920x1080.mp4

HJ-Webscreens-04-1920x1080.webm

HJ-Webscreens-04-1920x1080.mp4

HJ-WebArq-1920x1080.webm

HJ-WebArq-1920x1080.mp4

HJ-WebArq-1080x1080.webm

HJ-WebArq-1080x1080.mp4

Line Behaviours

Hotjar_LINES.webm

Hotjar_LINES.mp4

Spot Illustrations

Hotjar_ILLUSTRATIONS.webm

Hotjar_ILLUSTRATIONS.mp4

Design System Attributes

Hotjar_PHOTOS.webm

Hotjar_PHOTOS.mp4

Feedback Emoji Set

TEST_HJ_FACES.webm

TEST_HJ_FACES.mp4

Illustration Breakpoints

TEST_HJ_ILLUSTRATIONS2.webm

TEST_HJ_ILLUSTRATIONS2.mp4

Responsive Design Assets

Hotjar_Web_Scale.webm

Hotjar_Web_Scale.mp4

Branded Design Assets

Hotjar_CASE STUDIES.webm

Hotjar_CASE STUDIES.mp4

Light Mode & Dark Mode Colours

Hotjar_COLORS.webm

Hotjar_COLORS.mp4

Light Mode & Dark Mode Icons

Hotjar_ICONS (1).webm

Hotjar_ICONS.mp4

HJ_case study_NPS-1920x1080.webm

HJ_case study_NPS-1920x1080.mp4

HJ_case study_group-1920x1080.webm

HJ_case study_group-1920x1080.mp4

HJ_case study_px-1920x1080_1_1.webm

HJ_case study_px-1920x1080_1.mp4

HJ_case study_ux guide_1.webm

HJ_case study_ux guide.mp4

HJ_case study_incoming feedback-1920x1080.webm

HJ_case study_incoming feedback-1920x1080.mp4

HJ_case study_heatmaps-1920x1080_1.webm

HJ_case study_heatmaps-1920x1080.mp4

HJ_case study_recordings-1920x1080_1.webm

HJ_case study_recordings-1920x1080.mp4

HJ_case study_survey-1920x1080_2.webm

HJ_case study_survey-1920x1080.mp4

HJ_case study_1920x1080.webm

HJ_case study_1920x1080.mp4

HJ-SM_Carrousel-1080x1080.webm

HJ-SM_Carrousel-1080x1080.mp4

HJ-SM-Post-1080x10800.webm

HJ-SM-Post-1080x10800.mp4

HJ-SM_Stories-1080x1080_1.webm

HJ-SM_Stories-1080x1080.mp4

HJ-SM-story-1080x1081_1.webm

HJ-SM-story-1080x1081.mp4

HJ-SM-Post-vertical-1080x1080_1.webm

HJ-SM-Post-vertical-1080x1080.mp4

HJ-SM_Stories-illustartion-1080x1080.mp4

"You know that thing where an agency just feels like a (brilliant) extension of your own team? How&How have that in spades. They're everything you could ask for in a rebrand partner. Smart, creative, collaborative and flexible."

"This project was a major undertaking as it involved a full rebrand, creating a new illustration style to match it, redesigning our website from scratch and migrating it to a new CMS, and restyling our product — and we couldn’t be happier with having selected How&How for this project! 

"They took the time to understand our team, our mission and our product, and helped us incorporate all of those elements into our new brand in a way that’s true to both who we are but also to where we’re headed. They’re professional yet friendly, highly creative yet organized, and they were extremely responsive and accommodating to our changing needs as the project evolved. We’re really proud of our new brand and redesigned website, and enjoyed collaborating with How&How on this just as much as we love the final result!"

With huge thanks to Christian, Adria and Sharon—our wonderful Hotjar clients across the years!

Work / Hotjar

Visualising human emotion for a global user insights platform

Designing at 16px

Design System

Want to start a project?

See more work

Yum Bun

SauceLabs

flyp

Veriff

emm

FREETREE

Amphico

AIQ

ON THE EDGE

Trackinsight

One Green Bean

Deadly Dust

USERZOOM

EAT LESS PLASTIC

e15

FORGOTTEN FORESTS

INTERGIRO

Kick Game

Lets talk ☺︎