【電商原來是醬】建置電商只需要14天，教你怎麼設計一個完整玩具購物網站
本文挑選了國外作者Allie Taylor的文章進行分析，我們利用了玩具購物網站這個小案例，清晰的記錄了一個較為完整的產品設計流程。不論是設計方法，還是記錄方法，都可以運用在工作、報告和作品集上，與大家分享。
- 這個過程耗時：2周
- 材料：卡片，便條紙，筆，紙
- 原型工具：Figma
- 使用的UX技術：競品分析，思維導圖，卡片排序，用戶畫像，系統架構，網站地圖，用戶流程，線框圖，原型設計，可用性測試
在這個項目中，主要任務是為舊金山最古老的玩具品牌 Jeffrey’s Toys 設計一個全新的品牌電商網站。新電商網站最主要的目的是吸引顧客前往線下店面選購商品，同時也希望通過快遞和門店自提的方式來完善線上銷售流程，拓展消費群體。
該網站需要鞏固品牌核心業務價值觀：傳統，有趣和創意。該電商網站還需要通過強調其龐大的庫存體量和手工精選商品來將Jeffrey’s Toys和其他電子商務零售商區分開。
該電商網站的主要業務目標包括：
- 能快速定位商品
- 每一個商品都有單獨的詳情頁
- 用戶能成功購買一個或多個商品
- 為爆款商品引流
101 電商用戶分析 User Research
- 電商用戶畫像User Personas
誰才是這個網站真正的用戶？當我接到這個任務的時候，客戶已經規劃出了3個用戶畫像，每個用戶畫像都有特定的需求和痛點。基於三個用戶畫像，我確定了該網站要滿足的用戶需求，同時也考慮了Jeffrey’s Toys的需求。
確定的主要需求是：
- 通過清晰的商品組織分類來提供流暢的電商購物體驗
- 通過商品搜尋使用戶能夠快速找到想要的商品
- 通過實用的商品推薦來體現 Jeffrey’s Toys 的專業以及龐大的庫存
- 通過與用戶建立品牌關係來樹立信任
- 通過產品細節訊息來確保用戶選購合適的商品
- 通過商品評論來輔助用戶作出消費決策並允許用戶進行商品反饋
- 通過高效的下單結帳流程簡化購買行為並節省用戶時間
- 競品分析 Competitor Research/Comparitive Research
為了獲得啟發，我確定了3個主要競品，特別是舊金山的精品玩具店；還有3個玩具零售市場的間接競品。直接競品我分析了包括 Ambassador Toys 、 Amazon 和 TANTRUM 。間接競品分析了 Lululemon 、Ikea 和 CVS 。競品分析的目的是比較並找出這些電商網站的共同特征以及 Jeffrey’s Toys 能夠脫穎而出的潛在機會。
競品分析最重要的收獲是了解了不同的電商網站的商品選擇模塊以及網站整體的布局。這些訊息有助於鞏固我第二階段的研究。
- 思維圖建立 Mind Mapping
在完成競品分析之後，我把這個項目中用戶的需求和客戶的需求列成了長長的訊息清單。之後我又通過思維導圖來理清了在這個項目中用戶的需求和客戶的需求。思維圖建立幫助我將訊息組織成更清晰的想法，同時在各個想法之間建立層次結構關係。
102 電商訊息架構 Information Architecture
接下來我通過卡片分類法來構造電商網站的導航系統，卡片分類法是一種利用人們現有思維模型的研究技術。在構造導航系統時，我了解到94種商店中最暢銷的商品庫存訊息。擁有如此龐大的商品庫存，就很有必要通過清晰易懂的方式組織、分類庫存訊息，以便用戶能夠快速的找到他們想要的商品。
- 卡片分類 Card Sorting
- 開放式卡片分類：
我要求9位參與問卷的用戶通過他們自己覺得合理的分類規則將94種商品分類，然後給每個類別加上他們認為能夠準確描述該類別的標籤。這樣做的目的是對於網站潛在的商品分類方式及類別名稱有一個大致的了解。
- 封閉式卡片分類：
基於開放式卡片分類的結果，我從最常見的類別標籤中建立了13個預定類別。然後，我進行了封閉式的卡片分類，我邀請了20位參與問卷的用戶將商品逐一分類到我之前預定的13種類別中。封閉式卡片分類有助於讓我在進行設計之前能夠清楚判斷這些類別是否符合大部分網站用戶的分類邏輯。
- 電商網站地圖 Sitemap
根據卡片分類以及競品分析的結果，我規劃了網站的網站地圖來明確整個網站的框架結構。這是為了確保所有產品都放置在用戶期望的位置，同時使購物體驗更加直觀。
- 電商系統架構圖 System Map
為了對用戶將會如何瀏覽網站有一個全面的概述，我規劃一張系統架構圖。這樣做的主要目的是為了了解網站應該給用戶提供什麽功能以及功能拓展的廣度。我還通過系統架構圖來探索電商網站和實體店面之間的聯繫。
- 電商用戶流程 User Flows
在確定了我需要給用戶提供的電商體驗之後，我為每一個用戶畫像建立了不同的用戶流程，通過不同的用戶流程來使購物體驗更加符合他們的需求。構建用戶流程的目的是確定每個用戶為了實現各自的預期目標經過的頁面和操作步驟。這不僅能使我專註於每個用戶的操作，也使我能夠在設計網站的時候將功能拆分，以便給用戶提供更佳的購物體驗。
我規劃的第一個用戶流程是關於用戶畫像是 Jenny 的。Jenny 最主要的目是為自己的孫子購買入門款魔術玩具。Jenny 的用戶流程（如下圖所示）表明了她是如何搜尋入門款魔術玩具，以及為了成功購買她可能採取的幾種不同路徑。
Debbie 和 Jenny 都希望能有一個高效的下單結帳流程，所以很有必要在用戶流程中規劃出下單結帳流程。下圖的用戶流程顯示了Debbie在選定一個特技自行車之後該如何進行結帳下單。通過允許她登入自己的帳號，自動輸入她的結帳訊息來簡化她的結帳下單流程。
- 開發階段 Development Phase
- 電商開發草稿 Sketching
在我整理了前期獲取的所有訊息之後，我就開始著手設計網站。基於之前整理出來的用戶流程圖，我開始規劃幾個主要頁面的草圖，同時快速思考出幾個不同的網站布局方案。之後我邀請3個用戶參與了用戶問卷，以驗證這些方案是否同時滿足客戶和網站用戶的需求。
- 線框圖 Wireframing
基於用戶對草圖的反饋和我個人的想法，我開始使用Figma來規劃線框圖。整個過程中，根據優先級不同，優先考慮最能滿足網站用戶的功能。
104 電商原型製作 Prototyping
- 首頁 Homepage
首頁我盡可能的保持簡潔，避免用戶進入網站時被過多的訊息與雜訊干擾而不知所措。首頁放置了全局導航、輔助導航和搜尋欄，方便用戶快捷的找到自己想要的商品。首頁還放置了新品推薦，因為新品推薦能夠展示品牌豐富的庫存，同時能為用戶提供有用的購買建議。我想通過介紹 Jeffrey’s Toys 豐富的歷史來樹立用戶品牌聯繫，所以在首頁我還放置了“關於我們”部分，用戶點擊還可跳轉到具體的介紹頁面查看更多關於品牌故事的訊息。
在頁腳 Footer，我放置了其他的用戶可能需要的訊息。除此之外，我還將用戶交流系統放在頁腳 Footer，這樣是為了獲得用戶想法並在店面進行活動時通過用戶參與提高店面活動氛圍。
- 商品類別頁面 Product Category Page
當用戶點擊商店按鈕或者是某個類別之後，用戶將會前往一個列出了該類別下所有商品的商品列表頁。有個用戶畫像想要給他的孫子買一個合適他孫子年齡的玩具，所以頁面需要一個品類篩選器，同時支持商品按照不同的屬性例如年齡、價格和品牌分類也很重要。除此之外，我還通過面包屑導航來方便用戶定位頁面位置。
- 商品詳情頁 Single Product Page
在商品詳情頁，我希望能夠提供盡可能多的商品詳情來確保這個商品是用戶想要的。在頁面下方，網站會基於當前商品給用戶推薦其他相似商品。在商品詳情頁，產品評論區占了很大一部分，因為用戶可以在產品評論區反饋商品訊息，便於樹立用戶信任，同時用戶能夠通過其他用戶的評論來作出更明智的購買決定。
為了簡化下單流程，我設計了一個購物車預覽頁，用戶在購物車預覽頁可以預覽商品訊息，用戶每次將商品加入購物車後都會出現購物車預覽頁，在購物車預覽頁面，用戶可以很方便的點擊“選好了”按鈕而進入結帳下單流程。
- 購物車預覽頁Cart Summary Page
當用戶點擊“選好了”按鈕或者是購物車按鈕，用戶將會進入到一個如下圖所示的購物車預覽頁。這是結帳下單流程的第一步，用戶在購物車可以管理他們所選的商品，作出合適的調整。用戶在下單時，可以選擇到店自提或者是物流配送，設置到店自提是為了引導用戶去 Jeffrey’s Toy的線下店面，同時降低運輸成本。
- 結帳頁面 Checkout Page
客戶提供的三個用戶畫像的主要痛點之一就是想要有一個高效的結帳流程，所以我得確保結帳下單體驗要盡可能的流暢。作為一個回頭客，用戶可以選擇登入自己的帳號，並自動保存物流訊息和支付訊息。
我決定在一個頁面上承載全部的結帳流程，這樣方便用戶在結帳流程中任何時刻都能編輯訊息。頂部的進度欄顯示了下單結帳流程有多少步，用戶當前在哪一步以及用戶還剩下多少步驟。
- 其他畫面 Additional Screens
我還建立了一些其他頁面，例如訂單確認頁面。訂單確認頁面明確告知用戶結帳流程已經完成了，用戶還能在訂單確認頁查看有關訂單的其他訊息，以供參考。
我建立了一個店面聯繫頁面，當用戶在網站找不到想要的商品時，可以在店面聯繫頁面查詢線下店面商品情況以及店面的營業時間、位置和聯繫電話。
除此之外我還建立了一個“關於頁面”用來著重強調Jeffrey’s Toys與其他電商網站例如亞馬遜的區別。我還在這個頁面介紹了Jeffrey’s Toys長達60年的獨特歷史，以增強用戶對於品牌傳統、有趣和創意的商業價值的印象。
- 可用性測試 Usability Testing
在完成線框圖之後，我就開始規劃網站原型以便進行可用性測試。
這使我能夠評估用戶將會如何與網站進行交互測試，也能讓我評估網站是否滿足了用戶的基本需求。在進行UI設計之前，通過中保真原型進行可用性測試來獲取潛在用戶真實、關鍵的反饋是很有必要的，可用性測試還能鞏固網站的功能需求。
我邀請了4位用戶進行可用性測試，為了讓他們吻合用戶畫像中的用戶特征，我指定了三種用戶場景來讓他們完成測試。這三種用戶場景包括：
- 您需要為您的女兒購買一個玩具。您會怎麽查找商品並完成購買。
- 您可以通過什麽方法知道 Jeffrey’s Toys 下個月將要舉辦的店面活動。
- 當您在網站上沒有找到您想要的玩具時，您將如何查詢並購買。
這些是我通過可用性測試得到的用戶反饋：
- 總體而言，用戶能夠輕松地找到想要的產品和訊息
- 在結帳流程中，促銷活動部分會分散用戶的注意力
- 部分用戶不想通過電話來查詢商品訊息，需要提供其他的查詢方式。
- 部分用戶覺得前往線下店面的引導部分還可以增強，目前的引導不夠。
- 後續步驟 The Next Steps
這個案例研究展現的只是電商網站設計的開端。後續我將會繼續進行可用性測試，並進一步迭代我的設計。如果有更多的時間，我將會著重探索更多從網站引導用戶前往線下店面的方式。我也將會繼續豐富網站頁面並將Jeffrey’s Toys的視覺風格融入到網站中。下圖展示了我最初設想的UI設計風格。UI設計我希望秉持簡潔、創意、傳統的設計理念。
其實把UI設計風格底定之後，就可以開始電商網站設計，現在市面上有很多開店平台可以使用，但是開設電商之前應該都有想一下開設過程的進程，讓電商的開店之路可以更順遂！
原文作者：J、Allie Taylor、UX Collective
更多的電商與社群知識，請收聽電商原來是醬的 Podcast：https://linktr.ee/ecprotw
更多名家專欄都可以直接上，明日科學新媒體： www.tomorrowsci.com
