UX Case Study: eLearning Course Overview Redesign
My role: UX & UI Design
Date: January 2019
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.
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.
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.
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.
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.
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.