Web service

員工訂餐系統設計

專案背景

許多企業會提供代訂午餐的服務以節省內部同仁的中午休息時間；若靠紙本作業調查非常耗費時間，也容易遇到太多人一齊聚在櫃檯點餐導致塞車的情況，不僅不方便，長期下來也不環保。我們希望設計一套線上統計點餐服務替企業解決統計餐點、訂餐與收款的需求。
我的角色 | UIUX designer
執行使用者訪談規劃網站架構、使用流程Figma 製作prototype雛型
Project duration | 2022.03.11 - 2022.05.30

執行內容

透過訪談與User journey map了解使用者在訂餐、發起訂單的使用流程與情境。規劃員工訂餐系統 HAMA DIN的功能、架構，製作prototype雛型交付工程師。
產品Logo概念發想與設計。

專案目標

1. 規劃具商業價值的服務模式
2. 提升HAMA DIN 使用者體驗
3. 上架Teams App，獲得補助金

需求定義

商業模式

產品預計為B2B的訂閱制服務，並上架Teams APP。初期提供點餐統計功能，未來規劃整合餐點供、需端的資訊與合作模式。

使用者旅程

先從公司內部的訂餐流程著手，觀察公司內部訂餐負責人與點餐者的使用流程，記錄使用者旅程地圖，了解使用者的操作流程以及在各個流程的感受，藉以聚焦優化的關鍵點。

使用痛點＆優化項目

從1位訂餐負責人及3位使用HAMA DIN的公司員工的訪談中，記錄他們在使用產品時遇到的痛點，透過親合圖的方式歸納，HAMA DIN 2.0將在4個流程上優化這些項目。

設計規劃

網站架構

一般使用者登入HAMA DIN之後會有四大區塊功能：點餐、菜單、訂單記錄、會員中心；若使用管理者帳號登入則會多一項”群組管理“，用以管理憑證及憑證內的成員。

登入註冊：由於是以公司企業為銷售對象，會提供AD帳號登入
主頁：登入後進入主頁”點餐“，包含使用者最常使用的功能為“點餐”和“發起訂單”。從“正在進行中的訂單”可以加入別人的訂單開始點餐；也可以在此頁面中發起訂單，並在“我發起的訂單”中進行管理。
菜單：群組內建立的菜單都會在“菜單”中管理或新增。
‍紀錄：查看訂餐紀錄及訂餐狀態通知。
‍會員中心：管理帳號、個人資訊、付款資訊(向訂餐負責人付款or向訂餐者收款的管道)及系統設定

Wireframe

決定好網站架構後，先以展品的主要目的“點餐”流程開始設計，次之是與點餐功能最相關的“菜單建立”，因為菜單建立也會影響點餐時的選項呈現，再規劃這兩個流程時先用手繪草圖的方式快速溝通與修改，與PM、RD取得共識。

Prototype

確定架構及主要流程後開始用figma繪製框線稿，製作成可以展示功能的prototype。經過與PM、RD討論修改，最終以v3.2版開始進行開發。
‍
Figma prototype (web)
Figma prototype (mobile)

視覺設計

訂餐，就找HAMA DIN !

以“HAMA”發音的嘴形，與滿意笑容的意象連結，把服務鈴與Din的概念結合表達，變成服務小精靈HAMA DIN。訂餐，就找HAMA DIN!

專案小結

Takeaways

從零開始規劃網頁架構
‍這次規劃訂餐網頁服務的經驗，我學到針對兩個不同身份使用者，資料設定與資料發佈之間的關聯應注意是否具有一致性，在規劃功能的時候也要考量到是否有相應可以用來判斷的資料。例如，如果希望資料以月表的方式呈現，在建立訂單時就要設定好該筆訂單所屬的日期。

‍使用情境的多樣化
‍這次在進行使用者測試時，主要訪談對象為本公司內部員工，使用的軟體都是HAMA DIN，造成本次在使用者訪談的結果過於侷限，在設計規劃操作流程時也拘泥於HAMA DIN的使用回饋。例如，公司目前的訂餐作業習慣是在當天或前一天開放訂單，因此一開始並沒有想到用月表的方式呈現訂單的做法，因為這個案例也讓我了解到受訪者多樣化的重要性。