ZapConnect – Zapier’s annual conference

What is ZapConnect?

ZapConnect is a virtual user conference where partners, customers, potential users, experts and thought partners come together to chat about automation and how Zapier is leading them to their best possible outcomes.

The third annual ZapConnect virtual event was the second one I worked on. This year, a significant part of the conference focused on Zapier’s new AI-infused visual editor, new tools for administrators, and new workflow possibilities with Tables and Interfaces. My role was to create product animations.

Workflow

This year, like the previous year, I had the pleasure of working with Julia Jaskólska. She was the art director and asset designer for this project. Thanks to solving most of the technical problems during our first edition, we were able to start designing and animating shots right away.

Collaboration and teamwork are crucial to operating smoothly and efficiently. With Julia, we have already completed many projects together, so we know what the other person needs and how to support each other.

The storyboards for ZapConnect that I received depicted every tiny detail, so I didn’t need to watch recordings of the app’s behavior. The product flow was clear to me right from the start. Throughout the entire project, we only had one Figma audio chat.

Despite the greater number of product animations and less time to complete the project, our asynchronous work allowed us to manage and deliver all the animations on time.

“The animations are great! Folks are pumped about the product animation and now want to use them across all the materials. They both explain the product value well while being delightful and on brand. Great work!”

JULIA JASKÓLSKA LEAD BRAND DESIGNER, ZAPIER

Special Guests

During the second annual event main guest was James Clear – author of the #1 New York Times bestseller “Atomic Habits.” For me, the most important habit in the design process is to organize your files properly. The asset management system in Figma played a significant role in ensuring the timely completion of this project. Detailed storyboards, easily visible notes, and comments provided clarity in our workflow. This system was crucial to iterate quickly, staying organized, and collaborate asynchronously.

The third annual ZapConnect featured Sam Altman, CEO of OpenAI. In a conversation with Wade Foster, they explored how individuals and businesses can leverage AI and automation.

I didn’t have to generate anything for this project by AI. However, when it comes to automation, all of my work is based on it.

Variants

I used the timeremapping function in After Effects to simplify the animation of interactive components. I designed buttons with various states, as seen in the Figma project. This enabled me to seamlessly switch from the default view to the hover state when animating the cursor.

I also applied this technique to the UI design in Zap Editor. The length of Zaps depends on the current view and the opened editors or menus. Building on this concept, I added multiple states for Zaps. This allowed me to have better control over the entire animation process and quickly adjust the size of the components back and forth.

Typewriter effect

The most important element in generating results by AI is inputting the appropriate prompt. For text animation, I used my own tool, which allowed me to control the typing speed and add a text cursor in the form of a vertical bar. This element in my preset doesn’t blink during typing, which adds authenticity. Additionally, I applied posterization to the typing, causing the letters not to appear linearly. I am very pleased with the result, as I achieved a genuine feeling of typing the prompt by a human.

Database in After Effects

The most enjoyable part of the work was during the animation showcasing the Zapier Tables product. The records in the table are filtered by assigning them to specific individuals. Consequently, the rows in the table change their numbering.

I decided to build a real database with email addresses and individuals who can be assigned to them. In After Effects, I utilized Essential Properties, allowing me to create only one component. Data in instances can be easily selected through a drop-down menu. The email appearance as a hyperlink was created using a rectangular shape layer that responds to the width of the text assigned to it.

Furthermore, I animated various states of this component driven by time remapping. The length of records and types of field values depend on the UI view. The advanced mechanism driven by lines of code is user-friendly, and changes can be quickly implemented. This is the true power of automation.

CREDITS