在本文中，將帶您瞭解在設計思維過程的5個階段中，我們所採用的不同技術-從情用戶到測試我們的原型-以及我們的發現。

我們在Ironhack阿姆斯特丹UX / UI設計訓練營的第一個項目是爲本地企業設計——電子商務平臺。

從左至右：Danique Nagel，Marine Lejeune和我自己

我們的挑戰是爲本地企業設計一個網站，重點是爲最終用戶提供出色的購物體驗。

我們的小組選擇了一家名爲Episode的舊貨店，出售二手衣服，鞋子和配件。像許多實體舊貨店一樣，Episode不提供在線購物平臺。

在本文中，我將帶您瞭解在設計思維過程的5個階段中，我們所採用的不同技術-從情用戶到測試我們的原型-以及我們的發現。

該項目與我在Ironhack的三個同學（Alexis Middleton，Danique Nagel和Marine）合作！

設計思維過程的五個階段

由於亞馬遜，Ebay，AliExpress和在荷蘭的Bol.com等在線購物巨頭的盛行，本地小商店的年銷售額正遭受下降。這不僅影響到小企業本身，而且還影響當地經濟和許多靠此生活的家庭。

但是，存在一種趨勢，即中產階級消費者選擇購買較少的 商品，而又願意爲之付出更多。

階段1：強調

設計思維過程的第一步是與用戶瞭解並強調。這也稱爲研究階段。由於電子商務網站在行業中得到了很好的研究，因此我們被指示將大部分研究時間用於基準測試和市場研究，並培養出可以用於的專業最佳實踐和經驗法則創造電子商務體驗。

此階段使用的方法是：

1. 品牌分析（品牌比較，功能比較，命題矩陣）
2. 調查（精益調查畫布，Google表單）
3. 採訪

（1）品牌分析

品牌比較表將Episode與它的四個直接競爭對手（阿姆斯特丹的其他舊貨店），以及兩個間接的在線競爭對手進行了比較，包括口號,、目標受衆、庫存和價格範圍。這有助於我們瞭解插值在這兩個位置之間的位置。

“功能比較表”根據我們通過觀察和研究發現的“功能”來比較情節，這些功能似乎值得注意。目的是更好地瞭解Episode與競爭對手相比，以及舊貨店似乎常見（或不常見）的情況。

精益調查畫布由Chris Thelwell開發，是一種有用的方法，可以快速而協作地創建簡短的調查，以獲取所有所需的信息。它着重於定義目標用戶和驗證假設所需的見解（我們需要學習什麼？我們已經知道什麼信息？我們需要向誰學習？我們如何與這些人聯繫？）

我們的精益調查帆布幫助我們瞭解誰，我們應該瞄準與調查，如何正確安排邏輯流程圖中的問題，以及如何削減下來的最基本。（請記住：沒有人願意填寫冗長的文字調查）。

（2）調查

下一步：在Google表單中創建調查。已經定義了問題和佈局，此過程相對簡單。

創建精益調查畫布後，我和我的團隊在Google Forms上進行了簡短調查。我們通過個人渠道（Facebook）和專門用於節儉購物和古着服裝的小組頁面分發了調查問卷。

共有133人回答了我們的調查，一些主要發現是：

1. 人們節儉購物的三大原因是：省錢（72％），具有環保意識（59％）和尋找獨特的商品（52％）。
2. 在過去六個月中，有73％的受訪者（133）曾去過舊貨店。其中有75％進行了購買。
3. 在過去的6個月中，有38％的受訪者（133）曾去過一家網上舊貨店。其中65％進行了購買。

我們從此練習中學到的一些經驗教訓是：

1. 記住要問痛苦點 -我們着眼於人們過節的原因，以及某些方面對他們有多重要（獨特性、省錢、質量），卻忘記了一個問題來驗證可能的（發現新的）痛苦點。
2. 在發佈（和共享）調查之前，請對您的調查的所有可能情況進行測試 -由於時間緊迫，我們忘記了測試特定的工作流程。事實證明，如果回答了一定的問題組合，最後的部分將不會顯示。
3. 請記住，Google表單不支持複雜的顯示邏輯 -您可以添加基本的顯示邏輯（“如果對Q3的回答爲A，請顯示第2部分 ”），但是Google表單不能處理更復雜的邏輯（即“ 如果對Q3的回答爲B AND對Q5的響應爲C，顯示第4步））。

（3）採訪

我們總共進行了9次採訪：有些採訪的顧客離開了Episode，有些採訪了街頭的老顧客。面試使我們更深入，並問“爲什麼？”。儘管您無法做很多事情，但回覆往往會更豐富，並且可以幫助您理解用戶的內在想法，感受和動機。

階段2：定義

隨着研究的結束，我們小組進入了設計思維過程的第二階段：定義問題。在這一階段，我們希望對所有發現進行分組和綜合。

在這裏，我們採用了以下技術：

1. 頭腦風暴會議（親和圖，思維導圖）
2. “我們可能如何”聲明
3. 用戶角色，用戶旅程
4. 問題陳述，假設陳述

（1）頭腦風暴會議

親和圖：

該親和圖幫助我們集團自己的看法，調查結果和觀點到邏輯分類和子類別。

該親和圖幫助我們集團自己的看法，調查結果和觀點到邏輯分類和子類別。

接下來，我們仔細觀察發現的痛點。這些分類爲：暴露/訪問，時間，質量，組織和業務問題。

我們決定爲每個痛點創建單獨的思維導圖。在採訪中反映出最經常出現的痛點之後，我們決定繼續前進“ 時間”和“ 組織”。

思維導圖：

該思維導圖幫助我們組織相關方面的組織。

該思維導圖幫助我們組織相關方面的時間。

（2）用戶人

Maya是我們的主要用戶角色。她30多歲，全職工作。她喜歡在舊貨店購物，尋找獨特的復古服裝。但是，不幸的是，她發現舊貨購物要花很多時間，通常是因爲舊貨店的雜亂無章。在她的日程安排中找到適合自己的時間變得越來越難。

小號ophie是我們的二級用戶角色。她在20多歲時纔剛剛開始職業生涯。她是一個自稱爲“預算不足的時尚達人”。她還對環境充滿熱情，並致力於爲循環經濟做出貢獻。

（3）用戶旅程

用戶旅程有助於我們更好地同情用戶。我們爲主要用戶角色選擇了以下方案：

“瑪雅下週有員工晚餐。她想爲活動找到合適但獨特的服裝。她決定在週六下午節儉購物。她大約有兩個半小時。”

從所有這些見解中，我們能夠整理出以下問題陳述：

“由於時間有限，節儉的購物者對雜亂無章的商店感到沮喪，因此他們需要一種更高效，更愉快的購物方式。”

由此，我們的假設陳述變爲：

“我們相信，創造一種在線購物體驗，重點是在有限的時間內爲節儉的購物者組織商品，這將使他們能夠更有效地購物，並減少挫敗感。當客戶忠誠度在6個月內提高10％時，我們就會知道我們是對的。”

階段3：構思

有了我們的研究，我們的團隊已經準備好進入設計思考過程的“理想”階段。

我們首先瀏覽了所有發現和用戶見解，並創建了M o SC o W圖-表示：

1. M =必須
2. S =應該有
3. C =可以有
4. W =沒有

（1）網站地圖

接下來，我們繼續創建網站的信息架構（IA）或藍圖。在這裏，我們決定如何以邏輯格式對內容進行分類和組織。否則，用戶在瀏覽我們的網站時會迷路，它還可以幫助我們進行下一步：創建原型。

（2）用戶流

階段4和5：原型和測試

現在，我們準備創建紙質原型。

一些紙製原型屏幕

在與我們的四個同學測試了交互式原型之後，我們發現了以下問題：

1. 選擇城市和商店的位置還不夠清楚；
2. 物品只能在店內取貨的事實未正確顯示。

我們優化了原型，並在Sketch中創建了中保真度原型。

產品結果頁/ 過濾結果頁/ 產品頁

UI流程：

接下來，我們小組的每個成員分別創建了一個高保真原型。我們爲這部分工作花了四天的時間。下面將帶您瞭解視覺設計/ UI流程的各個元素。

情緒板：

我開始創建一個情緒板。我想挑戰自己，包括在Episode的商店中找到的黑色和大膽的紅色，以忠於品牌的品牌。我尋找的圖像代表了Episode的外觀。Van’s和Converse品牌以及皮草大衣應該得到高度的代表，我在商店中都注意到了很多。

情緒板

色彩：

我最終選擇了（略）深紅色，再加上深海軍藍作爲第二（重點）顏色。

版式：

我選擇了80px的Staatliches字體作爲顯示標題，該字體與Episode的實際徽標字體非常相似-但同時有點前衛。

對於標題和正文，我選擇了Roboto Condensed。這是一種中性且可讀的字體，仍與顯示標題字體互補。我還覺得Roboto字體的“壓縮”版本非常適合電子商務網站，因爲每行文本可以容納更多文本。

高保真原型：

主頁：

產品頁面，以女裝爲例：

產品頁面

細節保持簡潔，並指向重點：大小，顏色，材料，質量以及（當然）存儲該物品所在的位置。

還要記住，由於所有項目都是唯一的，因此永遠不會像您在其他電子商務網站上發現的那樣，擁有星級/評分系統。

原文作者： Nele Groosman

原文地址：https://medium.com/@nelegroosman/ux-ui-case-study-e-commerce-for-second-hand-clothes-1078355f0de3

譯者： 南設；譯者公衆號：南設（ID：shemenglianmeng）

本文由 @南設 翻譯發佈於人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基於CC0協議

相關文章