Babbel 是語言學習的領先產品,一年半前開始了轉型之旅,並採取了一項重大舉措來重塑其整個產品的品牌。 作為一名加入巴貝爾新成立的體驗團隊的視覺產品設計師,我有幸見證並為這一令人興奮的演變做出貢獻,我將帶您沿著主要里程碑。

前奏曲:理解變革的必要性
我們喜歡橙色,但需要新鮮能量。 多年來,巴貝爾透過簡單的使用者友好介面和詳細的專家精心製作的課程,採用一種傳統的線上語言教學方式。 然而,傳統正在妨礙創新,這導致我們做出了重大改變:重塑整個產品的品牌,為創新讓路。 我們的目標很明確:我們的目標是保留巴貝爾以專家語言學習而聞名,同時不斷發展,以支援多樣化和現代的學習風格。
制定藍圖:策略是關鍵
沒有策略的品牌重塑就像在沒有指南針的情況下航行一樣。 定義明確的目標、進行市場研究和了解使用者需求對於發現關鍵痛點和塑造一條成功的前進道路至關重要。 隨著我們的願景到位,巴貝爾的戰略以兩個主要原則為指導,透過創新設計解決方案賦予學習者權力為中心:
- 個人語言教練:巴貝爾的品牌重塑超越了語言教學,將自己定位為平易近人、專業和樂觀的個人教練。
- 靈活和愉快的學習:我們的目標是創造一種適應繁忙生活方式的學習體驗,使語言學習既有效又有趣又吸引人。
這些原則成為我們轉型的支柱,也是我們移交給外部機構的簡報的基礎,為品牌重塑之旅指明瞭方向。
創意鍊金術:將想法帶入生活
我們的創造性合作彙集了:
內部專家:Marcus(產品設計總監)、Ralf(設計系統主管)、Tino和來自體驗團隊的我。
外部合作伙伴:來自Koto的才華橫溢的創意人士,以其品牌設計專業知識而聞名。
Koto以一系列大膽的視覺探索拉開了這一過程的序幕,為品牌的外觀、感覺和聲音奠定了基礎。 他們的概念是鼓舞人心的,但我們需要看看這些願景將如何轉化為我們應用程式的現實世界體驗。

這就是Tino和我(體驗團隊)介入的地方,利用我們對產品的理解來彌合差距。 我們採取了Koto最有前途的視覺方向,並開始將其對映到“家庭”、“直播”和“探索”等關鍵應用程式頁面。 在幾次衝刺中,我們製作了原型,將這些想法帶入我們的應用程式。
這就是我們在體驗團隊中設想家庭的方式,賦予每個學習體驗自己的風格——例如,播客封面感覺更有活力,而課程卡則乾淨、專注。

而對於直播,我們保持課程卡的簡單性,以區別於課程,使用影象和影片進行入職和促銷卡。

探索充滿活力和活力,從核心學習活動中令人耳目一新。 它旨在注入樂趣和能量,透過令人興奮的、互補的內容使學習更具吸引力。

與 Koto 密切合作,我們完善了設計方向,並向我們的執行長提出了一個帶有產品螢幕的統一解決方案。結果是品牌和功能的平衡組合,得到了熱烈的批准。
在一個美麗的柏林夏日,我們在施普雷旁邊的啤酒花園用一些一流的有機葡萄酒慶祝了這一里程碑,標誌著創造力和創新的成功融合。
從願景到現實:交付成果和實施
隨著品牌重塑,是時候改造 Babbel 的數字體驗了。 我們的下一步是深化我們的視覺探索,併為一個全面的設計系統奠定基礎——一個可重複使用的元件、模式和指南的集合,以確保所有數字平臺的一致性。 這包括重新設計導航樣式、標題欄和底部選單等關鍵元素,以及在網路上從頂部過渡到側面導航。 與滾動時可以隱藏的頂部導航不同,側面導航始終保持可見和可訪問性,減少了挫折感,並使使用者更容易在應用程式的不同部分之間快速切換。

我們還探討了入職、每日詞彙、彈出視窗和目標設定等螢幕如何與新品牌保持一致。 此外,我們專注於透過動畫來增強使用者體驗,如課程結束螢幕、載入動畫、微互動和細化導航過渡。

當我們(體驗團隊)探索各種視覺方法時,設計系統團隊致力於將這些元素系統化為一個有凝聚力的設計系統。 他們從按鈕和輸入欄位等基本元件開始,逐漸開發更復雜的元素,如表單、選單、模態和導航元件。 我們一起設計了模式,確立了原則,並制定了詳細的實施指南。 工程師、研究人員和可訪問性設計師測試和完善了這些元素,以確保使用者可用性。 到月底,我們有一個全面的圖案、顏色、排版樣式和圖示庫。 我們在 Supernova 上的 Grammar(設計系統庫)中提供了一個 Figma 庫和設計令牌,為設計師和開發人員提供了資源,以開始高效和一致地重新皮膚化和開發他們的頁面。

Figma 的2023年更新大大增強了我們的品牌重塑。 開發模式簡化了跟蹤生產需求,而變數簡化了跨平臺的設計可擴充套件性和適應性。 有了變數,檢查淺色和深色主題的設計變得毫不費力,為設計師節省了時間並降低了複雜性。 我們迅速採用了這些功能,並充分利用了它們的功能。

情節轉折和陷阱:駕馭挑戰
任何變革之旅都是沒有挑戰的,我們的也不例外。 一個主要障礙是為數千張多語言的課程卡和播客封面開發一個有凝聚力的影象庫。 我們最初嘗試使用人工智慧生成的影象失敗了,產生了不一致的美學。
為了解決這個問題,我們專注於前300名課程和前10名播客的藝術指導,建立了堅實的視覺基礎並建立了全面的指南。 這些準則對於入職創作者和確保一致性至關重要。
我們與學習內容創作者密切合作,選擇適合課程內容和標題的影象,平衡創造力和敏感性。 我們透過使用Airtable進行協調和納入持續反饋來完善我們的方法。 儘管規模和最初的挑戰,但我們的分階段和協作努力產生了高質量的影象庫,支援我們的品牌重塑並滿足我們的最後期限。

真相時刻:有影響力的發射
與此同時,設計師們利用我們強大的元件庫有效地重新剝皮應用程式的各個區域,改進現有功能,併為工程團隊的無縫整合準備檔案。 語法(我們的設計系統庫)充當了我們的北極星,保持一致性並簡化了開發過程。 當我們推出新的巴貝爾時,它不僅僅是一個視覺更新——它是對引導我們的學習者提供充滿活力、現代和引人入勝的體驗的重新承諾。

後果:培育品牌
品牌重塑不是一次性事件,而是持續的旅程。 隨著推出,我們的重點轉向了品牌的完善和發展。 我們首先收集使用者反饋並分析效能指標,以確定需要改進的領域。 建立了全面的設計指南,並與我們的設計團隊共享,以確保每個人都符合新的視覺標準。
展望未來,我們的目標是創新和增強功能,同時忠實於我們的設計原則。 這個正在進行的階段對於保持品牌一致性和適應使用者需求至關重要,確保我們的品牌重塑工作繼續推動有意義的改進,並保持品牌新鮮和相關性。
結論:擁抱轉型
這次經歷給了我們寶貴的見解,我現在將在品牌重塑之旅的實用指南中總結這些見解。
- 評估品牌重塑的必要性:分析您的品牌當前定位,確定是否以及為什麼需要品牌重塑,並明確定義品牌重塑的目標和目的,以確保與您的業務戰略和市場需求保持一致。
- 制定戰略計劃:為品牌重塑設定明確、可操作的目標,進行市場研究,並收集使用者見解,以瞭解受眾的需求、偏好和痛點。
- 組建合適的團隊:召集一個由內部和外部專家組成的多元化團隊來指導品牌重塑過程,確保團隊協作並在整個專案中保持開放的溝通。
- 原型和改進:開發快速原型,以收集同行的反饋。 優先考慮使用者測試以增強體驗或測試新概念,而不是測試配色方案、佈局或排版。
- 建立一個有凝聚力的設計系統:開發一個全面的設計系統,包括所有視覺元素、元件和品牌指南,以保持一致性,併為設計師和開發人員提供詳細的文件和資源,以確保新品牌標識的一致應用。
- 預測和應對挑戰:預見潛在的挑戰,並制定積極主動的策略來應對這些挑戰。 為視覺資產或訊息傳遞等複雜元素建立明確的指南,以確保所有接觸點的一致性。
- 利用有效的工具和技術:利用設計和協作工具,提高可擴充套件性、適應性和效率,實現新品牌標識,並隨時更新這些工具的最新功能,以最佳化設計和開發過程。
- 釋出後評估和重複:收集反饋以評估品牌重塑的影響,並使用效能指標和使用者反饋來確定持續改進和改進的領域。
- 致力於品牌的持續演變:透過持續演變和適應使用者需求來保持品牌的相關性,並定期更新品牌指南和設計系統,以反映新的學習和創新。
致謝
當我總結這篇文章時,我也在慶祝我在巴貝爾的第一年結束——這是成長、挑戰和迷人的品牌重塑專案的一年。 多虧了這麼多才華橫溢的個人的共同努力,這段旅程令人難忘。 衷心感謝我的經理Marcus Hauer(產品設計總監)和Ralf Chille(設計系統主管),以及來自體驗團隊的同事Tino Burkhardt(視覺產品設計師)的信任、創造力和奉獻精神。 特別感謝我們在Koto的外部合作伙伴將我們的想法帶入生活。
我感謝來自Self Study、Engage、Live、Central和Growth的設計師和領導的合作和創造力,並感謝設計系統團隊確保無縫整合。 非常感謝研究人員和工程師的細緻工作和奉獻精神。 衷心感謝 Liz Chung 作為我們的PM、Anna Stutter Garcia和Design Operations的 Eden 協調一切,促進了我們設計團隊內部的合作,並感謝他們對本文的寶貴反饋。
最後,感謝我們的領導團隊支援我們的願景,並允許我們突破界限。 為在巴貝爾度過的第一年乾杯,充滿團隊合作、創造力和品牌重塑,如果沒有你們所有人,這是不可能的!