Motion As A Skill To Leverage Product Design

‍This is a talk from Gabriela Schmitz from LottieFiles on UXVN 2020, written by David from Zensite.

In today’s world of design, an interactive experience speaks volumes. Within this, the relationship between motion design and the UX of digital products is rapidly becoming important to capture the attention of users, even in its most subtle form.

In the past, product designers generally did not integrate motion into their portfolios, mostly because of the overwhelming and difficult process involved in integrating motion into a digital product. However, by failing to do so, designers stand to miss out on a huge advantage in distinguishing their work.

Gabriela Schmitz, a former animator and motion designer and current Product and Lead Designer for LottieFiles shares some of her tips in utilizing motion as a skill to leverage in a product designer career.

From her days as a motion designer, Gabriela’s interest in product design peaked when she joined Lottie. With her motion design background, she was interested in exploring more on how motion design can work hand in hand with product design to create a completely unique experience for users.

Watch the another session with Friends of Figma.

One tip that she encourages those who are interested in the leap is to share your work out to the world. Gabriela’s own experience in being noticed and subsequently hired by Lottie is due to the fact that she widely shared her motion experiences and work with them.

In Gabriela’s experience during the transition between motion designer to product designer, she noticed a few key differences in the processes for each of these fields.

Process

The motion process is generally a chaotic one because the end product is what everyone wants to see. As long as you deliver a good quality product at the end of the day, nobody really minds the exact process taken.

For the UX process, while you can be chaotic (at times), it’s better to take a step back to organize your thought process and have thorough documentation of everything. This means that the “how” remains an important facet of the whole UX process.

Originality

In terms of originality, motion designers tend to overthink the whole process. Gabriela affirms that as a motion designer, she wants to always leave an original part of herself; whether it’s the style, design, flow or overall journey, to make sure that the user gets to see a product design that is uniquely hers.

But in terms of the UX design, being too original may not work as users tend to gyrate towards a product design that they are more familiar interacting with. For example, if a product or design is too different from what users are expecting, it could ruin the entire UX experience and usability.

Remember, it’s less about over the top transitions than it is about how it will work and behave, and whether it’s intuitive to a user.

So, how does motion design figure into a product? Gabriela shares two main points which complement the two branches.

1. Helps to be a better motion designer Product designers have a better grasp of the overall requirements of what makes a product great for users, and this will help you be a better motion designer. You’ll know exactly the right kind of questions to ask as you design a product because you understand the entire purpose and process of what you’re designing. Plus, it also helps you out creatively as you’ll get to think out of the box.

2. Get a better advantage with an additional skill For Gabriela, being a motion designer coming into a product design helped her immensely as she had an additional skill set in which she could use. Companies are looking to add motion into their designs, and having that in your repertoire of skills will definitely be an added advantage.

Despite that, she also shared about the difficulty of starting on a new branch of design, and how overwhelming it can get. An example given was how difficult Adobe’s After Effects is to use in general, even for seasoned pros. Being a newbie trying to learn all about using After Effects for motion design can be an overwhelmingly difficult task.

An advice that Gabriela shared is to start with a foundation. She believes that with motion design rising in popularity, the coming years will see an influx of design tools that will be easier to use and master. Her tip is to have the foundation and basics of motion design in place, so that when these tools pop up in the near future, you will be ready to dive right in.

Learning the Basics of Motion

According to Gabriela, there are 5 basics of motion that you have to understand in order to perfectly encapsulate it into your design.

1. Purpose A few questions to ask before you begin your design process:

“Why animate?” “What are you trying to achieve?” “Will this improve usability or accessibility?”

Using the example of Duolingo, which uses plenty of animation in the design of their digital collaterals, Gabriela points out that they use a bubbly and fun design to capture the attention of their users and to highlight on their gamification process. The main purpose is to make learning as fun as possible for their users through the use of games, and animated characters and transitions help to make it work.

Another example is Dropbox, which uses fun animations to negate the effects of their error page. This removes the negative impact on your users and leaves them not feeling frustrated despite not being able to continue with their user journey. It also gives users the thrill of discovering an “Easter egg”.

Narrative

Gabriela’s suggestion is to tell a story and create a narrative around your design. While this doesn’t necessarily have to involve any characters (though that would be an added plus point), the point of the narrative is to bring your users on a journey. Good use of animations are supposed to help your users easily go through the flow, rather than confusing them further.

Timing

Knowing the speed of your animations is important as you don’t want it to be too slow and lose your user’s attention, but you wouldn't want it to be a blink-and-you-miss-it moment either.

A good tip, according to Gabriela, is to remember that you’re not watching a movie, rather, to treat your animation like something you should interact with. A general rule of thumb is to remember the timing of your animation; 200ms is good for hover, fading or scaling effects, while 500ms is more suited for large and more complex animations.

Ease

Gabriela recommends applying ease to make your design have smoother movements which make your animations feel more natural overall. Ease also helps to prevent your motions from being too mechanical, which can be jarring to users.

Refinement

If you think that your motion design has too much going on, it probably has too much going on. Gabriela recommends keeping it as simple as possible. Declutter your design as much as you can to maintain a refined design. Overusing complex motions in your design can spell disaster, so the best way is to just keep it simple.

Conclusion

To sum it up, motion plays a huge role in the user experience of products, especially in our digital-centric world today. But it has to be said that if the elements don’t exhibit or even follow the basic motion design principles, usability will be undermined.

For users, motion isn’t just the topping on your cake; it plays a more prominent role in creating better engagement that goes beyond traditional design communications.

For motion designers who are looking to switch it up and move into product design, Gabriela recommends that you embrace all aspects of product design and consistently share your work out to let people know your abilities and skills.

On the other hand, product designers who are looking to move into motion design should start with the basics of motion design and slowly get their bearings first. Getting the basics down should be pivotal to excel as a motion designer.

Finally, as a general tip for anyone who is looking into motion and product UX design, Gabriela’s final thoughts are to embrace what makes you stand out in the market and go all out to achieve your goals. Depending on your skillset, you should be aiming for a mix that works best for your skills and goals.

This blog is a report from LottieFiles from the Zensite Archive.