Toast
ART DIRECTION | WEB DESIGN | UI & UX
Toast is a point-of-sale system tailored to restaurants and the food industry, serving everyone from cafés and breweries to high-end restaurants and fast-service concepts.
I joined Toast as a contract Senior Visual Designer during their Web Refresh 2.0 initiative. The goal was to align an array of pages to updated brand standards while helping streamline their Marketing Design System (MDS).
THE PROBLEM
Although the team was widely happy with the new direction of the brand, there was clear fragmentation across the site. Older pages varied significantly in styling, layout, and user experience. Some pages felt off-brand, while others lacked cohesion within the evolving system.
This wasn’t just about refreshing visuals. It was about repairing inconsistencies and building a scalable foundation the team could actually use. At the same time, Content Specialists needed to be able to build pages within a single sprint. The system had to work operationally, not just look good in Figma.
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.
There was also an 80/20 mindset. Build 80% of the site in 20% of the time using reusable MDS components.
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.
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
Over the course of 4.5 months, 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.
Some of the key updates included redesigning quick link services into a parallax scroll experience, refining CTA styling, and applying the “Chunker” pattern behind imagery and color floods. Individually, these changes were subtle, but together they created a much more cohesive and scalable experience.
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 happy with the amount of work produced during my time on the project. It was a strong collaboration with Jay, and Kate’s leadership was instrumental in guiding the direction and execution of the work.
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.
