Motion Prototpying

Designing moving UI

Our UI design roots are in page by page navigation. 

Native apps, easy javascript libraries and more are questioning the bedrock page/screen model, and designers need to lead the way with UI that uses motion in a logical way for the user.

1
__

The challenge

I can make you a wireframe, page by page, but then when it comes time to code, uh oh! I've forgotten any concepts of transitions, emphasis through motion, or a number of other tools to make an experience more intuitive or delightful. 

So, let's get specific and add some motion.

2
__

My approach

I've used After Effects on several projects to quickly show, not tell, how we could execute a particular feature. It avoids the line, "now imagine...", "now imagine this slides in here, pops and scales!" ... What? 

Here I was able to communicate a concept for a new
home area in TurboTax.

We were able to validate this idea with engineering
quickly, learn that we couldn't execute immediately,
and move to a new, simpler solution. 

Below is an example of taking a project far through concept to prove your idea's merit to your stakeholders in a number of different ways. This is from my One Intuit Identity project, and was quite a lot of fun to create.

3
__

The impact

Bringing this skill to a team has allowed us to validate and invalidate ideas faster, allowing for more concepts to be tried while still executing on time. 


My next step is to learn more new motion frameworks like Framer.js and be able to prototype in code for use not just like these, but also in user testing.