I. 發(fā)現(xiàn)

客戶(hù)訪談

由于這位甲方的合作態(tài)度良好，所以設(shè)計(jì)師有機(jī)會(huì)與 SESA 的創(chuàng)始人和產(chǎn)品經(jīng)理進(jìn)行了 2-3 次會(huì)議。

借此了解了業(yè)務(wù)目標(biāo)、用戶(hù)需求和技術(shù)限制等關(guān)鍵問(wèn)題：

主要問(wèn)題：

• 低轉(zhuǎn)化率：雜亂的界面使用戶(hù)很難瀏覽商品。
• 手機(jī)端體驗(yàn)不友好：幾乎 90% 的用戶(hù)是通過(guò)手機(jī)訪問(wèn)網(wǎng)站，但手機(jī)版的設(shè)計(jì)不夠理想。
• 手機(jī)端糟糕的界面和體驗(yàn)：目前他們使用的是現(xiàn)有的網(wǎng)站模板，根據(jù)目標(biāo)用戶(hù)的反饋，缺乏優(yōu)化而且加載速度很慢。

客戶(hù)需求

• 一鍵式購(gòu)物
• 輕松的界面和體驗(yàn)
• 無(wú)縫的商品搜索
• 折扣和優(yōu)惠更容易被看到
• 使用網(wǎng)站時(shí)能感覺(jué)熟悉而簡(jiǎn)便

成功指標(biāo)

• 增加客單價(jià)
• 增強(qiáng)人們的對(duì)品牌的認(rèn)知感
• 增加用戶(hù)和訂單數(shù)量
• 無(wú)縫的體驗(yàn)
• 讓健康的生活方式更加受歡迎、評(píng)價(jià)、容易取得，更加有趣而美好
• 提供并教育用戶(hù)健康的生活方式，并轉(zhuǎn)化為愉快美好的生活

目標(biāo)人群

根據(jù)產(chǎn)品團(tuán)隊(duì)提供的數(shù)據(jù)，整理出了目標(biāo)人群的特征：

II. 構(gòu)思

人物角色

根據(jù)以上信息，整理出了兩個(gè)完全不同的人物角色：

故事版

沒(méi)有區(qū)分人物角色的故事版：

目標(biāo)用戶(hù)的故事版：

體驗(yàn)地圖

思考分析用戶(hù)旅程的五個(gè)階段（探索網(wǎng)站、比較商品、確認(rèn)下單、完成購(gòu)買(mǎi)和接收配送）和用戶(hù)感知的三個(gè)方面（行為、思考和感知），制作了體驗(yàn)地圖：

將當(dāng)中的關(guān)鍵信息挑選出來(lái)：

競(jìng)品分析

設(shè)計(jì)師找到了三家主要競(jìng)品，先大概了解他們的特色和優(yōu)勢(shì)：

然后從 Google Play 的評(píng)論中尋找競(jìng)品的問(wèn)題，這樣就可以思考如何戰(zhàn)勝他們：

III. 設(shè)計(jì)

信息導(dǎo)航

先把大致的用戶(hù)流程確定下來(lái)，這樣對(duì)整個(gè)產(chǎn)品就有了一個(gè)整體構(gòu)思：

線(xiàn)框圖

然后用手畫(huà)出線(xiàn)框圖，定下頁(yè)面的整體布局：

低保真

將線(xiàn)框圖手稿用繪圖軟件細(xì)化，制作成低保真方案，用來(lái)向客戶(hù)展示和做用戶(hù)測(cè)試：

IV. 完成

可用性測(cè)試

找用戶(hù)做測(cè)試時(shí)，用的是低保真可交互原型。

根據(jù)測(cè)試發(fā)現(xiàn)的問(wèn)題，設(shè)計(jì)師直接將優(yōu)化方案運(yùn)用到了高保真方案上，所以下面整理的問(wèn)題都用高保真方案來(lái)配圖展示：

• 1. 自動(dòng)定位：測(cè)試之前用戶(hù)必須手動(dòng)搜索位置。
• 2. 屬性選擇：由于客戶(hù)想要一鍵式購(gòu)物，所以當(dāng)用戶(hù)點(diǎn)擊熟悉（通常是重量）右側(cè)的箭頭時(shí)，可以反轉(zhuǎn)卡片進(jìn)行詳細(xì)選擇。

• 3. 促銷(xiāo)展示：原本設(shè)計(jì)了三個(gè)促銷(xiāo)區(qū)，但是測(cè)試中發(fā)現(xiàn)用戶(hù)面對(duì)大量的信息無(wú)法充分理解，所以移除了一部分，只保留了頭圖和分類(lèi)優(yōu)惠。

• 4. 商品導(dǎo)航：為了避免用戶(hù)迷路，將商品分類(lèi)導(dǎo)航放在了所有頁(yè)面頂部，并且懸停時(shí)展示子分類(lèi)和相關(guān)文章。

高保真

響應(yīng)式

這個(gè)網(wǎng)站需要具備很高的響應(yīng)式能力，不論在 PC 端還是手機(jī)端，都能輕松使用。

但由于 PC 端和手機(jī)端的尺寸相差太大了，所以不得不使用斷點(diǎn)（Breakpoint）來(lái)判斷用戶(hù)當(dāng)前處在哪個(gè)端，并展示相應(yīng)的界面。

這個(gè)斷點(diǎn)的概念在柵格系統(tǒng)很常用到，指的是當(dāng)界面尺寸縮小或增大到某個(gè)（或幾個(gè)）零界點(diǎn)時(shí)，間距大小或其它界面元素發(fā)生突變。

上圖來(lái)源：三種最主流的響應(yīng)式柵格

這個(gè)方案的對(duì)于移動(dòng)端的特殊處理包括：

• 確保商品分類(lèi)的位置，方便用戶(hù)記憶
• 使用漢堡菜單
• 提供模仿原生 APP 的吸底導(dǎo)航

Before&After

最后對(duì)比一下優(yōu)化前后的方案：

原文地址：體驗(yàn)進(jìn)階（公眾號(hào)）

作者：設(shè)計(jì)師ZoeYZ

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》重新設(shè)計(jì)東南亞頭部在線(xiàn)超市的真實(shí)案例

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.hglv.net )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)