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