8 weeks internship project • Product Design Intern
DCO.AI is a B2B2C start-up utilizes speech-to-text technology to make finding information within video easier. The company is collaborating with video-based platforms while also improving their Chrome extension (DCO TagStream) to showcase its value for YouTube viewers. Below is the look of original DCO TagStream.
In this project, I worked with CEO, project manager, and 2 engineers. As a product design intern, I redefined the information architecture & user flow, brought up discussion within the team, created interactive prototypes to articulate design decisions, and validated the design by usability tests.
People loves to learn with Videos. According to Kaltura's report, among 1,400 participants in their survey, 98% of respondents see video as having a part to play in personalized learning experiences. In the same report, similarly, 98% of respondents anticipate self-paced curriculums as a trend of future learning.
According to YouTube statistics, there are 500M views of learning-related content on Youtube every day. And 86% of the U.S. viewers say they often use YouTube to learn new things.
Since more people are using online video as learning content, we want to exploring how DCO TagStream's auto-generated transcripts, recommend tags, and bookmark features can empower learners utilizing online videos to personalize their experience.
DCO TagStream helps you scan video content quickly, mark what you think is important, and archive these contents for your future needs.
Semi-structured Interview
I asked the current users: How do you feel about the product? How can we improve it? What is the most valuable feature to you?
Contextual Inquiry
I asked potential users: What do you learn on YouTube? Could you walk me through how do you learn these things on YouTube? Can you try to create a bookmark to this video?
Market Research
I conducted research on finding out who are our direct competitors? What features have been launched on YouTube and Chrome? What is our product niche?
System Structure
The information architecture was confusing and did not support actual use case.
User Flow
The user flow of primary features violated usability heuristics such as the visibility of system status & user control and freedom.
Visual Representation
The UI elements did not properly represent its function.
I also mapped out the behavioral pattern for online learners. With this pattern, I can identified the primary features of DCO TagStream and regroup the features by their overarching value to the users.
I use the each stage of the behavioral pattern as the base to study features on both YouTube & Chrome. I identified the ones supporting similar functions and listed the pros and cons of each features. This findings helps us define the product value of DCO TagStream as a stand along product in this crowded solution space.
I started the design by specifying the design goal and requirements based on research findings. Below is the high level overview of ideation, process, and the decision making of designing this feature.
Let users utilize recommend tags to navigate video efficiently.
① Let recommend tag be the suggesting terms for searching transcript
② Group the recommend tags that represent the same term/word
③ Indicate which part of the video a tag refers to.
Following these design requirements, I ideated & assessed 3 options of user flow for this new feature. I chose option 2 for it allows users to understand the full context by both text & video & interact freely with the transcript.
Option 01
ⓧ Knowing time before the context
ⓧ Lots of scrolls within dropdown menu
Option 2
✔ Knowing full context by both text & video
✔ See the location of every search result before jump to specific part of video
Option 3
ⓧ Missing context within transcript
ⓧ Extra clicks to travel between pages
Could you walk me through how to find a sentence represent the concept of "kick-off meeting questions" in the video?
① The arrow icon does not look like it's clickable.
② The transcript is a little bit overwhelming.
For this existing feature, I started with redefine information structure and user flow. Then I ideate the and created lo-fi prototype based on the adjustment.
Let users mark the valuable part within the video
① Reduced confusion between recommended tags and customized bookmarks.
② Clearly indicate the time where bookmark is added to.
③ Be able to add notes to the bookmark.
④ Provide easy access to the feature.
The origin flow frustrated the users because when click on "add customize bookmark", the single action triggers two functions. According the the feedback, most user were no a fan of the "adding bookmark with recommended tags" function. Therefore, I proposed to eliminate the function and let users focus on adding a single bookmark at one time.
.jpg)
Could you add a bookmark at 1:44 to this video? Could you try starting from the "My Bookmark" tab?
① Clearly indicate the function of control buttons when the button is on hover.
② A video control under bookmark timestamp can save users' time.
Let users easily recall where the bookmarks are.
① Add elements that help users recall bookmarks location such as video title, thumbnail, and video channel in the history section.
② Help users group their videos under "Topic List."
I started out with listing all the elements to be include in the history section and ideating how its would looks like. Then I assessed each option and chose combination of option 1&3 to give give users both ways to find the video.
Option 1
✔ Focus on searching video within a single topic
ⓧ Extra clicks to travel between pages
Option 2
✔ Only shows detailed information after users click on the list title
ⓧ More scrolls & clicks to see the topic lists & its content
Option 3
✔ Quickly navigate to a specific topic
ⓧ All the videos are shown in a page, not friendly to expert user
Assume you want to go back to a bookmark (Design Workshop) in another video, which talks about the idea of UX workshop design. Could you walk me through how you find it?
① Changed the name of "history" section to "all bookmarked video" section.
② Adjust the card into full-width.
Let users add a video & its bookmarks to specific topic lists
① When users add a bookmark, the video is recorded within the "Bookmarked video section" (default)
② Allow user decide which topic lists a video belongs to
③ Allow user to add video to specific topic list without creating a bookmark
Based on the design requirement, I added two access for users to add the video to the topic list.
Could you add this video to both "UX" and "UX Method" topic list? Could you add this video to a new list called "Meeting Questions"?
① Add a snack bar as feedback after video is added to topic lists.
Dean find a YouTube video about "Starting a New Design Project." With DCO TagStream, he skims through the video content with auto-generated transcript and discovers concepts by recommended tags.
After skimming through the video, Dean watches the part of the video that is relevant to his learning. Then he adds a bookmark "kick-off meeting questions" at 1:44, where he marks it and would want to come back for the information later.
After watching the video, Dean likes its content a lot. Therefore, he adds it to his "UX Method" video collection.
Dean realized that a video in his "UX Method" topic list also mentions facilitating meetings. He remembers the content is related to something about "workshop." Therefore, he goes to the video collection, and found the specific video.
In this project, I put a lot of effort in exploring how DCO TagStream can provide features that distinct from existing features on compatible product such as YouTube. However, it is possible to incorporate some of their existing features into TagStream. For example, Youtube video owner can easily create chapters to make video easier to navigate. Indicate the chapters could be a useful information to users while they are adding a bookmark.
The outcome of taking ownership of the project always amazed me. As the only product design intern in the team, there were times I proposed to initiate interview sessions & brainstorming workshops. After I explained the value of these actions, I am very lucky that the team always supported me with the resources the team had at the moment, and always appreciate that we speak out for our own work.