Animating is hard. There are 2 types of people who animate: motion designers and everybody else 😃 Some designers aren't familiar with After Effects but can handle simple animation apps. Regardless, graphic designers sometimes have to make animated graphics, ads or other designs.
Creatopy comes in handy in these situations: its animation timeline is very easy to use, and you can animate a design fairly easily. But this ease comes at a price: you can only do an intro, an outro and some basic “middle” animations. After a while, that leads to animations that are too simple and boring.
Since 2020 we saw a huge increase in animations on social media. This also led to more feedback from our users: they wanted more customizable animations and more flexibility.
Some of them described the current options as “something that comes out of PowerPoint” 🥶
So we started doing more research to see how we could improve our animation timeline. Here's how we did it 👇
Why do people need animations in Creatopy?
People mostly create ads in Creatopy, and 45% of all our users use animations in their designs. We did extensive research with our customers on animations and found 3 main problems:
- They want better flexibility and more advanced animation possibilities (in general)
- They sometimes need just 1 or 2 extra movements in their ads, like moving or scaling (specific)
- For advanced animations, they go to a different program, create the animation there and import it into Creatopy (specific)
You can see more feedback below:
In more detail, our users asked for:
- Animation paths
- Scale, movement and opacity options
- More keypoints, not just start and end animations
- A little more control
- More than just simple presets
With this information, we started thinking about how to improve our timeline so users could create high-impact designs.
Goals
- Improve the existing timeline
- Create advanced animation possibilities
- Reduce churn: 5 to 7% of users ended their trial because animations were too limited
- Less back and forth to other animation tools
Constraints and market validation
- Upgrade the existing timeline instead of making a totally new one
- Don't go fully keyframe; keep the simplicity of the existing solution
- Keep it as simple as possible
- Don't let development take too long. After all the UX and technical assessments, it seemed doable in 3 to 4 months.
Process, explorations and designs
What we had before: a timeline with intro presets, like the one in this screen recording on creatopy.com.
Together with the Product Manager, Andrew Florea, and a developer, we started looking at the technical possibilities. We didn't want to refactor or totally recreate the existing timeline. We tried to find a solution where we could expand the current one without it taking too long to develop.
We explored some ideas and decided it was important to keep the existing solution with Intro, Middle and Outro animations, but to add an Advanced mode as well.
Looking at multiple animation apps, we realized there are mostly 2 extremes in this field:
- On one end are the apps for professionals, like After Effects and Adobe Edge Animate, where you work with keyframes and it's really hard to animate something without experience.
- On the other end are apps where you add simple, really basic animations with 1 click, like PowerPoint or Keynote. You just add them, but you can't control anything else.
Where does Creatopy fit in?
Creatopy fits in between the two extremes. We always tried to have an easy to understand interface to make life easier for non-designers too. For animations, we were already in this “not too basic, not too complicated” state, where you can edit the length and direction of the animations.
We wanted to continue this way, which is why we decided to keep the current options in place. Users who just want simple animations can still have them, and those who want a little more customization can have that too.
70% of our existing presets are 2D animations; the rest include 3D animations as well. To simplify and validate first, we decided to add these 2D actions:
- Movement
- Scaling
- Rotation
- Opacity
- Blur
From these actions, almost any 2D animation can be built. There are even more advanced features, like anchor points for rotation and scaling, but we decided to start with the basics.
I started by prototyping where these could fit in the existing solution. My idea was a new space called “Build yours”, where users can build their own animations.
After selecting “Build yours”, users can add actions to build their animations.
Each action takes up 1 dedicated row. Multiple actions can be added per row, allowing multiple moves, rotations and so on for the same layer.
Each action can be edited separately: the “From” and “To” values, as well as the easing type.
We also added the option to “Split to actions” for every 2D preset we already had. This lets users customize the presets even further and add other actions too.
Key solutions
Multiple movements and animation paths
Until now, users could easily drag the start and end point of each animation. We made it even better: users can add multiple movements and create animation paths.
Combine existing presets with the new “Build yours”
Users can still use both. In this example, the first part is a custom animation with multiple moves, and at the end there's an outro animation from our existing presets.
Going from 0.1 to 0.01: from 1 decimal to 2
Our existing timeline supported only 1 decimal, and we quickly ran into problems. With multiple actions per animation, we couldn't divide the time evenly.
If you have 4 actions in a 1-second “Build yours”, each should get 0.25 seconds. With only 1 decimal, that causes lots of issues.
So we needed to split actions with 2 decimals. That way, any number of actions can be split evenly. The presets still use 1 decimal so existing presets don't break, but actions use 2 decimals.
The outcome
In this project I focused mostly on the outcome. Design-wise there were some updates, but not a huge overhaul: a few interface changes and new features. Most importantly, I focused on how we could enable users to create better, customizable animations.
After 4 months of research, design and development, we shipped the new Creatopy timeline.
What's next
This update marks a giant leap in what users can create in Creatopy. And it's just the beginning: we're planning to improve it further so users can customize their animations even more, with resizing shapes, color changes, anchor points and 3D animations.
We're also planning to redesign the timeline interface soon. With these new actions in place, the timeline keeps getting bigger and harder to navigate, so we're planning a redesign in this area as well.
Thank you for reading this case study! Have feedback to share? Send me an email.