RippleAI: AI Video Analysis Tool
RippleAI 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 your video.
My Role
Timeline
UX Design,
Visual Design,
User Research,
Prototyping
1 Year
Tools Used
Figma,
Principle
Team
2 UI/UX Designers
1 PM
2 Developers
Overview
Prompt
Editing long videos can be a tedious and time-consuming process, especially when trying to identify the most important moments. It can be challenging to pinpoint the highlights of a video, which can result in wasted time and frustration. This is a common problem for content creators, vloggers, educators, and anyone who wants to create engaging video content. Additionally, the traditional process of manually analyzing video content is not only time-consuming but also requires a high level of expertise. To solve this problem, our app uses STT technology to automatically analyze videos and extract highlights, making the editing process more efficient and user-friendly.
How Might We Questions
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 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?
User Research
Target Users
-
Content creators
-
Tech-savvy individuals who are interested in new ways to extract video highlights
Research Methods
-
In-person interview
-
Online research
Pain Points / Key Insights
Based on the interviews with 8 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 lengthy 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.
How might we make it easier for users to identify the most important parts of a video using our app's STT technology?
Ideation
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.
Information Architecture
I created several design iterations for improving the user experience of utilizng keywords and highlights extracted from the software.
Implementation of Earlier Design
The early design was implemented in our website and the link was spread out for user testing. Here's 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.
Based on the user feedback and usability testing, I focused on enhancing the user experience by creating a more intuitive design and setting up a better information hierarchy.
Design Iterations
I created several design iterations for improving the user experience of utilizng keywords and highlights extracted from the software.
Sample of iterative design explorations
Main Features
01
Overview
02
Login
This feature 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.
03
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.
Payment Plan
Card Information
04
Video List & Section Analysis
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.
05
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 the video that corresponds to the text.
06
Edit
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.
07
Switch the Order of Sections
Users can switch the order of the sections by dragging and dropping the sections.
08
Export
Users can export the analysis as Youtube subtitle (.sbv), STT video analysis results (.csv), and subtitle file (.srt).
Mobile Version
I also designed the mobile version of the application to allow users to easily analyze their videos and download the file in the format they want with their mobile devices.
01
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
02
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 the 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
Success Rate
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%
User Satisfaction
28%
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 Testing 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.
