<em id="09ttv"></em>
    <sup id="09ttv"><pre id="09ttv"></pre></sup>
    <dd id="09ttv"></dd>

        • 重新設計東南亞頭部在線超市的真實案例

          2021-9-28    lanlanwork


          I. 發現

          客戶訪談

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

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

          圖片

          主要問題:

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

          客戶需求

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

          成功指標

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

           

          目標人群

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

          圖片

           

          II. 構思

          人物角色

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

          圖片圖片

           

          故事版

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

          圖片

          目標用戶的故事版:

          圖片

           

          體驗地圖

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

          圖片

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

          圖片

           

          競品分析

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

          圖片圖片圖片

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

          圖片圖片

          P.S. 評論分析是一種簡單有效的競品分析利器(也可以用來分析自己的產品),具體方法我之前有分享過:別總想著數據分析/用戶調研,先把評論分析做了吧!

           

          III. 設計

          信息導航

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

          圖片

           

          線框圖

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

          圖片

           

          低保真

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

          圖片

          圖片

           

          IV. 完成

          可用性測試

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

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

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

          圖片

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

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

           

          高保真

          圖片

           

          響應式

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

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

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

          圖片

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

           

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

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

          圖片

           

          Before&After

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

          圖片

          圖片
          圖片
          圖片

          圖片

           

          原文地址:體驗進階(公眾號)

          作者:設計師ZoeYZ

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

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

          截屏2021-05-13 上午11.41.03.png

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

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




          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://m.sdgs6788.com

          存檔

          国产精品成人精品久久久| 国产高潮久久免费观看| 亚洲伊人久久综合影院| 亚洲AV日韩精品久久久久久| 99久久无色码中文字幕| 久久久中文字幕| 久久婷婷五月综合国产尤物app| 亚洲中文字幕无码久久2017| 成人亚洲欧美久久久久| 久久亚洲精品国产亚洲老地址| 国产精品xxxx国产喷水亚洲国产精品无码久久一区 | 久久综合色老色| 狠狠色婷婷综合天天久久丁香| 亚洲а∨天堂久久精品| 久久996热精品xxxx| 国产亚洲欧美精品久久久| 久久精品亚洲AV久久久无码| 国产福利电影一区二区三区久久久久成人精品综合 | 热久久视久久精品18| 久久国语露脸国产精品电影| 欧美激情精品久久久久| 久久精品国产2020| 一本久久精品一区二区| 亚洲综合婷婷久久| 久久人人爽人人精品视频| 久久被窝电影亚洲爽爽爽| 国产精品无码久久综合网| 99精品久久精品一区二区| 狠狠色丁香婷婷久久综合五月 | 伊人久久大香线蕉成人| 国产午夜电影久久| 久久综合亚洲欧美成人| 一本一本久久aa综合精品| 久久婷婷国产剧情内射白浆 | 丰满少妇高潮惨叫久久久| 日韩欧美亚洲综合久久影院Ds | 亚洲国产成人精品91久久久| 91麻豆精品国产91久久久久久| 久久99国产精品久久久| 久久亚洲国产欧洲精品一| 久久精品免费一区二区三区|