BuzzFeed: Export Flow
Role: Product Design Intern
Timeline: Summer 2018
Key Activities: User Interviews, User Flows, Wireframing, Static Prototyping
Over the course of several weeks, I reworked a user flow in a video editing app called Vidder to improve efficiency of exports, reduce resource usage, and maximize data logging of videos.
Vidder is a web-based video-editing tool that serves a variety of BuzzFeed video producers, social curators and teams like BuzzCuts (meme ads). It has most important editing features while being easy-to-use for all skill levels and is faster at rendering than Adobe Premiere.
A tool called Flipper was being developed used to create compilation videos. Since it was meant to export through Vidder, it was important to optimize Vidder’s export flow to allow for it to work with more complex videos like these compilations.
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
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
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
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.
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 text.
I received feedback from the PM and designers on my team and it led to several important changes:
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 quicker user 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 since showing a screen that said“Rendering…”and nothing else that added no value
Need for greater explorations of the final success screen- because the final success screen now had to 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.
You can see my testing script below:
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:
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:
Here’s the final version of the Final Render Interaction:
These features have just recently gone live, but based on our current implementation, a few things will happen:
The user workflow will be faster overall, since users won’t need to wait as long to preview how their videos look
Overall user trust in the rendering process will increase, leading to confidence in working with larger videos in Vidder
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.
This project taught me an incredible amount, most important of which are:
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.
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.
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.