Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 12 Current »

Status

DRAFT IN PROGRESS

Contributing Team

Marco Morales , Volodymyr Chekyrta

Earlier Discovery

Quick Discovery: Improved Discovery Experience [Mobile Roadmap]

Linked Initiatives

Tentative Funded Contribution FC-0028

Overview

With this effort, we’d like to shift away from the minimalist catalog discovery capabilities on Open edX mobile to match what other services support in terms of helping learners find the right course. This effort should introduce mobile friendly course and program enrollment pages and improve the ability to provide rich, valuable metadata for these pages through the core edx-platform experience (without the need for the discovery service).

Overview

With this effort, we’d like to shift away from the minimalist catalog discovery capabilities on Open edX mobile to match what other services support in terms of helping learners find the right course. This effort should introduce mobile friendly course and program enrollment pages and improve the ability to provide rich, valuable metadata for these pages through the core edx-platform experience (without the need for the discovery service).

Key Use Cases

  • As an learner, I would like to discover Open edX courses / programs from my learning site on my mobile device.

  • As a learner I would like to search and browse the catalog of my learning site from my mobile device.

Deliverables

  • Stage 1 - Course Enrollment Page Authoring

    • Updated experience for basic platform authoring of course enrollment pages to support improved metadata and the new MFE development patterns of the platform.

    • This would move the course enrollment page content of the Schedule & Details page to its own Course Enrollment page, built into the course authoring MFE. Additional metadata fields to be added to build richer enrollment pages.

  • Stage 2 - Updated Course Enrollment Template in edX-platform

    • Mobile friendly templates for use on desktop, mobile web, and for use in the mobile applications if web view based discovery is enabled.

  • Stage 3 -Mobile Catalog Discovery Browse Screens

    • Basic Catalog Browse views on mobile application experience (web / native options)

    • Support for mobile web views / embeds of the existing + updated course enrollment pages

    • Support for native mobile app enrollment page (TBD)

  • Stage 4 - Mobile Catalog Discovery Search Screens

    • Ability to search the catalog, see recent personal and popular searches as well

  • Stage X - Program Configuration v1

  • Stage X - Program Enrollment Page Templates v1

Users

  • Learner (Desktop, Mobile Web, Mobile App)

  • Course Author

  • Program Author

  • Site Administrator

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

New enrollment page templates in edx-platform for Courses and Programs.

Updated web course discovery filtering and search experience out of the box for edx-platform

Initial program configuration MFE for basic configuration and enrollment page authoring

Exploration of additional metadata fields for course and program enrollment

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 - Course Enrollment Page Authoring

Course Enrollment Page Authoring Basics

This would create a new element in the Studio Content dropdown menu called “Enrollment Page” and render a view powered by the new course authoring MFE for course authors to update enrollment page details.

Initially, replicating all existing fields with a slight update would be the initial increment of delivery, but this would be able to quickly improve in the new MFE paradigm alongside improvements to general metadata + enrollment page template improvements.

In the Initial version, the enrollment page should let you View Live across the top as the primary CTA. The fields will be grouped by section just like on the Schedule and details page today.

Fields that currently exist in the Advanced Settings page denoted with an asterisk. When this authoring page is enabled, hide these fields from Advanced Settings to only render them on this page. Some minor label changes apply to these fields.

Section 1 - Basic Course Details

  1. *Course Display Name

    1. Enter the name of the course as it should appear in the course list.

    2. (text input, defaults to existing course creation value)

  2. *Course Number Display

    1. Enter the course number that you want to appear in the course.

    2. (text input, defaults to existing course creation value)

  3. *Course Organization Display

    1. Enter the course organization that you want to appear in the course.

    2. (text input, defaults to existing course creation value)

  4. Course Subtitle (via S&D page)

    1. originally labeled “Short Description” field

  5. Course Long Description

    1. new field, previously on S&D page within “Course Overview” HTML default

  6. Course Prerequisites

    1. new field, previously on S&D page within “Course Overview” HTML default

  7. Course Staff

    1. new field, previously on S&D page within “Course Overview” HTML default

    2. add new instructor, each with Name / Image / Title / Overview fields

  8. Course FAQs

    1. new fields, previously on S&D page within “Course Overview” HTML default

    2. Each new fields has a question and answer text input pairing.

Section 2 - Visibility and Access

  1. *Course Visibility in Catalog

    1. Defines the access permissions for showing the course in the course catalog.

    2. Toggle button with options: Private, Public Outline, Public

      • Help text for each of the options should appear when selected

  2. *Course Visibility For Unenrolled Learners - TBD what this field does (but it exists in Advanced Settings, more discovery needed here)

  3. Course Dates

    1. TBD what to do here, reference S&D section for Start + Enrollment Dates, allow for data entry on either page, etc. To review with UX/UI support.

Section 3 - Visual Assets

  • Course Introductory Video Source - Course Media / External Youtube Video

  • Course Introductory Video

  • *Course Video Thumbnail Image - …

    • This should pull up a modal for image selection from the existing file and uploads page

    • A preview of the image would be shown once once is selected.

  • *Course Banner Image

  • *Course Card Image

TBD Fields from Advanced Settings

  • Course Learning Information

  • Course Is New

  • Course Instructor

  • Course Announcement Date

  • Cosmetic Course Display Price

Course Enrollment Page Authoring Improvements

Additional updates to Learning Objectives to be described here.

Updated Schedule & Details Page (Legacy Studio Experience)

With the shift to having course enrollment page authoring on the new Enrollment page, we will remove the necessary sections from the existing view that power the enrollment pages.

The following section will be removed from Schedule and Details page.

Course Metadata API

Ensure that the updated metadata for the course is accessible to the mobile application, confirm the plans from 2U on Studio modernization to see how this API work (and all of Stage 1) overlaps with existing plans

Ability to cache catalog metadata is helpful for native catalog discovery, so being able to understand whether catalog data is current or stale will be a helpful addition to this API as well.

Stage 2 - Updated Course Enrollment Template in edX-platform

Course Enrollment Page Template

New enrollment page template out of the box for edx-platform that is mobile friendly for courses.

The template is organized currently into the following sections noted below. Italicized items are only shown if configured / enabled / provided by the author.

  1. Main Metadata & Visual Details (with Enrollment Action)

    • Org

    • Course Title

    • Course Subtitle / Short Description

    • Enrollment Button

  2. What You’ll Learn

  3. Secondary Panels

    • Details

      • Long Description

      • Instructors

    • Outline

      • Section 1 Name

        • Learning Objective 1a

        • Learning Objective 1b

      • Section 2 Name

        • Learning Objective 2a

        • Learning Objective 2b

    • Other Panels TBD

Stage 3 - Mobile Catalog Discovery Browse Screens

Mobile Catalog Browse - No Subjects - Native

Subject Views & Workflow

Program Visibility

The addition of a new program card / section in catalog discovery to support an initial version of program visibility on mobile.

Mobile Catalog Browse - Web

This addition would take the existing edx-platform UI for card rendering and allow this to be a chromeless view, embedded in the mobile app discovery tabs. (TBD on whether we want to support this over simply pushing for the native solution as the primary option).

Stage 4 - Mobile Catalog Discovery Search Screens

Mobile Catalog Search Results View - Web

The ability to reference another discovery web view for catalog search on the mobile application, with the out of the box experience pointing to the existing edx-platform search feature

Mobile Catalog Search Results View - Native

Native mobile search results page that can work for both server dependent search as well as quick offline-friendly search for small catalogs via offline catalog caching.

Feature behavior

  1. X

Technical Open Questions

We anticipate the following to some of the key questions that we will need answered during technical discovery. 

  • Does the existing courses and programs information in edx-platform constitute a mobile friendly API to pull enrollment page information?

Open Tasks

  • Marco Morales to complete draft of this project page and v1 of wireframes next
  • Volodymyr Chekyrta technical discovery / development scope for each stage blocked by additional detail currently (but coming soon)

Successful Rollout: UI Considerations

We believe there is some risk in … We believe that organizations will need time to …. Therefore, we want to be conscious about how …. 

We are proposing the following to help drive adoption:

  • New User Product Tour: X

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: How ..

A:

Q: Can a ..

A:

Q: What kind of user experience for …

A:

Q: Is it possible to..

A:

Q: Will we …

A:

Q: How will ..

A:  

Q: Decision on ..

A:

Future Direction

The following features are not part of the MVP but may be added during future development of this product. They are offered here only for consideration as MVP platform decisions are made that may impact future opportunities. 

YYYY:

  • X

YYYY:

  • X

YYYY:

  • X

UI Examples

…

Original Roadmap Entry Notes

  • Course Enrollment Pages

    • Modernize template for courses + program discovery pages (mobile + mobile web)

    • Option to show course outline + section learning objectives on mobile enrollment pages

    • Direct enrollment button into course mode view

  • Recent / Popular Searches

  • Pre-Login Search and Discovery - Enable catalog search and discovery prior to account creation to improve new learner experiences

  • Program Catalog Discovery

  • Native fully offline catalog discovery

  • No labels