Visual Course Progress
- Edward Byun
Status | READY FOR REVIEW |
|---|---|
Contributing Team | @Marco Morales , @Edward Byun |
Earlier Discovery | N/A |
Linked Initiatives | |
Overview | This initiative aims to introduce visualizations that improve upon and extend the learning progress page on the current Open edX platform web experience. These improvements would allow learners to have a better grasp on their learning progress through multiple different visualizations. Learners can choose which visual they see to better aid in their personal learning objectives. In conjunction with efforts on course goal functionality, this work will lead to more personal progress tracking experience. Improvements to progress visuals and tracking will also have the benefit of increasing learner engagement. |
Overview
This initiative aims to introduce visualizations that improve upon and extend the learning progress page on the current Open edX platform web experience. These improvements would allow learners to have a better grasp of their learning progress through multiple different aspects of a course. Learners can choose which visual they see to better aid in their personal learning objectives. In conjunction with efforts on course goal functionality, this work will lead to a more personal progress tracking experience. Improvements to progress visuals and tracking will also have the benefit of increasing learner engagement.
Goals
By designing new and improving existing visualizations, we hope to allow learners to:
easily track overall progress in a course (x units complete, y units left)
pick up where they left off within a block (progress within content, ie: x% of video left, x questions left, etc)
understand their progress towards passing a course (weighted grade)
As a result of the work in this initiative, we hope to drive engagement and support learner motivation.
Key Use Cases
As a learner, I would like to track my progress towards course learning objectives. These can be course completion, video watch, completing assignments, and/or passing the course.
As a learner, I would like to understand where I am in my learning, and easily pick up where I left off.
Deliverables
Stage 1 - Mobile Course Progress Page
We plan to convert the web Progress page down to the native experience, conveying completion and grade progress.
Stage 2 - Video Progress and Completion
We plan to add progress visuals for partially viewed videos in various places on the mobile experience.
We also plan to add a visual to convey how much of the overall video content has been watched.
Stage 3 - Home Page Mini Progress Views Section
We plan to introduce modified (or separate views) of the progress visuals from the Progress page. These visuals will live on the new course Home page. (Design of the new course Home page is being addressed in the Course Content View project)
These visuals are a modification (or a separate view) for the course-level progress modes from the progress page.
Learners will be able to choose the visual that best suits their personal learning objectives.
In Scope / Out of Scope
Based on the above use cases, we are breaking down on high-level scope as follows:
In Scope | Out of Scope |
|---|---|
Translation of the web Progress page into a mobile format | Gamification / streaks views |
New video progress modes (single video, total video content) | Home page redesign (This work is being done in the Course Content View project) |
Mini Progress views for the course Home page | Video page redesign |
MVP Specs
Features & Requirements
In order to realize this MVP, we believe the following features will be required. Refer to the following flow chart for more details:
Feature | Requirements |
|---|---|
Stage 1: Mobile Course Progress Page | |
Course Completion Visual | This visual should be a direct translation of the circular progress visual from the web experience |
Grade Summary | This section should show syllabus level information on the weight of each graded category (ie: homework, exams, labs) as well as the learner’s current grade within each category. This section should also include a weighted grade progress visual/bar and grade feature lock visibility, and grade progression bar. |
Weighted Grade Visual/ Progress bar | This visual should show a learner’s current weighted grade compared to the minimum required grade to pass a course, desired grade, or both. |
Grade Feature Lock Visibility | The progress page should have clear indicators if the grade feature is locked and requires an upgrade to view. Courses with this status should have a preview that allows learners to see the utility of the grade summary in an generic/unpopulated manner. Locked courses should have a clear CTA to allow learners to upgrade and view locked information. |
Stage 2 - Partial Video Progress and Completion | |
Progress Bar Under Video Thumbs | This visual should show how much of a video has been completed so a learner can see at glance their progress across multiple videos |
Completed Video Indicator | Video content that has been completed should have a clear indication to allow learners to quickly see which videos have been watched. |
Overall video Progress | This visual should show how much of the total video content in a course has been completed. |
Stage 3 - Home Page Mini Progress Views Section | |
Home Page Progress Visual Section | This section of the new course home page should provide learners with quick views of different progress modes. Learners should be able to choose the visual that best suits their learning preference, but also see the other progress visuals if desired. These sections should also have clear CTAs. Each of these views are described below. |
Course Progress View (within the Home Page Progress Visual Section) | This progress visual should show how much of the overall course content has been completed. The CTA for this visual should take the learner to the “All” section of the course content view. |
Video Completion View (within the Home Page Progress Visual Section) | This progress visual should show how far along a learner is from completing all of the videos in the course. The CTA for this visual should take the learner to the latest partially viewed video or next video up on the sequence. |
Assignment Completion View (within the Home Page Progress Visual Section) | This progress visual should show how much of the course assignments have been completed. The CTA for this visual should take the learner to the Assignments tab of the new course content view, with the next assignment highlighted. |
Weighted Grade Progress View (within the Home Page Progress Visual Section) | This progress visual should show a learner’s current weighted grade and the course passing grade. The CTA for this visual should take the learner to the grade portion of the Progress page. |
Technical Open Questions
We anticipate the following to some of the key questions that we will need answered during technical discovery.
Open Tasks
Product & UX/UI FAQ
The following represent our Product view of key questions. However, we look to the UX/UI and technical teams to validate these as needed.
Q: No questions yet!
A:
Future Direction
No notes included for this project.
UI Examples
Updated designs coming soon!