top of page

Create Video Markup Tools for a Screen Recording App Snagit

Make communication easier through integrating interactive video markup tools

iMac 24 inch (3).png

The Problem

Snagit is a visual communication tool developed by TechSmith. It makes sharing easier with screen capture and video recording. Whereas Snagit has a screenshot markup feature, it does not allow users to edit or markup video recordings. Snagit users have to switch to a different software to complete video annotation and editing.

Therefore, we collaborated with our client TechSmith to create new interactive video markup tools that would make communication more efficient and flexible for Snagit users.

Screen Shot 2023-02-06 at 4.25.48 PM.png
Screen Shot 2023-02-06 at 5.00.01 PM.png

Current Snagit Workspace for Screen Recorded Videos  

Understanding the Problem

Product Differentiation

Snagit users are currently using other platforms for video markup. We not only face external competition but also have an internal competitor Camtasia, which is a popular advanced video editing software. Therefore, our design needs to make the product stand out from both competitiors.  

Key Aspects of the Challenge

Our solution should be a unique one that meets the users' needs, makes the video markup integration seamless, and increases user retention through expanding the use and value of Snagit.  

The Goal

Make communication easier for Snagit users through creating interactive markup tools for their screen recordings. 

Competitor Analysis

We looked into apps with visual markup features in general to find out about the most common features they have, since our goal is to make our product simple and only keep the essential features.

Competitor Criteria:

Screen capture or video editing tools with visual markup features


The top 3 common markup features of our major competitors are Text, Shapes, and Arrow. 

Frame 76 (1).png

User Interview Findings

We learned about the common key features that our competitors provide through competitor analysis. However, we needed to consult our target audience for more detailed use cases, pain points, and needs at a higher level. Therefore, we conducted semi-structured interviews with 8 Snagit users and used Affinity Wall for interview analyses.

Who Are Our Target Users

According to the results of our user interview analyses, our target users are:


Not very experienced with video editing
Use Snagit to capture 
short videos
Mainly use it for internal and external communication at workplace

persona 2-1 (1).png

Users' Needs for Video Markup Tools


1. Our users are not experienced in video editing skills, so they want the video markup tools as simple to use as possible.

2. Users need to use tools to draw viewers’ attention to specific content.

3. Need fun & entertaining tools to engage their viewers.

Untitled design.png

Percentage of Users Who Suggested the Feature for Video Markup

User Workflow of Using Edited Recordings for Communication

Insights on the Essential Features: Compare Results from Competitor Analysis and Interviews


After comparing the findings from competitor analysis that the most common features our competitors offer texts, shapes, and arrow, we discovered that user interviews are giving us similar results with texts, circling, and arrow emerging as the top three mentioned features.


Combining results from competitor analysis and key findings from user interviews, we started to brainstorm using Crazy 8's and sketched initial ideas for each key findings. In order to meet the goal of making the markup tools as simple to use as possible, we decided to only keep main features: Text, Pen Tool, Arrows, and Sticker/Emoji. 

IMG_2018 1.png
[Snagit] Affinity Map & Ideation (6) 1.png

Ideation Results with Solutions


 Fun & Entertaining

Solution 1:
Including stickers and emojis to have an element of joy


Simple & Easy to Use

Solution 2:
Eliminating all but the most essential markup tools. Combining multiple functions and using single track timeline.


Directing Users' Focus

Solution 3:
Developing markup tools (arrows, text and pen) that guide viewers' attention to specific content.

Initial Prototype

In order to quickly create prototypes for testing, we decided to use a combination of screenshots and new design components for our initial prototype. Only keeping four features on the top menu bar, we utilized drop-downs to include sub features that could go into those four categories.

Leverage Existing Mental Models

Use a similar layout from Snagit's existing screenshot editor to reduce learning curve

Keep the Top Menu Bar Simple

Combine features to only keep the 4 main tools on the top.

As an alternative for the shape feature, smart pen is created under the pen tool to allow users to draw perfect shapes 

Single-Track Timeline

Different from Camtasia's powerful yet complicated multi-track timeline, we stick with single track to minimize confusion and make things easy for our users

Find pen (1).png

Usability Testing

We chose a task-specific approach for usability testing after we discussed with our client. Since the video markup tools will be a completely new set of features to Snagit users, it would be a great option for us to evaluate the learnability of the system. 


In order to simulate internal communication between colleagues, we created a fake design with 2 errors that our participants will need to point out using the screen recording and video markup tools we prepared for them.

Tasks Background for Participants:
You are on the design team at Canva. Your colleague just created a new interaction screen for expiring free trial. Noticing that there are 2 errors in the design, you screen recorded the interaction and now will use Snagit video markup tools to point out those errors to your colleague.

Task 1: Fix Error 1 (Change Color)

Group 460.png

Task 2: Fix Error 2 (Fix Typo)

Group 461 (1).png

Key Issues Found From Usability Testing


Some features are difficult to discover


Unhelpful features that participants wouldn’t use

Descriptions need to be more clear


Unintuitive icons that are confusing

Screen Shot 2023-02-10 at 6.24.32 PM.png

Evaluation Sheet for Usability Testing

Design Revisions

According to the key findings from usability tests, we got rid of unhelpful features, added succinct descriptions, rearranged some features so that they could be easily found, and redesigned the timeline to make it simple and clear.

Removing Highlighter Feature

Participants had a hard time finding the highlighter feature, and from the sessions we found this feature to be less effective than using the smart pen feature to direct viewers' attention. 

Find pen (1).png

First Iteration

Pen (1).png

Second Iteration

Clarifying Smart Pen Feature
Participants couldn’t understand what Smart Pen is and how it would work. To let users know how they could utilize it, we added a short description of the feature. We also removed the drop down under the pen tool and made this feature purely as a tool property.

Group 458.png

First Iteration

Screen Shot 2023-02-10 at 11.49.57 PM.png

Second Iteration

Adding Delete Button
Participants looked for a delete button to delete elements. We first added it on the menu bar, but after a second round of usability tests, we decided to move it to the pop-up menu, closer to objects, to increase efficiency.

Screen Shot 2023-02-11 at 12.04.10 AM.png

First Iteration (No Delete Button)

Screen Shot 2023-02-11 at 12.06.10 AM.png

Second Iteration

Text (1).png

Third Iteration

Final Prototype

Simple & Minimal Features

Fun & Entertaining Elements

Single-track Timeline

Limited Options to Increase Efficiency

Mac Studio (1).png
Simple to Use Interface

Smart Pen Feature
Draw perfect shapes with simple gestures

Simple Duration
Quickly Customize the duration of markup elements

Hover Thumbnail
Hover over timeline to preview the video content

Fewer Font Size Options
Limit font size options to make editing faster

Fun & Entertaining Communication

Fun Interaction
Add a sticker / emoji to your videos to make collaboration fun

Recently Used
Keep recently used stickers / emoji handy by putting them on the top

Directing Viewer’s Attention

Arrow Tool
Add an arrow to guide the viewer’s attention to a specific spot

Text Tool
Communicate and provide instructions for the viewer

Single-track Timeline
Drag and edit elements easily on a single timeline




Enhance communication for
24 million current Snagit users


Transform the way we share ideas and collaborate


Leveraging mental models.

During our usability tests, we discovered that even if participants were asked to perform a task on a web app, many of them still have a mobile mental model when they tried out the new features. Nowadays people spend more time with their phone and their habits have changed. Incorporating some common mobile interactions to designing web apps could sometimes be helpful.


Less is more, but less is also difficult.

Designing a simple web app involves a lot of decision making in the early stage. As we received a lot of feedbacks from users, we tend to deviate from our original plan of keeping everything simple. We have to be well aware of the problem statement and goals throughout the process in order to stay on track.

More Projects

Frame 11 (1).png
Group 79.png
Frame 12.png
bottom of page