今年 5月 17 日，與所屬的 6 人小組團隊共同完成了一項驚天地泣鬼神（？）的任務 — 首頁改版。過程中有許多發想、許多火花，但同樣也遭遇不少困難與挫折，想透過這篇文章分享我們如何在 2 個半月的時間中，從發想、討論、設計、開發、上線、到最後的成效檢驗，也附上過程中的邏輯思路，希望這段寶貴的經驗能夠幫到一些人；當然，畢竟過往沒有過類似經驗，肯定也有許多思慮不足之處，歡迎業界前輩不吝給予指教。

以下我把整個流程分成觸發期、前置期、實作期、驗收期四個階段做介紹。

此次改版前，我們的網站已經使用了近 3 年半，對於首頁的呈現方式，我一直以來都有些想法，但一來是沒什麼機會提起、二來是找不到個方法去整理出一個有系統的想法去支持「我覺得首頁有改善空間」的這個論點。

今年 2 月底，剛好讀到一篇文章，主要在分析 Google Flight 是如何以「產品心理學」為基礎，去簡化煩雜資訊、調整用戶決策順序、甚至是喚起用戶內心的恐懼，進而達到增加轉換率的目標。也正是這篇文章，讓我開始能夠以更科學、更有系統化的方式，去整理出來首頁可以考慮的優化方向。

正巧，今年年初公司剛進行改組，不只是將原本的大團隊切割成幾個小而精的敏捷開發小組，達到「小步快跑」的目標，同時為了讓每位成員更能在工作中擁有熱情與 ownership，我們有更多的機會 bottom-up 去發想、並提出接下來希望去完成的任務。

有了以上天時、地利、與人和，所屬的開發小組正式於今年 3 月開始著手這次的首頁改版，而我則成為了這次改版的負責人。

這是一個思考、發想、調查、整理四件事不斷循環的過程，以下僅列出我認為最重要的四個項目：

1. 確認核心目的

最重要也是最需要儘早完成的事情。改版是為了讓介面好看？還是為了增加老師開課意願？還是為了提高購課比例？不同的目的會衍生出不同的可行方案，所以及早確認目的可以幫助收斂過於發散的思考、也避免團隊浪費太多時間在沒意義的事情上。

以我們身為一個新型的募資＋線上課程平台為例，畢竟首頁核心目的在於「教育使用者，讓他們知道我們提供什麼服務」，舊有版本偏向用「說明」的方式來傳達我們是誰、並透過「過去使用者證言」來增加信任度。到了現在，我們不只慢慢建立起自身品牌，也擁有了非常多優質的課程，所以最終把目標設定在「讓使用者更容易看到好的、且適合他的課程」。更直接的說，就是改以「體驗內容」來取代「說明介紹」。

2. 列舉原有資訊

這邊指的資訊包括了頁面呈現「項目」、以及該項目欲達成之「目的」。以下就 Hahow 舊首頁為例，列出項目及其對應目的：

• Banner ➜ 平台總體介紹、行銷版位、招募版位
• 最新募資課程 ➜ 募資機制傳達、課程呈現
• 精選課程 ➜ 課程呈現
• 關於 Hahow ➜ 平台特色介紹
• Hahow 老師列舉介紹 ➜ 建立平台信賴度
• Hahow 學生滿分評價 ➜ 建立平台信賴度
• Hahow 累積會員數 ➜ 建立平台信賴度

列出來後更可以清楚看到我們過去試圖以「說明+證言」的方式去呈現資訊，但也會發現資訊過於龐雜、無法階段性給予，也間接給「認識 Hahow」設立了一定程度的門檻。

3. 參考項目查找

這個過程我們參考了數十個其他產品的首頁，試著了解其設計理念、呈現項目、以及值得學習之處；此外，我們進一步參考 Alexa 上其網站的 Bounce Rate（跳出率）試圖篩選出更值得借鏡的對象。

同樣以這次改版為例，我們參考的資訊包括：

• 會員登入前後呈現之首頁是否需要不同
• 首頁呈現之資訊量 ➜ 評估合適的資訊量，讓新使用者不會因一次接受過多資訊而放棄學習
• 如何給予用戶更佳的使用者體驗 ➜ 了解怎樣的設計方式，能夠讓整個用戶操作更流暢、更直覺

4. 改善項目發想

綜合以上，我們決定透過以下思路來達到目標：

簡化過多資訊 ➜ 降低選擇門檻 ➜ 課程體驗更容易

I. 簡化過多資訊：這邊的「簡化」未必是移除，也可能是更改呈現方式，抑或是分階段的資訊給予。舉例來說：原本「Hahow 學生滿分評價」之區塊，改融入在原本的「課程卡」上出現，若使用者真的有興趣再點進去看即可。

再舉例來說：原本的網站架構有分成「募資課程頁面」與「已開課課程頁面」，並在「募資課程頁面」最上方放一個募資機制說明圖示。然而考量到使用者在「認識網站的過程中」未必會花足夠時間去閱讀所有資訊、更遑論整個募資機制，但勢必會在「購買之前」去進行全面性的了解，所以我們選擇幾上述兩個頁面合併成一個「課程列表頁面」，並將募資機制說明圖示重新設計、並放置到募資課程的詳細內容頁面。

II. 降低選擇門檻：完成資訊的簡化後，我們已經初步讓使用者更清楚我們是一個「擁有很多課程的線上平台」，接下來則是協助他們降低選擇門檻、進而可以更快速找到自己可能有興趣的課程。為此，我們做了三項優化：

a. 首頁 Banner 放置精選課程

b. 首頁分類課程列

這部分總共 6 個項目，包括：

• 「猜你想學」➜ 專為舊有會員提供的個人推薦課程選擇
• 「本週熱門課程」➜ 過去一週最熱賣的課程
• 「最新募資課程」➜ 最新上架募資的課程
• 「即將結束募資課程」➜ 讓用戶把握最後幾天募資價格的課程
• 「經典課程」➜ 購買人數超過 1,000 人的優質課程
• 「好評課程」➜ 評價極佳的課程

c. 課程列表頁面搜尋、排序、與分類功能

III. 課程體驗更容易：簡化完資訊、降低完門檻，使用者更能專注在課程的瀏覽與體驗，而不是同時要思考「Hahow 是什麼」、「什麼是募資」、「有哪些線上課程」、「我要怎麼更快速的找到自己喜歡的課程」之類等繁雜又容易令用戶分心、甚至放棄的問題，期許不只能大幅提升使用者體驗、也能達到課程轉換率的提升。

如同所有一般功能的開發，這部分大致可分成三個階段：設計、程式、測試

I. 設計

此階段的流程大概是這樣：

wireframe 設計➜（細項討論 ➜ 調整）* n

➜ sketch 繪製➜（細項討論 ➜ 調整）* n

➜ prototype 製作➜（細項討論 ➜ 調整）* n

➜ 最終版本

首先，透過 balsamiq 這項工具畫出我想像中的最初版本 wireframe（如下）

有了初版設計後，立即舉辦了一個全公司會議廣納回饋，聽到不同工作性質團隊從自身專業角度去提出顧慮、或是給予建議，包括像是：

• Header 資訊刪減過多
• 首頁 Banner 放置影片對頁面效能的影響
• 首頁分類課程列的項目挑選與排序選擇
• 募資中課程與已開課課程的排序和曝光選擇
• 課程列表頁面版位配置過於繁雜、無法聚焦使用者眼球
• 行銷版位是否留存

而在一連串的討論與修改後，由設計師產出第一個版本的 sketch 圖（如下）

由於大致改動方向底定，這個階段就不再舉辦全公司會議，而是去找當初提出顧慮與建議的人分別 1 對 1 諮詢，包括：

• 是否有解決原本的顧慮
• 是否有更清楚接收到我們想傳達的資訊
• 是否有更好的優化提議

經歷更多的討論與修改後，由設計師產出最終 InVision 版本：

II. 程式

在設計與討論的同時，工程師也默默開始動工。

我知道如果這邊寫得太認真，大概 8 成的非技術背景讀者都會直接放棄XD 所以只講大概、不講細節，技術開發流程直接以下圖說明：

III. 測試

在 5/4 功能上 Alpha 後，開始請全公司員工幫忙測試，項目包括但不限於：

• 使用體驗與順暢度
• 資料傳輸是否有錯誤
• 是否有跑版或其他設計問題
• 任何其他 bug

接著開一份 paper 讓大家共同協作，paper 中會有 3 個主要角色：

• 測試者 ➜ 負責新增錯誤項目、或是改善建議
• 專案負責人 ➜ 負責決策被提出的項目是否需要改善
• 專案負責團隊 ➜ 負責修正被提出的問題

而最終目標當然是讓新的版本在 5/17 當日成功且正式上線

每個新功能上線最希望的無疑是能有好的成效，此時如何做後續數據的追蹤與成效的檢驗就顯得特別重要。我們採用了應該是現階段最普遍的數據追蹤工具 Google Analytics，並關注在下列的核心指標：

並也參考其他幾項次要指標：

• 頁面平均 session 時長
• 導至「單一課程頁面」之轉換率
• 新上線功能之使用率與轉換率（例如首頁分類課程列功能、課程列表頁排序功能等）
• Alexa 流量排名

以下分為「Key Observation」、「Future Call-to-action」、「Key Learning」三點來呈現這次改版的成效與學習：

Key Observation

就改版後（7 月）對照改版前（3 月）之數據，我們取得以下成效：

😊 Alexa 台灣排名 700 ➜ 500

😊 新首頁「導至單一課程頁面之轉換率」成長 93%

😊 新課程列表頁面「電子商務轉換率」成長 22%

😊 新課程列表頁面「網頁價值」成長 15%

😊 新課程列表頁面「平均 session 時長」成長 16%

😊 新首頁分類課程列，「經典課程」與「好評課程」網頁價值表現意外地好

😊 課程分類功能中，「設計類課程」點擊數與網頁價值皆佔所有分類第一名

😢 課程排序功能中，「課程時長」點擊率極低

😢 新首頁「電子商務轉換率」下降 11%

😢 新首頁「網頁價值」下降 19%

總體來說，新版的課程列表頁面成效非常好，除了少數數據持平以外，其他都呈現一定幅度的正成長。反倒是新版首頁，雖然大幅提高使用者點進課程頁面的轉換率，但最終的電子商務轉換率卻是下降的。詳細原因暫時無法給出一個有系統化的解釋，但這確實就是一個較不如預期的結果。

Future Call-to-action

這部粉有鑑於牽涉到公司的一些營運秘密，就不寫出來了。

Key Learning

我覺得整個改版過程中最重大的失敗，是沒有做 A/B Testing。畢竟我們雖然追蹤了這麼多數據、做了這麼多分析、並在上面列了這麼多 observations，但由於不同時期會有不同的新課程上線、不同的使用者狀態（例如：暑假）、以及各種變因，我們並無法在改版與成效之間很直觀的建立一個因果關係。

近期，公司開始採用 Google Optimize 作為未來的 A/B Testing 工具，也希望這項工具能夠在接下來的不管是新功能測試、版面優化測試、還是使用者體驗優化測試，都能提供我們更有力的依據。如果測試結果理想，那當然順理成章可以上線；但若結果不理想，那或許就要考慮其他方向。如果你剛好對 A/B Testing 也有些興趣，那我推薦你可以看看由 AisaYo Product Lead 撰寫的這篇文章。

這次的改版對整個團隊來說都是個很新鮮的體驗。不只是有非常多的細節需要注意與討論，而且從原本單純的首頁改版，最後一環扣一環，一共改版了首頁、課程列表頁面、募資機制說明列、課程卡、甚至 Header 與 Footer 都一併做了新的修改。花費了一段時間，但也有了一定程度的收穫與學習，而且現在打開自家網站都有種莫名的成就感XD

當然，看截圖的感受度有限。與其這樣，不如直接來我們 Hahow 好學校的網站 逛一逛、玩一玩，並看看有沒有什麼感興趣的課程，希望大家都可以和我們一起享受學習、享受成長！