編輯導語:對於電子商務應用程式來說,產品詳情頁是影響產品轉化率的重要因素,一個優秀的產品詳情頁可以吸引使用者點進來並且購買產品。在本篇文章中,作者使用設計思維分析蛋糕店的電子商務應用程式,我們一起來看看吧。
在這個挑戰中,我的角色是
UX研究員和UX設計師
建立研究計劃,使用設計思維來幫助我的設計過程,並製作使用者角色、使用者旅程、資訊架構,使用者流程,線框,模型和原型。
對於這個挑戰,我使用
設計思維
來幫助我的設計過程。
一、案例研究背景
在這個一切都被數字化的時代,
仍然有很多蛋糕店是手動下單,需要買家到店取餐,有些是線上的,但買家因為沒有直接看到目錄和價格而感到不確定,還有所有的蛋糕店大多是自己製作網上訂購方式
。
所以除了一家商店外,購物者沒有太多的蛋糕選擇。買家也懶得一個個去店裡,尤其是要帶著預購結果去店裡,要重複兩次,並且還要排隊。
二、研究計劃
建立產品創意
建立使用者畫像
建立客戶旅程地圖
製作線流
尋找一些情緒板
建立設計系統
建立高保真
建立原型
三、定義
在定義過程中,我正在做幾件事來確定問題,找到痛點並制定我們應該如何做:
1. 問題
從背景研究中我得到了幾個指出使用者需求和洞察力的問題,所以我提出這個觀點來知道要解決什麼問題:
從這個角度來看,我製作了使用者畫像:
在製作使用者角色之後,我正在做的下一步是建立客戶旅程地圖:
四、設計
定義之後,我有幾件事要做,那就是:
1. 優先考慮指標
因為我在定義過程中做得很好,所以我得到了幾個優先順序的想法:
2. 資訊架構
根據這些指標,我可以製作幾個 IA,幫助我設計應用程式,讓使用者知道如何使用應用程式,而無需再次學習:
3. 使用者流
做完資訊架構(IA)後,我做了使用者流的製作過程,此使用者流程側重於使用者購買過程,從註冊階段到支付階段:
4. 線框
這是我根據 IA 和使用者流程建立的線框:
5. 線流
有了線框後,我建立了線流以瞭解使用者在使用應用程式時的路徑:
當用戶定向到主頁的應用程式的帳戶時:他們選擇了他們想要的蛋糕,然後他們閱讀了蛋糕的描述。
如果他們不喜歡樣品蛋糕,他們可以進行定製。如果他們喜歡樣品,他們會轉到購物車頁面,然後在付款頁面中他們選擇他們的地址並選擇他們支付蛋糕的方式,然後在我們使用第三方快遞的這個應用程式中選擇快遞。
在他們支付蛋糕後,他們可以等待蛋糕交付而無需來到商店。
五、原型與設計
為了製作原型和設計,我做了幾件事:
1. 情緒版
情緒版是我們創造產品設計靈感的集合,這些產品設計聚集在一塊版面上。
2. 設計系統
我的設計系統包括:
排版
顏色
輸入表格
肖像學
插圖
按鈕(主要、次要、單選、複選框、切換、徽標、影象)
統計欄
頭部
導航欄和卡片
對於設計系統,我將其分為 3 類,即原子、分子和有機體。
3. 高保真
建立基於線框圖的高保真,來自情緒板的靈感,並使用設計系統將其排列成一頁。
4. 原型製作
六、測試
1. 問題
1.1 研究方法
深度訪談&可用性測試
1.2 研究目標
瞭解使用者使用Cookiss做蛋糕電商的需求
瞭解 Cookiss的設計成功率
1.3 受訪者標準
1.4 工具
1.5 使用者任務
註冊和登入:
要求使用者註冊並登入應用程式並觀察使用者的行為;
選擇專案和交易:
要求使用者購買且停在購物車等待付款頁面並觀察使用者的行為;
填寫地址:
要求使用者填寫地址並觀察使用者在做什麼;
付款:
要求使用者為蛋糕付款並觀察使用者在做什麼;
跟蹤順序:
要求使用者跟蹤訂單並觀察使用者在做什麼。
2. 結果
第一個任務的結果是使用者感覺註冊和登入就像他們在使用其他電子商務應用程式時一樣,這與他們在註冊和登入應用程式時的行為相符。
第二個任務的結果是多種多樣的,但大多帶有負面反饋。使用者感覺首頁很緊,沒有喘息的空間,因為只有物品卡。當他們將商品放入購物車時,他們沒有注意到空購物車圖示和填充購物車圖示之間的區別。
第三個任務,反饋比以前少,這只是小問題,但會引起混亂。使用者沒有注意到切換按鈕使地址成為主地址,因為顏色與背景混合。
第四個任務,使用者對流程沒有問題,但他們給我的反饋是:地址框太小,看不清楚和所選卡的顏色太淺所以沒有區別
第五項任務是最清晰的任務,因為所有使用者都沒有問題,他們覺得它清晰無瑕。
3. 結果總結
七、迭代
任務2迭代:
1. 主頁
痛點:
使用者覺得首頁太緊,只裝蛋糕卡,沒有變化
迭代:
提供一個分類圖示,讓主頁看起來不像只有蛋糕卡
2. 將物品放入購物車
痛點:
使用者對已經在購物車和尚未在購物車中的蛋糕物品之間的區別感到困惑,因此他們不確定
迭代:
提供購物車中物品的動畫,購物車圖示從輪廓圖示變為填充圖示
任務3迭代:
痛點:
填寫地址時使用者不注意是否有切換主要地址,使用者想快速填寫地址,建議用地圖填寫地址
迭代:
提供更深的灰色,以便切換按鈕更明顯,並提供地圖作為快速填寫地址的一種方式
任務4迭代:
痛點:
使用者感覺地址框間距過緊,選中的專案不太顯眼
迭代:
將間距從 0px 到間距 10px,併為所選專案提供更深的顏色,並將地址框從字型大小 12px 更改為 16px
這個電子商務的應用的設計是按照使用者的需求和使用者在網上購物的習慣進行設計,主要的問題在於視覺設計,沒有給使用者的足夠的空間呼吸。但是,在完成迭代過程後,我可以很好地處理這個問題~感謝你的閱讀:)
(部分圖文來自網路,若有侵權,請聯絡刪除。)
作者:互動設計小助手;公眾號:美國互動設計資訊(ID:gh_deb1a91db646)
原文連結:https://mp。weixin。qq。com/s/ekNtS0c8MZAhVrCPFCBKig
本文由 @美國互動設計資訊 授權釋出於人人都是產品經理。未經許可,禁止轉載。
題圖來自Unsplash,基於CC0協議。