ActionButton Animation, 2022

Skills

Cross-functional workshop facilitation
Animation design

Tools

Miro
Figma
CSS

Artifacts

Design workshop ideation
Production code

Problem

After acquiring ActionButton, the NationBuilder team was unfamiliar with the breadth of the product, as well as the competitive landscape. We were also under pressure to immediately identify and execute on new features to retain and acquire new customers.

Solution

I facilitated a design workshop to identify and brainstorm new opportunities, with the involvement of engineers, stakeholders, and other members of the product team. To prepare, I assembled a Miro board with an audit of the existing ActionButton product as well as our competitors. We did a sketching and voting exercise to determine which ideas we should prioritize.

AB_design-workshop

Miro board from design workshop, including product and competitive audit, sketching and user story exercise as well as voting.

Based on our competitors’ functionality, customer requests, and engineering effort, the leadership team decided we should move forward with one of the ideas from our workshop, adding animation to some of our features. We needed to create elements that were complementary to existing animation, but didn’t have the AfterEffects source files. After experimenting with AfterEffects and other animation tools, I consulted with engineering management and the team and decided to use CSS animation. I handed off the CSS to a contract designer for iteration with our stakeholders, and contributed to the QA process.

Result

Existing and new customers have been excited about the enhanced animation options and usage has increased.