案例研究:誰不喜歡吃小蛋糕呢?關于蛋糕店的電子商務應用程序—Cookiss!
編輯導語:對于電子商務應用程序來說,產品詳情頁是影響產品轉化率的重要因素,一個優秀的產品詳情頁可以吸引用戶點進來并且購買產品。在本篇文章中,作者使用設計思維分析蛋糕店的電子商務應用程序,我們一起來看看吧。
在這個挑戰中,我的角色是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 受訪者標準
- 18-30 歲
- 員工或大學生
- 至少曾經在線或離線購買過蛋糕
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協議。
哇塞這個設計方案寫的真的很哇塞!收藏了收藏了!太棒了這也
小蛋糕的設計中視覺效果真的很重要,一般做得好的產品圖就能直接讓客戶下單。
沒想到一個小小的蛋糕也可以有這么多學問,感覺這個設計會很受愛吃甜食的人的喜愛的
這個設計挺適合女生的,很容易抓住女生的心里,討女生喜歡!
小蛋糕簡直是我的最愛,甜甜的東西真的會讓人心情變好,超喜歡奶油?。?!
看著就好有食欲,這個設計看起來好舒服,深得我心哈哈
我曾經網購蛋糕翻車過,目前對線上選購不太相信了。。。
果然是老來俏,越來越喜歡粉粉的東西了,這個設計看起來好可愛啊啊啊啊
可惡,小饞蟲被小蛋糕被進來了,越看越餓,明明剛吃完沒多久
很不錯的設計,文章介紹的也很詳細,給作者點個贊,謝謝作者讓我知曉了這么一個東西。
看著這些形形色色的小蛋糕頁面設計,妥妥的增加食欲哇。
愿意為小蛋糕買單和愿意為鮮花買單一定程度上還是挺相似的,就是給自己一個獎勵的感覺
蛋糕YYDS!這個文章也是YYDS,很實用,講的也很詳細