
原先課程銷售、上課平台在 hahow 平台進行,由於藍圖與多元語言課程規劃,決定架設屬於 Jella! 品牌的語言學習平台。1.0 網站上線、第一門課程集資後,進入網站優化迭代階段。
平台官網主要為完整品牌形象展露、課程販售的管道,希望會員在此進行試讀並完成購買、定期完課。也因應 Jella! 提出的原創學習法,新增網站功能,希望提高銷售轉換率、學習體驗易用性。在 1.0 上線後,開始加入此專案 MVP 的優化迭代、功能新增。

1.0 網站上線後,接收到各式各樣的產品回饋及許願需求,我們請來課程學員進行訪談、在課程社團發布問卷,找出迭代的核心目標與重點功能並定義 priority。
① 分析客服來信:1.0 網站實際運作過課程銷售、上課的流程,期間使用者在操作上有任何問題皆會透過客服來信提問,也以此作為產品優化的依據。除了優化產品本身外,將這些提問整合利用第三方軟體 zendesk 設置「常見問題 FAQ」,解決疑難雜症、優化客服流程,在網站迭代後一併推出。
② 學員訪談:藉由訪談了解學員的習慣、遇到得阻礙、想要的功能,同時了解背後的動機。
③ 問卷蒐集:針對特定功能做問卷調查,透過量化數據了解使用者對特定功能的認識、使用方式、偏好,同時也包含開放式的許願區,作為商業規劃、產品功能的優化依據。

由於新創初期,品牌意識不明確,1.0 網站以達到可販售課程、可在平台上學習為首要目標。加入本專案後首先遇到品牌識別不一致而無法建立設計系統的狀況,從品牌 Logo、顏色色票、字體選用、按鈕元件、icon 風格做整體系統化規範。
而在 1.0 上線後陸續藉由學員訪談、課程行銷部門同事討論及量化數據,定義使用者需求。並對焦下一次的課程銷售模式,需要如何調整介面與體驗設計。

課程行銷組以接下來要推出的課程擬定銷售方案,也在此時定義未來大小課程的販售優惠模組。產品組則會接手進行購買流程、介面設計。討論過程中也會針對各階段方案提出如何增加銷售成績個方式,例如幫助學員呼朋引伴享受早鳥團購優惠等。

因新創初期,對於品牌識別沒有意識,導致內部管理檔案、發展行銷素材產生各式各樣的色票與字體。在迭代平台介面前,將大方向的品牌識別、字體、圖像準則定義,幫助奠基平台迭代、新產品設計、行銷素材、上課影片模板等應用物,兼具一致性與製作效率。
而考量公司未來欲朝向多外語學習發展,字體選用 noto sans 思源黑體,支援全球語系!


為了讓網站導航更加流暢直覺,將資訊架構更合理規劃。參考多家線上課程平台,將上課、會員、禮品明確劃分,課程學習更加專注有效。

以課程銷售卡片為例。因行銷規劃,課程銷售將會分成多個階段多種售價,藉由第一次課程銷售的經驗,蒐集使用者及內部課程管理組的痛點及需求、模組化售課流程,讓會員易於理解、管理者易於設定。
① 資訊整合:課程資訊依據銷售階段模組化呈現,在卡片上區分為課程資訊、銷售資訊,依銷售階段設定關鍵資訊。
② 進度清晰:集資進度條輔以文字呈現,購課優惠時限清楚標示。
③ 提升信任:將課程質量、購課人數、評價在卡片上揭露,善用 icon,資訊透明提升信任感。

原網站銷售頁面資訊繁雜,常帶給使用者模糊的感受、客服量的負擔。釐清新版銷售方案,分為三大模組:
① 早鳥(早鳥單購優惠 / 團購優惠)
② 預購(單購優惠 / 組合價)
③ 預購截止(回歸原價)
隨著銷售方案的確立,也提升購買流程的直覺性、設計團購方案的運作模式。
● 課程頁面揭露各階段的銷售方案對應狀態、最大值最小值。
● 點擊「立即購買」後,開始進行資料填寫,確認付款、發票資料;再根據所選付款方式進行線上信用卡或線下超商付款完成訂單。
● 若為團購訂單,會在付款完成後在「訂單明細」提供學員團購序號,以提供給其他團購成員進行開通。

為解決每次課程開賣造成的大量客服負擔,課程銷售介紹頁也同步進行迭代:
● 抓取重要且必要資訊,排除與銷售無關的資訊
● 量化資訊,集中右側,條列式呈現,快速掌握課程質量
● 質化資訊,集中左側,例如圖文並茂的課程內容介紹,則保有其閱讀彈性,運用收合、導航錨點快速切換瀏覽
● 規劃「常見問題」「課前發問」區塊,集中客服常見問題,課前問答如留言板,可讓學員與老師自由問答回覆
● 保持在每個畫面皆可見「立即購買」導購按鈕,抓住使用者心動點擊的每一刻


將品牌識別元素整合後,接續進行的 MVP 1.0 網站優化、App 數位產品,以及課程影片、行銷素材皆大幅提升一致性,也加快設計與開發效率。網站痛點分析與銷售方案的體驗優化,讓當次的課程銷售成績提升許多,會員能更容易理解我們的銷售方案、把握時機購買享受良好的學習體驗!與此同時也降低了客服的負荷。

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!