Launching Zeplin for Mac 4.0 with UI Animation
Global SAAS company Zeplin created an entirely new category of design software when it first hit the scene in 2015. By 2017, it was helping over one million customers “deliver on the promise of design.”
Fast forward to late 2021 and the company was putting the finishing touches on the fourth version of its award winning design software. This new version would change the way teams collaborate, document how designs should behave, clarify user journeys, and more.
New features included “Flows,” which is a fast, effortless way to create user flows in Zeplin. Unlike design layers, Flows in Zeplin use dynamic connectors and labels that snap into place and move as screens are added or removed.
But features alone do not make an enticing video. Zeplin needed a compelling and strategic way to announce the new version.
After speaking with Optic Sky, Zeplin decided that a series of UI animation videos would be the ideal format.
Our task was to create a series of animated videos that would:
- Explain new product features in an visually-appealing, relatable way
- Realign perceptions of the Zeplin brand with these new features and benefits
- Differentiate Zeplin from competitors
- Inject some fun into the mix (Ok, we asked for this part)
Oh, and one more thing: The videos would need to be created while the product was still under development.
What is UI animation?
UI animation is the process of adding animation (think: motion) to a user interface (UI) in order to enhance the interactivity or overall presentation of a product. For example, UI animation is used to guide users within an interface, to show relationships between various product elements, and/or to notify users of a change.
It can also be used to add context and meaning to a UI–and in this way, to tell a story about the product. It is this latter function that we will focus on here.
Why Use UI Animation?
UI Animation reduces friction by helping users better understand how to operate within a digital interface. It provides real-time feedback and conveys information, all while making the act of using the product more pleasurable.
In the case of a brand campaign, advertisement, or product launch, UI animation is an extremely impactful (and cost effective) way to tell a story around a product, show its benefits, and provide context in an engaging way.
Our Approach
Although we knew it was important to convey facts about new features, we needed to sound authentic to the way a designer—not a marketer—would speak and work. We asked ourselves things like, “Would a designer really say that?” and “Would they really set up their files in this way?”
Thankfully, we are designers ourselves, so that part came pretty naturally. Ultimately, we found the proper balance of authenticity and information by focusing the voice on the characters’ “inner voices.”
We also made it a point to inject some of our signature humor into the video as we knew from experience that humor can make a world of difference in terms of viewer engagement.
Reacting on the Fly
Making the product launch video before the product was fully developed proved to be a unique challenge. Above all, it meant that communication was key.
We stayed in constant contact with the Zeplin CMO, the design team, and the development team. Along the way, we were able to react quickly to product changes as they happened, recalibrate team schedules and priorities, and adjust our output accordingly so that all deadlines were met as originally planned.
The two-minute version (which you can watch here) was used by Zeplin co-founders Pelin Kenez and Berk Çebi to introduce the new app at Harmony, the first ever Zeplin user summit.
The event featured innovative designers and developers from companies including Disney, Washington Post, and Microsoft, along with a special appearance from Deutsche Bahn.
Attendee Responses Were Overwhelmingly Positive:
