Divinia
December 2023

Streamlining Video Creation with AI

Expertise

UX & UI Design

Platforms

Web Application

Tools

Wire Frames, UI Screens, User Flows
Streamlining Video Creation with AI

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.

Responsibilities

  • Rapid Wireframing
  • User Flow Creation
  • Rapid UI Design
  • Design System Implementation
  • Developer Handoff

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.

  1. Video Creation Process
  2. Editing Workspace
  3. Content Organization

Execution

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. This dialogue should contain explanations for each input and indicate where in the process users are, ensuring they understand what they've accomplished and what they have left to do.

I used market research provided by the CEO, coupled with a brief 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. The recurring theme in their video-generation is a multi-step modal or dialogue that guides users along the way, using standard steppers and supporting UI. The analysis also helped guide which preferences would be beneficial to provide user control over.

With a clear direction and discussion with the team, we broke the process down into three segments:

Script Generation: users start by selecting 1 of 3 script generating options (Smart Script, Prompt, or Upload). The Smart Script option is where users land by default. This is Divideos main value add, as it allows users to simply input a product name - then the AI takes care of the rest.

Video Preferences: users upload corresponding imagery to the newly produced script and customize their desired video attributes.

Completion: users can view their fully rendered video and choose to download as is or continue to the editing workspace if they'd like to make any adjustments.

Editing Workspace

After we worked out the user flows and features necessary for the video generation process, I moved onto designing the editing workspace. The goal was to focus on intuitive scene selection, simple imagery swapping, and only the key controls that we believe users would need. 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 controls.

Content Organization

After generating videos, consistent users will need to be able to manage their content. The goal is to facilitateeasy retrieval and reuse 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 video library effectively.

Outcome

Through rapid and iterative work amongst the CEO and development team, we were able to build a tool that that saves time, while using an elegant interface that supports their main content creation goals. I delivered UI mockups with component documentation, layout notes, and general annotation to help the engineers efficiently build the MVP.

Next Steps

  • generate insight from customer feedback so that we can continue to mold our primary use cases and features
  • refine the UI kit and implement a design system to help create consistency and strong visual identity across the product