Course Content View (Mobile)
- Edward Byun
- Marco Morales
Overview
This initiative involves renaming and reorganizing the Videos tab into a “Content” tab in the Open edX mobile app. This “Content” tab will contain several views of course content, including the full course outline. This allows for the main home page for each course to function more as a hub for learners, allowing them to see important updates, progress, and other necessary information relating to “what’s next.”
Design development for this project can be found here: Course Content View (Figma Link)
Key Use Cases
As a learner I would like to be able to browse specific fractions of my course experience. (New Content View)
As a learner I would like to understand what to do next in my course, how I am doing, and see any recent updates since I last learned on the mobile app. (Updates to Course Home)
Deliverables
Stage 1 - New Content Tab v1 (replacing Videos tab) All Content View (Figma Link)
Replace the ‘Videos’ tab within the Course experience with a ‘Content’ tab, enabling us to present both the full course experience and the videos only. This will be expanded in future stages.
Stage 2 - Updated Course Home Course Home (Figma Link)
Course home will now function as a hub for learners with information and CTAs related to what is next for overall course content, assignments, videos, as well as a grade progress tracker.
Full course outline/ content view will be moved to the Content tab.
Stage 3 - Add Assignment View to Content Tab Assignments View (Figma Link)
This view will list out the assignments that need to be completed for this course to be passed, and have other relevant visualizations to allow learners to track their progress towards completing necessary assignments. The progress visuals will be pulled from the Visual Course Progress initiative, found here: https://openedx.atlassian.net/l/cp/YdzXHi7q
Stage 4 - Improvements to Video Content Tab View Video View (Figma Link)
This view will show course video content in a more visually compelling manner.
Users
App Provider: Any group building the new mobile applications for other site operators / learning academies using Open edX.
Learner: Any Open edX instance learner whose learning site relies on a multi-tenant app build model.
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 |
|---|---|
Updated Course Videos Tab to New Content Tab | Course Home Widgets / Coach Views / Updates / Dates / Discussions- These potential additions can be considered in future projects |
Update Course Home to shift full outline to Content Tab | Progress visuals designs |
Improvements to Video view |
|
Addition of Assignments view in Content Tab |
|
New “Now Playing” page for videos | Redesign of the video x-block |
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 |
Course Home Page | Page Goal: Serve as a hub for learners where they can get updates/ notifications, performance metrics, etc. Changes: Remove full course outline, add ‘next up’ type content. |
Content Page (general) | Page Goal: Show course outline and other views of course content to allow learners to better meet their personal learning objectives Changes: Replace “Videos” page with a “Content” page. The new “Content” page will initially have three views: All, Videos, and Assignments (in that order) |
Content View: All | Page Goal: House the course outline with all content in sequence. This is the sequence view found on the current course home page. Changes: Replace the “Video” page. Remove video download options and move to “video” tab. Video settings to be moved elsewhere. |
Content View: Assignments | Page Goal: The Assignments view should allow learners to see where they are in regards to passing the course, mainly: how many assignments are left, as well as some status (any past-due assignments) Changes: This is a new view. |
Content View: Videos | Page Goal: Allow learners to view videos in a way that caters towards learners who enroll in courses for video content only and learners who wish to view videos on mobile/ on-the-go while completing other course material in a mix of web and mobile. Changes: Move video download settings elsewhere. Re-design old videos view to be less course outline dependent. |
Stage 1 - New Content Tab v1 (replacing Videos tab) | |
Content Tab Resume / Start | The content tab should have a resume / start button when viewing at least the “All Content” view of the course, as is the case on Course Home. |
Content Tab Views | On the Content tab you will see controls to change the view from the entire course: “All”, which contains the course outline, “Videos” which will have only video content, and “Assignments” which show all course assignments. |
Content Tab Naming | The Videos tab name should change to Content and the icon should also be updated. |
Video Tab Settings / Controls | Bulk download action for the videos should be moved to the new “Videos” view. Video quality settings should be moved elsewhere. |
Stage 2 - Update Course Home given new Content Tab v1 | |
Fractional Course Outline | Remove the full course outline from the home page, and instead show a section with “Next Up” or “Continue” which shows just the next Section to be completed. We may consider showing the most recently active section instead of the “next” to echo the current Resume Course button. |
Progress Visual Carousel | The home page will contain a carousel that is comprised of progress cards and corresponding CTAs. The progress shown will be: course progress (how much of course content has been completed), video (how many of the total videos), assignment (how many of total assignments have been completed), and grade (weighted grade progress towards passing grade). This information is detailed in the closely related https://openedx.atlassian.net/l/cp/YdzXHi7q project. |
Carousel Card CTAs | Carousel cards will have the following CTAs:
|
Course Outline | We plan to add a call to action (secondary) on the home page for learners to view the full course content view (now on the “content” tab). This CTA will take learners to the Content tab. This will help train learners where to find the full course outline as it has been on the “home” page for years. |
Stage 3 - Add Assignment View to Content Tab | |
Assignment listing | Show upcoming assignments/ assessments organized by type (ie: homeworks, labs, exams). Each assignment type section should show its overall grade weight. |
Assignment view position in navigation | The button to access this view “Assignment” will be be positioned after the after All and Videos sections |
Priority organization | The assignment view should help learners quickly see the next up assignment. We achieve this by highlighting assignments with close-by deadlines, as well as assignments that are past due. |
Assignment type grade weight | Each assignment type will show its grade weight |
Link to Progress Page | The assignment view should have a link to the grade summary/information section of the upcoming Progress page, allowing learners to understand the weight of each assignment type. |
Stage 4 - Improvements to Video Content Tab View | |
Download for later watching | This view should support the download functionality of the old Videos view: download all, download single video |
Section / subsection organization | Videos should be organized by section/subsection to allow learners to understand where, within a course, each video lives. |
Video progress: Overall and per-video | Reflect the work on video progress described in the Confluence proposal page forhttps://openedx.atlassian.net/l/cp/YdzXHi7q |
Technical Open Questions
We anticipate the following to some of the key questions that we will need answered during technical discovery.
Impact of new features/ designs on load time. Particularly in loading a large number of thumbnails and progress visuals for the home page, video content view, and the video player page.
Open Tasks
Technical feasibility: Discussion with development teams to understand the feasibility of these designs.
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 Home Page
Detailed Requirements
[screenshots with detailed requirements coming soon]