Flow and Form

How I creates motion design to bring in delight

Two business cards
Two business cards
Two business cards

ROLE/COMPANY

Motion designer

TIMELINE

2017-present

Click on detailed case study to view some snippets of my work

Foundation

My journey with motion design began long before I entered the field of product design. My academic background in animation have ignited the passion for movement in motion design. The foundations I grasped during those time still comes handy while designing motion for products.

For me, animation isn't just about moving things on the screen; it’s about creating meaningful interactions that communicate intent and enhance the user’s experience by giving delight. As I moved to MPL, I discovered that motion design, when used purposefully, could significantly improve the flow and usability.

Building the structure

Before beginning any design project that involves motion, I take the time to:

  • Storyboard Key Interactions: Storyboarding helps me visually represent how transitions and interactions should flow in the app. Just like in traditional animation, understanding the sequence of events ensures that each motion serves a functional purpose—whether it's enhancing usability or creating delight.

  • Moodboarding: This is where I curate the right mood for the design. Whether it's vibrant, playful, or minimal, moodboarding helps me shape the tone of the animation and visuals, ensuring it aligns with the product's overall goals.

  • Finding Inspiration: I’m always inspired by Buck Design and Oddfellows. Their work demonstrates how motion, when done well, can tell a story and communicate brand personality.

The Design Workflow

  1. Ideation: The key to integrating motion into UX design is to not overwhelm but to enhance. For instance, adding subtle animations that confirm actions like Button click, tick mark animation etc.

  2. Wireframes to Prototypes: After creating wireframes for the product, I focus on adding motion elements to my prototypes. I incorporate smooth transitions using smart animate, hover states, or feedback animations into the user flow. These interactions helps me in communicating the smooth flow to the stakeholders which static screen cannot.

  3. Motion Principles in Action: I always stick to the basics of animation to ensure my designs are not just visually appealing but also functional. Ease-in and ease-out animations help users feel the connection between actions, while subtle anticipation motions prepare users for what’s coming next in the flow.

Creating Engaging User Journeys

In my recent work at MPL, for instance, I designed an interactive guided animation for opinio. This motion not only guided users but also reinforced a sense of achievement, further encouraging them to stay engaged with the product. Through carefully crafted micro-interactions, motion design nudges users to take the desired action while enhancing the overall usability and experience of the product.

Motion with Purpose

For me, motion design isn't just about adding visual flair; it’s about enhancing the user journey where words or static images cannot. Whether it's guiding users, reinforcing brand personality, or simply making a product feel alive, motion has become an essential tool for me.

I owe much of this approach to the foundations I built in animation and the creative geniuses I look up to every day.