把數字做成答案。

Overview

700+ 家活躍門店營運者每天打開的經營窗口。

數據儀表板(Report Center)是給餐廳老闆的經營數據中心 —— 把散落各處的經營數據,匯成一個老闆真正讀得懂的地方。

限制條件:功能規格與資訊口徑由產品經理定義、對標行業標準,不可偏離;同一個 Web App 需同時服務桌面與手機兩種閱讀姿態。

關鍵取捨:在 UI 可讀性上投入高於常規報表的工程資源與打磨時間 —— 用更高的開發成本,換老闆「看得更簡單、更清楚」的閱讀體驗。

Company
Peblla
Platform
響應式 Web App
Year
2024
Team
產品經理
工程團隊
數據團隊
Role
UI 設計
設計系統
響應式設計

問題

「今天生意怎麼樣」的答案散落四處 —— POS、外送平台、銀行對帳單各管一塊,而老闆看數據的時間,只有開店前的五分鐘。

方法

讓數字自帶答案 —— 對比錨點預設開啟、對不上的地方主動攤開解釋、桌面與手機各配一種閱讀姿態。

成果

700+ 家活躍門店經營者每天打開的經營窗口 —— 2026 年 4 月週活躍 724 家。

Process

散落的答案

一個問題,四個地方找答案

餐廳老闆每天都在回答同一個問題:我的生意到底做得怎麼樣?但答案散落各處 —— 銷售數據在 POS 裡、外送數據在第三方平台、到帳金額在銀行對帳單、小費與退款又在另外的報表裡。沒有人有時間把這些碎片拼成能直接行動的結論。

核心問題:如何讓一個沒有數據背景的餐廳老闆,幾秒內看懂今天的生意、需要時查到每一筆錢的去向,並且敢於相信螢幕上的每一個數字?

為誰而做

他們要的不是數據,是答案

主要用戶是餐廳老闆與加盟商 —— 不是數據分析師,沒受過報表培訓;看數據的時間可能是開店前的五分鐘、或高峰過後的間隙。他們要的不是數據,而是答案:今天比昨天好嗎?錢都收齊了嗎?哪個渠道在成長?

規格

成熟品類裡,呈現決定成敗

報表在餐飲 SaaS 是成熟品類,規格來自兩條線:行業的既定規則 —— 專職產品經理定義報表邏輯,對標 Toast 的 Settlement Time 營業日定義、3rd Party Excl./Incl. 口徑切換、逐筆費用拆解粒度;加上老闆實際要回答的經營問題。規格保證每一頁內容正確;我的工作,是讓老闆「幾秒看懂」而不是「一頭霧水」

Solution

跟著老闆提問節奏的四個模組

01 銷售總覽 — 今天生意怎麼樣

淨銷售、收款、退款三張核心卡片置頂,預設開啟與昨日的對比 —— 綠漲紅跌的百分比壓在大數字旁,不用心算、不用記昨天。拆解(支付方式/渠道/用餐類型)收進卡片內的分頁:視覺權重跟著「老闆提問的頻率」走,而不是數據本身的複雜度 —— 沒有參照,數字只是數字。

Sales vs Payment 對帳區與未結訂單把「應收」與「實收」的差異直接攤在檯面上;第三方手續費與退款可能對不上,介面直說並提供 Excl./Incl. 切換,而不是假裝數據完美。Miscellaneous 與 Performance 補齊稅費、小費、自動服務費、作廢金額等餐飲特有條目。

三張核心卡片與同比漲跌 —— 今天的基調,一眼看完

02 銷售摘要 — 生意的節奏

Sales by Day、Day of Week、Time of Day 三組分布圖表讓老闆看出節奏;圖表之下的匯總卡片管總帳 —— 一頁之內,圖表回答節奏,卡片回答總帳。日期預設配雙月曆自定義區間;這裡的「一天」是營業日而非日曆日 —— 凌晨打烊的門店清晨 5 點才結算,Settlement Time 可配置,讓按日統計對得上門店真實的營業節奏。

預設覆蓋高頻提問,雙月曆留給深度對帳

03 逐筆交易明細 — 每一筆錢的去向

每筆訂單的費用全鏈路透明列出 —— 金額、小費、自動服務費、外送費、Dasher 小費、手續費、附加費,直到最終的淨到帳,預付與退款一併在列,支援分類與下載匯出 —— 對帳不必翻銀行流水。每筆交易同時掛載用餐類型、渠道、拆分支付、促銷等業務維度;非即時同步時,頁面明確標注數據截至時間點,不讓老闆自己發現「不對」。

每一筆錢從收到到帳,一行讀完

04 Weekly Report — 一週的經營回顧

十個模組回顧經營全貌:淨銷售、加購、第三方、直連外送、暢銷商品榜、渠道分布、銷售與加購趨勢、會員分析、Google / Yelp 評價情感分析、外送地理分布。整份報告為手機閱讀而設計的縱向卡片流 —— Toast 用 email 摘要推送,Peblla 選擇做成手機上一次滾動讀完的完整報告。

你口袋裡的一週,一次滑完 —— 左為業績、右為顧客

Design System

讓整個報表家族說同一種語言

Report Center 不是一個頁面,而是同時活在桌面與手機兩種斷點上的一整族報表;我最重要的產出,是支撐它的設計系統:指標卡片組件(大數值+漲跌標識,語義色全局統一,新指標接入即用)、圖表與明細表格規範提示條體系(誠實性資訊組件化)、響應式重排規則(組件的桌面到手機重排邏輯組件化)。新增一張報表頁,是組裝組件而不是重新設計 —— 規格保證每一頁內容正確,設計系統保證每一頁說同一種語言:老闆學會讀一張報表,就學會了讀所有報表。

Impact

報表的價值,是安靜的

Report Center 是 Peblla 商家每天打開的經營窗口,服務超過 700 家活躍門店的經營者 —— 平台月 GMV 約 $27.98M、訂單 92 萬筆。

報表產品的成效體現在兩件安靜的事上:老闆是否養成每天主動查看的習慣,以及打給客戶經理問「數字對不上」的電話是否減少。讀不出判斷的報表,每次困惑都會變成一通電話;層級清晰、語義一致的報表,把這些電話消化在介面裡 —— 報表設計的品質,直接體現在公司的人工服務成本上。

724

週活躍門店

把儀表板當每日經營窗口的營運者(2026 年 4 月)

$27.98M

平台月 GMV

2026 年 2 月口徑 —— 每一塊錢都能在報表裡追溯

920K

平台月訂單筆數

2026 年 2 月 —— 每一筆都能在報表裡追溯

Reflection

在成熟品類裡,設計師的價值是呈現的分寸

報表的成功要怎麼衡量?每家店都會看報表,「被使用」是必然的,但不等於「設計得好」。

如果重來一次,我會在上線時就埋好兩個指標的追蹤 —— 客戶經理的諮詢頻率,和老闆每天主動查看的習慣。在規格早有行業共識的成熟品類裡,UI 設計師的價值不在於發明新邏輯,而在於呈現的分寸。

Next

自助點餐平板