Video Editor – UI Motion Design
How do you make the complex task of editing video more accessible to novice users?
That was the challenge our design team faced in early 2016 when we started work on a new video editor hosted inside the Windows 10 Photos app. After experimenting with a variety of models, we ultimately landed on a card metaphor. This made it easy to place and re-arrange photos and videos in a sequence to assemble a movie. To really sell the metaphor of cards though, we wanted to emphasize their physicality and have them look and behave like real playing cards would – with a little bit of magic infused.
As motion designer on our team, this is where my skills had an opportunity to shine.
To start, I captured video footage of people interacting with real-world cards. Watching the video revealed some interesting insights about the way people interacted with cards (it looks messier than you think), and inspired bits of the motion design like the way the card tilts while it’s being dragged.
Original Motion Study
Shipped Implementation
From Design to Dev
Often the most challenging part of motion design is getting your carefully crafted designs actually implemented in the app itself. I tried out several different methods for communicating and speccing out my motion designs so they could be re-created in our app proper. What ultimately worked best for our team was what you see here: a detailed breakdown of all the micro-animations, timestamped and described in universal terms. I also gave a priority ranking to each piece of the animation, so that our engineering team was able to focus their time on the most impactful details first.