案例研究:電子商務(wù)平臺(tái)設(shè)計(jì)的5個(gè)階段

1 評(píng)論 4920 瀏覽 9 收藏 16 分鐘

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

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

電子商務(wù)平臺(tái)案例研究

從左至右:Danique Nagel,Marine Lejeune和我自己

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

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

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

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

電子商務(wù)平臺(tái)案例研究

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

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

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

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

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

此階段使用的方法是:

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

(1)品牌分析

電子商務(wù)平臺(tái)案例研究

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

電子商務(wù)平臺(tái)案例研究

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

電子商務(wù)平臺(tái)案例研究

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

我們的精益調(diào)查帆布幫助我們了解誰(shuí),我們應(yīng)該瞄準(zhǔn)與調(diào)查,如何正確安排邏輯流程圖中的問(wèn)題,以及如何削減下來(lái)的最基本。(請(qǐng)記?。簺](méi)有人愿意填寫(xiě)冗長(zhǎng)的文字調(diào)查)。

(2)調(diào)查

下一步:在Google表單中創(chuàng)建調(diào)查。已經(jīng)定義了問(wèn)題和布局,此過(guò)程相對(duì)簡(jiǎn)單。

電子商務(wù)平臺(tái)案例研究

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

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

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

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

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

(3)采訪(fǎng)

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

階段2:定義

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

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

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

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

親和圖:

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

電子商務(wù)平臺(tái)案例研究

電子商務(wù)平臺(tái)案例研究

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

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

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

思維導(dǎo)圖:

電子商務(wù)平臺(tái)案例研究

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

電子商務(wù)平臺(tái)案例研究

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

(2)用戶(hù)人

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

電子商務(wù)平臺(tái)案例研究

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

電子商務(wù)平臺(tái)案例研究

(3)用戶(hù)旅程

用戶(hù)旅程有助于我們更好地同情用戶(hù)。我們?yōu)橹饕脩?hù)角色選擇了以下方案:

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

電子商務(wù)平臺(tái)案例研究

從所有這些見(jiàn)解中,我們能夠整理出以下問(wèn)題陳述:

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

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

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

階段3:構(gòu)思

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

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

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

電子商務(wù)平臺(tái)案例研究

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

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

電子商務(wù)平臺(tái)案例研究

(2)用戶(hù)流

電子商務(wù)平臺(tái)案例研究

階段4和5:原型和測(cè)試

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

電子商務(wù)平臺(tái)案例研究

一些紙制原型屏幕

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

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

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

電子商務(wù)平臺(tái)案例研究

產(chǎn)品結(jié)果頁(yè)/ 過(guò)濾結(jié)果頁(yè)/ 產(chǎn)品頁(yè)

UI流程:

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

情緒板:

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

電子商務(wù)平臺(tái)案例研究

情緒板

色彩:

電子商務(wù)平臺(tái)案例研究

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

版式:

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

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

電子商務(wù)平臺(tái)案例研究

高保真原型:

主頁(yè):

電子商務(wù)平臺(tái)案例研究

產(chǎn)品頁(yè)面,以女裝為例:

電子商務(wù)平臺(tái)案例研究

產(chǎn)品頁(yè)面

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

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

電子商務(wù)平臺(tái)案例研究

 

原文作者: Nele Groosman

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

譯者: 南設(shè);譯者公眾號(hào):南設(shè)(ID:shemenglianmeng)

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

題圖來(lái)自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. ?? 贊~感謝欄主翻譯~不過(guò)有些地方讀起來(lái)不是很通順,有點(diǎn)懵,能不能理一下。已收藏~ ?

    來(lái)自四川 回復(fù)