cover.png

Background Replacement

Students need a quick and easy way to replace backgrounds in their school video projects. A simple single-view green screen video editor with instant adjustment feedback enables just that.

 

Problem

Students and teachers need a free method to remove backgrounds from video footage.

Role

Design Lead, Prototyper

Project Timeframe

1 month

Tools

Adobe XD

 

The challenge

After working with students and educators for our 3D Effects feature we soon realized that students and teachers need a quick and easy way for students to replace the backgrounds of their videos.

In fact, the lack of an in-box robust video-editing solution for Windows 10 was a big factor in why schools didn’t upgrade student devices to Windows 10!

Understanding the problem space

We spoke with teachers and students about the types of video projects they worked on in schools to figure out what types of videos students were making, how they were making them, and why. We also scoured competitive apps on all platforms to get a baseline set of features. 

Research Findings.png

We learned that many teachers set up a low-cost green screen at school to provide students with a means of filming during classroom hours. Students used a lot of props and accessories to create their video clips, often filming them on their personal devices. While the specific tool used varied most students uploaded their footage to a school-issued device and used chroma-key technology to replace their video backgrounds.

A slide from a larger deck breaking out each app, their features, and sample footage created in each.

A slide from a larger deck breaking out each app, their features, and sample footage created in each.

In our competitive app review we discovered most apps showcased a very homogenous set of features. Users could almost universally select a specific chroma key color, make basic adjustments, and replace the background with a video or an image.

What's viable/competitive/desirable/lovable?

If you’re beginning to think i’m obsessed with tables you’re 100% correct.

If you’re beginning to think i’m obsessed with tables you’re 100% correct.

In order to ship on an accelerated time frame, we identified an MVP set of sub-features we needed to deliver to enable a functional experience. Leveraging our research findings (both user needs and competitive offers) we separated out features required to meet our minimum experiential requirements while also making sure we could technically deliver them on time! This was shared out to the extended leadership to get everyone on board with rolling out features incrementally. 

"Sketching" solutions

I thought using this cool open handle model preview would help clarify what was happening from a technical perspective but mostly it just creeped everyone out.

I thought using this cool open handle model preview would help clarify what was happening from a technical perspective but mostly it just creeped everyone out.

I quickly got to work wireframing out the experiential flow for our V1 feature set revealing some interesting design challenges. How could we scale our interaction model to incorporate video backgrounds in the future? Which controls from our pattern library could we leverage that minimized engineering time but still provided enough utility and delight to users? Find out more next scroll on Background Effects: The Case Study!

Prototyping & user testing

And we're back! A super quick-and-dirty clickable interactive prototype was created to test with users out in the field and also in the labs. We walked folks through a handful of short scenarios for general understandability and usability of our design, which helped us clarify language and make a few adjustments to user flows. Users loved instant feedback in the preview area after each edit interaction.

An improved color picker, background image selector, and less creepy open media commons preview content.

An improved color picker, background image selector, and less creepy open media commons preview content.

Click me to view the interactive prototype.Note: icons and fonts may load funky.

Iterating & working through design constraints

Much like the issues we faced while creating the experience model for 3D Effects, the lack of robust timeline editing controls posed some challenges for users syncing and timing their background media in the case of video footage.

Traditional video editors rely on a multi-track timeline where users can freely reposition and retime content in time. However the storyboard model of the Microsoft Photos app prohibited tracked editing entirely, leaving no built-in functionality for timing the background videos to the foreground: 

Media Transport Control.png

Alright so here's the rub! We knew from our research that timing video content was critical to users: we needed to enable the background footage to "start" before the action footage and similarly it needed to be able to extend beyond it as well.

We had to be creative in how we could convey affordances to users whilst not hampering any editing functionality and also providing better affordances! 

*It was there lurking beneath the surface… the whole time.

*It was there lurking beneath the surface… the whole time.

In the short-term we settled on an extension of the native video scrubber control with a heavy gradient to provide . With the foreground video as the reference clip, we created a scrubbable UI overlay that allowed for the background clip to be positioned relative to the parent clip. A heavy gradient provided a visual affordance for the fact that the background clip extended beyond the action footage. While not especially glamorous it was quick, easy to build and scalable for future iterations.

Background UI.png