編輯導(dǎo)語：對于電子商務(wù)應(yīng)用程序來說，產(chǎn)品詳情頁是影響產(chǎn)品轉(zhuǎn)化率的重要因素，一個優(yōu)秀的產(chǎn)品詳情頁可以吸引用戶點(diǎn)進(jìn)來并且購買產(chǎn)品。在本篇文章中，作者使用設(shè)計思維分析蛋糕店的電子商務(wù)應(yīng)用程序，我們一起來看看吧。

在這個挑戰(zhàn)中，我的角色是UX研究員和UX設(shè)計師創(chuàng)建研究計劃，使用設(shè)計思維來幫助我的設(shè)計過程，并制作用戶角色、用戶旅程、信息架構(gòu)，用戶流程，線框，模型和原型。

對于這個挑戰(zhàn)，我使用設(shè)計思維來幫助我的設(shè)計過程。

一、案例研究背景

在這個一切都被數(shù)字化的時代，仍然有很多蛋糕店是手動下單，需要買家到店取餐，有些是在線的，但買家因?yàn)闆]有直接看到目錄和價格而感到不確定，還有所有的蛋糕店大多是自己制作網(wǎng)上訂購方式。

所以除了一家商店外，購物者沒有太多的蛋糕選擇。買家也懶得一個個去店里，尤其是要帶著預(yù)購結(jié)果去店里，要重復(fù)兩次，并且還要排隊(duì)。

二、研究計劃

• 創(chuàng)建產(chǎn)品創(chuàng)意
• 創(chuàng)建用戶畫像
• 創(chuàng)建客戶旅程地圖
• 制作線流
• 尋找一些情緒板
• 創(chuàng)建設(shè)計系統(tǒng)
• 創(chuàng)建高保真
• 創(chuàng)建原型

三、定義

在定義過程中，我正在做幾件事來確定問題，找到痛點(diǎn)并制定我們應(yīng)該如何做：

1. 問題

從背景研究中我得到了幾個指出用戶需求和洞察力的問題，所以我提出這個觀點(diǎn)來知道要解決什么問題：

從這個角度來看，我制作了用戶畫像：

在制作用戶角色之后，我正在做的下一步是創(chuàng)建客戶旅程地圖：

四、設(shè)計

定義之后，我有幾件事要做，那就是：

• 優(yōu)先考慮指標(biāo)
• 信息架構(gòu)
• 用戶流
• 線框
• 線流
• 情緒板

1. 優(yōu)先考慮指標(biāo)

因?yàn)槲以诙x過程中做得很好，所以我得到了幾個優(yōu)先級的想法：

2. 信息架構(gòu)

根據(jù)這些指標(biāo)，我可以制作幾個 IA，幫助我設(shè)計應(yīng)用程序，讓用戶知道如何使用應(yīng)用程序，而無需再次學(xué)習(xí)：

3. 用戶流

做完信息架構(gòu)（IA）后，我做了用戶流的制作過程，此用戶流程側(cè)重于用戶購買過程，從注冊階段到支付階段：

4. 線框

這是我根據(jù) IA 和用戶流程創(chuàng)建的線框：

5. 線流

有了線框后，我創(chuàng)建了線流以了解用戶在使用應(yīng)用程序時的路徑：

當(dāng)用戶定向到主頁的應(yīng)用程序的帳戶時：他們選擇了他們想要的蛋糕，然后他們閱讀了蛋糕的描述。

如果他們不喜歡樣品蛋糕，他們可以進(jìn)行定制。如果他們喜歡樣品，他們會轉(zhuǎn)到購物車頁面，然后在付款頁面中他們選擇他們的地址并選擇他們支付蛋糕的方式，然后在我們使用第三方快遞的這個應(yīng)用程序中選擇快遞。

在他們支付蛋糕后，他們可以等待蛋糕交付而無需來到商店。

五、原型與設(shè)計

為了制作原型和設(shè)計，我做了幾件事：

• 創(chuàng)建情緒板
• 創(chuàng)建設(shè)計系統(tǒng)
• 制作高保真
• 創(chuàng)建原型

1. 情緒版

情緒版是我們創(chuàng)造產(chǎn)品設(shè)計靈感的集合，這些產(chǎn)品設(shè)計聚集在一塊版面上。

2. 設(shè)計系統(tǒng)

我的設(shè)計系統(tǒng)包括：

• 排版
• 顏色
• 輸入表格
• 肖像學(xué)
• 插圖
• 按鈕（主要、次要、單選、復(fù)選框、切換、徽標(biāo)、圖像）
• 統(tǒng)計欄
• 頭部
• 導(dǎo)航欄和卡片

對于設(shè)計系統(tǒng)，我將其分為 3 類，即原子、分子和有機(jī)體。

3. 高保真

創(chuàng)建基于線框圖的高保真，來自情緒板的靈感，并使用設(shè)計系統(tǒng)將其排列成一頁。

4. 原型制作

六、測試

1. 問題

1.1 研究方法

深度訪談&可用性測試

1.2 研究目標(biāo)

• 了解用戶使用Cookiss做蛋糕電商的需求
• 了解 Cookiss的設(shè)計成功率

1.3 受訪者標(biāo)準(zhǔn)

• 18-30 歲
• 員工或大學(xué)生
• 至少曾經(jīng)在線或離線購買過蛋糕

1.4 工具

• 谷歌電子表格
• 谷歌表單
• 谷歌會議
• 焦點(diǎn)會議

1.5 用戶任務(wù)

1. 注冊和登錄：要求用戶注冊并登錄應(yīng)用程序并觀察用戶的行為；
2. 選擇項(xiàng)目和交易：要求用戶購買且停在購物車等待付款頁面并觀察用戶的行為；
3. 填寫地址：要求用戶填寫地址并觀察用戶在做什么；
4. 付款：要求用戶為蛋糕付款并觀察用戶在做什么；
5. 跟蹤順序：要求用戶跟蹤訂單并觀察用戶在做什么。

2. 結(jié)果

1. 第一個任務(wù)的結(jié)果是用戶感覺注冊和登錄就像他們在使用其他電子商務(wù)應(yīng)用程序時一樣，這與他們在注冊和登錄應(yīng)用程序時的行為相符。
2. 第二個任務(wù)的結(jié)果是多種多樣的，但大多帶有負(fù)面反饋。用戶感覺首頁很緊，沒有喘息的空間，因?yàn)橹挥形锲房?。?dāng)他們將商品放入購物車時，他們沒有注意到空購物車圖標(biāo)和填充購物車圖標(biāo)之間的區(qū)別。
3. 第三個任務(wù)，反饋比以前少，這只是小問題，但會引起混亂。用戶沒有注意到切換按鈕使地址成為主地址，因?yàn)轭伾c背景混合。
4. 第四個任務(wù)，用戶對流程沒有問題，但他們給我的反饋是：地址框太小，看不清楚和所選卡的顏色太淺所以沒有區(qū)別
5. 第五項(xiàng)任務(wù)是最清晰的任務(wù)，因?yàn)樗杏脩舳紱]有問題，他們覺得它清晰無瑕。

3. 結(jié)果總結(jié)

七、迭代

任務(wù)2迭代：

1. 主頁

• 痛點(diǎn)：用戶覺得首頁太緊，只裝蛋糕卡，沒有變化
• 迭代：提供一個分類圖標(biāo)，讓主頁看起來不像只有蛋糕卡

2. 將物品放入購物車

• 痛點(diǎn)：用戶對已經(jīng)在購物車和尚未在購物車中的蛋糕物品之間的區(qū)別感到困惑，因此他們不確定
• 迭代：提供購物車中物品的動畫，購物車圖標(biāo)從輪廓圖標(biāo)變?yōu)樘畛鋱D標(biāo)

任務(wù)3迭代：

• 痛點(diǎn)：填寫地址時用戶不注意是否有切換主要地址，用戶想快速填寫地址，建議用地圖填寫地址
• 迭代：提供更深的灰色，以便切換按鈕更明顯，并提供地圖作為快速填寫地址的一種方式

任務(wù)4迭代：

• 痛點(diǎn)：用戶感覺地址框間距過緊，選中的項(xiàng)目不太顯眼
• 迭代：將間距從 0px 到間距 10px，并為所選項(xiàng)目提供更深的顏色，并將地址框從字體大小 12px 更改為 16px

這個電子商務(wù)的應(yīng)用的設(shè)計是按照用戶的需求和用戶在網(wǎng)上購物的習(xí)慣進(jìn)行設(shè)計，主要的問題在于視覺設(shè)計，沒有給用戶的足夠的空間呼吸。但是，在完成迭代過程后，我可以很好地處理這個問題~感謝你的閱讀：）

（部分圖文來自網(wǎng)絡(luò)，若有侵權(quán)，請聯(lián)系刪除。）

作者：交互設(shè)計小助手；公眾號：美國交互設(shè)計資訊（ID：gh_deb1a91db646）

原文鏈接：https://mp.weixin.qq.com/s/ekNtS0c8MZAhVrCPFCBKig

本文由 @美國交互設(shè)計資訊 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

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