建立系統化的內容產出服務，提升平台信任與轉換機會
About the Project
Project Background & Issues
-
用戶真正在網路上購買商品前， 會經歷「研究—了解—決策」的過程，被推薦的SEO文章 即屬於消費者在購物流程前期的環節，目的是在消費者心中建立對商品與品牌的印象。
-
目前全站主要是靠 google ads的廣告行銷來支援站外曝光，沒有吃到太多免費SEO的流量。
-
雖然站內有「發現文章」導流，但太偏科普與觀念解釋，導購效果不足，用戶看完就走。
-
故創建以 商品選購攻略 為導向的 shopping guide文章，目的是提升SEO流量與導購，過往的團隊在前期以MVP實驗（先開發靜態頁面的育兒津貼、副食品、消毒鍋、濕巾等主題的選購攻略 (目前不在SERP第一頁，但是熱銷品類)），發現透過投廣的CTR%高，確認了用戶對這樣的內容是非常有興趣的（排行榜、攻略），但後續轉換低。
Challenge
經過前期實驗，確認這個頁面版型可以往下量產開發，接下來的任務是提供系統化的後台功能，幫助編輯人員快速產出各種主題的攻略，並且提高介面「生火」的能力，進而帶動用戶對平台的信任與轉換機會。
指標項目：
-
改善文章版型、讓文章更容易閱讀，降低文章 bounce rate
-
補充更多商品資訊、提高信任感，增加新用戶進站率＆轉換率
-
提高文章產出速度＆數量
-
支撐廣告較少之商品的流量與曝光度
（因為母嬰線、玩具線(小月齡的玩具)、童書線的廣告效益較低，比較少會被排到廣告排程裡，希望透過SEO文章來爭取一些曝光機會，帶新客認識並進入網站）
Outcome
Deliverable
✔ 前台文章介面
✔ 後台文章設定列表＆編輯介面
Role
UI/UX designer: User flow, Wireframe, Mock-up
前台探討面向＆呈現
提供更具魅力及更加友善的介面
Shopping guide的目的是透過知識型內容吸引用戶閱讀，進而購買商品達成轉換。 頁面的組成內容可以對應到「EKB模式」(Engle, Kollat & Blackwell Model) ，將購買決策過程分為4個步驟：
因應這4個要點，對應到畫面的功能如下：
STEP 1 - 需求認知 Need Recognition
當消費者察覺到「理想」和「現實」有所差異，而產生需求。 例如新手媽媽看到奶瓶消毒鍋的廣告，覺得應該買一個放在家裡，幫助維持寶寶奶瓶的清潔，這就是她所認知到的需求。
頁面開頭：創造動機、引起興趣
STEP 2 - 資訊蒐集 Information Search
市面上消毒鍋那麽多種，新手媽媽該怎麼挑？shopping guide 接著提供：一個好的消毒鍋該具備的優點，以及購買注意事項，幫助新手媽媽快速抓住選購要點。
接著呈現購買重點
設計目標：讓文章更容易閱讀，提高興趣，降低 bounce rate
STEP 3 - 方案評估 Evaluation of alternatives
了解消毒鍋的購買要點後，接著會看到一系列的方案介紹，根據不同需求的消費者提供了對應方案，在乎低價格的、在乎效率的、在乎方便攜帶的、在乎品牌的、甚至到清潔消毒鍋的周邊商品，分別都有各自的優缺點介紹。
每個方案下方推薦站內熱銷排名前3名的商品，除了品名與價格的基本資訊，還同時提供商品的銷量、平均星數、媽媽真實評價，更方便媽媽在多項商品之間做評估選擇。
針對每個類別，提供清楚說明與推薦商品
設計目標：提供更多商品資訊，提高信任感、增加新用戶進站率＆轉換率
STEP 4 - 選擇購買 Purchase
透過頁面精心規劃的流程與呈現，給予明確且足夠的內容資訊，希望贏得媽媽的信賴，最終導向購買的行為。
Design Iteration & Reflection
設計迭代與反思
最初提案＆最終定案的版型分別如下：
最初提案的設計，雖然能夠在小小的版面內，就呈現完所有商品資訊，但當商品少於三個時，版面會留下無用途的空位，小版位的三直欄排列方式也不易吸引目光，反而令人感到資訊繁雜。
改良後的版本，增加了空間利用的靈活度，當只有一、兩個商品時，不會佔用多餘版面，在視覺上也清楚易讀許多，並提升「商品」在這此頁的重要性，也是希望透過其達成轉換的最終目的。 在mobile模式下，則是提供兩種不同版型，根據商品數量顯示最適合的樣貌。
Reflection
完善的介面設計並非只有單一版本的樣態，需考量實際應用情境，認知內容資訊的動態特性，提供在任何情境下都能適用的樣式，才是有彈性、足夠成熟的設計。
Provide content for SEO trust
提供SEO信賴的內容
為了提升頁面在google搜尋結果頁上的能見度，得透過「提供多元的資訊內容形式」來提高SEO分數，同時也提供媽媽更多參考資訊。
各種設計定義
RWD / 圖文顯示規則 / 區塊顯示規則 / 圖片如何裁切
Achievement
前台 成果展示
透過各種能夠促進媽媽完成購買決策的要素，達成先決要點：增加前台曝光導流、優化閱讀體驗與易用性、提升信賴。
後台探討面向＆呈現
目的：為了讓 shopping guide 文章能夠定期產出，需規劃一個提供銷售人員編輯文章的後台系統，提高固定產出與編輯工作的效率。
後台列表頁 flow 規劃 （非最終版本，已移除選擇版型功能、刪除頁面功能、前台關閉顯示功能）
能符合多種需求的後台架構
如何設計符合銷售人員需求的後台形式（當有多種類型需求時）
在設計後台編輯頁面的架構時，較挑戰的點是「如何設計出符合銷售人員需求的架構」。 身為母嬰綜合型電商平台，集結了各種類型的商品，而依據不同商品特性，在選品攻略文章所需要的表現形式不盡相同。例如「消毒鍋」是專屬母嬰領域在使用的商品，一般沒有育兒經驗通常不會清楚它的需求與功用，所以在 shopping guide 上適合提供「介紹引導」的區塊，讓新手媽媽快速理解。而若是「濕紙巾」主題的 shopping guide，因為是很大眾取向的商品，即使沒有「介紹引導」區塊也不影響使用者的認知。 所以在構思這個架構時，我做了一個「可以因應主題選擇適合版型」的提案，將後台分成A/B/C三種版型，讓銷售人員依據他的商品類型選擇適合的版型去寫。
-
與銷售主管的討論中，我們在使用彈性與易用性之間權衡，考量三種版型的選擇可能會對銷售人員來說太複雜，最後選擇了易用性，只提供一款版型：結合所有段落類型於一身的綜合版型。
-
最終後台架構的規劃，主要以 shopping guide 本身的目的出發，累積SEO增加流量進而轉換，所以頁面需具備一些SEO喜歡的特定元素，同時要兼顧訪客的閱讀體驗，需引導他感興趣繼續看下去，並提供實用資訊。
-
梳理所有需求類型後，統整出五個可以被模組化的段落，並且定義使用的方式與彈性（加圖片、加小項目、必選與非必選）
版型的設計與排序：
介紹與描述(Hero) → 特色說明(Guide) → 銜接段(Trailer) → 商品/段落介紹(ProductSection) → 相關文章＆相關討論＆搜尋關鍵字
清楚呈現複雜的層級
如何將層級清楚呈現、如何容易理解操作層級（當架構複雜時）
立定好整頁的編輯架構後，接下來要處理的，是如何把結構複雜的後台清楚呈現。
透過設計區分出資訊層級
每個段落欲達成的目的不同，使用規則因而不盡相同。不像前台可以透過繽紛的視覺設計來區分不同段落，後台就是單純的輸入欄位與按鈕，怎麼運用設計把千篇一律的元件安排得有層次，讓編輯者容易辨識出差異、讓編輯流程順暢，是重點所在。
提供範例圖片
透過前台範例圖片，幫助編輯者易於理解欄位的目的，以及實際呈現的模樣。
Achievement
後台 成果展示
透過釐清需求內容（各類型商品攻略文章）與使用者（銷售編輯者），統整出最合適的後台架構；以及運用設計區分出複雜的資訊層級，達成目的：提升 shopping guide 文章的定期量產、提高編輯工作的效率。
Wrapping Up
-
完善的介面設計並非只有單一版本的樣態，需考量實際應用情境，認知內容資訊的動態特性，提供在任何情境下都能適用的樣式，才是有彈性、足夠成熟的設計。
-
透過各種「促進媽媽完成購買決策」的要素，達成先決要點：增加前台曝光導流、優化閱讀體驗與易用性、提升信賴。
-
讓文章更容易閱讀，提高興趣，降低 bounce rate
-
提供更多商品資訊，提高信任感、增加新用戶進站率＆轉換率
-
提供SEO信賴的內容
-
透過釐清需求內容（各類型商品攻略文章）與使用者（銷售編輯者），統整出最合適的後台架構；以及運用設計區分出複雜的資訊層級，達成目的：提升 shopping guide 文章的定期量產、提高編輯工作的效率。