I. 發(fā)現(xiàn)
客戶訪談
由于這位甲方的合作態(tài)度良好，所以設(shè)計師有機(jī)會與 SESA 的創(chuàng)始人和產(chǎn)品經(jīng)理進(jìn)行了 2-3 次會議。
借此了解了業(yè)務(wù)目標(biāo)、用戶需求和技術(shù)限制等關(guān)鍵問題：
主要問題：
- 低轉(zhuǎn)化率：雜亂的界面使用戶很難瀏覽商品。
- 手機(jī)端體驗不友好：幾乎 90% 的用戶是通過手機(jī)訪問網(wǎng)站，但手機(jī)版的設(shè)計不夠理想。
- 手機(jī)端糟糕的界面和體驗：目前他們使用的是現(xiàn)有的網(wǎng)站模板，根據(jù)目標(biāo)用戶的反饋，缺乏優(yōu)化而且加載速度很慢。
客戶需求
- 一鍵式購物
- 輕松的界面和體驗
- 無縫的商品搜索
- 折扣和優(yōu)惠更容易被看到
- 使用網(wǎng)站時能感覺熟悉而簡便
成功指標(biāo)
- 增加客單價
- 增強(qiáng)人們的對品牌的認(rèn)知感
- 增加用戶和訂單數(shù)量
- 無縫的體驗
- 讓健康的生活方式更加受歡迎、評價、容易取得，更加有趣而美好
- 提供并教育用戶健康的生活方式，并轉(zhuǎn)化為愉快美好的生活
目標(biāo)人群
根據(jù)產(chǎn)品團(tuán)隊提供的數(shù)據(jù)，整理出了目標(biāo)人群的特征：
II. 構(gòu)思
人物角色
根據(jù)以上信息，整理出了兩個完全不同的人物角色：
故事版
沒有區(qū)分人物角色的故事版：
目標(biāo)用戶的故事版：
體驗地圖
思考分析用戶旅程的五個階段（探索網(wǎng)站、比較商品、確認(rèn)下單、完成購買和接收配送）和用戶感知的三個方面（行為、思考和感知），制作了體驗地圖：
將當(dāng)中的關(guān)鍵信息挑選出來：
競品分析
設(shè)計師找到了三家主要競品，先大概了解他們的特色和優(yōu)勢：
然后從 Google Play 的評論中尋找競品的問題，這樣就可以思考如何戰(zhàn)勝他們：
P.S. 評論分析是一種簡單有效的競品分析利器（也可以用來分析自己的產(chǎn)品），具體方法我之前有分享過：別總想著數(shù)據(jù)分析/用戶調(diào)研，先把評論分析做了吧！
III. 設(shè)計
信息導(dǎo)航
先把大致的用戶流程確定下來，這樣對整個產(chǎn)品就有了一個整體構(gòu)思：
線框圖
然后用手畫出線框圖，定下頁面的整體布局：
低保真
將線框圖手稿用繪圖軟件細(xì)化，制作成低保真方案，用來向客戶展示和做用戶測試：
IV. 完成
可用性測試
找用戶做測試時，用的是低保真可交互原型。
根據(jù)測試發(fā)現(xiàn)的問題，設(shè)計師直接將優(yōu)化方案運用到了高保真方案上，所以下面整理的問題都用高保真方案來配圖展示：
- 1. 自動定位：測試之前用戶必須手動搜索位置。
- 2. 屬性選擇：由于客戶想要一鍵式購物，所以當(dāng)用戶點擊熟悉（通常是重量）右側(cè)的箭頭時，可以反轉(zhuǎn)卡片進(jìn)行詳細(xì)選擇。
- 3. 促銷展示：原本設(shè)計了三個促銷區(qū)，但是測試中發(fā)現(xiàn)用戶面對大量的信息無法充分理解，所以移除了一部分，只保留了頭圖和分類優(yōu)惠。
- 4. 商品導(dǎo)航：為了避免用戶迷路，將商品分類導(dǎo)航放在了所有頁面頂部，并且懸停時展示子分類和相關(guān)文章。
高保真
響應(yīng)式
這個網(wǎng)站需要具備很高的響應(yīng)式能力，不論在 PC 端還是手機(jī)端，都能輕松使用。
但由于 PC 端和手機(jī)端的尺寸相差太大了，所以不得不使用斷點（Breakpoint）來判斷用戶當(dāng)前處在哪個端，并展示相應(yīng)的界面。
這個斷點的概念在柵格系統(tǒng)很常用到，指的是當(dāng)界面尺寸縮小或增大到某個（或幾個）零界點時，間距大小或其它界面元素發(fā)生突變。
上圖來源：三種最主流的響應(yīng)式柵格
這個方案的對于移動端的特殊處理包括：
- 確保商品分類的位置，方便用戶記憶
- 使用漢堡菜單
- 提供模仿原生 APP 的吸底導(dǎo)航
Before&After
最后對比一下優(yōu)化前后的方案：
原文地址：體驗進(jìn)階（公眾號）
作者：設(shè)計師ZoeYZ
轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》重新設(shè)計東南亞頭部在線超市的真實案例
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( m.lzhte.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)