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 was founded with one simple mission: 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?
A survey from Chronicle, highlights students' preferences for remote learning options, during the Covid-era, as institutions moved towards online learning.
Student expectations are also shifting towards more remote learning options
Students are optimistic about colleges delivering high-quality online courses for a tech-driven future.
Over 50% of respondents 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.

This situation highlights the necessity to explore effective strategies to adequately support student growth, in this evolving landscape.
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.
I conducted a competitive analysis to compare Coursera with three of its’ competitors, and focused on four main criteria, which were crucial for evaluating the user experience:
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
UI
• "Look and feel" of competitor sites are more modern with better content layout, compared to Coursera’s website.
Key Problem Assumptions
I decided to focus on testing the 3 key problem assumptions, centered around the three main experiences:
1.) Lecture Watching Experience
2.) Note Taking Experience
3.) Note Reviewing Experience
Business Goals
To connect our business goals to Coursera's mission of providing life-transforming learning experiences globally, the primary goals I focused on were engagement, adoption, and conversion, which are vital for tracking our success.
Research Goals
Before usability testing, my research goal was to focus on establishing key learning objectives.

This preparation ensures that our questions effectively challenge our assumptions about potential issues.
Usability Questions should help to:
• Gauge user engagement with the current lecture watching experience
• Identify user pain points, needs, and goals related to note-taking
• Uncover any confusion during the note reviewing process
• Identify new pain points
Who is Our Target User?
Sarah / 22 / Business Administration Student
• She manages a busy school schedule while also engaging in supplemental learning through online courses.
• She often finds it challenging to stay on track with her academic goals, especially when her studies become tedious.
Usability Testing
With the usability questions prepared, focused on the three key areas: the lecture watching, note taking, and note reviewing experiences, I then proceeded to conduct the usability test.

The usability test involved presenting the user with the Coursera website on a laptop.


Specific tasks were assigned, along with follow-up questions, to gather insights on their experiences.

It was also encouraged for the user to use the “Think Aloud” method, to collect more qualitative data during the testing process.
Issue #1: Lecture Watching Experience
Context
Coursera's layout includes a lecture playlist (on the left), the lecture video (in the middle), and an optional note-taking column (on the right).
Problem
The main problem with this is that having three columns of similar width, can lead to a disengaging experience for viewers.

This layout can also make it challenging to read content in the columns next to the video, affecting the overall learning effectiveness.
Key Insights
• User found the lecture watching experience to be underwhelming and desired more of a "theatre experience."
• User expressed a need for a way to compress the lecture playlist on the left, which would allow for a larger video screen.
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 larger 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 significant frustration with the narrow input field for typing notes, indicating a need for more space.
• Another key issue was the placement of the mini video player, which overlaps the input field and cannot be closed.
• User suggested relocating the mini video to the top left side (above the lecture playlist), to improve usability.
Issue #3: Note Reviewing Experience
Context
Lastly, the third usability testing segment focuses on the note reviewing experience.

The context highlights that Coursera’s note-taking feature includes a transcription saving option, allowing users to attach transcriptions to their notes.
Problem
The problem arises when users do not select a transcription, leading to an auto-generated transcription being attached to each saved note.

This situation creates confusion between "auto-saved" and "intentionally saved" transcriptions, increasing cognitive load during note reviewing.

It's essential to address this issue to enhance the user experience and reduce unnecessary complexity.
Key Insights
• Users expressed frustration with having to differentiate between "notes" and "transcriptions”, as well as between "auto-saved" and "intentionally saved" transcriptions.
• This confusion indicates a need for clearer distinctions in the interface to enhance the user experience.
• Additionally, user suggested making the transcription saving feature optional, which could improve flexibility and satisfaction.
Empathy Mapping
I organized insights from usability testing by plotting them into an empathy map.

This method provides a visual representation of user attitudes and behaviors, giving us a clearer picture of the end-user.

By capturing what users say, do, think, and feel, we deepen our understanding of their needs and challenges.
Affinity Mapping
Here, similar insights were grouped together and ordered chronologically. This approach helps visualize user pain points more effectively.

By plotting these insights into key stages, we gain clarity on user needs.
I then outlined the specific issues with assigned priorities, to help focus our efforts effectively.

High Priority (Major usability problems that need immediate attention):
• The most critical needs identified include a larger video screen and a wider input field.

Medium Priority (Important but non-urgent issues):
• The auto transcription saving problem, the overlap between the video and input field, as well as the need for a clearer distinction between "notes" and "transcriptions" were all noted as medium priority issues.
Experience Map
Insights gained from affinity and empathy mapping play a key role in developing the experience map.

This mapping process allows us to identify user sentiments and highlight significant challenges throughout the user journey, from lecture watching to note reviewing.
User Stories
To communicate how this redesign would provide value to the user, I've come up with three key user stories.

User stories also serve as a quick reference for teams during development, helping them to grasp user needs and goals.
User Stories
“I need the lecture watching experience to be immersive, to maintain focus and academic progress”.
“I want a simple note-taking method to capture essential information, efficiently”.
“I don’t want to spend extra time tediously reviewing notes because I don’t want it to hinder my motivation and time management”.
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
My brainstorming process focused on identifying specific issues in the three key areas of concern: lecture watching, note taking, and note reviewing.


For each issue, I also came up with suggestions, focusing on the most promising ideas (indicated with red dots), to make the platform more conducive to learning.
Impact Effort Matrix
I then organized the ideas into an impact/effort matrix, prioritizing the ideas in the top right quadrant, with the highest potential impact and relatively low effort.

This is a useful tool for decision-making and resource allocation.
Wireframe Sketches
I sketched out some initial wireframes, adding stars to the most promising ideas.

We'll take a closer look at the details, as we go over the low fidelity wireframes next.
Low-Fidelity Prototype
Solution #1: Lecture Watching Experience
Before / After
Issue
Largest video screen size is too small, leading to a suboptimal viewing experience
Changes
Improved layout flexibility with a larger video screen, for a more immersive experience.
Solution #2: Note Taking Experience
Before ("Above Fold" / "Below Fold")
Issues
Narrow, vertically expanding, text field affects readability when users type larger notes - users have to jump from line to line more frequently, to follow their note.
No visual cues to distinguish between "intentionally-saved" and "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
Brought in the columns and switched their order, for a more breathable layout. Also widened input field slightly, for better note taking
“Note Saving” and “Transcription Saving” features now accessible “above the fold”
After ("Above Fold" Theatre View - Pro's and Con's)
Pros and Cons
(Pro) In “theatre” view, we see that note taking can be possible above the fold, which enhances user accessibility.
(Con) If users wish to add a lengthy transcription, the "save" button may get pushed slightly below the fold.

Though users have the option to switch to the “two-pane” view for saving notes, alongside lengthy transcriptions, I would have liked to incorporate this feature into the "theatre" view as well, given more time.
After ("Below Fold" - version 1 / version 2)
V1 Changes
Overlapping issue resolved
V2 Changes
Optimized placement of mini video
Removed extra scrollbar, as the scrollbar on the far right can be used instead, to scroll through the notes section, while ensuring all other elements remain fixed, utilizing a "sticky scrolling effect" to enhance navigation and usability.
Solution #3: Note Reviewing Experience
Before ("Above Fold" - Main Page / Notes Page)
Issues:
Difficult to distinguish between “transcriptions” and “notes”, on both the main page and notes page, as the "Your Note" header is not prominent enough, making it hard for users to see which notes they are viewing.

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 (instead of the notes page and main page), to allow users to easily refer back to the lecture, when needed.
How Does The Solution Solve The Problem?
Lecture Watching Experience
Immersive lecture watching experience so that students can maintain focus and academic progress.
Features
Improved layout flexibility with a larger video screen, for a more immersive experience.
Note Taking Experience
Provides a more user-friendly interface for capturing notes and saving transcriptions.
Features
Longer input field, with optimized placement (below large video)
Optional transcription saving by easily highlighting text and selecting "Save as Note" or "Attach to Note"
Optimized mini video placement (without elements overlapping)
Consolidated notes into one place, to easily reference the lecture, when needed
Transcription is saved with note (above)
Note Reviewing Experience
Clear distinction between "notes" and "transcriptions," which helps reduce the time needed for review, and lowers cognitive load.
Features
Clear visual cues help users to easily identify between "notes" and "transcriptions", making the reviewing process more efficient.
Reflections
Improvements to the Note Taking Experience
Further exploration to make note saving with transcriptions accessible above the fold in both "two-pane view" and "theatre view", (instead of just in "two-pane view").

Exploring the option to “edit” or “delete” notes and transcriptions to enhance the overall note-taking experience.
Improvements to the Note Reviewing Experience
I would have wanted to explore a filter option for notes by lesson, allowing users to easily select which lesson notes to review.
Gather More Feedback
I conducted three rounds of usability testing, which included one session with the target user and two with my professor.

If time permitted, I would have preferred to gather more feedback from the target user to refine the iterations further.

Winnie the Pooh

Children's Lunchbox
Project Overview
The Winnie the Pooh children's lunchbox offer's a fun and playful way to take lunch on-the-go.
My Contributions
• 3D modelling
• Rendering

Want to work together?

If you like what you see and want to work together, get in touch!