Product Design: Monese in Motion

Our approach to animation

We’re going to share a little bit about how the Product Design team approaches motion at Monese. We’re passionate about motion since it’s an excellent way to support a concept and help a user to better understand what’s going on.

For us, motion is never an ornamental thing. Its existence should always improve a user’s understanding of what they’re seeing and what they’re doing.

The basics

We don’t include text in animation. Animations should be universal and understandable by all, despite a user’s native language. Using text might mean redoing the animation for each language, which isn’t efficient.

We also don’t animate everything. In UX, motion and animation can be helpful and communicative — if used with restraint. Animation needs to be purposeful and focused. While animation is very efficient in getting the user’s attention, the underlying meaning can get lost if too many things are moving. Then it just becomes confusing and creates cognitive overload.

Our motion principles

At Monese, we focus on three motion principles: expressive, focused and simple.

Expressive

Often, our imagination tends to exaggerate things we’re passionate about. We try to capture this idea in our animations to make them more meaningful. As a basis, we overshoot and use secondary animations to bring more life to the scene, striking an over the top side of life we all love. We use exaggeration and timing to obey the laws of physics, but also to bring an edge that makes the surreal side of reality more fun.

Focused

The big advantage of UI motion is that it attracts our attention. The drawback is this also means we’re sensitive and prone to being distracted by any type of motion, whether meaningful or not. With this in mind, we’re particularly keen on taking the motion principle appeal into account, so that the staging is clear and the lightness of the animation is appealing.

Simple

Motion can quickly become superfluous and exhausting. We want to delight the eye while removing anything that could detract from our understanding. Taking the basic motion principles into account, we like to create illustrations and animations that are clear, helpful and understandable. But it can also be a challenge to achieve a lot while keeping things simple — it’s a challenge we gladly welcome!

Before the animation

The main software we use for Product Design at Monese is Sketch. This is where an illustration is born before being animated. When it’s time to give it life, we use Adobe After Effects. It’s familiar, and it has all the range of fine-tuning that we want for our animations.

To add the illustration to Adobe After Effects, we use two approaches that differ from designer to designer.

AEUX

AEUX is a plugin that allows us to export the layers from Sketch to Adobe After Effects. It’s a painless transition where we just need to double-check if any object has been imported with Merged Paths (Merged Paths aren’t supported by the library that we use for Handoff — more on that later).

Adobe Illustrator

We also export from Sketch to Illustrator. At this step, you can ensure there are no Merged Paths. We import the *.ai file to Adobe After Effects and transform it into a shape layer.

There is no best way. Both approaches are efficient. Depending on the complexity of the illustration, one way might take a little more time than the other. Overall, it comes down to what feels best for the designer.

Motion in illustrations

The beauty of Lottie

At Monese, we use the Lottie library. Having smooth vector animations instead of GIF or MP4 files makes a huge difference, with better quality and lighter files. You can check what features are supported in the Lottie library features.

Slow in and slow out

We want objects to flow smoothly through our animations. Even with sudden stops, we use slows to ease in the motion to give a smooth feel and allow the animation to feel lighter. As in real life, objects need time to accelerate and slow down. This is something we always try to mimic to keep our animations feeling lifelike.

We don’t use opacity

When we need an object to appear or disappear, we either use scale or the canvas itself. We don’t use opacity because it removes the story about that object. Nothing tangible in real life appears out of nowhere.

The animation always loops

Animating is not a one-time thing. We make sure the animation blends well in the loop, so there are no sudden cuts or strange dynamics. This helps the animation work smoothly and continuously as part of the user experience.

Motion in UI

When animation is used in a subtly, it can help users build mental models of how the system works and how they can interact with it. Instead of using animations to provide surface-level glee, animations can be the catalyst for great usability. They can form the cornerstone of what is currently happening within the system; work as signifiers for how UI elements will behave and spatial metaphors for the user’s place in the information space.

Overdrag

We use slight animations to help a user understand what they’re doing: either to let them know when information is being loaded or when it’s already loaded. With simple scrolling (where we ease the scroll while keeping the user in the context of his account), this squash and stretch gives a sense of weight and flexibility to the main screen.

Scrolling feedback

In the default state under the contacts list, we have ‘Add new’ visible. When the user scrolls through their contacts, the button reshapes to make it easier to view the contact list. This is a very simple approach where the user already knows what the button does when it reshapes to its own shorter version. We’re very fond of adding small behaviours like this to slightly improve the user experience of everyday tasks.

Press and drag

This is a good example of when the animation on its own tells the story. There’s a feeling of progress where the user interaction, loading and confirmation check don’t require any text as it’s made clear what’s happening at a glance. This is a great example of the range of our motion principle “expressive”: It obeys the principle of inertia and overall laws of physics.

Handoff

Lottie doesn’t support expressions, but…

You can use Adobe After Effects keyframe assistant to convert expressions to keyframes. This is great if you’re more used to using expressions for your animations instead of manually setting them up. Use caution, though, as complex expressions and behaviours may lead to jittery animations when converted.

Testing

If you have an Android handy, you can use the Lottie app to see if the animation has any errors. Unfortunately, the iOS version doesn’t display animation warnings at the moment.

Exporting for developers

Since we use Lottie for animations, we need to export them in the appropriate format. For this, we use Bodymovin. It’s pretty simple: After finishing your animation, go to Window > Extensions > Bodymovin and select your composition. You shouldn’t need to select anything in Settings, but it’s worth checking if you need something extra. The .json file that comes out of it is what your developers will need. 👍

That’s it!

Shout out to Joe, Harry, Bart, and Magda for contributing with their knowledge towards this article. 🙏 Feel free to share your tips in the comments below, and I look forward to discussing them with you. 🙌

Thanks for reading, and stay in touch for more articles! 🚀