UX Case Study: eLearning Course Overview Redesign
When learners start a course on the edX platform, the first page they visit is the Course Overview. The current state is text heavy and difficult to parse. The following improvements are recommended for a better experience and increased revenue.
My role: UX & UI Design
Company: edX
Date: January 2019
Course Overview started with dense content that was poorly organized and difficult to parse.
Like all product designers, my teammates and I collect a mental list of tangental complaints and visible moments of confusion while researching other problems.
In addition to this backlog of obvious issues, I took a look at the existing Course Overview experience with an unmoderated usability test on UserTesting.
Learners have a hard time finding the logistical information they need.
This lack of clarity makes online learning difficult to manage, and learners are often confused or misled regarding important details such as course requirements, deadlines, and grading structure.

Dates and pricing are confusing or misleading.
We added more context around "what do I get" and "when is this due" throughout the outline and course home.
Upgrade messaging was numerous and inconsistent.
In the existing state, there are redundant messages to upgrade, but many different visual and written ways to talk about the product. I believe this diluted the effectiveness of each one. These CTAs created a (negative) halo effect for the experience as well.
We know our learners have different goals.
I ran an unmoderated usability test to observe users starting a course. This revealed two (of many) ways in which people will start a course.
We observed some learners jumping straight into the learning content out of curiosity for the subject. They are more interested in the subject at hand than the grade or certificate they might receive.
Others are more attentive to the course requirements, grading structure, and have a clear goal: finishing the course or receiving credit.
Regardless of these differences, all online learners drop in and out according to their own schedule. The Course Overview contained most of the information learners needed, but lacked the clarity and organization to support effective time management and structured learning.
I focused my efforts on highlighting important information, reducing noise, and providing context.
After a few high level white board sketches, I drew out ideas on paper and cut out the different sections as separate pieces.
This way, I was able to quickly rearrange sections for information hierarchy. I replaced portions of the sketch with better or improved versions as I went. Later, it was easy to remove things that were superfluous or non-essential to the page.
Sketches of different user states also allowed me to use this as a paper prototype to share my vision with colleagues.
Design Solutions
Iterations of the Course Overview led to several independent chunks of information that could be used in many contexts.
We often hear in user interviews how learners need more context. They want to know their progress and their grade.
Or more simply: "How am I doing?" and "Where am I?"
Resume course is given more context so learners are comfortable using this feature rather than searching down the page for the last lesson they viewed.
Assignment type and due dates are available in context so learners can prioritize their learning schedule within the context of the rest of the course.
Updated hierarchy of information supports relevance and guides learners to the next step.
Many pages in current state do not show the page title at the top. Increasing consistency of this vital piece of navigation increases usability with little time or engineering effort.
"Resume Course" is still the primary action on this page and maintains prominence at the top of the page.
The course outline is more clearly labeled as such.
Updated text styles take advantage of small line widths on mobile.
Differentiated headers and styling consistency make the page easier to scan and navigate, especially considering the text-heavy content found within deeper course pages.
These style recommendations were part of an ongoing effort to update the look and feel in small increments.
Learners get more context.
Section titles remain sticky to ensure learners do not lose their place in long sections.
Icons on the left prepare learners for the type of lesson on each page. Video lessons, reading, or interactive assignments require different amounts of time, concentration, and abilities. 
Context is key. A learner who can easily watch a video or read a lesson on the train to work or while their kids play in the background may not want to take an assessment until they get to a quieter space.
The icons match the iconography within the existing course experience to ensure a smooth transition to the updated experience.
Graded assignments are now noted with a lock icon. Free learners do not have access to quizzes, but until now, it was unclear from the outline which pages were visible and which were locked. Now, when learners reach a quiz, they are aware that they will have to upgrade to take it.
This sets expectations and uncovers a clear benefit of upgrading in context within the course.
Making life easier for myself, my team, and other project partners.
I organize and annotate design files as I go. This is helpful for sharing files, transferring projects, and requesting feedback.
Documentation on why design decisions were made helps future team members can assess a design decision within context. They may have new ways to improve an element and can research the design more rigorously without consulting me or calling a meeting.
For information about my work experience and skills: