Toast 2022-2023

Buffet data visualization

Toast customers rely on data visualization to make informed decisions about their business. Whether they’re comparing today’s sales to last year's or checking how menu items are performing, data visualization is necessary to make complex data accessible and digestible.

As the need for more data-rich products grew, so did the need to standardize the visual language used for data across Toast experiences. This work established the foundational look and feel for data visualization, solving the end-user need for understandable data and the business need for a suite of aligned data visualization styles.

My role and duration

I led this design work between Q3 of 2022 and Q1 of 2023, which involved auditing use cases, iterating on designs, regularly reviewing with stakeholders, and delivering foundational styles, components, templates, and guidelines. I partnered closely with product designers and engineers from the Reporting team along the way.

The problem

In Q3 2022, the reporting team kicked off an initiative to re-design older legacy reports. The legacy reports used a set of styles that hadn’t been updated in years and didn’t align with our evolved brand identity. Toast also didn’t have established guidelines around data visualization, so the team needed help standardizing a new look and feel along with up-to-date guidance for data-rich experiences.

We also wanted to get ahead of a growing number of needs for data visualization from other teams. By establishing these styles, we could ensure proper accessibility, usability, and scalability for customers and internal teams moving forward.

Data visualization explorations by various designers

Goals

Restaurant owners and managers rely on our data to run their operations smoothly and efficiently. We want to empower Toast customers to make informed decisions about their business in a way that is usable, consistent, and fosters trust in the Toast brand.
We want designers and engineers to use a single aligned suite of data visualization patterns from Buffet. These patterns are simple yet robust, flexible, and accessible. By using Buffet, teams will increase productivity and ensure consistent quality so they can have more time to create innovative data experiences.

Design principles

Hospitable

We prepare delightful experiences that are accessible and localized to meet our customers' unique needs and leave them with happy guests.

Adoptable

We make it easy for teams to roll out consistent, high-quality products fast by providing them with modular building blocks and clear guidance.

Design process

Starting out

After reviewing use cases, I defined the problems, goals, and requirements. I did research into industry best practices and competitor solutions, especially around accessible data visualization color palettes. The Reporting team and I prioritized the most needed styles, patterns, and chart types, which informed where I began the design work.

Design stage

I started by defining the foundational color palette with accessibility at the core of my design explorations. Concurrently, I explored typography and other styles such as spacing, line styles, and tooltips. Bar charts were the highest priority, so I pressure-tested foundational styles within that context, keeping in mind that styles must work for other chart types. As I shifted from global styles to bar chart-specific styles, I worked closely with engineering as the technical limitations of the underlying VISX component library heavily informed designs. I wrapped up this work with additional details, such as loading and empty states, internationalization guidelines, and edge case guidelines.

Finalization

As this work came to an end, I finalized component details, created specs and templates, and published the library to the broader team. Since then, I’ve kept the library up-to-date through ongoing collaboration with the Reporting team as questions and new use cases arise.

Updated library

Results

The data visualization library has been used by 13 teams so far in Figma, allowing teams to stay consistent with our defined styles
The data visualization system has been implemented on both responsive web and iOS, bridging consistency between the two platforms

With the addition of this library, teams were able to align on a single solution from Buffet, preventing duplicative efforts. Other teams have since needed data visualization patterns, saving time and effort for both design and engineering.

Ultimately, Toast users can expect an accessible and consistent experience as they navigate between Toast products, building trust in our brand and tools.