Designing Data Insights For Restaurant Owners @Toast

OVERVIEW

I led the design for Toast XtraChef's data insights experience. XtraChef is an add-on service for existing toast customers, its mission is to help restaurants become more profitable using insights generated from their invoices.

Customers pay for XtraChef to make smarter financial decisions, cut costs, and improve efficiency, eventually boosting profit margins. But, till Nov 2023, the user experience was not delivering the promised mission.

What problem were we solving?

Answering the question “How is my business doing?” for restaurant owners with data insight so that they can make better financial decisions.

Role: Lead product designer

Status: GA in Nov 2024 (Ongoing iterative development)

🔗 See product demo

Engagement rate

+18%

Customer approval

NPS

4.4/5

+4

Xtrachef dashboard

Xtrachef dashboard > COGS Report

Tables: COGS breakdowns

Before

Plain data without any explanation, when users come here they see nothing than a Excel sheet.

Convoluted reporting pages including COGS, Reporting, Analytics. Resulting in increasing detach rate of xtraCHEF and falling GMV.

Prioritizing the summary widget on the Dashboard for users to see the breakdown and overview of their Net Profit.

Up and front key metrics and comparison for health check, followed by breakdown of the metrics and which categories are influencing the metrics, for more detailed investigation.

After

Why the old designs didn't work?

I looked into the traffic and conducted a audit of the existing insights/reporting experience:

Data points were named differently and calculated differently on each data related pages, making it very difficult for restaurant owners to understand.
Graphs lacked numerical context, were hard to decipher.
COGS was presented in isolation, without sales or labor cost comparisons.

Leading to low engagement, reduced perceived value, and limited business impact.

There were three pages showing data in different context: the same data has different names and calculations.

Solution: COGS Reports

HMW make data more accessible, easy for customers to discover, navigate, and use?

The solution PM and I discussed and landed on the is to focus on the COGS (Cost of Goods Sold) insights experience for restaurant owners to see exact food costs, comparisons, and percentage changes in the big picture financial data.

COGS was the main reason customers signed up for xtraChef, this was confirmed by my discussion with sales and marketing team
Tracking COGS helps restaurant owners control costs, set prices, and maintain profits.

COGS: Cost of goods sold. It is the cost of all the ingredients used to make the food and drinks a restaurant sells

Invoice data: ingredients cost, inventory, menu price, margin.

Research Insights from interviews

I tested on how they interpret cost data, react to comparison patterns, and make decisions when metrics fluctuate.

Users didn’t just want to see COGS numbers. They needed comparative context and holistic financial health insights.

10 SMB restaurant owners & managers.
Graphs alone lacked value: users needed precise data.
Comparing costs seasonally over time was essential (e.g., month-over-month, year-over-year).
Customer don’t change menu price or switch vendors often.
COGS alone were not enough—users evaluated costs alongside sales and labor.

“I want to see how this compares to last month and how it perform in seasonal without digging through multiple reports.”

— Seven testers

Holistic profits breakdown

Connecting with designers of different pods on the north star of reporting

Customers don't just read single data and make decisions. They look at datas all together to see how they are affecting the profits.

How do we tell the story of COGs data and its connection with profits?

Toast Sales Summary

Only on xtraCHEF

Labor, Payroll, Employee

Before

After

Seasonal cost comparison

Prioritizing clarity, comparison.

We assumed graphs were essential for financial insights. Testing proved us wrong.

Instead of designing around trendy data visualizations, for the MVP we focused on presenting accurate data with consistent names, with clear numbers and comparisons.

Numbers First, Graphs Later Key metrics are now front and center.
Comparative Trends Data range comparison to help users track fluctuations and monitor seasonal change.

"Testing proved us wrong about relying on graphs. We prioritized clear accurate metrics, comparisons, and options to drill-down."

— I shared research findings in a stakeholder meeting

Date range selector allowing custom comparison

Metrics summary fluctuations showcasing the core value prop

Metrics drill down to itemized number

Move from descriptive data to Diagnostic investigation

The main metrics fluctuations come from itemized data fluctuation. I designed the storytelling method for customers to investigate what item/food ingredients are contributing to the COGS fluctuation.

MVP: COGS number breakdown

GA: Drilldown function allowing customers to investigate on itemized data

Future steps

How far do we want to go when presenting metrics and insights?