2020-8-31 周周
在這個項(xiàng)目中，主要任務(wù)是為舊金山最古老的玩具品牌 Jeffrey’s Toys 設(shè)計(jì)一個全新的品牌電商網(wǎng)站。
新電商網(wǎng)站最主要的目的是吸引顧客前往線下店鋪選購商品，同時也希望通過快遞和門店自提的方式來完善線上銷售流程，拓展消費(fèi)群體。
該網(wǎng)站需要鞏固品牌核心業(yè)務(wù)價值觀：傳統(tǒng)，有趣和創(chuàng)意。該網(wǎng)站還需要通過強(qiáng)調(diào)其龐大的庫存體量和手工精選商品來將 Jeffrey’s Toys 和其他電子商務(wù)零售商區(qū)分開。
該網(wǎng)站的主要業(yè)務(wù)目標(biāo)包括：
能快速定位商品
每一個商品都有單獨(dú)的詳情頁
用戶能成功購買一個或多個商品
為爆款商品引流
1. 用戶畫像
誰才是這個網(wǎng)站真正的用戶？當(dāng)我接到這個任務(wù)的時候，客戶已經(jīng)繪制出了3個用戶畫像，每個用戶畫像都有特定的需求和痛點(diǎn)。
△ 客戶繪制的三個用戶畫像
基于三個用戶畫像，我確定了該網(wǎng)站要滿足的用戶需求，同時也考慮了Jeffrey’s Toys的需求。
確定的主要需求是：
通過清晰的商品組織分類來提供流暢的電商購物體驗(yàn)
通過商品搜索使用戶能夠快速找到想要的商品
通過實(shí)用的商品推薦來體現(xiàn) Jeffrey’s Toys 的專業(yè)以及龐大的庫存
通過與用戶建立品牌關(guān)系來樹立信任
通過產(chǎn)品細(xì)節(jié)信息來確保用戶選購合適的商品
通過商品評論來輔助用戶作出消費(fèi)決策并允許用戶進(jìn)行商品反饋
通過的下單結(jié)賬流程簡化購買行為并節(jié)省用戶時間
2. 競品分析
為了獲得啟發(fā)，我確定了3個主要競品，特別是舊金山的精品玩具店；還有3個玩具零售市場的間接競品。直接競品我分析了包括 Ambassador Toys 、 Amazon 和 TANTRUM 。間接競品分析了 Lululemon 、Ikea 和 CVS 。競品分析的目的是比較并找出這些電商網(wǎng)站的共同特征以及 Jeffrey’s Toys 能夠脫穎而出的潛在機(jī)會。
競品分析最重要的收獲是了解了不同的電商網(wǎng)站的商品選擇模塊以及網(wǎng)站整體的布局。這些信息有助于鞏固我第二階段的研究。
△ 比較直接競品和間接競品的特征
2. 思維導(dǎo)圖
在完成競品分析之后，我把這個項(xiàng)目中用戶的需求和客戶的需求列成了長長的信息清單。之后我又通過思維導(dǎo)圖來理清了在這個項(xiàng)目中用戶的需求和客戶的需求。思維導(dǎo)圖幫助我將信息組織成更清晰的想法，同時在各個想法之間建立層次結(jié)構(gòu)關(guān)系。
△ 用來理清信息和想法的思維導(dǎo)圖
接下來我通過卡片分類法來構(gòu)造網(wǎng)站的導(dǎo)航系統(tǒng)，卡片分類法是一種利用人們現(xiàn)有思維模型的研究技術(shù)。在構(gòu)造導(dǎo)航系統(tǒng)時，我了解到94種商店中最暢銷的商品庫存信息。擁有如此龐大的商品庫存，就很有必要通過清晰易懂的方式組織、分類庫存信息，以便用戶能夠快速的找到他們想要的商品。
1. 卡片分類
△ 卡片分類的初期階段
開放式卡片分類：我要求9位參與調(diào)研的用戶通過他們自己覺得合理的分類規(guī)則將94種商品分類，然后給每個類別加上他們認(rèn)為能夠準(zhǔn)確描述該類別的標(biāo)簽。這樣做的目的是對于網(wǎng)站潛在的商品分類方式及類別名稱有一個大致的了解。
封閉式卡片分類：基于開放式卡片分類的結(jié)果，我從最常見的類別標(biāo)簽中創(chuàng)建了13個預(yù)定類別。然后，我進(jìn)行了封閉式的卡片分類，我邀請了20位參與調(diào)研的用戶將商品逐一分類到我之前預(yù)定的13種類別中。封閉式卡片分類有助于讓我在進(jìn)行設(shè)計(jì)之前能夠清楚判斷這些類別是否符合大部分網(wǎng)站用戶的分類邏輯。
△ 通過卡片分類得到的13種商品類別
2. 站點(diǎn)圖
根據(jù)卡片分類以及競品分析的結(jié)果，我繪制了網(wǎng)站的站點(diǎn)圖來明確整個網(wǎng)站的框架結(jié)構(gòu)。這是為了確保所有產(chǎn)品都放置在用戶期望的位置，同時使購物體驗(yàn)更加直觀。
△ 站點(diǎn)地圖
3. 系統(tǒng)架構(gòu)圖
為了對用戶將會如何瀏覽網(wǎng)站有一個全面的概述，我繪制一張系統(tǒng)架構(gòu)圖。這樣做的主要目的是為了了解網(wǎng)站應(yīng)該給用戶提供什么功能以及功能拓展的廣度。我還通過系統(tǒng)架構(gòu)圖來探索電商網(wǎng)站和實(shí)體店鋪之間的聯(lián)系。
△ 系統(tǒng)架構(gòu)圖演示用戶將會如何瀏覽網(wǎng)站
4. 用戶流程
在確定了我需要給用戶提供的體驗(yàn)「全局」之后，我為每一個用戶畫像創(chuàng)建了不同的用戶流程，通過不同的用戶流程來使購物體驗(yàn)更加符合他們的需求。構(gòu)建用戶流程的目的是確定每個用戶為了實(shí)現(xiàn)各自的預(yù)期目標(biāo)經(jīng)過的頁面和操作步驟。這不僅能使我專注于每個用戶的操作，也使我能夠在設(shè)計(jì)網(wǎng)站的時候?qū)⒐δ懿鸱?，以便給用戶提供更佳的購物體驗(yàn)。
我繪制的第一個用戶流程是關(guān)于用戶畫像是 Jenny 的。Jenny 最主要的目是為自己的孫子購買初級魔術(shù)玩具。Jenny 的用戶流程（如下圖所示）表明了她是如何搜索初級魔術(shù)玩具，以及為了成功購買她可能采取的幾種不同路徑。
△ Jenny 的用戶流程
Debbie 和 Jenny 都希望能有一個的下單結(jié)賬流程，所以很有必要在用戶流程中繪制出下單結(jié)賬流程。下圖的用戶流程顯示了Debbie在選定一個特技自行車之后該如何進(jìn)行結(jié)賬下單。通過允許她登錄自己的帳號，自動輸入她的結(jié)賬信息來簡化她的結(jié)賬下單流程。
△ Debbie 的用戶流程
1. 草稿
在我整理了前期獲取的所有信息之后，我就開始著手設(shè)計(jì)網(wǎng)站。基于之前整理出來的用戶流程圖，我開始繪制幾個主要頁面的草圖，同時快速思考出幾個不同的網(wǎng)站布局方案。之后我邀請3個用戶參與了用戶調(diào)研，以驗(yàn)證這些方案是否同時滿足客戶和網(wǎng)站用戶的需求。
△ 網(wǎng)站首頁和品類頁面的初稿
2. 線框圖
基于用戶對草圖的反饋和我個人的想法，我開始使用Figma來繪制線框圖。整個過程中，根據(jù)優(yōu)先級不同，優(yōu)先考慮最能滿足網(wǎng)站用戶的功能。
△ 網(wǎng)站首頁和產(chǎn)品詳情頁的線框圖
1. 主頁
首頁我盡可能的保持簡潔，避免用戶進(jìn)入網(wǎng)站時被過多的信息干擾而不知所措。
首頁放置了全局導(dǎo)航、輔助導(dǎo)航和搜索欄，方便用戶快捷的找到自己想要的商品。首頁還放置了新品推薦，因?yàn)樾缕吠扑]能夠展示品牌豐富的庫存，同時能為用戶提供有用的購買建議。我想通過介紹 Jeffrey’s Toys 豐富的歷史來樹立用戶品牌聯(lián)系，所以在首頁我還放置了「關(guān)于我們」部分，用戶點(diǎn)擊還可跳轉(zhuǎn)到具體的介紹頁面查看更多關(guān)于品牌故事的信息。在頁腳，我放置了其他的用戶可能需要的信息。除此之外，我還將用戶交流系統(tǒng)放在頁腳，這樣是為了獲得用戶想法并在店鋪進(jìn)行活動時通過用戶參與提高店鋪活動氛圍。
2. 商品類別頁面
當(dāng)用戶點(diǎn)擊商店按鈕或者是某個類別之后，用戶將會前往一個列出了該類別下所有商品的商品列表頁。有個用戶畫像想要給他的孫子買一個合適他孫子年齡的玩具，所以頁面需要一個品類篩選器，同時支持商品按照不同的屬性例如年齡、價格和品牌分類也很重要。除此之外，我還通過面包屑導(dǎo)航來方便用戶定位頁面位置。
△ 商品類別頁線框圖
3. 商品詳情頁
在商品詳情頁，我希望能夠提供盡可能多的商品詳情來確保這個商品是用戶想要的。
在頁面下方，網(wǎng)站會基于當(dāng)前商品給用戶推薦其他相似商品。在商品詳情頁，產(chǎn)品評論區(qū)占了很大一部分，因?yàn)橛脩艨梢栽诋a(chǎn)品評論區(qū)反饋商品信息，便于樹立用戶信任，同時用戶能夠通過其他用戶的評論來作出更明智的購買決定。為了簡化下單流程，我設(shè)計(jì)了一個購物車預(yù)覽頁，用戶在購物車預(yù)覽頁可以預(yù)覽商品信息，用戶每次將商品加入購物車后都會出現(xiàn)購物車預(yù)覽頁，在購物車預(yù)覽頁面，用戶可以很方便的點(diǎn)擊「選好了」按鈕而進(jìn)入結(jié)賬下單流程。
△ 商品詳情頁線框圖
4. 購物車預(yù)覽頁
當(dāng)用戶點(diǎn)擊「選好了」按鈕或者是購物車按鈕，用戶將會進(jìn)入到一個如下圖所示的購物車預(yù)覽頁。這是結(jié)賬下單流程的第一步，用戶在購物車可以管理他們所選的商品，作出合適的調(diào)整。用戶在下單時，可以選擇到店自提或者是物流配送，設(shè)置到店自提是為了引導(dǎo)用戶去 Jeffrey’s Toy的線下店鋪，同時降低運(yùn)輸成本。
△ 購物車預(yù)覽頁線框圖
5. 結(jié)帳頁面
客戶提供的三個用戶畫像的主要痛點(diǎn)之一就是想要有一個的結(jié)賬流程，所以我得確保結(jié)賬下單體驗(yàn)要盡可能的流暢。作為一個回頭客，用戶可以選擇登錄自己的帳號，并自動保存物流信息和支付信息。我決定在一個頁面上承載全部的結(jié)賬流程，這樣方便用戶在結(jié)賬流程中任何時刻都能編輯信息。頂部的進(jìn)度欄顯示了下單結(jié)賬流程有多少步，用戶當(dāng)前在哪一步以及用戶還剩下多少步驟。
△ 登錄頁
△ 下單頁
△ 訂單查看頁
6. 其他畫面
我還創(chuàng)建了一些其他頁面，例如訂單確認(rèn)頁面。訂單確認(rèn)頁面明確告知用戶結(jié)賬流程已經(jīng)完成了，用戶還能在訂單確認(rèn)頁查看有關(guān)訂單的其他信息，以供參考。
我創(chuàng)建了一個店鋪聯(lián)系頁面，當(dāng)用戶在網(wǎng)站找不到想要的商品時，可以在店鋪聯(lián)系頁面查詢線下店鋪商品情況以及店鋪的營業(yè)時間、位置和聯(lián)系電話。
除此之外我還創(chuàng)建了一個「關(guān)于頁面」用來著重強(qiáng)調(diào) Jeffrey’s Toys 與其他電商網(wǎng)站例如亞馬遜的區(qū)別。我還在這個頁面介紹了Jeffrey’s Toys 長達(dá)60年的獨(dú)特歷史，以增強(qiáng)用戶對于品牌傳統(tǒng)、有趣和創(chuàng)意的商業(yè)價值的印象。
△ 訂單確認(rèn)頁
△ 聯(lián)系方式頁
△ 公司介紹頁
7. 可用性測試
在完成線框圖之后，我就開始繪制網(wǎng)站原型以便進(jìn)行可用性測試。這使我能夠評估用戶將會如何與網(wǎng)站進(jìn)行交互，也能讓我評估網(wǎng)站是否滿足了用戶的基本需求。在進(jìn)行UI設(shè)計(jì)之前，通過中保真原型進(jìn)行可用性測試來獲取潛在用戶真實(shí)、關(guān)鍵的反饋是很有必要的，可用性測試還能鞏固網(wǎng)站的功能需求。
我邀請了4位用戶進(jìn)行可用性測試，為了讓他們吻合用戶畫像中的用戶特征，我指定了三種用戶場景來讓他們完成測試。這三種用戶場景包括：
您需要為您的女兒購買一個玩具。您會怎么查找商品并完成購買。
您可以通過什么方法知道 Jeffrey’s Toys 下個月將要舉辦的店鋪活動。
當(dāng)您在網(wǎng)站上沒有找到您想要的玩具時，您將如何查詢并購買。
這些是我通過可用性測試得到的用戶反饋：
總體而言，用戶能夠輕松地找到想要的產(chǎn)品和信息
在結(jié)賬流程中，促銷活動部分會分散用戶的注意力
部分用戶不想通過電話來查詢商品信息，需要提供其他的查詢方式。
部分用戶覺得前往線下店鋪的引導(dǎo)部分還可以增強(qiáng)，目前的引導(dǎo)不夠。
△ 可用性測試得到的反饋
8. 后續(xù)步驟
這個案例研究展現(xiàn)的只是電商網(wǎng)站設(shè)計(jì)的開端。后續(xù)我將會繼續(xù)進(jìn)行可用性測試，并進(jìn)一步迭代我的設(shè)計(jì)。如果有更多的時間，我將會著重探索更多從網(wǎng)站引導(dǎo)用戶前往線下店鋪的方式。我也將會繼續(xù)豐富網(wǎng)站頁面并將Jeffrey’s Toys的視覺風(fēng)格融入到網(wǎng)站中。下圖展示了我最初設(shè)想的UI設(shè)計(jì)風(fēng)格。UI設(shè)計(jì)我希望秉持簡潔、創(chuàng)意、傳統(tǒng)的設(shè)計(jì)理念。
△ 首頁
△ 商品分類頁
△ 商品詳情頁
本文以玩具購物網(wǎng)站這個小案例，清晰地記錄了一個較為完整的產(chǎn)品設(shè)計(jì)流程。不論是設(shè)計(jì)方法，還是記錄方法，都可以借鑒運(yùn)用在工作、匯報(bào)和作品集上。
藍(lán)藍(lán)設(shè)計(jì)( www.jghy.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.jghy.net