Wireframing and Interactive Prototyping for Coursera.com

A Bit of Background

I did this project for the Information Design class at UCSD Design Lab. My intention of publishing this piece is to give you an idea of how I approach solving problems with design.

The Challenge

Unlock the “potential energy” for the massive open online course platform, Coursera.com by redesigning it. Focus on redesigning the home screen, as well as a common task for the website. The design should be responsive for Tablet, Mobile, and Desktop.

View user interaction with final mockup below:

Needfinding: Observation & Interviewing

I completed 6 courses on Coursera.com before I even started working on the redesign. During my time in the classes, I observed many facets of the platform and kept a running log of areas that I would like to see improved. Also I worked as a Teachers Assistant, which gave me deeper insights into the issues students were having. Lastly, I organized online meet ups with students , and took advantage of that time to get even more feedback and critiques on the platform.

By the time I started this assignment I had several pages of observation and interview notes to draw on. I picked one problem area that was the most common and the root of many of the other problems. This problem area was the interactions on the class forums , specifically with forming “meetups” to get help.

Initial Tablet Wireframes

Initially I created two Wireframes flows based on two different tasks on Coursera.com. But eventually, I took parts from both these ideas to create a single flowing wireframe.

Wireframe #1

Form a study group with like-minded and similarly motivated classmates. This is typically attempted in the class forums.

Wireframe #2

Organize a meeting for your study group. This is typically done by sending back and forth messages to different people in the forums; and as you saw in the example above, these typically don’t work.

High-Fidelity Tablet Wireframes

Here I created a single flowing experience from the home page to the class chat page. The version you see below is the 5th iteration of the design; it incorporates feedback from my IxD professor at UCSD, Scott Klemmer ,  from classmates in the course, and friends that are UX Designers.

Some of the iterations:

  1. Increased Information Scent on the home page (screen #1) by adding secondary text blocks under each assignment heading with more details.
  2. Increased Information Scent on the last page (screen #4) by adding a picture of the meetup location and reviews for the cafe/restaurant.
  3. Aligned Grid from the Coursera logo to the bottom of the page, on all pages. This made the screens more easily readable.
  4. Improved Visual Design: UX Designer friend advised me to remove the borders around the buttons , radio buttons, and checkboxes to improve their appearance.