Hotjar
Visualising human emotion for a global user insights platform
The project was developed in collaboration with How&How
Hotjar needed to refresh their 'too startup-y' look to catch up with their growth. As one of the biggest UX insight tools, it allows users to see what they need, and measure how they feel.
As the product shows the full spectrum of human emotion—from angry clicks to happy browsing—a design system was developed, structured around effervescent lines and ponderous orbs. Playful typography combined with a vivid set of complementary colour palettes (light & dark mode), highlight the emotional element that influences Hotjar’s output.
Single line illustrations made out of a modular system and paired with orbs expressing the character’s emotion, elevate communication through a very scalable design system.
Brand identity
Art direction
Motion design
Illustration
Website Design
Website Development
Designing at 16px
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.
Related projects
Hotjar
Visualising human emotion for a global user insights platform
Hotjar needed to refresh their 'too startup-y' look to catch up with their growth. As one of the biggest UX insight tools, it allows users to see what they need, and measure how they feel.
As the product shows the full spectrum of human emotion—from angry clicks to happy browsing—a design system was developed, structured around effervescent lines and ponderous orbs. Playful typography combined with a vivid set of complementary colour palettes (light & dark mode), highlight the emotional element that influences Hotjar’s output.
Single line illustrations made out of a modular system and paired with orbs expressing the character’s emotion, elevate communication through a very scalable design system.
Brand identity
Art direction
Motion design
Illustration
Website Design
Website Development
The project was developed in collaboration with How&How
Designing at 16px
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.
Credits
Client
Type
Website