How we developed our motion design guidelines

Our investigation into how we might use motion design to solve UX problems

Recently I began wondering how our team could be more conscious of using motion design to support our solutions to UX problems. We certainly understand the power of meaningful motion design and use animations occasionally, but I questioned if we were really making the most of it in our problem-solving process?

I started researching principles of animation to understand the basics better. There’s plenty of analysis of classic animation principles out there, as well as more contemporary UX focused discussions. I followed this by investigating the motion design guidelines of other organisations to see how they’d interpreted these principles and applied it to their brand.

I saw that a strong theme emerging about how motion visualisation is rooted in reality and that designers can use people’s familiarity with patterns that exist in the real world and apply them in new digital ways.

I reflected on how we’ve been using motion design currently and realised that the other designer and I intuitively know what feels right for Firefly, but we haven’t got a very simple way of communicating this with anyone else. I realised we needed to define our thinking more clearly and make it more visible so that we could use more habitually in the creative problem-solving process.

Our aim

• Define our view of how we think about motion design at Firefly Learning.
• Communicate this vision to the wider team.
• Encourage greater reliance on meaningful motion design as part of the problem-solving process.

How do we know what feels right for Firefly?

I dug deep into the motion design decisions we had been making so far:

• Why we use motion design?
• When we use motion design?
• What qualities do our solutions have?

I discussed my study with the other designer, he resonated with what I’d noted down.

I made notes on how we had used motion design in Firefly in the past.

Test it out–what worked?

This sat on my computer for a while, occasionally I checked back and agreed with myself, yes these still feel right for Firefly, they are still valid. We had done a few more design projects involving motion design since then and these principles still made sense. They would work as good guidance going forward.

What didn’t work?

• They weren’t visible enough. Being sat on my computer isn’t very helpful to anyone else and I myself needed to actively look for them.
• They weren’t actionable enough. The principles sound great but how might the team be more encouraged to apply these?

How might we make these principles more actionable?

I mentioned to the team that I wanted to publish them somewhere, put them out in the world. The other designer suggested I include some examples that demonstrate the principles in action in our product. Great idea–this helps the reader imagine how to apply the concepts.

I also wondered how I could make the principles sound less prescriptive, and more open for creativity. This gave me the idea that I could use “How might we..?” questions to prompt more open-ended opportunities for imagining how motion could feed into UX design.

In the end, I decided that as a first experiment I’d publish them in a blog. I can test it out, see if it’s helpful over the course of a few projects, reflect on what can be done better, and then aim to publish it to our brand website after that.

Check out our Motion Design guidelines here, it’s full of yummy animated examples of how we’ve put motion design into practice!