Hero.png

3D Effects

Open new doors to storytelling possibilities with easy-to-use, high quality models and effects that add magic to your movies.

Links & Press

 

Problem

Students need an easy-to-use video editing tool that allows them to creatively explore and differentiate their creations.

Role

Design Lead

Project Timeframe

1.5 years

Tools

Axure, Unity

 

Overview

Within Microsoft Photos is a full-featured video editor. From October 2017 to March 2018 I worked as design lead for a specific editing mode within the app. 3D Effects allows for students to customize their video clips with visual effects and 3D models.

General discovery & exploration

Video editing projects have become an increasingly popular tool with secondary school teachers as part of a project-based learning curriculum.  By creating coursework and projects with real-life challenges, teachers hope to reinforce deep learning.

My first step in the research process was to take a broad approach: viewing student video projects online, completing competitive app investigations, reviewing marketing reports, reaching out to our internal education team, and partnering with the research team to conduct long-term ethnographic studies.

To facilitate more of a co-design process, we also reached out to Microsoft education partnerships with local schools to learn hands-on how teachers and students use video in a classroom setting.

Finally, to bring team visibility to actual user needs, I partnered with a researcher to host on-site user panels with students and teachers who regularly edit videos.

We identified the following high-level needs for teachers and students:

  • Teachers don't really have a preference for any video tool in particular, they need a tool that is easy enough for them to learn so they can recommend an editor and lightly assist students with minor technical issues.

  • Students look to specific tools to perform specific tasks (they are able to fluidly move between devices and apps to capture and edit content).

  • Students want to creatively differentiate their work from other students: effects were one of the most commonly-listed means of doing this.

A longitudinal study conducted with student video creators revealed effects were generously used in to the video creation process as a means of storytelling and creative differentiation. also, explosions reign supreme.

A longitudinal study conducted with student video creators revealed effects were generously used in to the video creation process as a means of storytelling and creative differentiation. also, explosions reign supreme.

From that we created the following design principles to guide the work to come:

  1. Support editing through clear and concise editing functionality.

  2. Support creative differentiation through a wide array of content types.

Creating the product roadmap

With students having a strong need to creatively differentiate their work my team focused on one specific aspect of video editing: effects. With product we identified a concept strategy with a few key business needs in mind:

  • Build a solution that could run on education devices with less computing power than a standard desktop.

  • Leverage the other work being done on consumer creative tools within Microsoft (largely Paint 3D, Remix 3D)

With that, we decided focus on three core features:

  • Add content to your video clips and track them to the footage

  • Models, sounds, animations, and effects packaged at your fingertips

  • Trigger animations and objects at just the right moment

Prototyping

One big challenge in prototyping a video editing feature all up is finding the right level of prototype fidelity for user testing. To keep things as lightweight as possible we began with an Axure prototype that explored a single editing scenario rooted in our core feature strategy: adding a visual effect to a video clip, tracking it to the footage, and customizing the animations.

A handful of screens from the bandersnatch-like axure prototype. Here a user adds an effect, positions and tracks it, sets a target, and times it to their footage.

A handful of screens from the bandersnatch-like axure prototype. Here a user adds an effect, positions and tracks it, sets a target, and times it to their footage.

Conceptually, users were delighted, but there were a handful of UI issues were instantly able to address. While the overall editing flow resonated well, the terminology in the UI was overly technical, confusing our users. At first glance were also a bit flummoxed by the editing controls, but understood their functionality after interacting. This highlighted the strong need for us to test with a more robust prototype solution.

Video editing is such an inherently interactive medium, and to get the answers we needed, we conducted our next round of user research using a high fidelity approach: a XAML UI with Unity under the hood. This enabled us to quickly prototype the UI while enabling robust video editing with actual content.

This version we simplified our language, provided contextual icons to bring clarity to labels, and stretched our prototype to the limits by including animated models as well. This version tested much better, but highlighted a strong need to focus on the usability of the tracking feature all-up.

Conveying "reasonable" affordances

The tracking system we had proposed provided users with no feedback for what was happening under the hood, nor did it provide any mechanism for correction. A good creative tool UI should provide contextual clarity for users: they should be able to confidently perform an action knowing they can repeat it with consistent results.

Our original implementation was confusing for users because they weren't sure where content was being tracked to. So, we added in a button to provide a visual cue.

This performed much better with users, however not without technical issue. Our original implementation didn't include a visual cue because the tracking algorithm uses many points of data in the video to create a stable output. It would be technically impossible for us to use the button as the tracking point.

Despite this we ended up keeping the button, and also the original tracking algorithm. It conveyed enough accuracy for users to feel like their edits were impactful while allowing us to keep the integrity of the algorithm.


Content creation: back to the research board

In a creative editing tool, the default content you provide necessarily dictates the output the user will create. We wanted to make sure we supported a wide range of creative expression. We circulated a survey to better understand what type of content students want to put in their video.

We also reviewed competitive mobile and PC apps to better understand what content was accessible in other tools. On PCs, effects were geared more towards action-oriented content like explosions, fire, and lasers. On mobile, we saw much more variety in content including sparkles, dust, and a lot of franchise-licensed content. All in all we identified 40 effects ranging from weather events, pyrotechnics, ambient decorations, science fiction and space, fantasy, and celebrations.

Types of Effects.png

Scaling UI for future work

A reoccurring design challenge working on this project was balancing the appearance of simplicity with a very technical feature set. With our core editing features in place we were still getting persistent usability feedback about the discoverability of a few key features: tracking and timing.

With that I designed a first-run tutorial that could also be re-triggered via a “help” button. Utilizing a native UWP control, users progressively walk through a series of steps explaining the video editing process with each action/input triggering the next step. Though not implemented, this improved discoverability and basic understandability in preliminary usability testing!

In incorporating Microsoft’s 3D content platform Remix 3D we added a third browser tab. To ensure a good browsing experience, the width of the browsing tab when viewing content in Remix 3d.

In incorporating Microsoft’s 3D content platform Remix 3D we added a third browser tab. To ensure a good browsing experience, the width of the browsing tab when viewing content in Remix 3d.

It was also important for us to include integration support for other Microsoft content creation apps like Paint 3D and Remix 3D. Using the Remix 3D API, we added in a browsing mechanism so users could import and browse their own custom 3D models into their videos.

Final product impact

The implementation of the 3D Effects feature set resulted in a more than 4% increase in monthly active devices using the Microsoft Photos App, and an 11% increase in video exports from the app. More importantly, there are tons of really awesome videos online made my students and video enthusiasts alike. :)