Design

Redesigning edX in 10 Hours

For a design exercise, I took on the challenge of redesigning the edX’s homepage and the course page. The goal was to create a working (HTML, CSS, and JavaScript) prototype in 10 hours. Because of the limitation, I needed to set my priorities. What can I accomplish with the time that I had?

For user research, I relied on myself as a student who wanted to take an online course at edX. While browsing through the site I kept the following questions in mind:

  1. What am I looking for?
  2. Can I find the courses I want to take? Why not?
  3. How quickly and easily can I find the courses?
  4. What does the current site do well?
  5. What does the current site do poorly?
  6. What is the most important goal needed to be considered in the redesign?
  7. How does the user interface need changing?
  8. What areas can I improve in the new redesign?
  9. What features can I eliminate in the redesign?
  10. What features can I highlight in the redesign?

After spending an hour using the site on my laptop and mobile phone, I concluded that my priorities are speed and simplicity.

Eliminate Distractions

On the homepage, my first priority is to eliminate distractions. For new students who just want to see what edX has to offer, they don’t need to see all the navigational items until they logged in; therefore, I eliminated all the menu items, except for the “sign in” button.

For the main hero image, I wanted to move away from stock photography of students using their laptops to a simpler illustration. The image of the figure carrying the entire world on his head, illustrated by Jim Frazier, indicates knowledge and worldwide education. I also removed popular courses to feature various programs student can take at edX. Below that is a list of some of the schools that partnered with edX.

For the footer, I had detailed navigation to allow students get answers and information they have about edX as fast as possible.

Take a look at the current edX homepage and my redesign.

For the search page, I displayed the large heading to showcase how many courses EDX has and the search box appeared immediately underneath. If students don’t know what they are searching for, they can check out some of the popular courses below.

One of the key differences between the old and the new design is the remove of the images. On the current site, the thumbnail images don’t help much because most of them are simply stock photography. Removing the thumbnails make the courses load faster and allow more room for the course description. Furthermore, it forces me to make good use of typography.

Take a look at the current course page, the redesigned search page, and the redesigned result page.

Process

I knew that I don’t have much time to mockup the pages in Photoshop; therefore, I went straight into HTML, CSS, and JavaScript. I also knew that if I use a framework like Bootstrap or Foundation, I would have spend much more time customizing the design; therefore, I just do it from scratch. SASS helped tremendously in speeding up my time.

For responsive design, I started with the mobile first approach and take advantage of the screen space on desktop without breaking the layout or making the text harder to read—thanks to CSS Flexbox.

The edX redesign prototype is on GitHub. Feel free to play with it.