Case Study

Zapier's Rebrand

How a small team and a design system helped to successfully launch Zapier’s first rebrand in 10 years.

The challenges of our rebrand

In 2021, a full rebrand became Zapier's top priority, and since the design system was determined to be the most efficient way to apply a rebrand across the product UI, marketing pages, and brand assets, this became the strategy for how we would approach the rebrand, via our design system, Zinnia. The team was pretty small, (just me at first) so we brought in another designer to help. We had a pretty short, 10-week timeline to redesign and update the Figma libraries.

Rebrand timeline graphic

Project timeline chart


Not long before our launch, we faced another challenge… a re-redesign of our logo.

“By late 2021, leadership had chosen a brand identity with a logo based around a Z that echoed the energy of a lightning bolt. The rebrand was scheduled for April. As we prepared for launch, we saw the Z become a symbol of Putin’s Army and the war on Ukraine. Despite being so close to launch, rolling out a new brand with a giant Z during this time was counter to our values. Zapier decided to start over, giving the team three weeks to find a new visual identity to communicate our brand.”The Zapier rebrand: How we developed a single story for infinite possibilities

Spoiler alert: We did it!

The team and my role in the rebrand

Making changes this broad required a lot of collaboration. We hired an amazing Creative Director, (Hi, Jeter!) who built our first Brand Studio team which includes Brand Design, Brand Writing, and Design Systems Design. Everyone on this new team played a massive role in the success of the rebrand.

I was also on our Design Systems team which at the time was mostly engineers. Being part of both teams was so valuable when it came to understanding the brand direction as it emerged—allowing us on Design Systems to start the process of applying new foundations and visual language early on, before a set of brand guidelines would be available. This way of working also allowed stakeholders to get a better idea of how these changes would feel inside the product before any code changes had been made.

My role in the rebrand was a bit of everything. I worked on component design, planning, coordinating, building and maintaining Figma libraries, keeping a close eye on accessibility, updating guidelines, stress-testing designs, providing feedback, gathering feedback, pairing with product designers, creating Jira tickets for engineering—you name it!

How we worked

In September, we started our collaboration on the core aspects of the rebrand with an external agency, Instrument. They helped us craft our mission, values, and some of the brand foundations like colors, the logo, and typefaces.

With a short timeline and much uncertainty around the complexities of updating the entire Figma library in time without breaking existing designs, we did a test run of a “rebrand”—borrowing Discord’s Brand Guide as a test run to see what problems we might uncover upon applying foundational changes to the system.

A sample of our rebrand experiment borrowing Discord’s brand guide

A sample of our rebrand experiment borrowing Discord’s brand guide

We documented our learnings and created a checklist for our future selves which ended up being a huge help and provided peace of mind to us and our stakeholders. Fortunately, Figma released Branching just in time and we were able to keep the existing system in place (for those still needing it in its current version) while we worked on our updates safely on a separate branch.

During the early design phases, Design Systems engineers were busy preparing the library for all the visual changes and working hard to help teams ramp up to our latest version of the system. By the launch, we had gone from only a few teams relying on the design system to over 20!

Additionally, while we continued working with Instrument, a small group of product designers and myself explored UI changes following a simple set of guiding principles. We based these changes on early design explorations around color, type, and logo variations to

This type of transparency was present throughout the entire project, and I think it is one of the major reasons we were able to deliver on time.

Four principles that helped guide us throughout the rebrand application

Four principles that helped guide us throughout the rebrand application

Transparency was especially critical when the idea of starting over and re-redesigning our logo came up. Many voices were heard and in the end, everyone was in agreement that redesigning the logo was the most logical decision. We started over, and this time, we created a new logo for Zapier in-house.

The new Zapier logo

The new Zapier logo

The result

We kept our original launch date and decided to release the new logo in a more formal “Rebrand” launch once we were happy with it. We fully launched July 6th, 2022.

Typography scale exampleColor system sample

Samples from the rebranded system

We implemented changes to type, color, and the logo for the second launch as these were revisited along with the new, new logo.

Samples from the rebranded product UI using the Design System

Samples from the rebranded product UI using the Design System

In the end, our entire product, marketing pages, and advertising assets all received updates from the Design System—applying changes from the Rebrand. Not only are things more consistent than they’ve ever been, components and patterns are also more accessible as well. We were happy with the outcome of our efforts internally, but it was the feedback and support from the Zapier community that made us feel so good, and that all the time, energy, and love that we put into this work didn’t go unnoticed by our customers.

Quote from Jeter: "Design Systems was the backbone of the rebrand, without the Systems work, we would never been able to achieve one rebrand, let alone two."

Related articles

Thanks for visiting