Hotjar成立于 2014 年,是一種工具,能夠發現用戶在訪問網站時的行為方式以及他們的強烈感受。Hotjar為其客戶提供"產品體驗洞察",使用熱圖可直觀地看見用戶在網站上的點擊、移動和滾動位置;錄制以獲得用戶在網站上的實時播放,看到點擊,鼠標運動,U型轉彎,和憤怒點擊("憤怒點擊",哈哈!反饋,通過實時建議框的網站,用戶表示沮喪或喜悅的個別部分的頁面;和調查,以更好地了解用戶。其200多個團隊大多位于馬耳他,員工遍布歐洲、美洲和非洲,其產品已在180多個國家的90多萬個網站上使用。(我個人以前沒有聽說過 Hotjar, 但根據收到的提示數量, 我猜你們很多人有。
他們標志性的"火焰"logo設計,看起來有點像Tinder的,用戶的反饋告訴他們,他們的品牌太新潮,不夠包容。自 2014 年成立以來,Hotjar 一直享有指數級增長,其品牌形象設計需要迎頭趕上市場發展。現在,他們行業領先的產品是數百萬用戶的重要工具,它使公司能夠了解用戶在其網站上的行為,從而能夠看到他們需要什么,并衡量他們的感受。
品牌設計公司想為未來打造一個品牌。其中一個考慮了三個非常重要的因素:他們的受眾,他們的愿景(把人放在每一個產品的核心)和他們的目的(通過同理心激發變革)。
將這三者組合成一個必須以 16 像素 x 16 像素(Hotjar 品牌最明顯的接觸點)為主要工作的圖標,這是一個需要解決的復雜設計問題。從代表用戶旅程的富有表現力的線條開始,然后我們復制它以顯示產品提供的人際關系和支持。添加柔和的曲線有助于暗示來自標志性 Hotjar 火焰的熱量,以及公司名稱中固有的H。




舊的LOGO是相當不錯的, 有一個適當的無襯線技術和一個良好的集成和令人信服的設計火焰在 "j" 之上。我可以看到它的問題看起來像火種, 但我懷疑有人會混淆這兩個產品。我確實同意 "太過創新" 的看法, 但值得稱贊的是,它比大多數初創公司的LOGO執行得更好, 更清晰。
新LOGO設計去掉了火焰,采用一個抽象的LOGO,而不是火焰,這個LOGO比火焰更像是火焰散發出的熱浪,但我可能認為它是一個真正的火焰。logo解釋視頻中的動畫很好地將平行線分解為火焰,因此這是一種可以在社交媒體上構建并創建關聯的運動姿態。在執行過程中,圖標感覺有點僵硬,看著構造動畫,現在很清楚為什么它是一對完全幾何、像素完美的貝塞爾曲線。這本身并沒有什么問題,但要創建一個超小型圖標,可能需要進行一些視覺調整,使其流動更加順暢。然而,為了在小尺寸下獲得絕對最佳的渲染效果,我將其點和曲線捕捉到一個像素網格,以便以微小的尺寸進行最佳渲染。

由于該產品展示了從憤怒的點擊到快樂、滿足的瀏覽等人類情感的全方位,我們開發了一個圍繞著冒泡的線條和笨重的球體或“光環”構建的設計系統。在這種情感精英管理中,沒有一種感覺優于另一種,因為所有這些都有助于更好地理解用戶的旅程和體驗。因此,線條可以有快樂曲線和憤怒鋸齒曲線的組合。


品牌vi設計引入了兩種圖形設備,它們滲透到大多數應用程序中。第一種是一些令人愉快的球體狀漸變,模擬網絡熱圖,但顏色要比捕食者看到的更好。第二種是一些彎曲、扭曲、鋸齒狀的線條,它們復制了用戶在網站上的鼠標跟蹤。這兩種元素經常結合在一起,形成一些有趣的作品。我認為軌跡線變得有點難以控制,但我確實很欣賞在系統中加入一些不同的圖形。












插圖通過其極簡主義和奇怪的比例,略微偏向默認的技術風格。他們通過一些粗粗的“旅程”線有效地與身份聯系在一起,突出了他們身體的某些部位。我并不特別喜歡這種效果,因為它會產生一些看起來很奇怪的線條,非常突出,但那只是我自己…我不認為它們有什么問題。我也喜歡他們如何將熱圖球整合到插圖中。插圖系統的額外點數,其中頭部、軀干和腿部可以混合和匹配,以創建各種尺寸和顏色的不同人物。
Hotjar網站是其產品的主要銷售渠道,因此對該品牌采取數字優先的方式至關重要。從顏色選擇到品牌資產,在整個品牌開發過程中,每個元素都考慮了可訪問性、文件大小和運動行為。









雖然應用不多,但在新網站上可以體驗到品牌的精髓,它干凈、明快、色彩豐富,在不同的地方以小劑量構建了LOGO元素。上面的廣告都很好,也很吸引人……我仍然覺得這些痕跡線有點太多了,分散了我對插圖和標題的注意力。那一個“廣告”只是墻上的線條…那不是很有用或有意義。下面提到的swag照片的一個很好的細節是,他們如何將熱圖球集成到照片中,從而使它們巧妙地融入品牌。


總的來說,這是一個生動而充滿活力的重新設計的品牌形象設計作品,使銷售“產品體驗洞察”更加令人興奮,同時為Hotjar作為一家公司建立了一個有趣和易接近的個性。
上海品牌策劃公司,尚略分享科技品牌設計案例。