Coursera: Responsive Redesign

Skills:  ideation, wireframing, interactive prototyping, responsive design

Date: January 2018

Tools: Sketch, InVision, Photoshop

As part of my Coursera UC San Diego Interaction Design Specialization, I developed a tool for improving the motivation of students enrolled in online courses. I tested several prototypes before arriving at a high-fidelity interactive prototype.


The Challenge

The aim is to redesign Coursera’s massive open online course (MOOC) platform in order to unlock its “potential energy.” I have focused on redesigning the home screen, as well as a common user experience on the website. The design needs to work equally well on desktop, tablet, and mobile devices.


Needfinding: Observation & Interviewing

I completed six courses on the platform before initiating the redesign. During these classes, I kept a running log of pain points at which I myself and other students encountered something other than a seamless learning experience. My work as a teacher’s assistant, moderator of the online forums, and manager of the 2,400-member group provided me with a holistic understanding of why students were canceling their accounts before finishing the class.

Analyzing the list of pain points, I discovered one opportunity area that, if addressed, would solve many of the common problems associated with facilitating student-to-student interactions in MOOCs. Many students tried to form study groups and to request feedback from each other in the class forums, but they were rarely successful in doing so. The main problem is that the class forums simply do not promote constructive interactions among users.

Screenshot of the Discussion Forum:


Initial Tablet Wireframes & Algorithm

I wireframed two user flows based on various tasks on Coursera.com and eventually combined aspects of each to create a single flowing wireframe. I came up with an algorithm that can effectively group students based on such self-reported information as geographic location, language, and learning goals. I based my thinking here on my experience manually organizing student study groups for the class.

 

Wireframe #1: involves forming a study group of like-minded and similarly motivated students, as is often attempted on class forums.

Wireframe #2: involves organizing a meeting for a study group, typically by the circulation of messages among various individuals on the forums; as my experiences described above demonstrated, this approach tends to be unsuccessful.


High-Fidelity Tablet Wireframes

Accordingly, I created a single experience flowing from the home page to the class chat page. The version shown below is the fifth iteration of the design; it incorporates feedback from my IxD professor at UCSD, Scott Klemmer, from my classmates, and from a visual designer colleague.

Design iterations:

  1. I increased the information scent on the home page (Screen #1) by adding greater detail in secondary text blocks under each assignment heading.
  2. I increased the information scent on the last page (Screen #4) by adding a picture of the meet-up location and reviews for the cafe/restaurant.
  3. I aligned the content for all pages in a grid, in order to make the screens easier to read.
  4. I improved the appearance in response to advice from a visual designer colleague to remove the borders around the buttons, radio buttons, and checkboxes.

Before & After Screenshot of Homepage: