Case Study
How a small team and a design system helped to successfully launch Zapier’s first rebrand in 10 years.
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.
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!
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!
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
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
give consumers more insight on the changes necessary to their areas of the product,
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
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
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.
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
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.
