Coursera Responsive Redesign

Skills:  Ideation, Wireframing, Interactive Prototyping, Responsive Design

Date: January 2018

Tools: Sketch, InVision, Photoshop


I developed a tool for improving student motivation in online courses, as part of the Information Design class at UC San Diego Design Lab. I followed the user-centered design process in order to create the final high-fidelity interactive prototype. This cyclical process included research, testing, analysis of tests, and prototyping.

The Challenge

Unlock the “potential energy” for the massive open online course platform, 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.

Needfinding: Observation & Interviewing

I completed 6 courses on 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 “meet ups” to get help. Thousands of students are viewing posts for meet ups and attempting to form study groups, but without any success. There are several challenges that make the forming of groups very unlikely in the current format. The students are geographically dispersed all around the world, they speak diverse languages, and have different levels of education.

Screenshot of the Discussion Forum:

Initial Tablet Wireframes

Initially I created two Wireframes flows based on two different tasks on 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.

Design 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.

Before & After Screenshot of Homepage: