Overview.
Imagine you are a teacher who wants to create and share engaging video lessons with your students. You have heard of Loom, a video messaging platform that allows you to record and send videos with ease. You decide to give it a try, but you soon realize that there is a problem. You have to manually add chapters to your videos, which means typing the timestamps and the chapter titles for each section of your video which is tedious and time-consuming.
My goal was to design a better solution for adding chapters to videos on Loom, using a user-centered approach. In this case study, I will walk you through my design process and showcase my final design solution. I will also share the results, key learnings, and future prospects of my project.
Problem Statement.
"How might we improve Loom’s chapter feature resulting in increased viewer engagement and user satisfaction."
The WHAT, WHY and HOW of Problem Statement
WHAT is the Problem?
Manually adding timestamps and title of each chapters which is tedious and time consuming.
WHY the Problem?
First thing which I noticed was it was a time taking process to create a chapter.
Secondly, user have to type out individual timestamps and chapter title which I noticed was quite a hassle.
HOW is the Problem Solved?
A Loom UI where the user can create chapters with just a click of a button rather than typing out individual timestamps, chapter title.
Targeted Business Metric.
Solution.
Just in case you not going through the entire case study. This is the final prototype of the redesign:
This is the final UI with all the necessary changes after Usability testing.
Presenting Solution.
Before I dive deep into the entire design process, let me give you a brief overview of the solutions that I came up with by comparing the original UI and the Revamped UI.
Original User Interface:
This is how in the present UI the chapters are created - Have the manually write down the timestamps and also the title name.
This is how the individual chapters represented in the progress bar of the video in the present UI.
Revamped User Interface:
In the revamped UI this is how the chapter is created. Here users are given the option to create a chapter with just one click of a button.
In the revamped UI after the user clicks the button they get the next step which is to write the title of the chapter.
In the revamped UI, the chapter is seperated as cards, which not only gives users with a visual cue about the chapter content but also provides the flexibility to individually delete a particular chapter or edit them.
Critical Decision which shaped my Design Process.
Before I created the final decision there are certain critical design decisions which actually shaped my overall design process.
From the analysis what I realised was placing the create chapter button on the bottom task bar was better than the side panel on the screen. The primary reason being it makes the button more accessible and easy to reach. Also they do not make the side panel cluttered. Also it comes under the three primary function a user will perform while watching the video.
UI and Component Architecture.
The first thing I did was to create the components and the variants which are required for designing Loom. The design system which Loom use is called Lens.
However, I was not able to access their design system figma file. Therefore, I designed the components which were needed for the project.
Brief Overview of the PROCESS.
Use Cases Explanation:
There are different use cases of the new feature “adding chapters with One Click”.
A product manager is creating a demo video showcasing the features of a new software release. Instead of manually adding timestamps for each feature, the product manager utilizes the one-click Chapter feature to mark key functionalities. Viewers, such as potential clients or internal stakeholders, can effortlessly navigate to chapters like "User Interface," "Integration Features," or "Advanced Settings" with a single click. This use case not only simplifies the video creation process for the product manager but also enhances the viewer's experience by providing an organized and accessible overview of the product's capabilities.
A teacher creating an instructional video for a complex subject wants to ensure students can easily navigate and review specific topics. With the one-click Chapter feature in Loom, the teacher seamlessly adds chapters at the beginning of each major topic.
Discover Phase:
Heuristic Evaluation
Before, I could dive deep into the research, I needed to understand the current issues of Loom. For the evaluation of the app I tried to understand the problems using 10 Heuristic Principles.
Assumptions and Hypothesis
These were some of the assumptions and Hypothesis taken into consideration:
Desk Research
Before I could move ahead with any ideation phase, I needed to properly define the problem and for that, I needed to conduct some desk research, I looked on the internet if I could find any information regarding chapter creating on Loom and this are the results I found most relevant and important to the case study:
I realised from the following two data is that, chapter play a vital role when it comes to viewer engagement.
Competitor Research
To dive deep into the secondary research I needed to go deep into the research for that I wanted to understand what competitors are doing in the market? How are they solving the similar issue?
Therefore, I went with these two competitors in the market:
YOUTUBE
VIMEO
Primary Research
My first step was to conduct a short survey to filter out my ideal users. To conduct the survey I asked them few basic questions about Loom usage and pattern and this is the data I ended up with:
After the survey I ended up with few ideal users who are suitable for the interview. In the following step after the survey I ended up with the following:
- Targeted Users
- Points which I need to observe during interview
- Questions I need to ask (it was a moderated user interview)
These where the PAIN POINTS observed:
Define Phase:
Validation of Hypothesis
Using the impact-effort Matrix I was able to narrow down the problems I need to work at the moment.
Due to time constraints I worked on the following pain points
Framing HMW Questions
Based on the three primary pain points which have been identified I came up with the following three How Might We (HMW) questions:
How might we provide the users the ability to add chapters without writing timestamps manually?
How might we find a way for users to skip “adding 00:00 as compulsory chapters”?
How might we make long form video more engaging by making interaction and switching between chapters more seamless?
Develop Phase:
Ideation and Brainstorming
So, now that I have the problem which I need to solve, therefore, it was time to figure out the solutions which I need for the problems. Hence, I used the Crazy 8 technique to come up with as many ideas as possible and this is what I came up with.
Another decision which was important to take was what should be the name of the button?
Deliver Phase:
Finally, after all the research, analysis, drawing its time to deliver the design. This is the first prototype I came up with:
First screen where a chapter feature is added.
Second screen when Loom asks user to add chapter title
Screen showcasing the chapter card after the chapter is created.
Usability Testing.
“Because of time constraints, I did not have the time to interview a lot of users. I managed to interview 3 users, also taking into consideration the time which I need to make iterations within the app after testing.”
Method of Conducting the interview:
The method I opted for the interview was comprehension-based usability testing.
Observation Points:
If the user is able to locate “chapter” creating button.
If the user is able to create chapter.
If the user is able to delete a chapter.
If the user is able to add title to the chapter.
Did they find the prototype intuitive enough to create a chapter.
Feedback Received.
Iterations.
In the following I added few changes such as:
1. Rather than “+ Add Chapter” I replaced it with the information letting the users know every chapter they create will appear here.
2. Changed the icon which is not familiar to “split” or “cut”. Rather I tried to keep it something around pointer or mark. - Easy for them to understand.
3. Changed the “chapter” to “Create Chapter”. Keeping the copy simple for users to understand, and use the function.
Added an overlay when the users are deleting the chapter. This was added even before the usability testing was done. Previously, in the current UI while deleting the chapter it just deletes without any warning.
Insights (Impact or Results)
Some preconditions taken into consideration
1. For testing both current UI and redesigned UI will have paused video at 0:35 secs.
2. The average speed of a person typing “Introduction” - Chapter title = 3.98 secs.
3. Rest all the conditions are same for both the versions.
Two conditions taken into consideration
Condition 1: When chapter 00:00 is not created.
Condition 2: When chapter 00:00 or any previous chapter is already created.
Creating Chapter in current UI
Creating chapter in Redesigned UI
I did A/B testing of both the User Interface to evaluate the efficiency of task completion and this is the result.
Final.
Future Scope:
Loom is already using “Loom AI” to create chapters and summaries. What if after clicking “create chapter” button, Loom AI automatically writes the title of the video based on the video content. This will increase the efficiency further as users will not have to type out the title of the chapter as well.
Since chapters play a key role in large video content. Therefore, in the future I would like to add a feature where users will be able to download individual chapters. During user interview one user mentioned “it is an era of short content like reel”. Hence, creating a small byte size content.
This was a time constraint project. Given more time I could have conducted more usability testing, or user interviews to refine the results.
Given the time I would also like to implement these changes in mobile app as well to make it uniform across all platform.
Key Learnings:
Trying out something new in each project - Previously, I have never tried to evaluate the insights or results of redesigned UI or an MVP. But I took a small attempt using A/B testing to understand if my design can bring an impact. And it does with the results.
Through usability testing I realised that it is more important to focus on quality over quantity. With the right number of users, I was able to focus on the right use of time and resources which allowed me to present the Minimum Viable product within the stipulated time.
There are always constraints present in a project, it is important to understand how to deal with the constraints and produce the right output and keep iterating on them.