How Mazda Accelerated Web Development with Figma and Payload

In an era where vehicles can be explored virtually, shoppers expect the digital experience to be as fast and smooth as the one behind the wheel.

This is especially true when your brand philosophy is “Zoom-Zoom.”

For Mazda’s New Zealand operation, the lack of a design system alongside a modern CMS bogged down the creativity and productivity of marketing teams—and ultimately created a disjointed experience for end users.

After teaming up with New Zealand-based agency Goose to find a solution, all roads led to Figma and Payload.

The Challenge

Mazda’s ability to create a compelling experience for users was hampered by two foundational issues: the lack of a design system and an outdated CMS.

The latter could not keep pace with internal teams or end users. Content workflows were cumbersome, and any imaginative efforts by Mazda’s marketing team required significant developer effort—limiting campaign efficiency and effectiveness.

Meanwhile, the lack of integration with existing Mazda backend systems was another obstacle, oftentimes forcing manual or duplicative data input.

Compounding matters was that without a design system to guide efforts, the CMS lacked the necessary guardrails—leading to a choppy user experience.

The Solution

In the not-so-distant past, teams facing these challenges would encounter the following:

• A clunky and painfully slow hand-off between design and development—including high-fidelity mock-ups that may or may not abide by a design system.
• Developers would transpose the static, “desired” state into a living, breathing website or application—navigating numerous last minute changes and requests, often ending in an “MVP” (minimum viable product).
• Marketing teams hope for a flexible, headless CMS that empowers them to create—but often end up with hard-coded content and systems that limit creativity.

Thankfully, a new dawn of web development is underway—and Mazda’s project was an embodiment of it.

Under Goose’s guidance, a collaborative design process began in Figma and ended in Payload, providing a modern digital experience with a powerful content management system—and flexibility that didn't shortchange developers or editors.

Upon prototyping Mazda’s many components in Figma, the Goose team could easily scaffold out the corresponding blocks in Payload, giving editors complete control of the content. Figma’s Dev Mode then provided clean specs and measurements that made building the frontend components more efficient.

This design-to-development symmetry made quick work of the typically laborious concept-to-code process.

Meanwhile, Payload’s flexible APIs and webhooks meant that data from Mazda’s systems could sync straight to the site—eliminating duplicate work and copy-paste errors.

A New Standard

Uniquely, Figma served as the shared, single source of truth between agency, creative, and development teams. Instead of being left out of the loop, collaboration was key throughout, from design all the way to code as in-file comments kept communication between design and development both fluid and contextual.

This solution did more than bridge the divide between marketing and development teams—it eliminated the friction that notoriously wreaks havoc on projects, resulting in less design drift, more effective teams, and happier users.

The combination of Figma’s design system and Payload’s developer experience created a design to code solution that exemplifies how to build a modern digital product, giving Mazda's marketing team the speed and flexibility to manage their entire vehicle fleet—while letting developers and marketers focus on what they do best.