Responsive Web and iOS

Short Video Production for E-Commerce Sellers

Year
2020 - 2021
Role
Lead UX Designer
Project Type
Responsive Web & Mobile
Short Video Production for E-Commerce Sellers

Aidigger is an AI company, dedicated to applying latest AI technologies to various business domains. After years helping business clients in e-commerce with product management and content management system, we noticed their needs in creating short videos for branding with the rise of TikTok and other streaming media.

Since Dec. 2020, I worked as the lead UX designer in this project to define and deliver low-cost short videos production services to acquire business clients.

CHALLENGE

Introducing short video production for e-commerce users

E-commerce users are proficient in managing and selling products, but not making videos. As video content become vital for e-commerce clients in promoting their business, we decided to build up the all-in-one ecosystem by integrating short video production service right into our product management system.

Solution

AI-powered template-video creation

Aizao Video offers easy template-video creation and management services for business users. This service includes thousands of video templates available in the template market and three AI-powered video editors for easy generation and further customization.

RESEARCH

How we got there

The greatest challenge for us was to start from 0 to set the standards and develop design implications for the ideal short video-making experience in the business context. To unravel the myth about this new area, we tried to understand it from experts’ and users’ perspectives.

DISCOVERY

Clients' demands

We interviewed several business clients to gather their demands and expectations as guidance for service planning. The key insights that defined the project included:

Video making for everyone, while quality assured

As guided by client research, we decided to target our video making service at people with limited or even no experience in video production, e.g. shop assistants, and professional video editors. To understand their concerns and skillsets, we interviewed 2 shop assistants and 1 video editor with questions about video making.

Market research

Based on users' skillsets, I first studied the available video editors in the market for unprofessional users. They usually come with low customizable features and therefore, low learning costs. FlexFlip and Jianying perform the best in helping beginners create videos.

After a thorough study on features and interfaces of Jianying and FlexClip, I found that Jianying has powerful visual, audio, and text editing functions with a timeframe to play with, but the quality is highly dependent on users’ video-making abilities. FlexClip is as easy as Powerpoint, but the rigidness couldn’t satisfy business clients’ needs in further manipulation.

Therefore, we decided to pivot 3 different video editors to accommodate to different needs - Template Editor for creating templates, Template Video Creator for generating videos, and Video Editor for refinement.

Key elements

Based on competitive analysis and discussions with video editing experts, the team generalized key elements for successful short videos. We then devised the key features to include for the video tool.

Set the structure

Based on market research, we designed the structure of Template Video Creator. Users can just follow the guidance and fill in all slots with their content.

Unlike beginners, professional users need to edit all components in the story to change the attributes, animation, and special effects. For that purpose, I devised the Video Editor and Template Editor. The Video Editor differed from Template Editor for not offering placeholders (slots), content setting, or guidance editing, but followed the same style and layout for offering similar manipulation features.

Refine the layout

During the pilot launch of the Video Editor, I discovered that users who use Video Editor for refinement only need to fine tune very few components. Searching through all timelines to find the right component was inefficient for them.

Therefore, I redesigned the Video Editor for a modular layout and scannable component list for quick and easy manipulation.

EMPOWER WITH AI

Let's make some magic

As a company boasting AI expertise, we integrated automatic generation to add some magic. I especially designed the interaction for narration and caption, animation, and special effects generation.

Narration and caption

Narrations are generated audio based on text and captions are generated text based on audio. In some circumstances, users have neither narrations or captions and they need to generate both of them simultaneously.

Therefore, after analyzing the generation of narration and caption, I designed them as two separate component types and group narration into Music, while caption into text.

However, the original design of narration and caption components required the development team to create new components. As there was limited time left for developing this feature, I explored the design solution by pairing narration and caption together.

Animations

Animation plays an important part in all existing editors. To start quickly, I first devised the simplest version where users can only set the animation for entrance, loop, or exit.

After the product launched, we improved animation setting and allowed entrance, loop, and exit setting together. We also added various parameters. Therefore, I iterated on the animation panel to meet new requirements.

Special Effects

To distinguish between other generated components like narration, we name all image and text generated components and manipulations as special effects.

For the Template Editor, I designed the Effects panel to edit the effects trigger and style. When saving the template, the special effects would be submitted and generated.

APPROACH

Good and fast

We worked closely with developers from the start of the project, always chasing engineering estimates to launch products and features as soon as possible. As the design of video production services involves multiple tools and platforms, we decided to design from the most complicated tool and pages to the least ones for fast implementation.

To stay consistent in all our products, I established the design system and the framework for the other designer to follow.

IMPACT

A good start

With the video editor, we won 3 clients right after the launch of it. one of the clients immediately started assigning video-producing tasks to all shops in two cities. In total, they produced more than 30 videos every day, which was unimaginable before using our product.

TAKEAWAY

Know the rules first

After launching the product in market, we noticed there's problem with exposure limiting due to the similarity of our template videos. Though we tried hard to avoid this problem by letting users shooting part of the template, the streaming media still recognize those videos as similar to each other. As short videos are vitally affected by the platforms distributing them, we should study the rules in detail first to avoid such problem.

Prepare for the unexpected

When the development team talked about revising the design of the narration and caption part to meet the deadline for delivery, we found it hard at first because it required us to sacrifice the flexibility of the caption. But we quickly listed the pros and cons of each solution and made the decision.