Section-10A

Coursera Website Redesign

Coursera Website Redesign

Enabling Students to Learn More Effectively

Background

Coursera is a popular online learning platform that offers a wide range of online courses to choose from for students of all levels.

In this case study, we will evaluate Coursera’s website for its effectiveness on providing a user experience, geared towards learning.

Challenge

How might we improve the user experience that students have on Coursera’s website, such that it is more conducive to learning.

User

Students between the ages of 18-35, wanting to supplement their studies or learn new skills through online learning.

Duration

2.5 Months

Roles

My Role

UX/UI Designer & UX Researcher

Collaborator

UX Writer

Tools

Figma

Miro

Pen and Paper

My Responsibilities

Testing Assumptions

Journey Mapping

Data Analysis

Affinity Mapping

Empathy Mapping

Ideation

Impact-Effort Matrix

User ows

Wireframe Sketching

Low-Fidelity Prototyping

High-Fidelity Prototyping

Usability Testing

Interactive Prototyping

Iconography

Business Goals

Competitive Market Research

Design Approach

What is Coursera? What is Their Mission?

Coursera’s vision was to provide life-transforming learning experiences to learners all around the world.

Today, they are a global platform for online learning and career development, offering anyone, anywhere, access to online courses and degrees from leading universities and companies.

Why Online Learning?

In a survey from Chronicle, students were asked about their preferred way of learning during the “Covid-era”, as institutions moved towards online learning. Survey results show:

Student expectations are also shifting towards more remote learning options

Students are optimistic that colleges can deliver high quality online courses to prepare them for a high-tech future.

More than half of survey respondents say they prefer either an all-virtual or hybrid learning experience.

Higher Expectations For Virtual Learning Pose As A Challenge

With student’s now expecting more from the online learning experience, meeting those expectations to support their growth can be challenging.

Why Redesign Coursera's Website?

With Coursera’s strong mission to make learning more accessible on a global scale, it is equally important to consider how effectively students are learning on the platform.

After conducting a competitive analysis to compare Coursera with three of its’ competitors, using the following four criteria:

Competitors

• SkillShare

• Khan Academy

• Udemy

Criteria

• Lecture Watching Experience

• Note Taking Experience

• Note Reviewing Experience

• UI

I identified some interesting opportunities for design, as well as some trends, in the spider chart below:

Opportunities

Maximize Lecture Engagement

• Optimize lecture watching experience for better engagement

Simplify Note Taking Process

• Developing a user-friendly and hassle-free note taking process that can help students to easily capture insights

Free Up Mental Space

• Improve note reviewing experience to reduce cognitive load

Trends

Customize Video Size

• Customizable video aspect ratio options to suit your learning style

Digitized "Notebook"

• No need for a paper notebook, with integrated "note taking" and "note reviewing" features

• "Look and feel" of competitor sites are more modern with better content layout, compared to Coursera’s website.

Key Problem Assumptions

I then chose to focus on 3 out of the 4 key criteria, to test my assumptions.

Key Assumptions to Test:

1.) Lecture Watching Experience

2.) Note Taking Experience

3.) Note Reviewing Experience

4.) UI

Business Goals

Since Coursera’s mission is to provide ‘life-transforming learning experiences’ to people all around the world, I came up with a series of business goals and metrics that we can use to track business success.

Additionally, the results can also act as key indicators for how well we are catering to user needs.

Research Goals

Establishing “things to be learned” prior to usability testing, helps with the preparation of effective questions surrounding the preconceived notions of what the potential issues might be.

In doing so, we might also discover new pain points not previously considered.

Usability Questions should help to answer:

• How engaged users’ feel with the current lecture watching experience

• User pain points, needs and goals around the current note taking experience

• Reveal any points of confusion with the note reviewing experience

• Reveal any new pain points

Persona

Sarah / 22 / Business Administration Student

• Juggles a busy school schedule with supplemental learning, through online courses in order to fully grasp topics

• Finds it difficult to stay on track with academic goals when her studies become tedious

Usability Testing

With the usability questions prepared, centered around the key potential issues:

1.) Lecture Watching Experience

2.) Note Taking Experience

3.) Note Reviewing Experience

I then proceeded to conduct the usability test, where the user was presented with the Coursera website on a laptop, and was given tasks and follow-up questions for each task.

The user was also tasked with incorporating the “Think Aloud” method, in order to collect more qualitative data.

Issue #1: Lecture Watching Experience

Context

Coursera’s lecture watching experience layout, consists of 2-3 columns:
• lecture playlist (left)
• lecture video (middle)
• optional column to take notes (right).

Problem

With a maximum of three columns of content, nearly the same width, the lecture watching experience can quickly become disengaging, and make it sub-optimal for learning.

Additionally, this can make the content in the other two columns beside the video difficult to read.

Key Insights

• User found the experience of watching a lecture to be underwhelming; wished for more of a “theatre experience".

• User wished for a way to compress the lecture playlist (left column), in order to make the video screen size larger.

Issue #2: Note Taking Experience

Context

"Above the fold", users can watch the lecture and take notes, all in the same place.

When users scroll "below the fold", they can read the lecture transcription, continue taking notes and view the lecture on a mini video player (bottom right corner).

Problem

The problem with this is that the narrow input field expands vertically for lengthy notes, resulting in a “tall” input field, which can look like a block of text with short line lengths and poor readability.

And to make matters worse, the “tall” input field can end up behind the mini video, obstructing the user’s view of their note.

Key Insights

• User expressed frustration with typing notes into a narrow input field; wished for more space to type in notes.

• Equally frustrating to the user, was the placement of the mini video player, overlapping the input field, with no option to close it. The user also suggested moving the mini video to the top left side, above the lecture playlist, to resolve the issue.

Issue #3: Note Reviewing Experience

Context

Included with Coursera’s note taking feature is their transcription saving feature.

This feature lets the user attach a transcription to their note.

Problem

However, if the user does not select a transcription, an auto-generated transcription of the spoken sentence (in the lecture), will be attached to each saved note.

This makes the transcription saving feature mandatory (and potentially unnecessary).

Consequently, differentiating between the "auto-saved" vs "intentionally saved" transcriptions, while reviewing notes, can result in increased cognitive load.

Key Insights

• User was annoying with having to:
a.) not only differentiate between the "notes" vs "transcriptions"
b.) but to also differentiate between the "auto-saved" vs "intentionally saved" transcriptions.

• User also expressed the need for making the transcription saving feature optional.

Empathy Mapping

I then organized the insights gathered from usability testing, using post-it notes and plotted them into an empathy map.

This lets us build a deeper understanding of the end-user, visualizing user attitudes and behaviors.

Affinity Mapping

And by also chronologically sorting out each post-it note by “stage”, I was then able to identify common patterns within each stage, further visualizing user pain points.

After classifying the issues, I prioritized them based on their severity:
• Major usability problems are listed as high priority.
• Medium level usability issues are listed as medium priority.
• Minor or cosmetic usability issues are listed as low priority.

Experience Map

The insights gathered from both affinity mapping and empathy mapping, also helped to inform the experience map, and pinpoint key pain points within the entire experience.

User Stories

To communicate how this redesign would provide value to the user, I’ve summarized it into three user stories.

User stories can also be thought of as a ‘quick take’ that teams can refer back to in the development process, to help them better understand user needs and goals.

User Stories

I need the lecture watching experience to be immersive, so that I can stay focused and stay on track with my studies.

I want a quick and easy way to type in notes, so that I can capture the key pieces of information.

I don’t want to spend extra time tediously reviewing notes because:
a.) I don’t want the boredom to hinder my academic goals
b.) I have a busy schedule

Challenge

How might we improve the user experience that students have on Coursera's website, such that it is more conducive to learning?

Brainstorming Ideas

With the challenge of making Coursera’s website more conducive to learning, I began brainstorming potential solutions to address user pain points.

Impact Effort Matrix

I then plotted the promising ideas (with red dots) into an impact/effort matrix, prioritizing the ideas within the ‘high impact’ and ‘low effort’ quadrant (top right).

Wireframe Sketches

Low-Fidelity Prototype

Solution #1: Lecture Watching Experience

Before / After

Issue

Largest video screen size is too small - makes for suboptimal lecture watching experience

Changes

Customizable layout options "above the fold", with option to increase video size for more immersive lecture watching experience

Solution #2: Note Taking Experience

Before ("Above Fold" / "Below Fold")

Issues

Narrow, vertically expanding textfield, while typing in lengthy notes can cause poor readability when users have to jump from line to line to read their note.

There are no visual cues to differentiate between “intentionally-saved” transcriptions vs “auto-saved” transcriptions.

Mini video player overlaps with already small input field

After ("Above Fold" 2-Pane View - version 1 / version 2)

V1 Changes

Wider note input field

Optional transcription saving feature

V2 Changes

Resized columns of content and switched the order of those columns, for a more breathable
layout. Also increased the width of the input field slightly, for a better note taking experience

“Note Saving” and “Transcription Saving” features now accessible “above the fold”

After ("Above Fold" Theatre Mode - Pro's and Con's)

Changes

(Pro) In “theatre mode”, we see that taking notes can be possible above the fold, however if users want to add a lengthy transcription to their note, the “save” button still gets pushed slightly below the fold.

(Con) Though users can switch to the "two pane" view to save notes with transcriptions, this is a feature I would have also wanted to include in “theatre mode”, but given the time constraint, I was not able to explore other options.

After ("Below Fold" - version 1 / version 2)

V1 Changes

Overlapping issue resolved

V2 Changes

Optimized placement of mini video

Removed extra scrollbar, as the sticky scrolling effect (with fixed input field) can be accomplished using the scrollbar on the far right.

Solution #3: Note Reviewing Experience

Before ("Above Fold" - Main Page / Notes Page)

'Main Page' Issues

Hard to differentiate between “transcriptions” and “notes”, on both the main page and notes page, as the “Your Note” header above each note is hard to see.

'Notes Page' Issues

The separate page for notes can be a hassle for users who want to switch back and forth between the lecture and their notes.

After (Main Page)

Changes

Clear differentiation between "notes" and "transcriptions". Consolidated notes to be on the main page, for users to easily refer back to the lecture, if needed.

How Does The Solution Solve The Problem?

Lecture Watching Experience

Immersive lecture watching experience so that students can stay focused and on track with their studies

Features

• Customizable layout options "above the fold", with option to increase video size for more immersive lecture watching experience

Note Taking Experience

More user-friendly experience to take notes and save transcriptions to capture the key pieces of information

Features

• Longer input field, with optimized placement (below large video)

• Optional transcription saving feature - highlight transcription, then select "Save as Note" or "Attach to Note"

• Optimized mini video placement (without elements overlapping)

• Consolidated notes into one place, to easily reference the lecture, as needed.

Transcription is saved with note (above)

Note Reviewing Experience

Clear difference between "notes" and “transcriptions" to reduce the time it takes to review notes, with less cognitive load

Features

• Visual cues to clearly differentiate between "notes" and "transcriptions"

Reflections

Improvements to the Note Taking Experience

Further exploration to make note saving with transcriptions accessible above the fold in both "theatre mode" and "two-pane view" (vs. only in "two-pane view").

Gather More Feedback

Given the timeline for this project, I was only able to conduct three rounds of usability testing - one with the target user and two with my professor.

If I had more time, I would have liked to conduct more usability testing with the target user to collect more feedback on the iterations.

Feature Exploration

I would have also liked to explore a filter option to filter notes "by lesson”, so users can easily pick which lesson notes to review.
‍
Additionally, I would have liked to test out the option to “edit” or “delete” notes and transcriptions, to further improve the note taking experience.

Winnie the Pooh

Want to work together?