Pinkoi Product Page Revamp
電商顧客購買決策的首要關鍵 - 商品詳情頁
Pinkoi 商品頁面實際畫面 (更換 Logo 後)
About the project
Summary
商品頁是電商的重點頁面之一，當顧客進入網站後，對商品有產生興趣時，就會進入商品頁面，進入商品頁面的顧客，有較高的機率變成購買者，從產生興趣、比較商品、查看詳情與觀看評價...等，多種重要行為皆在此頁面執行，此專案為 Pinkoi 商品頁面的最大規模改版專案，設計多達 30 個版本、歷經 12 場 Sprint、12 場數據實驗、街頭訪談...等多種不同樣貌的專案執行方式，最終達成降低頁面跳轉率、提高加入購物清單率、以及提升購買率。
My Role
Product Designer
User research, Interaction, UXUI Design,
UX Writing, Prototyping & Testing, Questionnaire
Plat Form
Web, Mobile Web
Collaborative Partner
PM, Engineer, Marketing, L10n Team
Project Time
2019.10-2020.01 3 months, Agile+Scrum
12 sprint (10days / sprint)
Why Product Page?
重新審視電商買家流程與行銷漏斗，即會發現不論新客或舊客，用戶「進入平台後、結帳前」，商品頁面於電商中擔任非常重要的關鍵位置：
-
商品頁包含了許多重要行為埋點，像是：加入購物車、慾望清單、查看相似商品...等，皆是 Pinkoi 與客戶建立關係的重要行為之一
-
商品頁為重要行銷入口之一，社群或分享連結會直接帶入商品頁連結，代表商品頁的流量與曝光率高於其他頁面
-
於後台數據觀測，許多未購買用戶在商品頁之間遊走，卻有較高的 bounce rate，商品頁除了在電商中擔當重要角色外，同時也掌握重要營收命脈。
Set Hypothesis & Sprint Phase
此專案使用用途故事( Jobs to be done) 的句型為基礎架構，統整出商品頁中的所有假設可能性，再經由團隊多次討論優化重要性、開發技術、數據埋點評估，最後排程出開發的 4 大階段，下方表格顯示部分商品頁專案部分假設：
Project Strategy
經過上一步驟的專案假設，將專案拆切成三大策略，從設計到工程師皆會參照此三大策略執行，若遇突發狀況（如公司策略轉變、實驗成效...等），將隨時滾動式調整：
Strategy 1.
Highlight Product Pictures
用照片加速顧客做決定：凸顯商品照片，改善減少顧客花在「初步評估商品」、「找到更多相似產品」、「找到產品設計館」的時間，或操作步驟數
Strategy 2.
Highlight Call-to-Actions
凸顯下一步動作，加速顧客找到入口：加入購物車、加入慾望清單，或其他推薦商品，減少顧客花在「找到下一步動作」的時間，延長停留在平台上的時間
Strategy 3.
Restructure Product Details
重組產品資訊，加速顧客找到各類商品資訊的入口，讓用戶自行展開與取用，加速顧客找到設計館的入口，讓用戶快速找到聯絡設計師的方法。減少顧客花在「找到該產品進階資訊」的時間，或操作步驟數
The Progress
此專案為 Seller Squad Team 負責，我則為此團隊的產品設計師，負責所有 UI 設計、UX 流程、功能邏輯定義、互動設計與用戶訪談與測試...等。團隊包含 PM x1、BE x1、FE x1，PM 負責前期探索與制定 Product Roadmap、擬定產品假設與專案管理，全體隊友將全程 高度參與每個流程，並有著高度回饋機制，每人皆可以擁有提出意見、反推決策的能力，透明化的文化機制，專案運作期間培養出高度默契、步調明快，合作富含高挑戰度且具有成就感。
Wireframe, Prototype & Test
依照不同的產品策略需求，進行多版本 Brainstorming 發想，製作出多組方案後，優先與團隊成員討論，並做出過濾和篩選，若遇到歧見時，將納入更多部門相關人員一同討論，做出最適合的決策與實驗畫面。
在執行設計以前，會經過數次 wireframe 設計發想，皆可以以最低成本達到最有效率的設計探索發想，降低溝通不良、大幅修改的機率
（上圖左/右）線稿階段即會製作 prototype 做測試，除了收集設計回饋，也可接收到不同領域的意見。
Design, Release & Optimization
此專案歷經 12 個 Sprint，每個階段皆會設計出多種方案，並直接上線做實驗，根據數據結果決定版本，或是繼續做設計優化，以下分享兩個階段做出的實驗：
Sprint 07. 於商品頁中增加推薦模組
我們假設商品頁面中增加推薦模組，可讓顧客更容易找到想要的商品，並增加顧客停留於平台的時間。將會直接上線做實驗，並收集數據，直接提出了三個完全不同概念且差異慎大的設計與互動，期望能實測出，哪種設計體驗更能被用戶接受，並能整體增加平台 轉換率。
ver A. 將推薦模組增加在側邊欄
ver B. 使用彈窗方式推薦商品
ver C. 按下關鍵行為時，於頂端出現滑窗
Sprint 07. Result
每次實驗長度至少 14 天，採部分實際用戶直接上線，並使用 GA 採集數據。實驗結果顯示 ，當時於電商平台的用戶體驗「實驗組 B」、「實驗組 Ｃ」時的跳離率偏高，僅有靜態顯示推薦商品的「實驗組 A.」高於其他組別，後續的轉換率也較佳。故後續會延續「實驗組 A.」的設計概念繼續優化。
同時也證實了過於激進、自動的體驗，反而會造成購物時的阻礙，常見的彈窗與上側滑窗，雖然顯示內容對使用者有益處，但並無造成點擊率提升。
Sprint 09. 商品頁照片自動輪播功能實驗
針對產品假設中的「凸顯照片功能」策略，團隊做了一個實驗：當使用者進入商品頁時，自動輪播商品照片，增加顧客關看到所有商品的機率，同時也依照輪播時間長度不同（5secs, 10secs）做實驗測試，目標可減少顧客操作步驟與找到商品的時間、更快找到合適的商品進而下單。
手機版自動輪播實際效果
桌機版自動輪播實際效果
Sprint 09. Result
本次實驗結果除了上線數據收集量化外，同時也執行質化使用者訪談，加強數據收集不到的使用者回饋與感受。數據顯示，照片輪播的效果不佳，除了跳離率高之外，也無讓用戶於頁面停留更長的時間。其原因於用戶訪談得知：「想自行操作觀看照片」、「自動播放有點嚇一跳」、「此為非預計的介面互動」....為主要原因。
此實驗證實，商品照片為個人點為出發操作性較強之行為，若採取自動化的輪播效果，為用戶非預期之提示，進而造成用戶體驗不佳。
（上圖左/右）用戶測試與訪談側拍
Interview 街頭訪談
在專案已進入尾聲前，除了數據上的資料外，我們還想要在專案收尾前收集到質化研究的資料，除了當作最終選擇版本時的素材之一外，量化加上質化的總合能讓資料更加完整，也比較不容易偏頗。
因需要在短期內就需要得到結果，我們選用了一個純樸的方式進行，也就是「街頭訪談」，對，就是在街頭上隨機抓人進行訪談這樣純樸的方式。跟以往常做的 usability test 不同，此次無法有充足的時間找受訪者、設定多種任務、架設紀錄攝影機或是準備優渥的獎金回饋。只給自己一週的時間完成這項任務，其中包含了訪談規劃、製作道具、執行訪談與紀錄，成功地在台北街頭與大專院校內執行了用戶訪談，整個過程既有趣又富有挑戰，除了獲得更多設計的回饋外，同時可獲取更多陌生用戶對於電商平台用戶體驗感受與感想。此街頭訪談的過程與經驗，詳細記錄在 medium 文章內：
街頭訪談是以往從來都沒有過的經驗，除了拿出勇氣在街上隨機採訪外，同時能獲得除了訪綱外的回答，這些回答可以歸納出更多用戶需求、使用情緒，亦或是更多給予公司的寶貴建議。
「誠徵受訪者」手拿牌
訪談問題卡
訪綱紀錄表
Achievements & Learning
1. 改善商品頁，降低顧客在購買流程的阻力
-
善商品頁，降低顧客在購買流程的阻力
-
在 Mweb 與 Dweb 分別提高約 10% 購買轉換率
-
在 Mweb 與 Dweb 分別提高收藏商品的比例約 12%
-
證實商品推薦擺置過於上方，會產生跳離率增高、顧客體驗不佳效果
-
重組 Mweb 與 Dweb 商品頁面架構，解決長期以來商品頁面雜亂、商品照互動不順暢...等問題
-
2. 在短期間內完成大量實驗、並作多方驗證，避免數據偏頗
-
除了做了至少 12 次的數據時間外，於公司內部做過至少 10 次使用者測驗，並於外部執行 3 次使用者測試與訪談。
-
此專案使用最少人力 4 人團隊，在期間內執行最多實驗次數與使用者訪談，扎實的執行過程，於最後的 Retrospective Meeting 獲得團隊內部與利害關係部門的合作高滿意度。
Retrospective 會議隊友上台表達感受
會議實況
會議實況
開發團隊 4 人自我評分
3. 大膽假設，更大膽的設計
-
在過往的設計發想中，會因為時程、專案目標或是無法做實驗...等關係，設計策略限縮於小範圍的嘗試，此專案包含了大量的實驗機制，在此特地大膽地做了許多實驗假設，讓各個實驗組差別更加擴大，除了可驗證專案原有目標外，也可驗證較少見的互動設計，並帶給產品部 Product Designer 更多啟發。
4. 小步快跑，快速試錯
-
此專案在短期內使用了大量的實體上線實驗機制為基底，搭配 agile/sprint 的快速開發速度，Produ ct Designer 在一人的配置下，製作速度與步調都需要非常快速，從腦力激盪、發想討論、上線、用戶訪談....等，皆需參與在其中，故在此專案中，採取了更多快速溝通的方式（尤其是與 stateholders ＆ founders），讓所有參與人員隨時知道任何設計概念與變更方向，溝通次數提升，卻增加了團隊凝聚力與修改次數。實驗結果是很實際的，好與壞一體兩面，成果是壞的常常意味著好事的發生，獲得的學習能不只給予單一團隊學習機會，更能提供給其他團隊更多提醒，試錯就是減少再次錯誤的最好導師。
5. 先思考 why，再動手畫
-
上機畫出精美設計絕對不是首要的事，而是去挖掘背後的原因是什麼，當你不理解用戶的行為時，可以用什麼方式去進行訪談、如何挖掘數據背後意義，如何在限制的資源下，獲得自己想要的答案，有時候使用最小可行性的行為，也可獲得大大的收穫。
Final Design
商品詳情頁最終設計（PInkoi Logo 改版前）
電腦版商品頁實際畫面 (更換 Logo 後)
手機版商品頁實際畫面
More Projects
Shipping Estimate System
Pinkoi Group Pay
Pinkoi Business Site