I. 發現

客戶訪談

由于這位甲方的合作態度良好，所以設計師有機會與 SESA 的創始人和產品經理進行了 2-3 次會議。

借此了解了業務目標、用戶需求和技術限制等關鍵問題：

主要問題：

• 低轉化率：雜亂的界面使用戶很難瀏覽商品。
• 手機端體驗不友好：幾乎 90% 的用戶是通過手機訪問網站，但手機版的設計不夠理想。
• 手機端糟糕的界面和體驗：目前他們使用的是現有的網站模板，根據目標用戶的反饋，缺乏優化而且加載速度很慢。

客戶需求

• 一鍵式購物
• 輕松的界面和體驗
• 無縫的商品搜索
• 折扣和優惠更容易被看到
• 使用網站時能感覺熟悉而簡便

成功指標

• 增加客單價
• 增強人們的對品牌的認知感
• 增加用戶和訂單數量
• 無縫的體驗
• 讓健康的生活方式更加受歡迎、評價、容易取得，更加有趣而美好
• 提供并教育用戶健康的生活方式，并轉化為愉快美好的生活

目標人群

根據產品團隊提供的數據，整理出了目標人群的特征：

II. 構思

人物角色

根據以上信息，整理出了兩個完全不同的人物角色：

故事版

沒有區分人物角色的故事版：

目標用戶的故事版：

體驗地圖

思考分析用戶旅程的五個階段（探索網站、比較商品、確認下單、完成購買和接收配送）和用戶感知的三個方面（行為、思考和感知），制作了體驗地圖：

將當中的關鍵信息挑選出來：

競品分析

設計師找到了三家主要競品，先大概了解他們的特色和優勢：

然后從 Google Play 的評論中尋找競品的問題，這樣就可以思考如何戰勝他們：

III. 設計

信息導航

先把大致的用戶流程確定下來，這樣對整個產品就有了一個整體構思：

線框圖

然后用手畫出線框圖，定下頁面的整體布局：

低保真

將線框圖手稿用繪圖軟件細化，制作成低保真方案，用來向客戶展示和做用戶測試：

IV. 完成

可用性測試

找用戶做測試時，用的是低保真可交互原型。

根據測試發現的問題，設計師直接將優化方案運用到了高保真方案上，所以下面整理的問題都用高保真方案來配圖展示：

• 1. 自動定位：測試之前用戶必須手動搜索位置。
• 2. 屬性選擇：由于客戶想要一鍵式購物，所以當用戶點擊熟悉（通常是重量）右側的箭頭時，可以反轉卡片進行詳細選擇。

• 3. 促銷展示：原本設計了三個促銷區，但是測試中發現用戶面對大量的信息無法充分理解，所以移除了一部分，只保留了頭圖和分類優惠。

• 4. 商品導航：為了避免用戶迷路，將商品分類導航放在了所有頁面頂部，并且懸停時展示子分類和相關文章。

高保真

響應式

這個網站需要具備很高的響應式能力，不論在 PC 端還是手機端，都能輕松使用。

但由于 PC 端和手機端的尺寸相差太大了，所以不得不使用斷點（Breakpoint）來判斷用戶當前處在哪個端，并展示相應的界面。

這個斷點的概念在柵格系統很常用到，指的是當界面尺寸縮小或增大到某個（或幾個）零界點時，間距大小或其它界面元素發生突變。

上圖來源：三種最主流的響應式柵格

這個方案的對于移動端的特殊處理包括：

• 確保商品分類的位置，方便用戶記憶
• 使用漢堡菜單
• 提供模仿原生 APP 的吸底導航

Before&After

最后對比一下優化前后的方案：

原文地址：體驗進階（公眾號）

作者：設計師ZoeYZ

轉載請注明：學UI網》重新設計東南亞頭部在線超市的真實案例

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( m.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務