Streamlining Video Creation with AI
Divinia
December 2023
Skip to Outcome
Expertise
UX Design, UI Design, Design Systems
Tools
Figma
Platforms
Web, mobile, tablet
Project Overview

Over 3 weeks, I worked closely with the CEO of Divinia to design a web-application that helps savvy business owners create short form videos. With the help of AI, Divideo helps users write scripts, generate videos, and organize their library so that they can maintain their business's online presence at an affordable cost. Using Divideo's smart script technology, users can create marketing content with minimal effort.

Background

Divinia is a startup based out of San Francisco, CA that boasts a wide range of AI-fueled products. Divideo is the latest addition to their product line, aiming to join the more creative side of AI and capture an entirely new market. This product utilizes Divinia’s unique review-focused technology stack, which is comprised of a language generation model, image semantic analysis, and an image matching model.

Responsibilities
  • Rapid wire framing
  • User flow diagrams
  • UI design
Goal

Design a simple and familiar video generation process, supported by a welcoming dashboard and library management system that provides the essentials for an MVP.

  • Video Creation Process
  • Editing Workspace
  • Content Organization
1
Video Creation Process

The video generation process is at the core of this tool and is where users will spend a vast majority of their time. I set out to design a dialogue that clearly breaks down required inputs and provides education on the product's technology where applicable.

I used market research and requirements provided by the CEO, coupled with a competitor analysis of companies in the AI-video space to help direct my thought process for this feature. I investigated companies like Invideo, Synthesia, and Deep Brain. Through collecting an inventory of features and user flows, I was able to get a strong grasp on the standard elements in this product space.

Invideo
Synthesia
DeepBrain

A recurring theme within the workflow is a multi-step modal or dialogue that guides users along the process, using standard components like steppers, input fields, etc. Furthermore, these products made a point to keep initial controls simple, encouraging users to place trust in the AI’s capabilities. The more advanced editing tools are then made available after generating the first draft of each video.

Through this brief bit of research, I understood that the workflow should be concise and educate users on the AI process as they progress. With tools like this representing an emerging and fast-growing technology, it is important to consider new users that have not yet messed around with it. Divideo’s primary value-add is it’s review-based language model, so we we want to make sure new users understand our competitive advantage, as well as how it works.

After discussing technical limitations and feature requirements with the team, we broke the process down into three segments:

Script Generation

Users start by selecting 1 of 3 script generation options (Smart Script, Prompt, or Upload). The Smart Script option is where users land by default. This is one of Divideos unique tools, as it encourages users to simply input a product name and allow the AI to take care of the rest. Users start with the script so that they can quickly regenerate and edit the direction of their story without having to commit to the full video generation process.

Assets & Image Upload

Users upload imagery that they would like to be included in their video. The AI matches the images with the scenes that make the most logical sense. The user then has the ability to tweak a multitude of controls (Narrator voice, music choice, etc.) before continuing to generate the video.

Video Render & Editing

Users can view their fully rendered video and download directly to their device. If they choose to, users have the option to make adjustments to their scenes and settings in the video editing workspace.

2
Editing Workspace

The goal for designing the editing workspace was to focus on intuitive scene selection, easy image swapping, and key controls that users need to edit their content. This was a challenge due to the simplicity we wanted to maintain, while still providing the tools necessary to create a robust video. I kept reminding myself that I'm not designing a fancy video editor like Final Cut Pro, but rather a place where users can focus on necessity without being overloaded by options.

After several iterations, we landed on a sidebar component for scene navigation, which was influenced by existing products in the market. With the script being the core point of user interaction and value, we implemented a quick-edit feature that allows users to change and update each scene narration on the fly.

3
Library

After generating videos, returning users will need to be able to manage their content. The goal is to facilitate easy retrieval, editing, and continuous use of content assets for ongoing marketing initiatives. We included standard features like folder creation and nomenclature such as file status to enable users to manage their library effectively. I referenced Google Drive when designing the layout and interactions, which served as useful inspiration for how to efficiently manage assets for a tool like this.

Outcome

Through rapid and iterative work amongst the CEO and development team, we were able to build a tool that saves time, with an interface that supports users’ main content creation goals. I delivered UI mockups with component documentation, user flows, and detailed notes to help the engineers efficiently build the product.

Home Page

Creation Process / Video Preferences

Settings / Plan

Editing Workspace