UX Research ✹ UI/UX ✹ Web

CodingBar 產品到達頁

根據企業目標策略、顧客樣貌重新設計國小課程產品到達頁。
經由訪談研究分析顧客需求與痛點,並設計資訊內容與視覺,改善訪客停留時間及頁面互動次數。

專案背景

CodingBar 是青少年程式教育機構,企業營收主要來自自營課程。 根據 GA 數據顯示,訪客平均停留於課程產品到達頁時間約 1 分鐘,工作階段瀏覽頁數約 1.93,意味著多數訪客不會進一步與品牌產生連結,成效不佳。

產品主要目標顧客為國小學生,溝通對象則包含學生家長;市場上有多個競爭對手,因此需要重新設計到達頁,強化自身品牌獨特價值,提高品牌認知率與轉化率。

專案目標

設計能有效傳達品牌價值的產品到達頁,增加訪客停留時間與互動率。

我的角色

參與訪談,了解顧客樣貌與需求

協助提供訪綱並參與訪談活動,在訪談中扮演紀錄與觀察者,經由訪談資料的整理、分析掌握顧客樣貌與需求。

根據企業目標與顧客樣貌,調整品牌定位與溝通策略

比較目標顧客與忠誠顧客的樣貌,分析、歸納差異點,提供品牌形象與溝通策略建議。

重新設計品牌官方網站,傳遞企業價值主張

在重新規劃溝通策略後,針對既有官方網站資訊、視覺進行改版,讓官方網頁成為顧客與企業之間的價值橋樑,讓潛在顧客更認識,並能有機會進一步認同 CodingBar。

  • UX research
  • UX content
  • Brand Position
  • Website UI Design
成果與影響

訪客停留時間提升 2 倍,並與產品到達頁產生 2 次以上的互動,降低 17.71 % 的跳出率。

改版前(2022)
  • 訪客停留平均時間 00:01:11
  • 單一工作階段瀏覽頁數 1.93
  • 跳出率 66.69 %
改版後(2023)
  • 訪客停留平均時間 00:02:57
  • 單一工作階段瀏覽頁數 3.04
  • 跳出率 48.98%
設計過程
#1 顧客研究
  • 焦點訪談: 探索家長對孩子的教育態度、3C 使用觀點、課程選擇方式、困難點…,了解需求、痛點、行為與動機。
  • 一對一訪談: 了解忠誠顧客多次選擇 CodingBar 的原因。
 
#2 關鍵發現
  • 家長主要擔心孩子的學習興趣及課程實際內容:
  • 期待為孩子找到個人興趣進而願意深入學習,培養一技之長。
  • 課程價格高,沒有信心做選擇。
  • 忠誠顧客主要強調產品的教育價值、教學專業度以及課程完整性:
  • 在社群上看見課程照片,教室白板上為文字型程式(非拖拉積木),忠誠顧客認為 CodingBar 課程相較於其他品牌具有高度專業性。
  • 忠誠顧客強調 CodingBar 的教學方式啟發孩子學習的興趣,讓孩子能持續學習。
  • 有完整的課程規劃,不用擔心孩子學一半就中斷是忠誠顧客持續選擇 CodingBar 的原因。
  • 其他:
  • 無法完全阻止孩子使用 3C,但又擔心孩子沈迷電玩,虛度時光。
  • 看完介紹依然難以判斷課程是否適合孩子。
 
#3 需求分析與功能規劃
  • 探索並啟發學習的興趣
  • 設計需求:展現課程產品多元、好玩。
  • 功能:設計 Hero Section 展現多元課程與活潑的氣氛;並設計探索課程按鈕,讓有興趣的家長可以快速找到課程產品。
  • 強調產品價值
  • 設計需求:凸顯教育方面的優勢,展現教學特點。
  • 功能:設置課程特點區塊。
  • 強調課程規劃的完整性
  • 設計需求:展示課程規劃的完整性。
  • 功能:分級呈現課程項目。
  • 真實課程情況展示
  • 設計需求:透過視覺展現課程實況,增加信賴感。
  • 功能:課程活動照片牆。
  • 快速了解課程是否適合
  • 設計需求:幫助家長了解課程是否符合孩子學齡、程度。
  • 功能:課程商品卡片標示簡介、推薦學齡、課程難易度。
 
#4 資訊架構
 
#5 設計決策
Hero Section
  • 大標與副標直接點出主題及品牌價值主張「提供專業、多元跨域的教學服務,協助家長一起陪伴孩子探索興趣與天賦」。
  • 透過大量照片組合作為 Hero Section 的背景,讓訪客能一眼就看出 CodingBar 課程的多元性;選用的照片也展現課堂活動以及活潑有趣的品牌風格。
 
痛點與課程特點
  • 在 Hero Section 下,以家長共同關心的議題:「讓孩子在沒有自己的未來仍保有生存力」,引起家長的注意力。
  • 提出 CodingBar 能夠提供的價值:陪伴每個家長協助孩子探索興趣、找到天賦,同時以「橫向探索、縱向學習」傳達品牌像朋友一般的陪伴,同時具備專業背景的資訊。
  • 以簡單三步驟說明 CodingBar 課程與教學的獨特之處。
    照片的選擇傳達課程中用有趣的遊戲作知識引導、師生互相討論、團隊合作、專案成果發表…等, 緊扣品牌想傳遞的「用孩子有興趣的遊戲引發學習動機」、「專業、耐心的教學引導,承接孩子的學習興緻」資訊, 以及「專業、活潑、朋友間的分享」的品牌調性。
 
課程列表
  • 以分頁方式,讓家長可以快速切換、查看不同類型的課程選項;同時減少手機瀏覽時,課程列表太長,捲動查看不容易(或容易失去耐性)的情況。
  • 從一日輕量體驗到基礎課程、進階課程,三階段的多元選項回應顧客在選擇課程時,希望親自體驗後再選擇,降低顧客的心理負擔,並吸引顧客與 CodingBar 產生第一次互動。
  • 根據家長在幫孩子選課程時,初步判斷課程是否符合需求的必要資訊,課程資訊卡片顯示:課程縮圖、名稱、適合對象、能力需求、課程簡介、價格,快速讓家長理解該課程是否適合自己的孩子,若好奇、有興趣可透過點擊卡片進入課程產品詳細介紹的頁面。
 
活動照片廊
  • 課程活動照片廊以單軌水平跑馬燈的互動方式呈現,在最小高度中呈現 CodingBar 課程活潑、專業知識、師資豐富、快樂學習的特點。
  • 照片內容包含講師用簡單的方式講解生硬的程式碼、隨時提供協助的講師與助教、學員間的互動、電腦外的線下活動等,回應許多家長經常詢問的問題:
  • 課程的授課形式?CodingBar 夠專業嗎?
  • 團班的師生比如何?會不會因為學生人數多,我的孩子就被忽略了?
  • 資訊程式比較生硬,上課會不會很無聊?
  • 會有下課時間嗎?整天盯著銀幕還是很傷害孩子的眼睛。
  • 透過照片廊增加品牌形象、建立信任感。
 
專業背書
  • 感性與理性交叉,在感性的活動照片廊之下,再以 CodingBar 歷年來在國內、海外獲得的獎項與合作夥伴,向顧客傳達品牌「專業且可信賴」的訊息。
Before & After
Before
After