餐廳桌位管理小工具
訂位、候位、帶位，讓翻桌率翻倍!
訂位、候位、帶位，讓翻桌率翻倍!
———前情提要———
“升大學前打工過的韓式餐廳，現在偶爾假日缺人還是會去幫忙💪”
外場工作遇到的痛點
只有8張桌子但客人好多
只有8張桌子
但客人好多
客人多數臨時訂位或候位
需要反覆計算可接客時間
客人多數臨時訂位或候位
需要反覆計算可接客時間
客人多數臨時訂位或候位
需要反覆計算可接客時間
外場人員訂位候位資訊不同步
經常需要彼此反覆詢問或查看
外場人員訂位候位資訊不同步
經常需要彼此反覆詢問或查看
外場人員訂位候位資訊不同步
經常需要彼此反覆詢問或查看
訂位資訊都寫在紙上
客人總是問要等多久…
沒位置時總是會湧入一堆客人…
沒聽到確切時間都不甘心…
.
.
.
.
.
.
.
.
.
所以我就想😶🌫️…
如果我能用網頁快速開發一個簡單的小工具
或許能讓我更高效的工作，同時也提高翻桌率💰
但為什麼不考慮用現成的第三方軟件，例如Inline?
為什麼不考慮用現成的第三方軟件
例如Inline?
💸
💸
💸
對小餐廳來說太貴
沒必要花這筆錢
對小餐廳來說太貴
沒必要花這筆錢
對小餐廳來說太貴
沒必要花這筆錢
❌
❌
❌
老闆關注當天入帳金額
而不是過多的數據分析
老闆關注當天入帳金額
而不是過多的數據分析
老闆關注當天入帳金額
而不是過多的數據分析
🫂
🫂
如果都用線上訂位或點餐
會讓小餐廳失去人情味
確認我想達到的目標
1️⃣ 優化管理流程，提高翻桌率
2️⃣ 提高工作效率，減少人為錯誤跟忙碌時的思考時間
1️⃣ 優化管理流程，提高翻桌率
2️⃣ 提高工作效率，減少人為錯誤跟忙碌時的思考時間
STEP1
整理痛點與需求，規劃用戶流程
STEP2
用Figma繪製大概繪製wireframe
先不求畫面精細，先讓AI幫忙建立框架跟結合初步邏輯
STEP3🖱️嘗試看看！
STEP3
🖱️嘗試看看！
AI工具生成網站-版本V1 基礎功能實現
採用傳統 HTML + CSS + JavaScript
基本功能包含：
1.可以接換桌位狀態 empty➡︎occupied➡︎finished➡︎empty
2.可以成功輸入預定及候位客人的資料
STEP4
基本邏輯調整：測試後發現應該要讓訂位者預先安排桌位，讓資料顯示在桌位區，而非立即入座，並且要計算訂位前後加減90分鐘，來快速預覽是否能更好的安排其他時間的客人，不是只讓訂位資料顯示在下方
STEP5
框架確定後逐步優化設計界面，確保各種狀態在視覺第一眼就清晰可見，接著開始不斷測試、優化、修復bug及增加功能細節(例如:occupied狀態長按可以更改入座時間、一個桌子可以新增兩個訂位並click/touch切換查看…)
STEP6
為了實現同步功能，將網站部屬在個人Github裡，再將數據連接到firebase實現不同裝置資料同步功能
STEP1
整理痛點與需求，規劃用戶流程
STEP2
用Figma繪製大概繪製wireframe
先不求畫面精細，先讓AI幫忙建立框架跟結合初步邏輯
STEP3
AI工具生成網站-版本V1 基礎功能實現
採用傳統 HTML + CSS + JavaScript
基本功能包含：
1.可以接換桌位狀態 empty➡︎occupied➡︎finished➡︎empty
2.可以成功輸入預定及候位客人的資料
STEP4
基本邏輯調整：測試後發現應該要讓訂位者預先安排桌位，讓資料顯示在桌位區，而非立即入座，並且要計算訂位前後加減90分鐘，來快速預覽是否能更好的安排其他時間的客人，不是只讓訂位資料顯示在下方
STEP5
框架確定後逐步優化設計界面，確保各種狀態在視覺第一眼就清晰可見，接著開始不斷測試、優化、修復bug及增加功能細節(例如:occupied狀態長按可以更改入座時間、一個桌子可以新增兩個訂位並click/touch切換查看…)
STEP6
為了實現同步功能，將網站部屬在個人Github裡，再將數據連接到firebase實現不同裝置資料同步功能
