重新設(shè)計印度尼西亞排名第一的雜貨網(wǎng)店
在設(shè)計項目流程時,該如何進行優(yōu)化?對此,本文以印度尼西亞排名第一的雜貨網(wǎng)店為例,從發(fā)現(xiàn)、構(gòu)思、設(shè)計幾個階段對改項目進行了優(yōu)化,并展示分析了設(shè)計流程,一起來看看吧。
在這個 UI/UX 案例研究中,我將解釋我是如何從頭開始重新設(shè)計雜貨網(wǎng)店 SESA ,講述我的設(shè)計流程以及在此過程中做出的決定。
一、項目背景
SESA 看了我的案例研究后在 LinkedIn 上聯(lián)系了我 —— Tasty Green 提出了他們對重新設(shè)計現(xiàn)有 PWA【1】以用于桌面和移動斷點的要求。而且,我決定接受這個挑戰(zhàn)!
(【1】PWA:(漸進式 Web 應(yīng)用程序)是一種使用各種技術(shù)來增強Web應(yīng)用程序功能的理念,它可以使網(wǎng)站體驗更好并模擬一些本機功能,例如通知推送、在移動端使用標準化框架,Web應(yīng)用程序具有與本機應(yīng)用程序類似的體驗。)
UX 案例研究:設(shè)計美味綠色食品雜貨店 App
作為一名購物者,我喜歡在當?shù)氐碾s貨店購物,并注意到老百姓面臨的一些問題……
二、我的角色
用戶體驗研究、用戶界面設(shè)計、原型設(shè)計、文案寫作、藝術(shù)指導
(注意:所有設(shè)計組件和數(shù)據(jù)嚴格屬于 SESA ? 并擁有版權(quán)。請不要再創(chuàng)或重新分發(fā)。)
三、方法論
四、第一階段:發(fā)現(xiàn)
1. 利益相關(guān)者訪談
我與 SESA 的創(chuàng)始人和產(chǎn)品經(jīng)理進行了 2-3 次會議,以更好地了解他們的產(chǎn)品并找到業(yè)務(wù)目標、用戶需求和技術(shù)限制之間的交集。
并且可以總結(jié)為:
2. 問題陳述
- 低轉(zhuǎn)化率:雜亂的界面使用戶更難瀏覽產(chǎn)品及其變化。
- 對手機用戶不友好:幾乎 90% 的用戶通過手機訪問網(wǎng)站,但手機端設(shè)計不符合用戶期望。
- 手機網(wǎng)站上令人困惑的用戶界面和體驗:目前,他們正在為其網(wǎng)站使用現(xiàn)成的模板,該模板并未根據(jù)品牌和目標受眾進行優(yōu)化。因此,需要很長時間才能加載。
3. 客戶真正想要什么?
- 一鍵購物
- 更簡單的用戶界面和用戶體驗
- 無縫產(chǎn)品搜索
- 用戶很容易看到折扣和優(yōu)惠
- 搜索網(wǎng)站時的熟悉度和簡單性
4. 成功指標
- 增加我們訂單的平均價值
- 讓更多人了解我們的品牌
- 也增加了用戶和訂單
- 無縫用戶體驗
- 讓健康的生活方式更受歡迎、更實惠、更輕松、更愉快、更美味
- 提供和教育輕松健康轉(zhuǎn)變?yōu)榭鞓访篮蒙?/strong>
5. 定義目標受眾
五、第二階段:構(gòu)思
1. 人物卡
- 為了與目標受眾產(chǎn)生共鳴,我根據(jù)目標受眾標準創(chuàng)建了 2 個角色。
- 我創(chuàng)建了兩個完全不同的角色來理解來自兩個不同背景的用戶旅程。
(1)Rheza Aulia麗莎·奧利亞
年齡:25歲,專業(yè):時尚藝術(shù),狀態(tài):單身,職業(yè):時尚博主,地點:巴厘,文化程度:高
“我認為美隨處可見。尋常人是丑得東西,我能看到它的另類美?!?/p>
個性:充滿活力的,自我導向的,有趣的
類型:臉書、油管、ins 照片墻
支付媒介:數(shù)字付款,現(xiàn)金/支票
個人經(jīng)歷:Rheza 是印度尼西亞有名的時尚博主和油管博主。她想要保持健康。她每天鍛煉,吃健康的食物。她與各個品牌合作,向她的粉絲贊助他們的產(chǎn)品。她獨自生活,并且想要獨立的生活。
核心需求:
- 想要保持獨立,并成為印度尼西亞頂流網(wǎng)紅
- 想要能夠自我管理,并使得人們意識到自我管理
- 想要保持健康,這樣她看起來美麗動人并且以后能獲得更多品牌合作
挫敗感:
- 她保持獨立,并沒有很多關(guān)于雜貨店購物的知識
- 雖然她充滿活力,但是對送貨延遲和每日雜貨店花費感到挫敗
- 市場上并沒有過多的選擇和比較
(2)Jane Ani簡安妮
年齡:35歲,專業(yè):商課,狀態(tài):已婚,職業(yè):時尚博主,地點:雅加達,文化程度:中
“我相信健康的身體寓于健康的心靈。我希望家人健康安全因為他們對我來說就是全世界。我也參與各種可持續(xù)的基礎(chǔ)社區(qū)關(guān)系當中。”
個性:敏感的,有雄心壯志的,忠誠的
類型:美國宇航局、華為、ins照片墻
支付媒介:數(shù)字付款
個人經(jīng)歷:Jane 已婚,生了一對龍鳳胎。除了媽媽的身份,她還管理100名員工的公司。她的公司專注于電子服務(wù),伴隨著客戶高要求和激烈競爭。她是一名母親,一位妻子,于此同時還是一名成功的女企業(yè)家感到心滿意足。
核心需求:
- 自豪感:只接受生命中最好的(自我實現(xiàn))
- 健康是人生的重中之重(有意識的選擇)
- 保持家人健康安全只為他們提供最好的產(chǎn)品,愿意為此付出更多(決策和保證)
挫敗感:
- 由于日程繁忙,她并不能去雜貨店購物
- 她沒有從當?shù)仉s貨店買到優(yōu)質(zhì)產(chǎn)品。盡管她沒有得到健康的物品,她甚至付了更多
- 想要確保她的孩子們在所有東西中擁有最好的
2. 理想用戶之旅
當我開始完成和理解更多用戶的挫折時,我想放大用戶的生活方式。因此,我可以想出一個簡單的方法來融入他們的生活。
3. 旅程地圖
為了更深入地理解挫折感,我使用了“旅程分析”用戶體驗方法,并將旅程分為五個階段——
- 探索網(wǎng)站
- 比較產(chǎn)品
- 承諾購買
- 主動購買
- 接收產(chǎn)品
并在這些階段 強調(diào)用戶——
- 行為
- 思考
- 感覺
旅程地圖
指出旅程地圖中的挫敗感
4. 競品分析
- 它幫助我了解競爭對手在做什么以及他們?nèi)绾谓鉀Q這些問題。
- 它還幫助我從這些網(wǎng)站獲得負面評論,并通過解決我們可以讓自己脫穎而出的問題。
圖片翻譯如下:
我們從Sayurbox中學到了什么?
Sayurbox(雜貨網(wǎng)店)
- 標題中的全局搜索、類別和位置詳細信息,
- 首屏中最多 5 個輪播圖橫幅,
- 主頁中的每個部分都應(yīng)該分類,
- 特色商品成分,
- 主頁底部的常見問題解答,
- 產(chǎn)品信息、營養(yǎng)和益處、儲存方法、農(nóng)民和供應(yīng)商,
- 檢查時,問Mobile no.,
- 產(chǎn)品包裝:塑料/非塑料
- 交貨時間段
圖片翻譯如下:
我們從 Happyfresh 中學到了什么?
Happyfresh(同一個地方囊括了所有的雜貨店)
- 首屏部分中的位置,帶有主圖
- 標題中的語言和個人信息
- 展示頂級超市和雜貨店
- 為什么在Happyfresh購物?展示主要重點,貨到付款/在線支付
- 企業(yè)交付
- 在產(chǎn)品頁面中分類和過濾
- 產(chǎn)品評論和評級
- 頂部橫幅展示
- 購物車的右側(cè)邊欄
- 自定義您的購物車訂單
圖片翻譯如下:
我們從 Brambang 中學到了什么
Brambang(雜貨網(wǎng)店)
- 全局搜索、登錄和購物車
- 首屏(6)中的橫幅
- 好評
- 限時促銷
- 從 Brambang購買的優(yōu)勢
- 會員計劃
- 愿望清單:列一個清單
5. 客戶評論(競品)
- 我從競品那里收集了用戶的負面評論,并專注于通過我們的設(shè)計解決它們。
- 它幫助我更好地了解用戶。
圖片翻譯如下:
Sayurbox 客戶評論
GG Branch 2020.11.1
這個應(yīng)用程序真的令人失望,我的訂單應(yīng)該最晚在下午 1 點到達,但它從來沒有出現(xiàn)過。在我決定給客服打電話后,結(jié)果發(fā)現(xiàn)我的訂單被送錯了地址,糾正之后,我終于拿到了我的蔬菜,但是番茄變得黏糊糊的。我要求退款,但客戶服務(wù)實際上沒有回復。糟糕的經(jīng)歷,不要相信這個應(yīng)用程序!
Ida Wirawaty 2020.3.17
糟糕的的應(yīng)用程序。你甚至無法取消訂單,從而使新訂單的付款更加困難,因為假定已取消訂單的所有價格都與正在進行的訂單相結(jié)合。常見問題解答選項對解決此問題幾乎沒有幫助。不推薦。
Sari Tambun 2020.3.27
應(yīng)用程序不好,需要改進,修復錯誤,調(diào)快響應(yīng)時間速度,尤其是付款的時候。如果你以前失敗或放棄付款交易,請不要選擇通過虛擬賬戶付款。但可怕的是客戶服務(wù)回復,回復非常慢,可以說根本沒有回復。我的訂單在預定日期后一天到達,缺少 1 件商品,沒有任何確認。我確實聊天并通過電子郵件向他們詢問我的訂單交付但根本沒有回復。絕對會卸載?。?!
annanovalia dewii 2020.2.4
我已經(jīng)在周日下單并完成了付款,訂單應(yīng)該在周二早上6點到9點送達。已經(jīng)是下午1點了,我的訂單直到現(xiàn)在才送達,糟糕的系統(tǒng),糟糕的服務(wù),沒有選擇。退款也沒有跟蹤訂單。在這里訂購能有什么體驗。
Ardian Sapoetro 2019.1.30
第一次體驗=真的很糟糕。根本沒有確認缺少的商品。投訴后,他們給了我們?nèi)鄙偕唐返葍r值的代金券,但我需要支付額外的運費???。?/p>
Leadsin99er 2019.12.13
有時包裝不好。蔬菜送到時,塑料里面是濕的。當它應(yīng)該用紙包裹時它會腐爛。有時水果和蔬菜的質(zhì)量不好,尤其是打折的時候。在你為訂單付款后,還有不少缺少的商品。你得到的不是退款,而是代金券。他們的品種太少,尤其是水果。添加一些選擇。我仍然會給這個應(yīng)用程序一個未來改進的機會??蛻舴?wù)也總是很忙,并不能真正令人滿意地回答你的問題。
圖片翻譯如下:
Happyfresh 客戶評論
Sapto Handriyanto 2020.10.29
我曾經(jīng)喜歡這個應(yīng)用程序,但現(xiàn)在它變得越來越荒謬。我通常使用電子錢包付款,但該選項不再可用,對于我通常購物的商店,CC(信用卡支付)是唯一可用的付款方式。此外,每次打開應(yīng)用程序時,送貨費越來越貴。它不僅不適用于當天交貨,也不適用于2-3天的提前購物。我必須說奇怪和愚蠢。如果它是一個錯誤,請修復它。但如果你故意這樣做,對我來說很容易卸載。
Mona Kassim 2020.12.6
應(yīng)用程序不是用戶友好的。產(chǎn)品供應(yīng)有限。購物者沒有受過良好的產(chǎn)品培訓——很大程度上取決于購物者的個人知識。沒有必要選擇交貨時間,因為他們已經(jīng)根據(jù)你選擇的交貨時間預訂了快遞員。我的交貨延遲了2小時,而購物者在5小時前完成了購買。我的肉類訂單沒有冷藏。
Sarah OG 2020.11.26
該應(yīng)用程序已經(jīng)有2周沒有工作了。你將物品添加到購物車,但當你打開購物車時,它一片空白。在許多不同的商店嘗試了很多產(chǎn)品,但仍然相同。該應(yīng)用程序已更新到最新版本。
Jaya sakthi 2020.10.1
最差的服務(wù)之一。浪費了2個小時等待我的訂單。重點是節(jié)省不去雜貨店的時間。購買雜貨時,我使用折扣券并支付了全部金額,當購物者到達門口時,即使在顯示我的購買細節(jié)和折扣后,又浪費了30分鐘詢問折扣金額。他拒絕出示原始收據(jù),因為他做了一些替換,所以我應(yīng)該怎么計算。
Amanda Buchari 2020.11.20
我從此應(yīng)用程序中選擇的付款方式與送貨員應(yīng)用程序上出現(xiàn)的付款方式不同步。我選擇用借記卡付款,但最后不得不在送貨員來時支付現(xiàn)金,因為在他的應(yīng)用程序上我的訂單是電子錢包或貨到付款。我從我的應(yīng)用程序中沒有選擇的付款方式。這就是你的應(yīng)用程序系統(tǒng)的工作方式嗎?
ZULLL 2020.11.14
除非應(yīng)用程序。為什么我的區(qū)域無法訪問所有市場商店?愚蠢的…這是新冠應(yīng)時期,我們需要所有送貨服務(wù),我們不想出去買我們需要的東西,請為我所在的地區(qū)做點什么。
圖片翻譯如下:
Brambang 客戶評論
Salimah Maulana 2020.3.25
缺貨,如果最終在應(yīng)用程序中有選項,但當你選擇它時說缺貨時,線上什么都一樣,你不必展示它。
Eltania 2020.3.31
沒有庫存,沒有交貨跟蹤,沒有延遲交貨,沒有取消訂單,沒有退款。請在接受訂單前了解如何處理超額訂單并升級你的系統(tǒng)。
Christina M 2020.3.28
非常煩人的是應(yīng)用程序無法區(qū)分哪個缺貨,哪個仍然可用。所以在某種程度上,需要很長時間才能完成購物清單。
Derry Motor Bridal 2020.5.23
我經(jīng)常在這里購物,通常還不錯..即使我已經(jīng)是明星會員了…所有一起的訂單都爛了..胡蘿卜干癟了,一些pokcoi壞了..WA也沒有付款。公平評論:我一直都很好地使用應(yīng)用程序和服務(wù),但如果這是由于新冠疫情或假日季節(jié)每個人都在家購買的旺季,最好避免使用這些應(yīng)用程序。
Buditeguh Prasetyo 2020.3.27
該信息不易理解,沒有取消。首先,訂單沒有發(fā)送…
Agnesia Margaretha 2019.8.8
我想注冊并登錄gmail(谷歌郵箱),但它不工作也強制突然注銷,這是一個最糟糕的應(yīng)用程序,最好不要再使用這個應(yīng)用程序了
Andri Kristanto 2020.4.8
難以置信,我下單訂了11件商品,結(jié)果發(fā)現(xiàn)只有3件商品。他們從不回復或接你的電話。我試圖用各種可能的方法(電子郵件、WA、電話)聯(lián)系他們,但都沒有回復。這不是可靠的電商。
Elf_ycel 2020.2.16
在印度尼西亞有很多外國人,請考慮在應(yīng)用程序上選擇使用英語,以便更容易了解ni 在銷售什么以及如何訂購!這將有很大的幫助!謝謝你
六、第三階段:用戶界面設(shè)計
1. 網(wǎng)站地圖
2. 草圖
草圖(桌面斷點)
草圖(移動斷點)
3. 線框
線框(桌面斷點)
線框(移動斷點)
4. 可用性測試
我根據(jù)我最初的想法創(chuàng)建了線框來展示客戶并執(zhí)行未經(jīng)審核的用戶測試。我與目標用戶分享了原型鏈接, ?;诖耍覍€框進行了一些更改并創(chuàng)建了高保真模型。
在測試之前,用戶必須手動搜索他的位置才能收貨。我修復了它并創(chuàng)建了一個對話框,如果位置功能打開,它可以自動檢測位置,否則在用戶登錄網(wǎng)站后手動搜索位置。
通常會在卡片上 顯示產(chǎn)品的變體以及定價和所有其他詳細信息??蛻粝胍绘I購物,所以當用戶點擊 Variant list 時,我在卡片上進行了轉(zhuǎn)換。它會簡單地翻轉(zhuǎn)并展示所有帶有價格和報價詳細信息的變體,如下所示:
將變體產(chǎn)品添加到購物車
早些時候,我展示了網(wǎng)站上最新優(yōu)惠的3個部分 —— 網(wǎng)頁橫幅、特別促銷和分類優(yōu)惠。在測試中,我發(fā)現(xiàn)用戶對優(yōu)惠感到不知所措,看不到閃購。因此,我刪除了特別促銷部分,并使優(yōu)惠清晰可見(不混亂)。
促銷橫幅
為了更容易訪問每個產(chǎn)品(無論用戶在哪個頁面),所有頁面中都提供了一個 粘性產(chǎn)品標題。用戶可以直接選擇 雜貨類型或?qū)⑹髽藨彝T谄渖?/strong>以獲得子類別和該類別的推薦博客文章。
懸停時顯示子類別
5. 桌面斷點
6. 手機斷點
我在優(yōu)化時發(fā)現(xiàn)的最具體的問題是為手機設(shè)備創(chuàng)建響應(yīng)式設(shè)計,但我做到了。
- 我將每個類別分為不同的部分,并嘗試給他們正確的位置,同時牢記他們的層次結(jié)構(gòu)。
- 我為導航欄使用了漢堡菜單,并將搜索欄與它對齊。
- 我還為移動斷點提供了一個底部導航欄,以便于訪問,因為 90% 的目標受眾是手機用戶。
底部導航欄
模型(手機斷點)
7. 重新設(shè)計前后對比
8. 我的學習
這是我第一次做這么大的項目,了解國外用戶需要花費很多時間。盡管團隊在進行研究和調(diào)查方面幫助了我很多。由于公司條款,我無法在此處分享數(shù)據(jù),但您可以看到最終輸出并感受到我的辛勤工作。
在卡片上顯示價格對我來說是一個挑戰(zhàn)。印尼盾 (IDR) 匯率高于美元。
1 美元 = 14444.50 印尼盾
通常,產(chǎn)品的價格以千計,甚至是一個奶瓶的價格。
在線框圖中,我在卡片上顯示了每個產(chǎn)品的評級,但后來我發(fā)現(xiàn)他們只有一個品牌產(chǎn)品。所以,這里沒有比較的地方。最后,我決定僅在“產(chǎn)品詳細信息”頁面上顯示客戶評分和評論。
客戶希望他們的網(wǎng)站有兩種語言 —— 印度尼西亞語和英語。用印度尼西亞語設(shè)計它對我來說很典型。所以,如果翻譯成印度尼西亞語,我對卡片中的字數(shù)限制持謹慎態(tài)度。
無論如何,我從這個項目中學到了很多東西,并想用這些知識來解決更典型和更廣泛的目標受眾問題。
而且……這是一個包裝!
差不多就是這樣。這是我重新設(shè)計網(wǎng)站的整個過程。希望您發(fā)現(xiàn)這篇文章非常有幫助和有見地。如果您想與我分享任何內(nèi)容,請與我聯(lián)系。我很樂意接受。
原文作者:Om Arya(本文翻譯已獲得作者的正式授權(quán))
原文:Redesigning Indonesia’s #1 Online Grocery Store — UI/UX Case Study by Om Arya Muzli - Design Inspiration
譯者:周佳悅;審核:李澤慧、張聿彤;編輯:孫淑雅;微信公眾號:TCC翻譯情報局(ID:TCC-design);連接知識,了解全球精選設(shè)計干貨
本文由@TCC翻譯情報局 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自 Unsplash,基于 CC0 協(xié)議
該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。
設(shè)計之后整個頁面會更有邏輯關(guān)系一點,改善一些細節(jié)問題吧