E-Learning Course Home
Rapid prototyping and usability testing on this core page of the e-learning experience helped me design a clean update with key usability improvements.
UI Design and Usability Testing | edX | January – February 2019
Deliverables
Usability Research
Prototype
Annotations for Engineering
Skills and Experience
Usability Research
Rapid Prototyping
Mobile-first Web App
Visual Design
Problem Areas Identified
In addition to a backlog of previously identified issues, I took a look at the existing Course Overview experience with an unmoderated usability test on UserTesting.
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.
The Existing Course Homepage
We uncovered a few areas of friction with potential for improvement.
Dense, poorly organized content made lesson plans difficult to parse.
Upon reaching the first page of a course, it can be difficult to find where to start. Lots of information quickly overwhelms new users.
Learners had 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 were 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.
Design Solutions
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.
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 can be identified with a simple lock icon.
Free learners do not have access to quizzes, but until now, it was unclear from the outline which pages were not available. 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.
Handoff and Deliverables
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.
