Streamline your cross-discipline video production process

Yummygum has on occasion, been known to reach beyond our usual bubble into the realm of video production. What started as a small process tailored to UI showcase videos has turned into something we can and have deployed for more complex video projects, including elements such as storytelling and voice overs. I was tasked as Lead UX Design to dive deeper into connecting a static storyboard and its finished production, and I’m excited to share the process we’ve come up with.

As we’re a digital agency that usually focuses on interfaces, it was an interesting challenge to find a balance and distinction between the 2 disciplines we feel are best suited for these types of projects.

Our UX squad is all about concepting. Ensuring clients' ideas and requirements are transformed into a friendly, intuitive and meaningful (video) experience. Therefore most of the processes we usually apply stay the same. We discover through user research, strategize through customer journeys and eventually process all of this into a concept in the form of a design.

While storyboards seem like the natural choice for visualizing the product, we question whether they alone can effectively convey all the strategic decisions embedded within our "design." We believe there's more to it. That’s why the challenge becomes more about how to seamlessly hand-off our "designs" to the visual design team, encompassing all the decisions we've collaboratively made with the project stakeholders.

And maybe even more essential, how do we make sure the overall feel of the video is already established before the visual squad embarks on the labor-intensive tasks within Adobe Premiere and After Effects? We wouldn’t want to overhaul the entire concept at this stage. What we do want is to give our visual designers as much space to work on awesome transitions and cool animations which they’re surprisingly good at!

Storyboard prototyping

In an effort to solve all of our problems, we’ve landed on a new higher fidelity representation of a video concept. The aim is to get as close to a “produced” video experience as possible, while maintaining a format that’s easy to make changes in.

So how do we create this mysterious storyboard prototype? Well, the steps are easy so feel free to follow along!

• Open up, or create your favorite Figma file

• Sketch out the storyboard frames however you see fit, we usually use a combination of stock footage and wireframes designs.

• Each storyboard frame gets its own 16:9 Figma frame (1920x1080)

• Link the frames together using Figma’s prototyping functionality

• Set the trigger for the transition as “after delay”. This makes it possible to set the actual time planned out for the frames, making it easier to spot flaws in the storytelling flow.

• Use “smart animate” as a transition effect for moving objects around to convey your story. This allows you to automatically animate changes in an objects’ scale, position, opacity, rotation and fill to even better convey a transition or highlight in your visualization.

Now at this stage, clicking the present button with your first frame selected should start off your little video. This works great if you’re sharing your screen online, or sitting in the same room where you can select and press play. But, for non-tech-savvy stakeholders it’s not a very intuitive way of sharing your work asynchronously. So let’s just go a little deeper and create a pause (and play) button!

The pause button

The pause button works as an overlay, as this is the only (known) way to stop an “after delay” trigger.

A small play button will fall over the pause button that links back to the same frame on click. Please note that you do need to navigate back to the original frame by using the open-overlay feature shown in the images below, as this is the only (known) way to jump back into your “after-delay” triggered prototype.
This is how you do it:

• Incorporate a pause button design in your frame

• Create a play button design that will lay over your play button

• Create an on-click trigger from your pause button that will overlay the play button

• Create an on-click trigger from your play button that will open the original screen as an overlay, functionally starting your “after delay” trigger again.

After you’ve added this play button, it might be nice to create a landing screen for your stakeholders to start the video from. Once you’ve linked a “start video” button from there to your first frame you’re all set for sharing the prototype. You can even have them place comments in the prototype that will end up on the right frame in your Figma artboard!

Onto the video editing phase

Now that your client or team has approved the overall concept, timings and storytelling aspects of your video we can move on to the video editing phase! The goal here is to focus on quality transitions, incorporating pixel perfect visuals and to tweak the timing to suit the chosen path for our audio. 

There’s a couple of tools in our belt to make sure we’re capturing meaningful feedback from our stakeholders and trying to stay as agile as we can in our process. Even though the time for larger changes to the video have passed at this point, we still want to be able to easily tweak our screen animations after putting everything together.

It all starts in a combination of Adobe After Effects and Adobe Premiere where we work on our animations in After Effects, and assemble all the pieces in Premiere. There’s a cool feature that makes these tools work together seamlessly, it’s called Dynamic Link. Learn more about it from Adobe here.

In short, it makes the clips we incorporate in Premiere coming from After Effects, dynamically linked together. Syncing any changes made in either application.

Another cool implementation we’ve been using is Frame.io. We use this to share our Premiere files with the team and our clients. They offer a pretty good interface for browsing through the video and placing comments in it. The cool thing is that these comments automatically show up in our working Premiere file, to the right timing and everything. Another bonus that always gets our team excited is that their website just strokes our eyeballs the right way!

Conclusion

Of course, we’re still no expert at a fully professional video production process, but for a small agency that does this every once in a while we hope you can find some wisdom in these tips for streamlining your own video production process.

Feel free to share some tips with us on X as well! And if you ever need our help in creating a gorgeous, meaningful video feel free to hit us up!