RippleAI —
AI Video Analysis Tool
Helping content creators quickly find highlights and edit videos.
RippleAI's Clipper is designed to save content creators' time and effort when editing long videos. RippleAI's STT technology automatically analyzes videos and extracts the most important highlights, so users can focus on the content that matters most.
This app uses advanced speech-to-text algorithms to transcribe video content and identify key moments. It then organizes these moments into a timeline, making it easy for users to navigate and edit videos.
Timeline
1 Year
My Responsibility
UX Design,
Visual Design,
User Research,
Prototyping
Tools Used
Figma,
Principle
Team
2 UI/UX Designers
1 PM
2 Developers
INTRODUCTION
A new AI software designed for extracting highlights from long videos, exporting subtitles, and editing videos.
Editing long videos can be a tedious and time-consuming task, particularly when attempting to find the most important parts of the videos. This issue is prevalent among content creators, vloggers, educators, and anyone aiming to produce compelling video content.
To address this challenge, I designed an AI software that automatically analyzes videos and extracts highlights, streamlining the editing process and enhancing user-friendliness. I focused on simplifying the user onboarding process and designing feature interactions.
THE PROBLEM
Video editors have to manually watch the entire video to find and edit important clips.
Based on the interviews with 10 participants, I discovered pain points and key insights for designing the main features of Clipper.
-
Time-consuming and tedious process of identifying the most important moments in a video, especially when working with long footage
-
Missed opportunities, lost time, and missed deadlines due to the manual analysis of video content.
-
The need for a high level of expertise to identify the most important sections in a video.
-
The desire for an efficient and user-friendly video editing process to create effective advertisements that resonate with their target audience and meet their clients' needs.
GOAL
Designing an end-to-end experience that allows creators to easily edit videos based on data-driven components
01
How might we make it easier for users to identify the most important parts of a video using our app's STT technology?
02
How might we provide users with more customization options (e.g. keyword inputs) for how highlights are extracted and presented in the app?
03
How might we integrate our app with other video editing software or platforms to improve workflow and increase efficiency for content creators?
PROCESS
Ideation for features and experiences
I brainstormed the main features and categories for video analysis with the product management team and design team. I contributed to the selection of the categories for the video analysis. This selection was changed to keywords from each video in order to make the analysis specific to each video and to make the search process easier for the users.
Implementation of Earlier Design & User Testing
The early design was implemented on our website and the link was spread out for user testing. I participated in 10 think-aloud usability testing sessions and collected feedback on the user experience. Here's the feedback that I got from the users:
-
It's quick and easy to find specific parts of the video by selecting a keyword from the dropdown menu.
-
I feel like thumbnails are unnecessary because I can't really tell the difference. I wish the text size of the transcript was bigger. It's difficult to read.
-
I don't know which feature to start with. The layout is a bit messy for me.
-
I want to edit or change the time or text but it doesn't have that feature right now.
-
In addition to choosing a keyword from the dropdown menu, I wish there was a search bar that allows me to type a specific word to find a section.
Customer Journey
Based on user feedback and usability testing, I created a customer journey map to identify design elements that need improvements and to ideate possible solutions for user frustration. I focused on enhancing the user experience by creating a more intuitive design and setting up a better information hierarchy since most of the users reported that they did not know where to start and had a hard time understanding the video analysis results.
Information Architecture
I created several design iterations to improve the user experience by utilizing keywords and highlights extracted from the software.
Interface and Interaction Iterations
I created several design iterations for improving the user experience of utilizing keywords and highlights extracted from the software.
Sample of iterative design explorations
FINAL DESIGN
Overview
Sign In
This page allows users to securely sign in to the app with their unique credentials, providing access to all of the app's features and functionality. Users can create a new account or sign in with an existing account, and the app will remember their sign-in information for future use.
Subscription
This feature allows users to subscribe to a particular video creator's channel or content, enabling them to receive updates and notifications when new videos are posted. Users can choose to subscribe to all videos or specific videos, and they can manage their subscription preferences at any time.
Video List
This feature enables users to extract the most important parts of a video using the app's advanced STT technology. Users can select specific sections of the video to highlight or allow the app to automatically extract highlights based on key phrases or moments within the video. The highlight extraction page includes a preview of the original video, a timeline of extracted highlights, and options for exporting or sharing the extracted highlights. Users can also make additional edits or adjustments to the highlighted sections before exporting them.
Video Playbar Interactions
To develop an intuitive user interface for controlling the playbar of the video, I devised three distinct interactions to facilitate rapid navigation to a particular section of the video:
Chapters and thumbnails
One approach I employed to enhance the user experience in controlling the playbar of the video was to integrate chapters and thumbnails. By incorporating thumbnail images and extracted keywords, users can hover over a chapter on the playbar to preview the relevant section. By clicking the chapter, they can rapidly navigate to a specific section of the video.
Section
Users can also select a particular section to move to the corresponding chapter from the video.
Move to play section
Users can click on the 'Move to play section' button to play a specific chapter of the video that corresponds to the text.
Edit Subtitles
When the users want to change anything from the analysis, including the automated
transcript, time, and keywords, they can click the 'Edit Text' button and start changing them.
Arrange the Order of Video Sections
Users can switch the order of the sections by dragging and dropping the sections.
Export Subtitles & Videos
Users can export the analysis as Youtube subtitle (.sbv), STT video analysis results (.csv), subtitle file (.srt), and video format (.mp4).
Mobile Version
I also designed the mobile version of the application to allow users to easily analyze their videos and download the files in the format they want with their mobile devices.
Create and Edit Projects
Users first need to upload their videos to the application folder and create a project to start analyzing their videos.
Create New Project
Home: Project List
Edit Project
Export Video Analysis Results
Users can view the video analysis by tapping a project from their list and they can edit the subtitles. When they finalize the subtitles, they can easily download it by tapping the 'export' button.
Edit Text
Select Preset
Export
Outcome
Based on user testing and feedback provided by the potential users, I contributed to the product development process, enhancing the user experience of the product. By using user satisfaction and video editing time as key performance indicators (KPI), I measured the success rate of the final design.
Previous Experience
-
Poor visual hierarchy
-
No search bar for finding specific words from the analsysis
-
Sorting system that is irrelevant to some videos
-
Low readability for editing subtitles
-
Confusing editing system
New Experience
-
Improved visual hierarchy
-
Search bar available for finding specific keywords
-
Video sections sorted through keywords
-
Intuitive editing system
-
Video chapters to easily select a specific section
Key Performance Indicators
User satisfaction rate and video editing time were collected from 20 respondents. I was able to compare the results and measure the success rate of the new experience.
Previous Experience
+46%
-28%
User Satisfaction
Video editing time
New Experience
+90%
User Satisfaction
-52%
Video editing time
Impacts
Time-saving
The app can save content creators a lot of time and effort by automating the process of analyzing video content and extracting highlights, which in turn allows them to focus on creating more content.
Creativity
The app's STT technology can make the process of analyzing video content more efficient, which in turn can lead to faster turnaround times for content creation.
Accessibility
The app can make video editing more accessible to people who may not have the technical expertise or knowledge to manually identify the most important moments in a video.
User Feedback
-
The highlight extraction feature is a game-changer! It saves me so much time and makes it so easy to find the most important parts of my videos.
-
It would be helpful to have more customization options for how the extracted highlights are presented. For example, being able to choose different colors or styles for the highlight markers.
-
The video extraction page is a bit cluttered and hard to navigate. It would be great if there were more sorting and filtering options to help me find the specific sections I'm looking for.
-
The accuracy of the STT technology could be improved. It sometimes suggests the parts that are not important.
