Background
Booming online video learning market and challenges it brings to learners
Udemy. Coursera. Masterclass. The popularity of online courses has increased over the past decade, and the global online learning market is expected to reach $325 billion by 2025. Many companies are rolling out their own learning platforms.
Remote, digital learning offers immense flexibility and convenience for learners but also brings them new challenges.
Noticing the difficulties that learners face, I conducted a desk research and found that even though there were e-learning tools available, it is far from a saturated market and there doesn't seem to be a clear winner.
User Research
To understand the needs of online video course learners
My hypothesis was that learners need a way to utilize video courses much like how they would a book—leafing through it for a glimpse of the content, taking notes, bookmarking a page, and highlighting text.
To better understand exactly what it is that video course learners need, I recruited 8 frequent video course learners who have used both free and paid video platforms to learn various subjects.
Research Insights
Too much time wasted on rewatching and manual typing
After many fruitful conversations with my research participants, I discovered why they relied on videos to learn, what they typically did while watching a video, and what they did afterwards. These users can be separated into two groups: Non-note takers and avid note takers.
What bothered them about video learning included not being able to interact with the instructor / fellow students, having a hard time finding the right videos, and having to rewatch videos to find what they needed.
Main pain points
1. Users were greatly annoyed by having to rewatch a video to find what they need.
2. Manual copying down the transcript while they take notes was too time consuming.
3. Video titles were misleading sometimes—they wished they could know the content beforehand.
4. Users wanted to share or see others’ notes to see a different perspective or what they have missed.
Ideation
How might we help learners reduce rewatching the same video to find what they need?
After synthesizing research data, I brainstormed possible solutions by using a common brainstorming technique where I first thought of all the bad ideas then flipping them into good ones.
Some of the brainstorming prompts:
- How might we help learners find learning materials across platforms to supplement their current video?
- How might we help learners reduce rewatching the same video to find what they need?
- How might we help learners interact with one another?
Competitive Analysis
Current offerings of existing products focused only on time-stamped note taking
I dived back into researching 6 existing products that help users take notes while watching a video, this time analyzing their strengths, weaknesses, and unique value propositions. They were mostly browser extensions so I installed each to test them out.
One possible way to alleviate some of my user pain points was utilizing transcript, and it seemed like none of these products' current offerings involved transcript. Most of them offer time-stamped note-taking and screenshots as the main features.
Business Goals & Tech Constraints
Utilizing transcripts would be a great business opportunity that also solves user pain points
Utilizing transcripts seemed like a great business opportunity, since it was rare and would help solve two of the main user pain points: not being able to preview content and having to type transcripts manually.
I brainstormed on how exactly it could solve those problems, and how real world application it might be.
I consulted an engineer who was also an AI specialist about my ideas; I wanted to know if the tool would be able to generate or grab the transcripts of a video on any platform, which would be the ideal for such a product.
The short answer was yes, and Youtube would be an easy start as you can access its transcript via the API. Therefore, I decided to focus on Youtube to test out my product idea.
Feature Prioritization
MVP: AI generated summary & transcript highlighting
A tool that allows users to see an AI generated summary of a video beforehand, highlight transcripts, and bookmark any moment for reference later.
Optional note publishing to share with the community.
User Journey Map
Design Process
Designing an extension for two user groups: avid note-takers and non-note-takers.
Fitting in all the features in a limited amount space in a browser extension while considering my two user groups—non-note-takers (who could still benefit from transcript highlighting) and avid note takers (those that need transcripts and all other note taking features) turned out to be quite challenging.
Also, none of the 8 users I’ve talked to have ever used a note-taking extension. This was going to be an unfamiliar product for them.
Therefore, to make sure my design was on the right track, I ran an initial usability testing on 3 users on my low fidelity prototype before moving forward with more details and a higher resolution design.
Iterations of Low-fidelity Wireframes
OOUX
Applying OOUX to look at the product afresh
It wasn’t part of the plan to have so many ideations at the hi-fidelity stage. This project proved to be more complex than I’d expected, and as I designed further and got more user feedback, I’d solve a problem by introducing another.
It was around this time that I came to know Object Oriented UX (OOUX). I tried to apply the principles and re-think the whole product.
This process helped me look at the product in every aspect, from high level main features to details like the metadata of each feature, and the interconnections between them all.
The main change I made was to reintroduce the limit of 1 video to 1 page, rather than letting users choose to add notes from a video to an existing page that contains notes from several different videos. Even though there's advantage to having to such feature and there are solutions, it creates a lot of chaos, something that could easily scare off a new user.
Iterations of Hi-fidelity Wireframes
Design System
Usability Testing
Two rounds of moderated usability tests with seven participants
(Four participants in the first round and three in the second round to test the design changes)
Successes
1. Allusers were able to highlight transcript, drop pins, and take screenshots very quickly, citing the familiar highlighting pattern, the hover help text and icons were helpful.
2. All users expressed their real interest in using the product and would recommend it.
3. Transcript highlighting was what users found the most useful as part of their note taking process.
Usability Learnings
1. Four out of five users tested failed to find the link to the web app from the extension within 10 seconds.
2. Three users scrolled right past Published Notes section without realizing that was what they were looking for.
3. Users also found the terminologies confusing. Each sticky was a note, and the note that stores all the sticky is also a note. This has caused them to hesitate when prompted to find their notes on the extension after restarting it.
Design Changes
Next Steps & Learnings
Next steps: creating index pages
A great next step would be to introduce more flexibility in how users organize the pages in the web app. Being able to combine notes from different videos is important when you're watching a series of videos on the same subject, which is why users wanted to add notes from a new video to an existing page in the first place. One way would be having "index" pages that have notes from different videos. Out of curiosity, I included note combining in the initial test, though it didn't make it into the final design due to the time constraint and it not being the priority, but it's definitely next on the list!
Don't just jump straight into implementing user feedback
I've learned so much from this project, from design prioritization with time constraint, accessible design, UX writing, design pattern and when (not) to implement user feedback.
When not to implement user feedback
As much as getting user feedback is supposed to be helpful in your design decisions, I've learned to not overhaul my design based on user feedback too hastily. Sometimes handing users what they want the way they want it right away doesn't immediately pave the way for a successful experience (being able to add new notes to an existing page had been a feature suggested by a few users in the initial testing, but I later realized it'd cause confusion when you don't have a dedicated page in the web app for a specific video.)
When in doubt, stick with a familiar design pattern
Transcript highlighting being the most important feature, I spent quite some time ideating different ways to do it considering the limited amount of space and how it worked in tandem with other features (such as adding a note to the highlight). At first, I didn't think having a little menu that popped up once you highlighted text was ideal because it'd block part of the preceding text. In the end, I decided against deviating from the more familiar pattern and I was glad to hear users said that the way it worked was intuitive because it was the same as on e-readers.
Always consider the product as a whole
I also learned the importance of clear UX writing and how investing time from the outset in planning the product from the smallest unit to their biggest application before starting designing will help with make better decisions and save time down the road. Even though the MVP is in the browser extension flow, the web app is where the notes live so it is crucial to look at both as a whole.
