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