Motion Design

assorted gallery

Case Studies

  1. GENIOS App

Healthcare Rostering self-service

The Design System components

My original ideation sketches

Digital illustrations, animations and components in Figma

And for heading animations, I used Jitter

Exported to Lottie.json files for easy handover

The prototype behind the scenes

All of the connections and interactions for the Figma file for user testing, and iterated on until final designs for development handover

Motion design in action

I received medium-fidelity designs from the UX designer, then raised to high-fidelity and added the motion to bring them to life

Show reel

This shows the various interactive and animated components I designed and built, then exported videos and Lottie files for developer handover.

I designed and edited this show real using the Figma interactive prototypes, screen recorded and then edited and animated with Adobe After Effects.

  1. Rapid Platform

Breakdown rescue service - call centre and dispatch workflows

Style guide example

Here are the motion design pages for the latest style guide I designed:

You can see the whole Brand / Illustration / Style Guide story here:

Open Figma Board

Figma Prototypes

End-to-end Figma prototype I wired together with animated components and various states to provide motion design

example component states with easing applied

Example animated looping illustration with easing applied. Exported to Lottie

Motion design in action

I defined the illustration style, animation concepts, states, interactions, and enhanced the flow with overall motion design for this call centre wizard

I built this video in Figma and After Effects to illustrate the multi-screen interactions and flow

Handover

Animations are intended to be design using OOTB Figma smart-animated frames when possible, then exported using the Figma Lottie plugin and downloaded as a Lottie JSON file which can be provided to developers.


If easing and other attributes sit outside standard tokens then annotations are made in the design system Figma component library.


I also added links, tokens and easing to the developer platform:

Show reel

I should also mention I designed and built this portfolio site on Framer using Framer Motion.

Thank you for your time!

👋