Versions Compared

Old Version 17

changes.mady.by.user Elizabeth Cohen

Saved on

compared with

New Version Current

changes.mady.by.user Marco Morales

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Page Properties

Status

Status
colourYellowGreen
titleEARLY DISCOVERYcOMPLETED

Contributing Team

Marco Morales , Volodymyr Chekyrta

Earlier Discovery

Quick Discovery Next! N/A

Linked Initiatives

Tentative Funded Contribution FC-00280046

Roadmap Entry

https://github.com/openedx/openedx-app-ios/issues/87

Overview

With this project we hope to transition the Open edX learning experience toward simplified navigation and quicker access to learning content. Similarly, we plan to lay the foundation for future course home and app home experiences that represent learning homes not content listing pages.

Overview

Excerpt
nameoverview

With this project we hope to transition the Open edX learning experience toward simplified navigation and quicker access to learning content. Similarly, we plan to lay the foundation for future course home and app home experiences that represent learning homes not content listing pages.

Key Use Cases

  • Provide key mobile experience components and views to support an improved primary launch experience for as many Open edX instances as possible, with a focus on supporting learners taking the next content step in a specific learning product object (ex: course, program, etc).

  • Consider how components, subviews, etc of this primary launch experience might be refactored for instances that vary in catalog size and product offerings.

  • Shift away from a product listing focused experience (ex: Coursera, edX) to a single content object focused ‘next step’ experience as demonstrated by learning applications (ex. Duolingo, Codecademy, etc. )

  • Summarization of key areas that we plan to change as part of this effort:

    • Account Level Views:

    • App Updated account creation, access, and settings views

    • Dashboard Level Views: Updated application level mobile navigation patterns

    • Course Home: Updates to course home experience

    • Course Content: Improved content filtering and navigation tools

    • Sequences Nav: Sequence Navigation: Streamlined course sequences experience

Deliverables

  • Stage 1 - Account Level Navigation Changes

    • Account Settings - Cleaned up account settings tools split out from Learner Profile

    • Updated App Navigation Bar - Updated core navigation to Learn, Discover, Downloads, and Profile, skipping future proposed Dates / Plan page and Profile → Activity page shift.

  • Stage 2 - Dashboard Level Navigation Changes

    • New Learn Page : Configurable Products + Listing / Next Step Modes This shift combines the Courses + Programs tabs to a single Learn tab with a clear product selection toggle at the top of the view. Product pages can be native or web view linked. This increment also introduces modes for the product view (listing - status quo) and (next step - future direction). The default view will shift to being ‘next step’ however it will be easy for applications to configure the listing view instead for courses.

    • New Downloads Page - Application level downloads view, or at least a simple v1 variant that links to per-course download views to be improved eventually by Project - Offline Mode (Text + Problems) (FC-28c)

    • Updated App Navigation Bar - Updated core navigation to Learn, Discover, Downloads, and Profile, skipping future proposed Dates / Plan page and Profile → Activity page shift.

  • Stage 2 - Course Home

    • details coming soon

  • Stage 3 - Course Content Page

    • details coming soon

  • Stage 4 - Sequences Navigation Updates

    details coming soon

    Stage 3 - Course Home

    • Course Image, Heading, and Navigation - This involves a visual shift to the course home experience to present course image, title, organization and main course navigation views up top instead of using the bottom course navigation bar. Fallbacks to support cases where no course image exists, as well as scrolling behavior is part of this.

    • Basic Visual Progress Summary - An initial high level progress visual that we can improve over time will be added to course home to highlight which fraction of the total course lessons have been completed.

    • Course Sections / Outline Updates - Focusing the course outline on a quick recap of progress to date and clear hierarchical boundaries for course areas is a key aspect of this refresh. Collapsing completed sections to minimize their visual weight, providing a space for course messages (such as certificate or access expiration), and other updates relating to incorporating visual progress are a planned part of this.

  • Stage 4 - Sequences Navigation Updates

    • Echoing Full Unit Page Navigation - For sequences our goal is to remove the need to have a secondary outline page after the course home page which lists units + components / blocks. Instead, our goal is to jump students into learning sequences from the Start Course / Resume Course buttons or Course Outline elements on course home. To achieve this our plan is to build full unit pages as is the case on the desktop web experience, with learners progressing through unit pages via next and previous buttons.

Users

  • Learners - These updates are focused on learner facing changes to the mobile applications.

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 Learn Page (clear toggle between Courses and Programs)

New Plan Page - While includes for the sake of directional visibility, this page can be build after completion of Project - Mobile Dates & Calendar Personalization

New Downloads Page -v1 App Level page for downloads (to be incorporated into plans but built into the Offline Mode project)

New Activity Page - May keep this as profile page for now, with future changes planned after core navigation is updated. This page is of secondary / tertiary importance compared to other updates in this scope.

Updated Course Home - A new course home experience with new navigational elements instead of the bottom navigation bar, improved visual styling for the content outline, addition of a simplified top level progress bar, and other small adjustments.

Updated Learning Sequences Navigation - This includes the removal of the secondary Unit + Component page after the Course Home page, streamlining content access flows.

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

App Level Views

New Learn Page: Configurable Products + Listing / Next Step Modes

  • New Learn Page replaces existing Courses page

  • Learn page can have product configured as top level toggles, with Courses being the default experience.

  • Product views (Courses / Programs / etc) can be linked to native components or webviews.

    • Option 1: Programs product type linked to a placeholder page url (terms of service, or other existing view) to demonstrate web view configuration of products page primarily. Full programs experience split into future project.

    • Option 2: Programs experience v1 linking to edx-platorm programs view could instead be delivered as part of this effort.

  • Courses view will be natively built into the application, with existing cards put into the “listing” mode of this view.

    • Minor design updates to these cards are planned as well

  • The new ‘next step’ mode for the Courses page will introduce a three new course cards into the mobile application.

    • Card 1 - Full Card - Shown in ‘next step’ mode when learner is enrolled only in 1 course product object.

    • Card 2 - Primary Card - Shown in ‘next step’ mode when learner is enrolled in 1+ courses.

    • Card 3 - Secondary Cards - Shown under primary card when learner is enrolled in 1+ courses.

Early design concept sketches to be added further down this page.

New Downloads Page

  • Initial v1 of an app-level downloads page which summarizes the ability to download course content and provides quick access to downloads.

  • Initial iteration may simply list downloaded items grouped by course object.

  • Future improvements to be delivered in other projects.

  • Additional product details coming soon.

New Dates / Plan Page

  • Initial v1 of app-level plan page for now echoing the dates feature of the courses experience. For now, this page will be shown as a “coming soon to this application” page.

  • Timing / alignment between this and the course dates + personalization project (Project - Mobile Dates & Calendar Personalization could change the plan for this view v1.

Account Level Views

Profile & Account Settings Updates

The goal of this effort is to split the profile page (who I am as a learner, what I’ve done, and eventually what I’m doing) from account settings ( controls, options, etc.)

The profile age should represent who I am as a learner and what I’ve done so far. Under consideration for scope in this effort is to see whether it is possible to retrieve and visualize platform certificates in a single view. All account settings details, including account deletion workflow should move into account settings area and be removed from profile.

Account settings should be accessible from the main 4 application tabs as an icon in the top right of the page.

App Level Navigation

As demonstrated by the requirement sections above, the new application navigation will see some updates. The new app level navigation bar

  • Today - Depending on scope this might weave its way into the UX definition of the Learn view as heading / top level context (Cut from Scope)

  • Learn - New primary Learn page combining product listing views for products in student’s account

  • Discover - Shift discovery to second view, with discovery improvements to be handled in Project - Improved Mobile Discovery (FC-28a) Plan

  • Dates - This is a level up of the course dates and schedule feature to present students with planning / visual tracking tools for upcoming dates + targets.

  • Downloads - Quick access to offline learning materials for students to access materials on the go.

  • Activity - Depending on project scope this will be the Profile page or what we hope may replace it as an activity focused view (with a way to get to your public profile.) This view is focused on you - what you have done / are doing.

    • Account Settings will be linked from the top avatar icon in the top right of each of these main views, or potentially only on Activity / Profile page.

Dashboard Level Views

New Learn Page: Configurable Products + Listing / Next Step Modes

  • New Learn Page replaces existing Courses page

  • Learn page can have product configured as top level toggles, with Courses being the default experience.

  • Product views (Courses / Programs / etc) can be linked to native components or webviews.

    • Option 1: Programs product type linked to a placeholder page url (terms of service, or other existing view) to demonstrate web view configuration of products page primarily. Full programs experience split into future project.

    • Option 2: Programs experience v1 linking to edx-platorm programs view could instead be delivered as part of this effort.

    • The ability to link webviews was added for Programs, so we should move that functionality into the Learn page (when Programs page is selected). Similar web view configurations also should be possible for course view if desired.

  • Courses view will be natively built into the application, with existing cards put into the “listing” mode of this view.

    • Minor design updates to these cards are planned as well

  • The new ‘next step’ mode for the Courses page will introduce a three new course cards into the mobile application.

    • Card 0 - Full Card - Shown in ‘next step’ mode when learner is enrolled only in 1 course product object.

    • Card 1 - Primary Card - Shown in ‘next step’ mode when learner is enrolled in 1+ courses.

    • Card 2 - Basic Cards - Shown under primary card when learner is enrolled in 1+ courses.

    • Card 3 - Progress Cards - Shown in (all) My Courses view

Design mocks added further down this page.

New Downloads Page

  • Initial v1 of an app-level downloads page which summarizes the ability to download course content and provides quick access to downloads.

  • Initial iteration may simply allow this tab to be configured, but it will be defaulted off until the Offline Mode project gets us to a v1 of this page.

New Dates / Plan Page

  • Initial v1 of app-level plan page for now echoing the dates feature of the courses experience. For now, this page will be shown as a “coming soon to this application” page.

  • Timing / alignment between this and the course dates + personalization project (Project - Mobile Dates & Calendar Personalization could change the plan for this view v1.

Course Home

Resume Course CTA Updates

Visual updates / cleanup to the resume learning call to action

Course Listing Item Blocks

  • Augmenting the section + sequence course home navigation to support collapsible sections (including auto-collapsed completed sections)

  • New {N completed sections} expandable object for whenever there are more than 1 completed section next to each other in the outline to help collapse the outline height / length based on progress

Full Bleed Course Imagery

Visual updates / cleanup to course home imagery / color background for a course

Course Title & Progress Summary

Exploring the use of a simplified assignment level progress summary under the course title:

Example statements:

  • 15 learning sequences across 5 sections

  • 13 learning sequences to complete across 2 sections

  • 12/15 learning sequences completed

  • 10/15 assignments completed

Potential addition of a simplified progress visual underneath this title + statement as well

Course Content Page

…

Sequence Navigation

…

Sequence Navigation

Headers and Naming

We plan to use the name of a sequence in the header, with Unit page titles within the content area. Unit Page header names will have a subtitle with page points available (if applicable) and possibly a label for whether the content is graded or ungraded.

Sequence Icons

We plan to have selectable icons for each unit, echoing current platform behavior and surfacing opportunities for progress visualization on the content mobile views.

Bulk Downloading

We will be reviewing how we convey partial or complete download status, along with a possible bulk download action at the Sequence level shown in the header.

Video Blocks

We need a visual shift to these blocks, highlighting (if available) 3 lines or so of the interactive transcript with a way to expand this so that scrolling past the transcript is easier for unit pages with content blocks underneath a video block.

Next / Previous Buttons

We plan to show next and previous buttons at the end of the content frame, making the need for scrolling more obvious.

Finish Step / Modal

We are exploring this modal progress shifting to an in-page conditional message shown when you navigate to a future section, instead of being an interruptive message / modal.

Design Collateral / Cases

...

Primary Card State Considerations

Learn Page

Feature

Details

Notes

Primary Course Card - Learner has only 1 course

When a learner is enrolled in only 1 course, display the primary course card

Primary Course Card - Learner has only 1 course

If learner has not started the course, show a “Start Course” CTA, and no progress bar

Primary Course Card - Learner has only 1 course

If learner has started the course, show a “Continue Course” CTA, and progress bar

Progress Bar

Progress bar is present on all courses that have been started, meaning they have gotten through at least one unit

Progress Bar

Progress is shown as # of lessons completed out of the total # of lessons in the course.

If a lesson is partially complete, it is not included as part of the progress made in the progress bar

Secondary Course Card on Learn Page

Primary card is displayed and secondary cards fall below --

Secondary course cards are displayed below the Primary Course Card for learners that have multiple courses they are enrolled in. These cards fall within 2 sections:

In Progress or Completed.
In Progress includes any course that has been started by the learner. Within ‘In Progress’, courses may be active, expired, or archived. They all fall in ‘In Progress’ because technically the learner was/is in progress on them, so their mental model is as such. Based on a card’s “state” the card will clearly show whether it is Active, Expired, Archived, or Completed. (All cards in the ‘completed’ section will have the ‘completed’ state)

Secondary cards on the learn page DO NOT have a progress indicator.

Secondary Course Card on Learn Page

Secondary courses scroll left/right within their respective section

Learn Page Sections

Next / In Progress / Completed
- In Progress and Completed section headers show the # of courses In that section next to the header. ie In Progress ( 8 ) if the learner has 8 courses they are enrolled in

View All: Secondary Course Card on Detail Page

When a learner taps on the In Progress or Completed section header, they land on the ‘View All’ page for that category. This reveals a 2 column grid of all courses within that section. These cards expand slightly from the Learn page to reveal a progress bar.

Courses are ordered from most complete at the top of the list to least complete at the bottom.

Programs

TBD

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. 

  • X

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

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. 

...