Vidyard Trim
Vidyard is a video hosting platform. The platform enables users to record videos and then share them however they wish, whether it be email, chat apps, hosting on their website, you name it. Vidyard allows its users to customize the branding of videos as well as control the security options who can view them. What makes Vidyard powerful is its analytics and CRM/MAP integrations; the analytics empower users to understand and gage the success of their content. These features along with others make Vidyard a great tool for video communication.
Problem Space
Vidyard as whole values content generation as one of the key metrics for determining a successful customer. To encourage video creation, we offer a host of functions and features such as trim. Currently, trim is the 3rd most used function on the edit page.
However, it has its limitations and subpar experience. We do not allow our customers to trim specific parts of their content that are undesirable, requiring them to either re-record content or download the content, edit it externally, and reupload. Our customers’ ability to produce new content is either blocked or hampered as a result of refining old content. In summation, our customers are unable to fulfill one of Vidyard’s criteria for success; addressing this issue will unblock their ability.
However, it has its limitations and subpar experience. We do not allow our customers to trim specific parts of their content that are undesirable, requiring them to either re-record content or download the content, edit it externally, and reupload. Our customers’ ability to produce new content is either blocked or hampered as a result of refining old content. In summation, our customers are unable to fulfill one of Vidyard’s criteria for success; addressing this issue will unblock their ability.
Objective
Sample of old trim function
Initially our objective was to ensure that the trim functionality met the accessibility requirements. In Ontario Canada, it is law that software must meet the WCAG 2.0 accessibility standards or face legal and financial penalties. To meet the requirements, the team identified that modifications would need to be made to the functionality and UI. The product manager and I were aware of some shortcomings of the overall trim feature based on customer interviews and NPS responses. We proposed that since we were already making modifications could we also address some customer pain points and provide additional value.
HIGH LEVEL OBJECTIVE
How might we enable our customers to have more control over their video content post recording?
Research
Now that we had a direction, the project kicked off using our new process I developed working with our product manager and engineering leads. We wanted to conduct multiple methods of research to understand the use case and users. The methods were as follow;
|
User Testing
We conducted user testing sessions on our old trim functionality to determine what aspects need improvement and which are hindering them. We used usertesting.com to conduct the tests using a sample video with instructions to trim out a part of the video. At the end, we asked participants to identify parts they thought were difficult or confusing as well as their personal commentary. We made sure to observe participants to see how they interacted. We wanted to see their natural affordances and see where they get stumped, then how they go about trying to rectify the situation. Review Customer Support Tickets & Feedback
We gathered and synthesized all feedback into categories and documenting the number of issues in each category so we can prioritize needs. Competitive Analysis
We went through our direct competitors report process as well as popular data analytics platforms. We documented each one in the form of user journeys, marking any key benefits or drawbacks. |
User interviews
We conducted interviews with various members of our internal team (customer success, sales, and marketing team members) and external customers. Our internal team worked closely with the customers and had a good understanding how they use the product and what problems they are experiencing; as well our internal teams used the product in a similar capacity meaning they would experience some of the same issues. We wanted to understand why they needed to trim their videos, what is their recording to sending video process, what trim capability were they expecting, pain points, and what were their workarounds to some problems. We used the data captured from the interviews to help flesh out our key findings seen in the section below. Data Audit & Card Sorting Exercise
Audit usage of the function to determine how important it was to our users. We wanted to know how usage has affected retention rates to see if those that did use the feature were more likely to keep using it. Of those that did use it, we wanted to see how many were successful or not. Based on those who failed, we wanted to know where users were dropping off in the flow of trimming to see where we could focus our attention. |
Internal Vote Rank Exercise
We conducted an exercise involving product members from each team as each has expressed interest and concerns about our current trim functionality. I am unable to show the actual test itself due to NDA but I will describe it.
We gave the participants a lightning talk using a rough outline of the use cases and problem space based on raw research to prime everyone to be in the same head space. Afterwards we asked 3 questions for people to answer;
We conducted an exercise involving product members from each team as each has expressed interest and concerns about our current trim functionality. I am unable to show the actual test itself due to NDA but I will describe it.
We gave the participants a lightning talk using a rough outline of the use cases and problem space based on raw research to prime everyone to be in the same head space. Afterwards we asked 3 questions for people to answer;
- What do our users need from trim to achieve their goals?
- What pain points do our users experience with trim?
- If you could only give our users 3 new trim features what would give them the most value?
Everyone wrote their responses under each question. We grouped and sorted answers and gave each grouping a name. We then had everyone vote on the ones they felt the strongest about.
This exercise helped us gage our internal understanding of our users. Each member had their own perspective as they interact and receive feedback from different users across our product tiers. Each question helped us understand something different; what are the users’ problems, what are their needs, as well as give us feature ideas that we can use to develop a directional product roadmap for the feature. We used the votes to determine which features might take priority over others. The most voted features, we decided to explore those in our early iterations.
This exercise helped us gage our internal understanding of our users. Each member had their own perspective as they interact and receive feedback from different users across our product tiers. Each question helped us understand something different; what are the users’ problems, what are their needs, as well as give us feature ideas that we can use to develop a directional product roadmap for the feature. We used the votes to determine which features might take priority over others. The most voted features, we decided to explore those in our early iterations.
Key Findings
Our research uncovered much about our users and cases. In this section I will highlight the most important findings that directly impacted our project.
Mistakes & Missed Takes: A lot of times customers do multiple takes to get the video right. They want to be as perfect as possible. However, we are human and mistakes do happen. Whether it be a long pause, misspoken name, interruption by a doorbell, mistakes happen and our customers feel a level of stress to try to do it right the first time.
Roundabout Fixes: To fix these mistakes they either have to rerecord it or have to go the roundabout way of downloading, importing into editing software, export, and reupload. This also assumes the user knows how to use the editing software and does not require an editor (requiring a video producer increases the number of steps and time) Either way, this requires additional time to do, time better spent producing new content.
Caution Ahead: Even while editing content there can be mistakes or misclicks. Our customers have been requesting a warning message when they trim to avoid mistakes. Offering our customers a chance to take back a mistake or cut it out can give them a sense of relief, possibly making them feel more comfortable in front of the camera as we all fear doing something wrong.
Mistakes & Missed Takes: A lot of times customers do multiple takes to get the video right. They want to be as perfect as possible. However, we are human and mistakes do happen. Whether it be a long pause, misspoken name, interruption by a doorbell, mistakes happen and our customers feel a level of stress to try to do it right the first time.
Roundabout Fixes: To fix these mistakes they either have to rerecord it or have to go the roundabout way of downloading, importing into editing software, export, and reupload. This also assumes the user knows how to use the editing software and does not require an editor (requiring a video producer increases the number of steps and time) Either way, this requires additional time to do, time better spent producing new content.
Caution Ahead: Even while editing content there can be mistakes or misclicks. Our customers have been requesting a warning message when they trim to avoid mistakes. Offering our customers a chance to take back a mistake or cut it out can give them a sense of relief, possibly making them feel more comfortable in front of the camera as we all fear doing something wrong.
HOW MIGHT WE
How might we improve trim so that our users do not feel stressed or need to re-record their video?
Sales & Marketing Personas
Sales Persona
Needs
Cut out mistakes without needing to re-record Cut any unnecessary pauses or dead air Ensure content has no errors to reflect their professionalism |
Marketing Persona
Needs
Breakdown long form content into clip or teaser videos Post clips or teasers on social to promote long form content Cut unnecessary pauses or dead air or content not relevant Ensure cut properly captures everything they need to include |
|
Use Case
Records 1-1 videos sent to prospects and customers Each usually personalized so has multiple videos created consistently |
Use Case
Uses past webinars and long form videos; 30+ minutes long Uses short teasers or clip videos to promote long form content |
|
Jobs-to-be-Done
When a sales rep is interrupted during a recording to answer the door they want to continue recording and cut out the interruption so they don’t need to re-record or start over When a sales rep is trimming a recording where they stumbled on their words they want to preview what was trimmed sections so they make sure they cut out the right part and make the video look more professional |
Jobs-to-be-Done
When a content marketer finishes a long form webinar they want to trim it down by cutting the dead air and long pauses out so they can post the VOD on their website When a content marketer misclicks and trims off an important part of a long video they want to be able to undo the trim so they don’t need to re-record or go through the lengthy recovery process |
User Testing
Our user tests of the existing trim feature revealed multiple problems, so we decided to focus on the most common of them all.
EXPLICIT PROBLEMS
- Bouncing between timelines since they are not synced (player and trimmer)
- Trouble positioning scrubber and knowing exact time of scrubber
- Not sure if they trimmed the right part
- Cannot preview trim
- Cannot find play control (since on the player not trimmer)
Usage Data
Here is a screenshot from our usage data presentation to give an idea what we were looking at.
Competitive Analysis
Our competitive analysis revealed that the work we were planning on doing would provide a significant value proposition compared to competitors. Below are some of our major findings;
- Our major competitors such as Wistia and Vimeo either do not have a trim function or is very limited (only trims ends)
- Majority of our competitors included; a timeline, scrubber, undo, redo, trimming ends, splitting footage, and previewing trim. For splitting (splitting a timeline into 2 segments); majority have the user place the scrubber at the point for splitting and use the split button to initiate.
- Majority include a revert to original function after a trim has been executed close to where the video is found. Additionally, each provides a visual difference to indicate which footage is which.
- None of our competitors indicate how long a trimmed segment is explicitly nor do they use input fields for precision trimming
Solutioning
Based on all of our research, we determine that the best course of action would be to come up with a long-term strategy for several reasons;
- Value opportunity; we had the chance to get a leg up on competitors while addressing a significant amount of customer requests/support tickets
- Engineering constraint; Limited engineers to do the feature work and address tech debt in the feature area
- Timeline; accessibility work required would not be able to be done within a single quarter but we also wanted to make improvements afterwards
Our product roadmap for the feature would provide improvements over time. We ran several design workshops including PMs and engineers to come up with a “North Star” concept with all the bells and whistles so to speak. This took the form of a feature list and we broke it down into iterations by using a vote ranking exercise to determine effort and customer value for each. Our iterations would still provide value to our users and customers while on a steady delivery cycle.
Our first few iterations or phases looked like so;
Our first few iterations or phases looked like so;
Sketching
I generally like to start with text based info architecture and sketches. I can produce sketches a lot faster to come up with different ideas and wireframes. I referenced our competitors (both direct and indirect competitors) screens and flows to generate ideas.
|
|
Wireframing & Exploration
I generally like to start with text based info architecture and sketches. I can produce sketches a lot faster to come up with different ideas and wireframes. I referenced our competitors (both direct and indirect competitors) screens and flows to generate ideas.
Wireframes
I ended up doing multiple iterations of exploration. I tried different layouts and styles of components. I had to make sure each component was modular and would scale to what we wanted to do in our “North Star”.
Timeline Colour Testing
|
Timeline Handles Testing
Timeline Scrubber Testing
|
Final Mocks & User Flow
After multiple rounds of exploration, feedback, and user testing we arrived at our mockups for the first 3 phases. We decided that at the end of each phase we would monitor and record any feedback once live and apply any necessary changes to the next phase. Each design phase builds off the previous. Some features could not go straight to the “north star” designs due to engineering time limitations so I had to make sure each design naturally progressed into the other.
Phase 1 - Accessibility
The WCAG 2.0 accessibility requirements needed to be done first because there was a hard deadline for its completion. In this phase, we made accessibility adjustments which included changing the trim timeline and included inputs for the beginning and end of a trim for more precision.
The WCAG 2.0 accessibility requirements needed to be done first because there was a hard deadline for its completion. In this phase, we made accessibility adjustments which included changing the trim timeline and included inputs for the beginning and end of a trim for more precision.
Phase 2 - Splitting
Phase 2 included a number of improvements but also the ability to split footage. You will notice the timeline slightly changed in design in this phase to accommodate additional functionality. In each phase the timeline slightly changes to reach the end state.
Phase 2 included a number of improvements but also the ability to split footage. You will notice the timeline slightly changed in design in this phase to accommodate additional functionality. In each phase the timeline slightly changes to reach the end state.
Below you will find a general user journey flow diagram (password protected), major components states, and a list of the additional features and adjustments made in this iteration;
Trim User Flow
|
|
|
Preview: Users could preview their trimmed video before saving. Also they would be able to see how long their trimmed video would be compared to the original length
Split: The primary feature for trimming out middle sections. As seen in the user journey, users would move the scrubber on a section of the video and click the split function which would make the section split into two. Each section or segment would have their own handles, time length, and inputs to adjust the beginning and end. So a user could shorten a segment which would in turn trim out a middle portion of the video.
Undo & Redo: In case of a mistake, a user could take back or redo an action while trimming. However, if the user clicks “save”, the session history would be erased thus the user would not be able to undo or redo actions prior to saving. That is what “revert to original” is for ;) NOTE: this feature got moved to phase 3 due to time constraints
|
Single Timeline: Removed the timeline on the video so there is only one
Timeline Adjustments: As mentioned the video can be split into multiple segments. Each segment would indicate how long it is and they would be selectable; add the handles at the ends of the segment to adjust the length. In addition, inputs would appear below the selected segment, each input field would represent the start and end of the segment itself. We kept the handle design the same because it was easier to click; the biggest complaint about our competitors and video editors was the fact users could not click the handles when the segment got really short so we wanted to address that issue with this design (see above exploration images). The scrubber adjusted to be more in line with other video editors and accommodate future phases of work; the scrubber would also indicate the time stamp as it is dragged along the timeline.
Revert to Original: If the user previously trimmed the video, they could revert it back to the original video length
|
|
|
|
Phase 3 - Future
The last phase of the work was more future-sighted as our “North Star” design as well as ensuring the features additional capabilities worked with other existing features such as captions, analytics, and CTAs on videos. The most significant addition in this design is the stitching functionality. In this phase users would be able to stitch multiple videos together via an “add videos” button at the end of the timeline. As you can see the timeline further developed to include a thumbnail and name of the video showing the end state of what we wanted the timeline to look like. In our research we talked about users using video editing software to trim but they were also using it to stitch videos together. A common use case we saw was users wanted to stitch intros and outros to videos instead of having to record it each time.
The last phase of the work was more future-sighted as our “North Star” design as well as ensuring the features additional capabilities worked with other existing features such as captions, analytics, and CTAs on videos. The most significant addition in this design is the stitching functionality. In this phase users would be able to stitch multiple videos together via an “add videos” button at the end of the timeline. As you can see the timeline further developed to include a thumbnail and name of the video showing the end state of what we wanted the timeline to look like. In our research we talked about users using video editing software to trim but they were also using it to stitch videos together. A common use case we saw was users wanted to stitch intros and outros to videos instead of having to record it each time.
It should be noted that at the time of writing phase 2 was in progress so we did not have any feedback yet to see if this phase would need any adjustments. I also departed Vidyard while phase 3 was being fleshed out further. If I were to have continued working on this project, I would have begun user journeys and user testing the designs.
