Notes for Coursera

Using the science of learning to facilitate better retention

Timeline
5 Days, January 2018
Role
UX Design
Tools
Sketch, Origami Studio
This is part of my KPCB Design Fellows application, born out of my passion for combining the science of learning to design a better online educational experience.

Background

As a student at Minerva (an alternative college program that offers online learning and global rotations), I think a lot about how to the science of learning to facilitate effective online learning experience. Minerva students spent a significant amount of time self-learning pre-requisite materials through readings and watching videos (usually from Coursera, Khan Academy, and Youtube) before attending our online seminars, and one of the frustrations we experience daily is the lack of an app that allows us to take time-stamped notes and review easily. Most students resolve to a split-screen of Evernote, Quip or Notion and the video, but:

  1. It’s inconvenient because our limited working memory makes it hard to take notes and while watching the video, and having to pause the video every minute or two is annoying;
  2. It’s ineffective because reviewing notes creates “illusion of knowing”, and it is way less efficacious than strategies such as retrieval(both ideas from the book Make it Stick: The Science of Successful Learning )

Hence the challenge below:

How might we design a Notes feature that allows simultaneous note-taking and video-watching, as well as facilitates effective review after initial learning?

I am aware that this feature doesn’t make so much business sense for Coursera in the short term, but I believe the long-term value of investing in the application of learning science to Coursera. In this redesign, I mostly focused on the UX design and briefly touched on the visual and interaction design due to time constraints.

Benchmarking

I was able to find two products that offer time-stamped note taking function: a chrome extension TurboNote, and a web-based solution called VideoNot.

Benchmark #1 TurboNotes
Benchmark #2 VideoNot

Quick User Interview

Given the time and resource constraints, I interviewed a couple of my classmates at Minerva to learn about their note-taking behaviors when taking online classes:

  • How they currently take notes to learn materials online:

1 person uses paper notepad and then digitalize her notes after class, 3 people take notes on Evernote/Notion/Quip regularly, 1 person takes notes sometimes on note-taking apps or the native Notes app on MacBooks.

  • What they like about the tool they use now:

Paper notepad: Minimal interaction with the screen, allows more concentration on the content, easy to review whenever she feels like it;

Note-taking apps: Easy to search keywords, clean visuals, can share to other students, can add screenshots, can easily copy and paste from the transcript of a video when it’s available (even better when the transcript is searchable);

Notes on MacBooks: minimal UI, can use it offline

  • What they would like to improve about the tool(s) or the platform that they are taking classes on concerning note-taking:

Being able to time-stamp notes, to highlight the transcript of videos (when it’s available), to directly copy-and-paste a screenshot into the notes

This is a very specific group of users. But since Coursera has such a diverse user base, my assumptions the interviewees’ opinion can represent a portion of the learners worldwide.

The Science of Learning

This is the scientific base for me to come up with the they-don’t-know-they-want type of features. Having reviewed my notes from reading Make It Stick, I decided to integrate retrieval practice into the note reviewing process because it’s proven to be a more effective strategy than merely re-reading for long-term retention.

“Spaced retrieval produces knowledge that can be retrieved more readily, in more varied settings, and applied to as a wider variety of problems. “ — Make it Stick (2014)

The Design Process

User Flow

A solid user flow is critical skeleton that guides the rest of design process. The Learn-flow facilitates initial encoding through note-taking, and the Reinforce-flow emphasizes on effective usage of the notes to go beyond simply reviewing the materials (some Coursera classes do include a review section of lecture notes in pdfs).

User flow

Wireframes

I then sketched out some possible screens for both the note-taking and note-reviewing flow.

Initial sketches

In the process, I identified a few point for further considerations:

  • Should everything be auto time-stamped? What if we have a toggle for that? If so, what should the default be?
  • Should we add the time-stamps in the progress bar of the video player? Can we show the timestamps highlighted by most users (like the pop-up that shows XX% of students find this video important)?
  • In terms of information architecture and mental model, where should Notes be outside the course player UI? Should the notes be in cards or listings?
  • What are the challenges with a fill-in-the-blanks? Is it too much effort for users to create their own? Can we use algorithms to suggest important parts to simplify decision making?

Low-fi Mockups

Diving straight into the Sketch to further explore the questions mentioned above, I first created explorations of how to initiate notes.

Eventually, I only kept a toggle to bring out the notepad from right to simplify the process.

The notepad component is central to the flow. Below is the version that I felt best about — it contains a split screen of course content (it could be video or readings) and notes, which utilizes the screen space well and is similar to a split screen view native to the operating system.

Next, for users to practice retrieval on the notes, there needs to be a way for users to organize and find notes. This turned out to be tricky because the information architecture was a bit unclear:

Two versions of the Preview Course screen

So I turn to the course content view where *I assumed* learners spent most of their time while not searching the course catalog. Another tab next to “Lessons” on the nav bar can be too drastic of a change to the product as it would be a completely different section. If given the resources, it’d be valuable to validate if users tend to associate notes with the specific video or think of it as a stand-alone repository through user testing.

I am aware this is not exhaustive of all the options — there is a lot more thinking to do if this feature gets added. It will also need to find a place on the Week preview screen.

Next up, what should the search results of these notes look like? Although card-based UI has its advantages of modularity and received much hype elsewhere, it doesn’t seem to be the right choice for Coursera, especially the results are not classes but snippets of content.

How should the search results look like?

Expanded View

Retrieval Practice

Retrieval Practice can be a feature that’s worth a lot more exploration on its own (similar to designing a new Quiz function), especially to fully apply the research in Make It Stick. For example, how to design retrieval practice that’s spaced, varied, or interleaved that accommodates for different types of classes? I didn’t get to dive in further beyond the screen below because the design should take 1)inputs from course developers and learning specialists, 2) data of how different types of classes design quizzes to ensure no overlap, to better adapt the exercises to the diverse course catalog that Coursera offers.

While for popular classes (such as Andrew Ng’s signature ML class), well-developed and organized lectures notes are available for learners to review, it is pedagogically more beneficial for students to take generative notes then practice retrieval compared to reviewing notes.

High-fi Visuals

Prototype

I created a quick prototype of some key interactions. Hoping to use this opportunity to explore new tools, I made it with Origami Studio and the experience was really smooth!

Turn on Note-taking mode

Final Thoughts

  1. The most challenging aspect of designing learning experience is that learning occurs more effectively when it is effortful. Product design has a defining role in crafting learning platforms to minimize friction on actions that don’t add to learning (finding a class, organizing notes, etc.) so users can save their limited cognitive capacity for the learning process (concept acquisition, retrieval practice, etc.). This is also the reason why I enjoy designing EdTech product so much!
  2. I would love to talk to course developers. We usually think about the learners’ side, but people that are creating content is equally important in making this community thrive. A platform such as Coursera is a complex system with multiple classes of agents, so it’s also imperative to consider the implications of it on the instructors and course developer while designing for the students.
  3. Any new feature requires user testings to be successful, even if it is backed by research on learning science. I said this from my experience at Minerva, where we see the discrepancy between what research shows to be pedagogically valuable and what actually works when the technique is implemented in an online environment.
  4. I love product design and had a great time doing this design challenge!

Thanks so much for reading my application. Now that I’ve gone through this redesign, I have never felt more excited to be doing product design alongside some of the most talented young designers from other schools!

P.S. Thanks for Roujia for talking through the idea with me and offering her expertise in the science of learning!


OTHER PROJECTS /

©️ Qiqi Xu, 2019