Miaojian AI Teleprompter

Watch the demo
INFO
01

Assisting video bloggers in creating videos effortlessly through a simple and intuitive teleprompter, powered by AI voice recognition, that automatically scrolls the lines and offers intelligent editing.

Role

Full-time Product Designer at WeChat, UI Designer, UX Researcher

Timeline

Oct 2020 – Feb 2021

Tools

Figma, Sketch, After Effects, Principle

IMPLEMENTATION
02

Simple script input

The user can easily input the script by typing, pasting or restoring from the last time.

The UI always shows estimated recording time at the bottom based on the number of words and average speaking speed.

Using voice command to start recording

With AI voice recognition, the user can start recording with a simple voice command “start”.

The countdown numbers inform the user that recording is about to begin.

Auto scrolling make the lines easy to read

The App automatically scrolls the script, following the user’s pace and using AI voice recognition to detect pauses and adjust accordingly.

Easy to restart, creating a pressure-free recording experience

If the user pronounces something wrong, they can simply restart or abort the recording.

AI automatically ends the recording

The recording automatically ends when the last word is detected.

The user can also manually press the complete button to end the recording without finishing the script.

Simple script input

The user can easily input the script by typing, pasting or restoring from the last time.

The UI always shows estimated recording time at the bottom based on the number of words and average speaking speed.

Using voice command to start recording

With AI voice recognition, the user can start recording with a simple voice command “start”.

The countdown numbers inform the user that recording is about to begin.

Auto scrolling make the lines easy to read

The App automatically scrolls the script, following the user’s pace and using AI voice recognition to detect pauses and adjust accordingly.

Easy to restart, creating a pressure-free recording experience

If the user pronounces something wrong, they can simply restart or abort the recording.

AI automatically ends the recording

The recording automatically ends when the last word is detected.

The user can also manually press the complete button to end the recording without finishing the script.

Smart editing

After the recording, the app offers three smart video editing methods to remove any awkward pauses or silences, giving the user a polished and clean video.

Natural

Only remove pauses between sentences, resulting a natural version.

Tight

Remove pauses between sentences, and speaking errors compared to the original script detected by AI, resulting a shortest final video.

Raw

No changes will be made to the original footage, which might contains errors and extra pauses.

CONTEXT
03

Background

WeChat is the most popular social media app in China

with active users more than 1.1 billion monthly as of 2020.

The launch of a brand-new video platform “Channels”

WeChat just launched its short-form video platform "Channels" competing with the most used Douyin (Chinese Tiktok).

The release of a new video editing app “Miaojian”

To support the video content creation for WeChat's video platform, WeChat developed Miaojian, an all-in-one mobile video editing App aimed at simplify the video making process, that can record, edit and post videos directly to Channels. Similar to the role of CapCut to Tiktok. The teleprompter is designed to streamline the self-recording process for video bloggers, as one of many features in Miaojian App.

Product Opportunity

01

Video influencers often use third-party teleprompters to help them remember lines when recording.

02

Without a built-in teleprompter feature in Miaojian, the user has to rely on other standalone teleprompter apps or physical teleprompters when they record videos.

Design Challenge

How might we build a simple and intuitive teleprompter that help users deliver lines effortlessly and simplify the editing process?

Goals

Simple and intuitive user flow

By leveraging interactivity within the narrative, the project aims to endow the user with meaningful agency, allowing for a significant impact on the story's progression and outcome.

Easy-to-read Line Scrolling

Designing interactions that are not only coherent and grounded in the narrative but also contribute to the construction of interactor’s belief of the story, hence enhance the narrative.

Smart video editing after recording

Designing interactions that are not only coherent and grounded in the narrative but also contribute to the construction of interactor’s belief of the story, hence enhance the narrative.

Research and Definition
04

Competitive Research

What is teleprompter?

Optical teleprompter

The screen is right in front of the video camera, and the words on the screen are reflected to presenter's eyes using a sheet of clear glass.

Pros: the speaker can maintain eye contact with the audience by looking directly at the lens while reading the script.

Cons: not accessible to most users.

Teleprompter Apps

Using a tablet or phone as a continuously scrolling “cue card” to help the presenter remember what they have to say.

Pros: low cost.

Pros: presenter may be found eyes shift away from the lens position.

How do video bloggers use teleprompter?

User Needs

  • Text Editing

    Users can input, edit and even save lines before recording.

  • Simple and Intuitive Process

    recording takes a lot of repeat, a 5-minute final video might take 1-hour of recording. As such, it is necessary to allow the user to easily restart.

  • Easy-to-readLine Scrolling

    • Different scenarios will have corresponding expressions and tones, as such, the speed of speech varies from fast to slow.
    • Some bloggers need an assistant to manually scroll the lines when they speak, requiring a more tacit cooperation.
  • Avoid Eyes shift

    By using a lens with a longer focal length and sitting further away from the lens (7 feet), thus making the eye shift less noticeable.

  • Final Video is Fluent

    • Record in segments and use Jump Cut to “glue” different video footages together, making it looks like it's by design
    • “For example, if two clips is not continuous, zoom in the second video clips to make it looks like it's recorded by two cameras.”

Product Requirement

  • Aiming for 1-minute recording experience
  • For non-professionals
  • Simple and unique experience
Explorations
05

Easy-to-read Line Scrolling

PROBLEM

It is not easy to match the speed of reading and lines rolling exactly.

SOLUTIONS

Scrolling Method

Jump scrolling
Chosen solution

The line that user is currently reading is paused, which makes it easier for the user to focus.

Smooth scrolling

The lines will keep scrolling at a constant speed and the user will not be able to focus on the line being read

Simple andIntuitive Process | Iteration 1

PROBLEM

Simple andIntuitive Process | Iteration 2

PROBLEM

Simple andIntuitive Process | Iteration 3

PROBLEM
Reflections
06

Side Project: Transition Effects Template Feature