設計起因

初次接觸這個 App,是到 Green & Safe 實體店面消費時,因為註冊會員能折抵消費所以下載的;一進到主頁的我,卻遲遲不知道優惠券應該要從哪裡找到,只好將手機遞給店員請她協助操作,有了想要研究這個 App 問題點,並試著優化使用者體驗的想法。

設計流程

研究現有 App 架構 → 釐清使用問題 → 用戶分析 → 功能定義 → UI 設計

研究分析

現有 App 的框架圖

App 的主要功能為:
  1. 活動消息:占了整頁的滑動式廣告(大概會有 20 頁左右)
  2. 會員資訊:包含會員等級、回饋的購物金;從首頁有 3 個位置可以查詢到同樣地功能
  3. 優惠票券:從首頁有 3 個位置可以查詢到同樣地功能
  4. 線上購物:會在 App 中打開官方網站,依序看到活動廣告、主題選單、銷售排行、推薦食譜、 會員優惠消息,使用者可以從主題文章或商城當中將商品加入購物車完成「網站」上的訂購。
  5. 外送自取:可以在此選擇訂購的品牌 *、取貨方式與時間後,開始訂購商品。
  6. 品牌資訊:使用者可以這裡看到所有品牌 * 的介紹與最新消息。

*永豐餘生技共有 Green & Safe 真食物專賣店與另外三個餐飲品牌。

App 的使用情境

對應上方的功能,可以了解主要的使用情境有三個:

  1. 了解當季活動
  2. 現場購買時,使用會員累積消費金額
  3. 線上預定購買

設計目標

App 品牌種類與功能服務繁多,簡化調整主頁功能版面的比重,讓畫面更容易找尋所需的服務。

Wireframe

Design Hightlight