在本文中，將帶您了解在設(shè)計(jì)思維過程的5個(gè)階段中，我們所采用的不同技術(shù)-從情用戶到測試我們的原型-以及我們的發(fā)現(xiàn)。

我們在Ironhack阿姆斯特丹UX / UI設(shè)計(jì)訓(xùn)練營的第一個(gè)項(xiàng)目是為本地企業(yè)設(shè)計(jì)——電子商務(wù)平臺。

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

我們的挑戰(zhàn)是為本地企業(yè)設(shè)計(jì)一個(gè)網(wǎng)站，重點(diǎn)是為最終用戶提供出色的購物體驗(yàn)。

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

在本文中，我將帶您了解在設(shè)計(jì)思維過程的5個(gè)階段中，我們所采用的不同技術(shù)-從情用戶到測試我們的原型-以及我們的發(fā)現(xiàn)。

該項(xiàng)目與我在Ironhack的三個(gè)同學(xué)（Alexis Middleton，Danique Nagel和Marine）合作！

設(shè)計(jì)思維過程的五個(gè)階段

由于亞馬遜，Ebay，AliExpress和在荷蘭的Bol.com等在線購物巨頭的盛行，本地小商店的年銷售額正遭受下降。這不僅影響到小企業(yè)本身，而且還影響當(dāng)?shù)亟?jīng)濟(jì)和許多靠此生活的家庭。

但是，存在一種趨勢，即中產(chǎn)階級消費(fèi)者選擇購買較少的 商品，而又愿意為之付出更多。

階段1：強(qiáng)調(diào)

設(shè)計(jì)思維過程的第一步是與用戶了解并強(qiáng)調(diào)。這也稱為研究階段。由于電子商務(wù)網(wǎng)站在行業(yè)中得到了很好的研究，因此我們被指示將大部分研究時(shí)間用于基準(zhǔn)測試和市場研究，并培養(yǎng)出可以用于的專業(yè)最佳實(shí)踐和經(jīng)驗(yàn)法則創(chuàng)造電子商務(wù)體驗(yàn)。

此階段使用的方法是：

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

（1）品牌分析

品牌比較表將Episode與它的四個(gè)直接競爭對手（阿姆斯特丹的其他舊貨店），以及兩個(gè)間接的在線競爭對手進(jìn)行了比較，包括口號,、目標(biāo)受眾、庫存和價(jià)格范圍。這有助于我們了解插值在這兩個(gè)位置之間的位置。

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

精益調(diào)查畫布由Chris Thelwell開發(fā)，是一種有用的方法，可以快速而協(xié)作地創(chuàng)建簡短的調(diào)查，以獲取所有所需的信息。它著重于定義目標(biāo)用戶和驗(yàn)證假設(shè)所需的見解（我們需要學(xué)習(xí)什么？我們已經(jīng)知道什么信息？我們需要向誰學(xué)習(xí)？我們?nèi)绾闻c這些人聯(lián)系？）

我們的精益調(diào)查帆布幫助我們了解誰，我們應(yīng)該瞄準(zhǔn)與調(diào)查，如何正確安排邏輯流程圖中的問題，以及如何削減下來的最基本。（請記?。簺]有人愿意填寫冗長的文字調(diào)查）。

（2）調(diào)查

下一步：在Google表單中創(chuàng)建調(diào)查。已經(jīng)定義了問題和布局，此過程相對簡單。

創(chuàng)建精益調(diào)查畫布后，我和我的團(tuán)隊(duì)在Google Forms上進(jìn)行了簡短調(diào)查。我們通過個(gè)人渠道（Facebook）和專門用于節(jié)儉購物和古著服裝的小組頁面分發(fā)了調(diào)查問卷。

共有133人回答了我們的調(diào)查，一些主要發(fā)現(xiàn)是：

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

我們從此練習(xí)中學(xué)到的一些經(jīng)驗(yàn)教訓(xùn)是：

1. 記住要問痛苦點(diǎn) -我們著眼于人們過節(jié)的原因，以及某些方面對他們有多重要（獨(dú)特性、省錢、質(zhì)量），卻忘記了一個(gè)問題來驗(yàn)證可能的（發(fā)現(xiàn)新的）痛苦點(diǎn)。
2. 在發(fā)布（和共享）調(diào)查之前，請對您的調(diào)查的所有可能情況進(jìn)行測試 -由于時(shí)間緊迫，我們忘記了測試特定的工作流程。事實(shí)證明，如果回答了一定的問題組合，最后的部分將不會(huì)顯示。
3. 請記住，Google表單不支持復(fù)雜的顯示邏輯 -您可以添加基本的顯示邏輯（“如果對Q3的回答為A，請顯示第2部分 ”），但是Google表單不能處理更復(fù)雜的邏輯（即“ 如果對Q3的回答為B AND對Q5的響應(yīng)為C，顯示第4步））。

（3）采訪

我們總共進(jìn)行了9次采訪：有些采訪的顧客離開了Episode，有些采訪了街頭的老顧客。面試使我們更深入，并問“為什么？”。盡管您無法做很多事情，但回復(fù)往往會(huì)更豐富，并且可以幫助您理解用戶的內(nèi)在想法，感受和動(dòng)機(jī)。

階段2：定義

隨著研究的結(jié)束，我們小組進(jìn)入了設(shè)計(jì)思維過程的第二階段：定義問題。在這一階段，我們希望對所有發(fā)現(xiàn)進(jìn)行分組和綜合。

在這里，我們采用了以下技術(shù)：

1. 頭腦風(fēng)暴會(huì)議（親和圖，思維導(dǎo)圖）
2. “我們可能如何”聲明
3. 用戶角色，用戶旅程
4. 問題陳述，假設(shè)陳述

（1）頭腦風(fēng)暴會(huì)議

親和圖：

該親和圖幫助我們集團(tuán)自己的看法，調(diào)查結(jié)果和觀點(diǎn)到邏輯分類和子類別。

該親和圖幫助我們集團(tuán)自己的看法，調(diào)查結(jié)果和觀點(diǎn)到邏輯分類和子類別。

接下來，我們仔細(xì)觀察發(fā)現(xiàn)的痛點(diǎn)。這些分類為：暴露/訪問，時(shí)間，質(zhì)量，組織和業(yè)務(wù)問題。

我們決定為每個(gè)痛點(diǎn)創(chuàng)建單獨(dú)的思維導(dǎo)圖。在采訪中反映出最經(jīng)常出現(xiàn)的痛點(diǎn)之后，我們決定繼續(xù)前進(jìn)“ 時(shí)間”和“ 組織”。

思維導(dǎo)圖：

該思維導(dǎo)圖幫助我們組織相關(guān)方面的組織。

該思維導(dǎo)圖幫助我們組織相關(guān)方面的時(shí)間。

（2）用戶人

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

小號ophie是我們的二級用戶角色。她在20多歲時(shí)才剛剛開始職業(yè)生涯。她是一個(gè)自稱為“預(yù)算不足的時(shí)尚達(dá)人”。她還對環(huán)境充滿熱情，并致力于為循環(huán)經(jīng)濟(jì)做出貢獻(xiàn)。

（3）用戶旅程

用戶旅程有助于我們更好地同情用戶。我們?yōu)橹饕脩艚巧x擇了以下方案：

“瑪雅下周有員工晚餐。她想為活動(dòng)找到合適但獨(dú)特的服裝。她決定在周六下午節(jié)儉購物。她大約有兩個(gè)半小時(shí)?！?/p>

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

“由于時(shí)間有限，節(jié)儉的購物者對雜亂無章的商店感到沮喪，因此他們需要一種更高效，更愉快的購物方式?！?/p>

由此，我們的假設(shè)陳述變?yōu)椋?/p>

“我們相信，創(chuàng)造一種在線購物體驗(yàn)，重點(diǎn)是在有限的時(shí)間內(nèi)為節(jié)儉的購物者組織商品，這將使他們能夠更有效地購物，并減少挫敗感。當(dāng)客戶忠誠度在6個(gè)月內(nèi)提高10％時(shí)，我們就會(huì)知道我們是對的。”

階段3：構(gòu)思

有了我們的研究，我們的團(tuán)隊(duì)已經(jīng)準(zhǔn)備好進(jìn)入設(shè)計(jì)思考過程的“理想”階段。

我們首先瀏覽了所有發(fā)現(xiàn)和用戶見解，并創(chuàng)建了M o SC o W圖-表示：

1. M =必須
2. S =應(yīng)該有
3. C =可以有
4. W =沒有

（1）網(wǎng)站地圖

接下來，我們繼續(xù)創(chuàng)建網(wǎng)站的信息架構(gòu)（IA）或藍(lán)圖。在這里，我們決定如何以邏輯格式對內(nèi)容進(jìn)行分類和組織。否則，用戶在瀏覽我們的網(wǎng)站時(shí)會(huì)迷路，它還可以幫助我們進(jìn)行下一步：創(chuàng)建原型。

（2）用戶流

階段4和5：原型和測試

現(xiàn)在，我們準(zhǔn)備創(chuàng)建紙質(zhì)原型。

一些紙制原型屏幕

在與我們的四個(gè)同學(xué)測試了交互式原型之后，我們發(fā)現(xiàn)了以下問題：

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

我們優(yōu)化了原型，并在Sketch中創(chuàng)建了中保真度原型。

產(chǎn)品結(jié)果頁/ 過濾結(jié)果頁/ 產(chǎn)品頁

UI流程：

接下來，我們小組的每個(gè)成員分別創(chuàng)建了一個(gè)高保真原型。我們?yōu)檫@部分工作花了四天的時(shí)間。下面將帶您了解視覺設(shè)計(jì)/ UI流程的各個(gè)元素。

情緒板：

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

情緒板

色彩：

我最終選擇了（略）深紅色，再加上深海軍藍(lán)作為第二（重點(diǎn)）顏色。

版式：

我選擇了80px的Staatliches字體作為顯示標(biāo)題，該字體與Episode的實(shí)際徽標(biāo)字體非常相似-但同時(shí)有點(diǎn)前衛(wèi)。

對于標(biāo)題和正文，我選擇了Roboto Condensed。這是一種中性且可讀的字體，仍與顯示標(biāo)題字體互補(bǔ)。我還覺得Roboto字體的“壓縮”版本非常適合電子商務(wù)網(wǎng)站，因?yàn)槊啃形谋究梢匀菁{更多文本。

高保真原型：

主頁：

產(chǎn)品頁面，以女裝為例：

產(chǎn)品頁面

細(xì)節(jié)保持簡潔，并指向重點(diǎn)：大小，顏色，材料，質(zhì)量以及（當(dāng)然）存儲該物品所在的位置。

還要記住，由于所有項(xiàng)目都是唯一的，因此永遠(yuǎn)不會(huì)像您在其他電子商務(wù)網(wǎng)站上發(fā)現(xiàn)的那樣，擁有星級/評分系統(tǒng)。

原文作者： Nele Groosman

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

譯者： 南設(shè)；譯者公眾號：南設(shè)（ID：shemenglianmeng）

本文由 @南設(shè) 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議