BuzzFeed: Export Flow

Role: Product Design Intern

Timeline: Summer 2018

Key Activities: User Interviews, User Flows, Wireframing, Static Prototyping

TL;DR:

Over the course of several weeks, I reworked a user flow in a video editing app called Vidder through a process of iteration, prototyping and user testing to improve user confidence and reduce unlogged videos. 

Context

Vidder is a video-creation tool that serves a variety of BuzzFeed video producers, social curators and teams like BuzzCuts (advertising turned into meme ads). It has most important editingfeatures while being easy-to-use for all skill levels.

There’s a new tool called Flipper that will focus on creating compilation videos and will export using Vidder. As a result, it was important to optimize Vidder’s export flow to allow for it to work with more complex videos like these compilations. 

Problem Definition

Our problem space was based on a variety of user feedback that the team had gathered over a few months of work. The main ones we addressed are as follows:

 

1. The waiting experience for longer / more complex projects isn’t informative

 
Screen+Shot+2018-06-13+at+4.56.07+PM.png
 
  • Only a spinner going to let the user know that the process is still alive

2. Users desire a lightweight export “preview” in many cases rather than a hi-res 1080 result. 

  • Users will often export a hi-res result just to see how everything fits together

3. The current workflow allows users to omit the step of submitting to AVSlater (our logging and publishing system). 

  • As a result, a lot of content bound for Instagram and Twitter is not indexed in our databases

 

There were also some smaller tweaks that would improve the experience that I tried to address as well:

1. Modal to begin export process is text heavy and combines several different features.

 
Screenshot+2018-06-07+14.05.49_preview.png
 

2. When accessing Audio settings from Export Launch Modal, “Save” and “Cancel” both do the same thing.

Users

Social curators, video producers and the creative team at BuzzFeed

  • varying levels of experience with video editing, with some being experts with Adobe Premiere and others only editing using Vidder

  • create videos for news, branded content and more

Constraints

I worked on a small team (one other designer, three engineers, and a PM), which limited the amount of things we could build in the month we were given to work on this project.

Process

Understanding the Problem

I talked to the team and found out that users had been actively working with Vidder since it was in a beta version and knew that the renders often messed up. As a result, it was a common part of their workflows to export just to make sure that everything looked correct and was working properly. 

How Do Users Export and How Can It Be Better?

I began by mapping out our existing Export flow and attempting to alter it in order to address some of the team’s issues where possible.

 
 

I created an initial prototype with options to preview and final export and how each of those screens may look. It also removed a lot of unnecessary information, such as the “Use Last Render” option and “Audio Settings” because data showed that they weren’t used very often, fixing some of our minor issues.

 
 

Feedback on this prototype resulted in many important developments:

  • Addition of a platform dropdown to the submit screen- since videos with different intended platforms have a variety of workflows, this makes a more consistent experience and will make sure users add their videos to our logging system

  • Separate export/preview buttons- this is a quickeruser flow, since it saves the user a click in order to preview, a commonly repeated action

  • Removal of a separate rendering screen- this change reduced the number of steps sinceshowing a screen that said“Rendering…”and nothing elsethat added no value

  • Need for greater explorations of the final success screen- because the final success screen now hadto display different amounts of information, I focused on creating a more robust design to handle those situations.

In general, the most difficult piece of the puzzle was figuring out a way to make the platform dropdown as simple as possible, since accuracy in selections was very important.

Does the New Flow Make Sense to Users?

After incorporating these new features, I ran a series of informal user tests with 6 regular users and had them walk through prototypes of both the preview flow and the final success screen flow. 

In general, the flow was very clear and the users were excited about the new features. Some small issues did come up, such as confusion around some copy. In addition, we needed to add a few more options to the Platform dropdown to for specific use cases that arose during testing.

After changes, I created a flow chart that outlines all of the directions the platform option can go to help the engineers with development:

 
image_preview (2).png
 

O&O stands for Owned & Operated, which refers to our own platforms such as website and app.

Here’s the final version of the Preview Interaction:

 
previewfinal.gif
 

Here’s the final version of the Final Render Interaction:

 
 

Impact

These features have just recently gone live, but based on our current implementation, a few things will happen:

  1. The user workflow will be faster overall, since users won’t need to wait as long to preview how their videos look

  2. Overall user trust in the rendering process will increase, leading to confidence in working with larger videos in Vidder

  3. Nearly all videos will be submitted to our video logging system that’s used for recirculating content and social sharing

For 1 and 2, success will be measured in follow up conversations with users and by monitoring complaints that happen for technical bugs in our help Slack channel.

Conclusion

This project taught me an incredible amount, most important of which are:

  1. Feedback from other designers can be as valuable as feedback from users - during our biweekly crit sessions, I gained an incredible amount of feedback that made user testing run very smoothly and reduce the amount of work to be done at the end of the process.

  2. Prototype at the fidelity that you want feedback - I jumped directly from user flows to high fidelity prototypes, since I didn’t realize the overall complexity of the problem. This slowed down the whole process since it made it harder for me to get feedback on the interaction, since the focus was on the visual design and other decisions.

  3. Copy is king - My fellow designers always gave me constructive criticism on my copywriting. Since in the past I had been doing purely UX, I was unfamiliar with how to write good, concise copy.