Camtasia:

Toolbar Redesign Case Study
USER INTERFACE DESIGN
INFORMATION ARCHITECTURE
DESKTOP

Camtasia is widely used by people to create and record video tutorials and presentations. It aims to simplify the video editing process to help users produce produce projects that look professional. Partnering with Techsmith, we identified an opportunity to streamline the search process for tools and to develop a more efficient toolbar enabling regular users to spend less time on their video editing process.

MY ROLE
Team Leader
User Interface Designer
TIMELINE
3 Weeks
TOOLS USED
Google Suite
Figma
Adobe Photoshop
Pen and Paper
BACKGROUND
The Software

Camtasia is a software application used for creating video tutorials and presentations directly via screencast or via a direct recording plug-in to Microsoft PowerPoint. Most people use it for recording their computer screens to create instructional videos, presentations, and product demonstrations, allowing them to edit the video content, add annotations, effects, and audio, and share the final product in various formats.

Project Scope

At the beginning of the project, the client mentioned that they are giving us options to either approach the problem as general or as in-depth as we would like. We decided to focus on reorganizing the toolbar as user data from TechSmith suggests usability issues.

USER RESEARCH

To ensure that the app meets the needs and preferences of our target audience, we have defined their needs to help guide our team's research. This process involved gathering feedback through user testing, interviews, and checking secondary research materials such as community forums and reviewing past usability testing data.

User Need Statement

Regular users of Camtasia need to quickly and efficiently find tools that would be useful to them so they can spend less time on the video editing process.

Understanding the Software

Before this project, our team haven't really heard of Camtasia and any of its features. Additionally, only a few of us have experience with video editing. We understand that in order to align and empathize with users better, we must experience using the software first. In order to achieve this, we tested the software and brainstormed our ideas and impressions via Google Jamboard. We also continued brainstorming by analyzing the needs of the stakeholders involved.

Secondary Research through Community Forums

We wanted to check the Camtasia's community forums to see if we can find any relevant user feedback that could give us more insight about the usability issues behind the tools and their classifications. However, after reviewing the community forums, we realized that the majority of the issues that were brought up were relating to specific technical support issues rather than issues about not being able to find tools within Camtasia.

Interviews

After failing to get useful feedback from the forums, our team interviewed TechSmith's UX designers to help us get more insight from past design iterations and usability results. There are three main issues came up during our discussion.

Callouts and Arrows

Techsmith noticed that there is a significant number of users that have a difficult time finding callouts and arrows which are some of the software's main capabilities.

Number of Tool Categories
They also recognize that Camtasia may have too many tool categories, possibly at different levels of specificity.

Naming Issues
There are also some concerns that their internal language and naming of features may have bled into the customer-facing interface. They wanted to look at the split of Animations and Behaviors where this could possibly be an issue.

We also had users with various video-editing skill levels test the current software by performing common Camtasia tasks such as adding annotations, animations, and other visual effects. Combining this with the most recent usability testing data from TechSmith, we were able to observe patterns and recurring themes in user pain points and challenges.

User Personas

After conducting our research, we have identified common pain points and areas of improvement, which informed the redesign and development of the toolbar.

Emily, 35

Freelance Graphic Designer
INTERMEDIATE

Uses Camtasia mainly for creating quick tutorial videos for clients on how to manage their branded content.

Pain Point
Emily notices that locating specific tools in Camtasia, like callouts and arrows, often takes up a significant portion of her workflow.

Alex, 42

Corporate Trainer
BEGINNER

Alex started using Camtasia recently to enhance his training modules and instructional materials.

Pain Point
Alex occasionally finds himself confused by the organization of features, particularly when trying to apply dynamic elements to his presentations.

Tom, 52

University Professor
ADVANCED

Tom regularly uses Camtasia to create educational content and lectures for his Digital Media course.

Pain Point
Tom feels that the way the tools are named and grouped can still be confusing at times.

FINDING SOLUTIONS
Toolbar Analysis

Analyzing the current toolbar architecture, we observed that different categories have different levels of nesting and that some of the categories next to each other are not particularly related in some cases. So we analyzed how we can improve the toolbar architetcure by doing some whiteboarding work and analyzing potential groupings and classifications.

PROBLEM 1
Tools seem to be arranged in a random order

After doing the toolbar analysis and and understanding the common video editing process of users, we grouped the tools according to their functions and separate them into five different classifications.

After grouping the tools, we wanted to make sure that the order we put them in worked best for our users. We sent out a survey to various people with video editing experience to find out what order to put the groups in based on which processes they tend to do first when editing a video. This is the resulting order based on that survey:

Media Import

Audio Editing

Text Editing

Visual Enhancements

Interactivity

After figuring out how to group and order them, we created multiple prototypes to see how to visualize this best. The current interface shows a darker tab background color when a tool is active. No separators or apparent grouping can be seen.

For our prototypes, we explored different ways to highlight the separation of groups. Ultimately, our respondents found the most success determining the groups using the binning method. By using the rounded rectangles to group the like tools, we utilized the principle of common region to help our users distinguish the groups apart.

PROBLEM 2
Annotations can be confusing for some users
SOLUTION 1

Split the annotations category and create another toolbar option called Text and Shapes.

We removed the Callouts, Arrows and Lines, and Shapes tools from the original Annotations group and put them into the new Text and Shapes category. We kept tools such as Blur & Highlight, Sketch Motion, and Keystroke Callout from the existing Annotations group. By removing the three elements from annotations and creating the new category, our hypothesis is that users would be able to find these tools more efficiently since our research indicates that users would most likely associate these terms as text and shapes than annotations.

Note from future Jam

As it turns out, some of our respondents were not exactly sure what "callouts" are. Since we removed it along with arrows, lines, and shapes, this might've affected the results of our usability testing when they were asked to look for only callouts 😬
SOLUTION 2

Keep the Annotations category but change the glyph

After removing the tools from Annotations, we decided to keep the original name of this category. However we were left with the old glyph which is similar to the Callouts icon which is now in the Text and Shapes category. In order to avoid confusion we decided to change it to to a highlighter glyph, signifying to the user that this tool allows them to "annotate".

PROBLEM 3
Users don't know the difference between Behaviors, Animations, and Transitions
SOLUTION

Merging behaviors and animations

We also conducted an analysis of the tools under the visual enhancements classification. We observed that the actions inside the Behaviors and Animations tab are more related to each other (in-place movements) as compared to transitions where it moves from one media or element to another (transitional). Because of this, we decided to remove the behaviors tab and relocate its contents under ‘Animations’.

Note from future Jam

With Jakob's Law, it is said that users will transfer expectations they have built around one familiar product to another that appears similar. In our case, to address the naming issue of some tools, we were inspired by the simple "Animations and Transitions" options that Microsoft Powerpoint offers and how you can create a textbox within the Shapes tool of both MS Word and Powerpoint, hence the "Text and Shapes" category from the previous solution.
INTERACTIVE PROTOTYPE
DESIGN VALIDATION
Usability Testing

We had twenty (20) users test the new toolbar redesign by asking them to perform video editing tasks and choose the corresponding toolbar tab for them. We looked at their success rate.

Adding an arrow to point something out

Before
0%
After
70%

Adding a shape without text

Before
10%
After
100%

Making text fade out of the screen

Before
10%
After
45%

Zooming in on a picture in your video

Before
10%
After
20%

Adding a callout to a video

Before
50%
After
40%
Note from future Jam

With the redesign that we have implemented, the callout tool categorization is the only change where we notice a decline in the success rate. We recommend to keep the callouts feature within the Annotations tab and to create new design iterations and conduct more usability testing in the future to prove this hypothesis.
TAKEAWAYS

Even though we have seen some improvements in usability in some aspects of the redesign, we also saw some parts where it got worst.

We think adding the "Text and shapes" tab significantly helps reduce the confusion for users when looking for those two elements. However, if we were to change something, we would move the callouts tool back to the annotations tab since the success rate decreased after the redesign.

As per the behaviors and animations, although we have seen an increase in the success rate of our users, this should be investigated further since the results are still relatively low. We recommend looking at other ways the tools can be grouped, considering renaming the tabs or redesigning the glyphs.

Additionally, one of the things that the design challenge also asks is to make it more efficient for users to find tools. We did this by sorting through the current design and categorizing the tools within their classifications. However, we should have quantified whether this was helpful at all. This should be tested in future redesign iterations.

REFLECTION

For this project, I assumed a leadership role starting from the beginning and established a project timeframe for our team members. As a leader, I also made sure to get the input and suggestions of everyone whenever we were making decisions and moving through the project's development until we could come to a consensus about the significant points of our plan.

This project was the very first UX design project I took on. One of the highlights of working on this project is being able to collaborate with the members of my team. Hearing different perspectives and insights helped me check and evaluate my understanding of the concepts of designing user experience. Another challenging aspect of this project is working on a short timeframe (3 weeks) and a tight deadline. Establishing a structure and timeline to finish all the different parts of the process became the key to keeping the workflow going and keeping the processes in check.

BACK
TO TOP