Toast
ART DIRECTION | WEB DESIGN | UI & UX
Toast Tab, Inc. is a restaurant point-of-sale platform serving businesses ranging from local cafés and breweries to fast-service and high-end restaurants. Their ecosystem supports a wide variety of food and hospitality vendors through tailored tools, services, and digital experiences.
As a contract Senior Visual Designer at Toast, I partnered closely with the Web XD team under Kate (Director of UX) and Jay (Senior Design Manager). My role focused on aligning key marketing and membership pages to Toast’s updated design standards as part of their broader Web Refresh 2.0 initiative. This included modernizing off-brand experiences, improving visual consistency, and helping streamline the evolving design system across desktop and mobile touchpoints.
THE DESIGN PROBLEM
Although the team was widely happy with their new designs, there was room for improvement with the older page and the refinement of the existing brand standards based on industry standards
Toast Refresh:
2.0 to 2.5
The goal was to evolve Toast’s marketing experience from version 2.0 to 2.5, creating a more cohesive and scalable system without disrupting ongoing marketing efforts.
We focused on reskinning the majority of site pages into the updated visual identity, repairing brand fragmentation, and creating a best-in-class marketing experience. At the same time, we needed to enable Content Specialists to build efficiently and prepare the system for future migrations, audits, and ongoing changes.
OLD DESIGN
The existing site varied significantly depending on the page and user journey. Layouts, components, and styling were inconsistent, which made the experience feel fragmented and difficult to scale.
Some pages felt off-brand, while others lacked clear hierarchy or cohesion within the evolving system. This inconsistency also slowed down internal teams, as patterns were often rebuilt instead of reused.
*Screenshot of our old pages katemotter.com/mds-design-system
WIREFRAMES & CONTENT
Before executing design updates, the team aligned on a shared direction through workshops and competitive analysis. We explored references from competitors such as Square and Lightspeed, alongside internal design explorations, to define what a 2.5 evolution should look like.
The final direction combined system thinking with visual refinement. We introduced chunkier brand elements, rounded corner radii across components, bento-style layouts, and a wider responsive grid. We also placed a stronger emphasis on Toast’s orange, refined CTA styles with rounded pill shapes, simplified iconography, and improved accessibility through better color contrast and typography.
The goal was to create a system that felt cohesive, usable, and scalable.
COMPETITOR ANALYSIS
INITIAL WIREFRAME EXPLORATIONS
Key Constraints
We were not starting from scratch. The Marketing Design System already existed, and updates needed to be introduced carefully without disrupting live marketing efforts.
Changes had to scale across dozens of pages and function seamlessly across desktop and mobile. At the same time, design and system updates needed to happen in parallel, requiring close alignment across teams.
To move efficiently, we approached the work with an 80/20 mindset, focusing on building the majority of the site using a smaller set of reusable components.
Design Highlights
We designed and updated a large portion of Toast’s marketing experience. This included a wide range of landing pages, variations of key conversion flows, and updates to core system components.
To maintain speed and alignment, Jay and I divided responsibilities. I focused on building out landing and snowflake pages, while Jay led documentation and system structure. The design system evolved in tandem with production work so we could stay aligned while moving quickly.
MDS Elements
These updates were subtle on their own, but together they created a more cohesive and scalable system.
Sample 01
Example: A redesign of our quick link services as a parallax scroll.
Sample 02
Contact Form: Showcasing our rounded corners and blue CTA button.
Sample 03
Chunker Pattern: Our Chunker pattern is used behind photos or in color floods.
Results
In 4.5 months, we completed 22 landing page designs (desktop and mobile), 7 snowflake landing pages, 1 pricing page, and 9 variations of the Request a Demo experience.
Jay handled documentation and the design system while I focused on the remaining pages. Our collaboration on the Marketing Design System (MDS) ensured we stayed aligned. The refresh improved the consistency of Toast’s marketing experience and streamlined page creation for Content Specialists.
While the full 2.5 direction wasn’t published after my departure and Kate Gregarios’ transition to Vimeo, key elements like rounded corners and updated layouts were retained, strengthening the MDS and guiding future updates.
Homepage Design
I wanted to share a prototype example of one of our pages. Although we didn’t proceed with the designs, I’m proud of how our homepage design turned out.
Conclusion
Overall, I was proud of the amount of work I contributed and helped drive during this project. I led the execution of many of the landing and snowflake pages while working closely with Jay on the evolving design system, under Kate’s leadership.
This project reinforced a principle I carry into my work today: strong systems allow teams to scale effectively without sacrificing quality.
PROJECT CREDITS
Kate (Director of UX), Jay (Senior Design Manager), Web XD Team
On The Line: The Blog
We decided to put the “On The Line” blog idea on hold. It was designed to gather all our articles in one place for a more immersive newsroom experience. I wanted to share this because I was pleased with the design execution.
