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

Competitive Market Research

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

Design Approach

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 that the landscape of student expectations is changing in favor of more remote learning and believe 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

Students have higher expectations, when it comes to online learning - meeting those expectations to support their growth can be challenging.

Why Redesign Coursera's Website?

After having looked at current offerings on the market, I compared three popular online learning platforms to Coursera's website, to identify any trends and opportunities for design.

Opportunities

• Optimize lecture watching experience for better engagement

• More effective note taking process

• Improve note reviewing experience to reduce cognitive load

Standards

• Video aspect ratio options

• Integrated note taking and note reviewing features

Business Goals

Increase the adoption rate of more effective learning features

How to Measure?

• Measure the amount of time spent on lecture watching, note taking and note reviewing, over a period of time.

Increase customer acquisition rate

How to Measure?

• Measure the number of sign-ups, over a period of time.

Increase the class sales conversion rate

How to Measure?

• Measure the number of purchased classes from number of sign-ups, over a period of time.

Key Problem Assumptions

After evaluating the current website, I identified three potential issues that could hinder student’s from learning effectively.

Potential Issues

1.) Lecture Watching Experience

2.) Note Taking Experience

3.) Note Reviewing Experience

Research Goals

• To understand how engaged users’ feel with the current lecture watching experience

• To understand user pain points, needs and goals around the current note taking experience

• Reveal any points of confusion with the note reviewing experience

Persona

Sarah / 22 / Business Administration Student

• Busy school schedule means less time to review notes

• Even with a busy schedule, makes time to supplement her studies with online courses in order to grasp the material

• Finds it difficult to stay on track with academic goals if it's not engaging or if there are slight annoyances

Usability Testing

After evaluating the current website, I identified three potential issues that could hinder student’s from learning effectively.

Potential Issues

1.) Lecture Watching Experience

2.) Note Taking Experience

3.) Note Reviewing Experience

Overview

During the usability test, the user was presented with the Coursera website on a laptop and was asked a series of usability questions.
‍
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 size of the lecture video becomes suboptimal.

This, as a result, could hinder students from engaging with the lecture video, and could make the content in the other two columns difficult to read.

Usability Questions

1.) “How are you finding the experience of watching the lecture, with this type of page layout?”

2.) “Is there anything that you like or dislike about it?”

User Comments

1.) “Give the option to close the table of contents section on the page”

2.) “I feel like I want it to be more of a 'theatre experience'”

Key Insights

• The user found the experience of watching a lecture on the platform to be underwhelming and wanted it to feel more like a "theatre experience".

• The user wished there was 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 and continue watching the lecture on a smaller video screen (bottom right corner).

Problem

The narrow input field expands vertically for larger notes, which results in shorter line lengths and poor readability.
‍
Additionally, the tall input field can end up behind the small lecture video, obstructing the user’s view of their note.

Usability Questions

1.) “How would you create a note?”

2.) “How are you finding the experience of creating a note?"

User Comments

1.) “Why is the note area so small?”

“Why do I have this ‘one inch’ scrollable box to do my notes?”

2.) “Why can’t I exit out of this small video? It’s giving me ‘ad’s’ vibes.”

“I just really think they need to move this video though. They should move the video to the top left side, above the table of contents area.”

Key Insights

• The user expressed their frustration with typing notes into a narrow input field, and wished for more space to type in notes.

• What was equally frustrating to the user, was the smaller sticky video, overlapping the input field, without any option to close it.

Issue #3: Note Reviewing Experience

Context

Along with Coursera’s note taking feature, there is also a separate page for user’s to review their notes.

Problem

Upon note creation, a transcription of the sentence being said in the lecture gets attached to each saved note - whether or not there is a need for the transcription.

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

Usability Questions

1.) “How are you finding the experience of reviewing your notes?”

2.) “Is there anything that you like or dislike about it?”

User Comments

1.) “What if I want to write a note that has nothing to do with the transcription?”

2.) “They should give the option to include the transcription.”

Key Insights

• The user found it annoying to have to:
a.) differentiate between the "notes" and "transcriptions"
b.) differentiate between the "auto-saved" vs "intentionally saved" transcriptions.

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

Affinity Mapping

Through affinity mapping, I grouped together similarities to identify key themes.

I arrived at three key themes to focus on for optimal impact.

Key Themes

Lecture Watching Experience

Note Taking Experience

Note Reviewing Experience

Empathy Mapping

Leveraging from the insights gathered from affinity mapping, I further synthesized my findings into an empathy map.

Experience Map

Leveraging from the insights gathered from affinity mapping, I further synthesized my findings into an empathy map.

Insights from affinity mapping and empathy mapping, also helped to inform the experience map, and pinpoint key pain points.

Key Pain Points
• Disengaged with small video screen size
• Frustrated with narrow input field, that expands vertically, while typing in larger notes
• Frustrated with small sticky video overlapping the input field
• Irritated with note reviewing process - differentiating between "auto-saved" vs. "intentionally-saved" transcriptions, attached to each note

User Stories

User Story #1

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

User Story #2

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

User Story #3

I don't want to spend extra time reviewing notes, because I don't want to be confused and miss the important content.

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

Leveraging from the insights gathered from affinity mapping, I then brainstormed ideas based on the themes discovered.

Impact Effort Matrix

Wireframe Sketches

Low-Fidelity Prototype

Solution #1: Lecture Watching Experience

Before

After

Changes

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

Solution #2: Note Taking Experience (Part 1)

Before

After

Changes

1.) Increased width of "notes" input field, and shifted it below the video.

2.) Optional transcription saving feature (vs. "auto-saved" or "intentionally saved" transcriptions on Coursera’s website), when creating notes.

Solution #2: Note Taking Experience (Part 2)

Before

After (Version 1)

After (Version 2)

Changes

3.) Resolved overlapping issue by optimizing sticky video placement, with option to minimize video and expand height of transcription box.

4.) Added customizable layout options "below the fold", for better note taking and note reviewing experience (note taking and note reviewing are now on same page).

5.) Switched column content "below fold":
• Transcription with sticky video (left side)
• Notes (right side)

6.) Removed scrollbar attached to "notes" section, for larger scrollable area.

Solution #3: Note Reviewing Experience

Before

After

Changes

7.) Clear differentiation between "notes" and "transcriptions"

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

• Increased width of "notes" input field, and shifted it below the video

• Optional transcription saving feature (vs. "auto-saved" or "intentionally saved" transcriptions on Coursera’s website), when creating notes

• Optimized sticky video placement, with option to minimize video and expand height of transcription box

• Combined note taking and note reviewing pages to be on same page

• New layout "below the fold" with customizable layout options, for better note taking and note reviewing experience

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

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 conducted 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".

Rather than having the user scroll up to the lesson playlist to populate notes for the selected lesson, including this feature within the "note" section, could potentially improve the note reviewing experience.

Additional features I would have liked to test out include adding a feature beside each note to "edit" or "delete" notes and transcriptions, to further improve the note taking experience.

Winnie the Pooh

Want to work together?