top of page
此網站是使用
.com
網站幫手設計的。立即用來製作您的網站吧！立即開始
1.png

weserve 餐廳接單 App

2.png
3.png
9.png

專案簡述

提供給餐飲業的店家接受訂單、媒合外送的接單App。

針對前一版本的市場意見回饋進行調整與客製化系統需求做資訊整合。

9.png

專案架構

weserve 點餐系統協助餐廳透過優惠劵行銷、掌握自己的客群，接受店家客製化功能開發，協助小資本店家跨過高抽成平台迎來餐飲外送時代。
點餐系統共有四個的系統設計建構而成，以下要介紹的是店家負責接單的App的優化。

4.png
9.png

產品階段

weserve 店家接單App第1版經過11個月的實際上線測試，這個階段需要整合這期間店家的反饋意見、訂製的小型客製化需求和整合其他廠商的點餐系統客製化的需求。此階段需要好好地梳理客戶回饋並制定第2階段優化的方向，並且依據市場的回饋將原本主打介面為平板的設計改為主要設計給手機版使用的介面。

Group 11138.png
9.png

團隊

．UI/UX designer- 1人

．Front-end engineer-1人

．Back-end engineer-1人

9.png

負責

．規劃製作流程

．優化介面

．建立design guideline

．製作mock up測試流程

．整合使用者意見

9.png

​挑戰

．在優化專案的同時，也有其他特殊需求的系統開發案，需要同步將客製化的系統需求訂單流程規劃跟現有的架構做整合。

．主要設計裝置從平板轉為手機

9.png

使用者回饋

9.png
7.png
8.png
9.png

目標

10.png
11.png
12.png
13.png
14.png
15.png

資訊架構重整

在營運了一年的MVP後，依據客戶實際使用狀況調整資訊架構，以考量調整的重點進行說明。

16.png
9.png
17.png

01.調整使用率低之功能


『菜單管理』與『店家資訊』此兩項功能經我們實際觀察客戶使用率，在開店設定完成後變動率低，同時也有店家表示擔憂店員會擅自動到菜單的考量。並在操作上會因系統架構無法及時更動而有遲緩，造成整體體驗不佳。將該操作移至桌機版的店家管理網頁，在維運上也較好針對功能進行微調與優化。


17.png

02.用時間狀態簡化原有的預定訂單流程

1.0版本的『預定訂單』的作用是在店家接受了預定訂單後，該訂單還沒有到備餐時間前將會在該欄位中，等到備餐時間後將跑去一般的訂單流程。經過2.0版本整合所有訂單流程與介面的優化後，訂單列表將由日期呈現的方式取代『預定訂單』的欄位。

17.png

03.實際操作習慣考量

『結帳報表』主要功能為做帳用，原先的操作流程為在平板下載表單>夠過社群傳遞到電腦，將該操作直接移至桌機版的店家管理網頁，簡化操作。

9.png
17.png

04.重新劃分功能

原版本的『預約取餐』是在短時間內新增的功能，原版將『營業開關』放在『店家資訊』的資料中，『營業開關』關閉時會連同店家的『預約取餐』也一起被關閉，2.0版本的針對不同的取餐模式重新定義，將『預約取餐』與『立刻取餐』兩個功能拆分，讓使用者可以在店家非營業時段也可以預約其他時段的餐點。

15.png

簡化操作步驟

經由與客戶訪談與業務回饋的實際經驗，調整訂單接單到完成的流程。

18.png
19.png

​規劃流程搭配介面圖讓內部人員了解流程

20.png
17.png

01.排除非必要的操作

1.0版本在規劃接單與媒合司機時，原設計是要待店家確認餐點已確認可送餐的動作，但實際店家接單後便沒有時間再去按下確認送餐的按鈕，此動作被拔除後實際對於訂單的完成沒有差異，於是就將該動作排除。


17.png

02.客製化系統方案的流程考量

也同時有其他特殊需求的系統開發案，需要同步將客製化的系統需求訂單流程規劃跟現有的架構做整合。

15.png

介面優化

從平板為主的介面調整為手機版面需要更精準的選擇要呈現的資訊，
根據重整的架構進行介面優化，
讓字體與空間層級更加的明確。

17.png

01.介面轉換

23.png
21.png
22.png
17.png

02.訂單卡片

25.png
24.png
22.png
17.png

03.接單設定

9.png
27.png
26.png
22.png
28.png
15.png

主視覺定調

平板設計切換成手機設計為主時，勢必要減少介面的資訊量，根據重整的架構進行介面優化，
讓字體與空間層級更加地明確。

29.png
30.png
17.png

01.文字與配色

此APP主要提供員工使用，降低不同元素，盡量以單純的用色為主。整體風格以功能為導向，並使用條列的方式讓功能清楚呈現。

31.png
32.png
17.png

02.設計吉祥物與圖示設計

加入了吉祥物『小胖子』讓使用者對於整個系統形象更友善，增進使用者在操作時的樂趣與增添品牌形象親切感。

Group 11132.png
33.png

登入畫面

在隱藏與非隱藏密碼之間讓上方吉祥物做睜眼與不睜眼的模樣，讓使用者在登入時體驗互動趣味。

34.png

顯示營運狀態

在無訂單列表的背景中加上目前店家的營運狀態，
讓店家工作人員了解目前的營運狀態。

35.png
17.png

03.元件

在原有的架構下，調整不同的取餐模式，並且需要考量到日後客製化專案的需求，在每個元件與流程上做出彈性化的流程。

36.png

專案回顧

在營運MVP的期間，有不少店家願意提供需求反饋，協助我們更了解台灣多元的餐飲市場的運作。但同時也是由這些反饋與功能的新增造成1.0版本在資訊架構上有許多臨時插件的架構，在這次的優化中調整了整體的框架，修正跟新增了不少功能需求，讓系統的運作更符合店家的使用預期。很感謝店家與作為中間的業務團隊對於收集意見跟想法時的協助，也很感謝工程師團隊對於我想要嘗試用吉祥物對一些動畫上的協助跟意見發想，對於團隊來說這是首次的嘗試，得到了一些良好的反饋。

新訂單通知

新訂單使用iOS與Android原生通知經常會有接不到通知的裝置問題，此次設計了一個訂單通知將會覆蓋正個版面。

37.png
bottom of page