Visual Course Progress (Mobile)
- Edward Byun
- Marco Morales
Overview
This initiative aims to improve upon and extend the visuals from the progress page on the current Open edX platform web experience. By introducing new or improved progress visualizations, learners will be able to better grasp their progress to suit 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.
Design development for this project can be found here: Visual Course Progress (Figma Link)
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 (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 better understand where in my learning process I am within a course.
Deliverables
Stage 1 - Mobile Course Progress Page + Improvements
We plan to convert the web Progress page to a mobile friendly format and suggest improvements.
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 - Assignment Progress
We plan to show progress visuals for assignments broken down by assignment type, for example: homeworks, labs, midterm etc.
Stage 3 - Home Page Mini Progress Views Carousel
We propose introducing progress visuals from the different areas of the course experience to the new course Home page in a progress carousel. Design of the new course Home page is being addressed in the Course Content View project. These progress visuals will help orient learners and allow them to quickly pick up where they left off.
Learners will be able to choose the visual that best suits their personal learning objectives by scrolling through the home page progress carousel.
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 |
Changes to course grading policy flow in Studio to support weighted grade and assignment type color scheme selection | Learning preference selection |
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 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. |
Consistency of Progress Values | The progress values (xx/yy, percentages, etc) should be consistent across all platforms. ie: if the progress for course completion is at 56% in the mobile Progress page, it should also reflect 56% in the Home Page Carousel on the mobile app, as well as the LMS on web. |
Stage 2 - Partial Video Progress and Completion | |
Video Thumbs Progress Bar | 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 Carousel | |
Home Page Progress Carousel | 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. |
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.
Progress calculation: Is this something that can be pulled from the API? Consistency is important: progress visuals that are in both the mobile and web experience should present the same data. ie: at any point, course progress percentage have the same number in both the web and mobile.
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
Progress Home Page
Progress Carousel Cards: These card contains progress and next-to-do’s.
Progress Page