Establecida en 2014 Hotjar es una empresa especializada en Insights, brindando servicios y tecnologías de la información. Su sede esta en San Julián, en la isla de Malta, aunque poseen equipos en todo el mundo. Hotjar capacita a sus equipos brindando información sobre la experiencia del producto, mostrándoles cómo se comportan los usuarios y qué les interesa, para que esos equipos puedan ofrecer un valor real.
Se busca detectar oportunidades de productos, consolidar la calidad y la cuantía y comunicar las necesidades de los usuarios. Su equipo trabaja en los desafíos convincentes que vienen con el análisis y el tráfico web a gran escala, en un producto que tiene un impacto real en los miles de usuarios a los que brindan asistencia en todo el mundo. Trabajan en un entorno ágil, 100% remoto, y fomentan activamente el crecimiento tanto personal como profesional; Estar siempre aprendiendo es uno de sus valores fundamentales.
La agencia How&How diseña la nueva identidad de Hotjar
Hotjar tenía un problema en su logotipo. El elemento icónico en forma de ‘llama’ era muy similar al utilizado en la red social de citas Tinder. Además los usuarios de su plataforma hacían comentarios sobre su identidad, les parecía ‘demasiado emprendedora’ y poco inclusiva. Desde su creación en 2014, la empresa ha crecido exponencialmente y su identidad necesitaba actualizarse para reflejar el crecimiento. Su herramienta es esencial para millones de personas, un producto líder en la industria que ayuda a las empresas a comprender cómo se comportan los usuarios en sus sitios web, permite ver lo que necesitan y medir cómo se sienten.
La empresa Hotjar contactó a la agencia londinense How&How para crear su nueva identidad. Esta incluye un nuevo logotipo, paquetes de animación e ilustraciones con un estilo propio, además diseñaron y construyeron su nuevo sitio web. El objetivo era crear una marca para el futuro. Se tuvieron en cuenta tres factores importantes: su audiencia, su visión (poner a las personas en el centro de cada producto) y su propósito (inspirar el cambio a través de la empatía).
Animación de las curvas del logotipo.
Logotipo, paleta de colores y sitio web.
Un icono rediseñado
La agencia debía rediseñar el icono del logotipo para que funcionara en escalas pequeñas, entornos digitales y se sintiera auténtico. Debía combinar los 3 factores: Audiencia, visión y propósito en un nuevo ícono. Debía funcionar en una escala a 16 px por 16 px (Siendo el punto de contacto más visible de la marca Hotjar). Según comenta la agencia fue: «un problema de diseño complejo de resolver. Comenzando con una línea expresiva para representar el viaje del usuario, luego la duplicamos para mostrar la conexión humana y el apoyo que brinda el producto. Agregar una curva suave ayudó a sugerir el calor de la icónica llama Hotjar, así como la H inherente al nombre de la empresa».
Se desarrolló un sistema de diseño estructurado que utiliza líneas efervescentes y orbes pesadas o ‘auras’. Ellos lo llaman una meritocracia emocional, donde ningún sentimiento es superior a otro.Todos ayudan a ofrecer una mejor comprensión del viaje y la experiencia del usuario. Por lo tanto, las líneas pueden tener una combinación de curvas felices y dentadas enojadas.
Concepto detrás del logotipo.
Paleta de colores y tipografía de Hotjar
La nueva paleta de colores de la marca, esta inspirada en «conjuntos de colores cálidos y fríos de dos componentes en una llama». Esto refuerza la idea de transmitir las emociones cálidas y frías visualizadas en el producto en sí. La tipografía utilizada en la marca es Ambit de CoType Foundry destaca por su estilo amable y rizado, un distintivo que imita las líneas expresivas de los cursores del usuario que navega por los sitios web.
El principal canal de ventas de Hotjar es su sitio web. En todo momento se buscó que la nueva identidad funcionase de la mejor manera en las pantallas digitales. Los activos de la marca, desde su paleta de colores, formas e ilustraciones intentan proyectar estos objetivos.
How&How explica: «se consideró cada elemento en función de la accesibilidad, el tamaño del archivo y el comportamiento del movimiento. Dado que la audiencia principal de Hotjar está formada por equipos de productos con conocimientos digitales, y su producto se trata de ayudar a estos a su vez a crear mejores productos, el sitio web que diseñamos y construimos tenía que ser funcional y estéticamente tan sólido como pudiéramos hacerlo. Alcanzar constantemente los 100 en nuestras puntuaciones de Lighthouse era imprescindible. También implementamos una opción de modo oscuro (favorecida por la audiencia objetivo) para ayudar en la eficiencia energética y dar al usuario control sobre su modo de visualización preferido».
Publicidad exterior.
Forma de la línea.
Algunas aplicaciones: Camisas, botellas y reporte anual.
Ilustraciones animadas.
Análisis de la identidad de Hotjar
Hotjar tenía dos problemas en su identidad, el primero era que el icono de la llama se parecía mucho al de Tinder, también los usuarios habían criticado que la marca no era demasiado inclusiva. La agencia How&How se enfoco en estos dos problemas para el nuevo proyecto.
La nueva identidad celebra el espectro completo de las emociones humanas en el cambio de marca y el relanzamiento de Hotjar. El nuevo imagotipo posee en su parte icónica dos líneas, que representan el viaje del usuario y su conexión humana. También al ser dos elementos simétricos recuerdan un poco al monograma de la letra ‘H’.
Una identidad inclusiva que intenta enfocarse en todas las emociones de los usuarios, desde el enfado hasta la felicidad. Para lograr el objetivo se desarrolló un sistema de diseño de «líneas efervescentes» y «orbes pesadas». Estas varían según el tipo de estado de ánimo de los usuarios. La paleta de colores posee tonos cálidos y fríos, inspirados en los que podemos ver en una llama. Con tonalidades entre rosado, púrpura, amarillo y azul. Las ilustraciones también comparten estos gradientes y un estilo que refuerza la idea de crear emociones.
La tipografía sans serif utilizada es Ambit de CoType Foundry un tipo de letra accesible, fácil de leer, amable y que queda muy bien con el aspecto rizado de la marca. Por último se mejoró el sitio web, ofreciendo una serie de funciones accesibles, que mejoran su legibilidad y también se creó un modo oscuro, para ofrecer más opciones. En general es una identidad muy atractiva que resuelve los grandes problemas que poseía la marca con un nuevo logotipo inteligente, una nueva combinación de colores ardientes y una tipografía con mucha personalidad.
