Motion Design Thinking

What is Motion Design like in Firefly?

The Design Team at Firefly developed our motion design guidelines with a few aims:

• To define our view of how we think about motion design at Firefly Learning.
• Communicate this vision to the wider team (Front-End Developers in particular).
• Encourage greater reliance on meaningful motion design as part of the creative problem-solving process.

After exploring why we use motion design, when we use it and what qualities it should have, we ended up with a collection of actionable principles for us to apply in our creative problem-solving process, going forward.

How might we tell a story with motion design?

How might we explain logic?

The content on the app dashboard slides in, showing it is scrollable and that content is flexible and modular.

How might we orient the user?

This popup fades in and scales to full size, which helps explain where it comes from and why it has come to the forefront of the screen.

How might we show a relationship between elements?

The menu rolls out from the button, emphasising the connection between the two elements.

How might we develop spatial awareness?

This table scrolls on opening, revealing that useful information continues off-screen.

How might we guide people with motion design?

How might we focus the user's attention?

This notification highlights that there is something new and exciting, and worth the click!

How might we make an interaction more tactile?

These tiles respond when you hover and press.

How might we hint at what’s possible?

These buttons have a magnetic attraction when you hover close.

How might we make the workflow easier to remember?

This sidebar slides away to make more room for the content. The animation helps you to remember how to get it back when you need to navigate next.

How might we provide feedback with motion design?

How might we confirm success?

This animation sequence reassures that your work has sent, helping you to know you can proceed.

How might we lessen a perceived waiting time?

The responses take a moment to send, so the animated spinner fills the time.

How might we reduce mental load?

This badge pops up so that you don’t have to keep changing tabs to check for new content, which would disrupt your workflow.

How might we build trust?

This animation shows that audio is recording.

How might we represent our brand personality?

Balancing speed, bounciness and exaggeration

Not to fast, not too slow. Succinct, fluid and accessible.

Now that you’ve seen our guidelines, learn about how we designed them.