Improvements to Studio Home UI, Phase 1

[jmakowski1123]

At-A-Glance

Make the Studio Home UI easier to navigate, clearer navigation pathways by persona, easier to manage lists of course runs, and easier to glean information about courses at a glance.

Child PRs

• feat: home studio search filters frontend-app-authoring#846

More information

Product specs

• Product brief: https://openedx.atlassian.net/wiki/spaces/OEPM/pages/3767107616/Product+Brief+Studio+Home+Redesign

• MVP specs: https://openedx.atlassian.net/wiki/spaces/OEPM/pages/3840868428/MVP+Studio+Home+Enhancements

Design files

• https://www.figma.com/file/RDsCFF54oD8cbSLRoLKOCw/Studio-Home?type=design&node-id=163-13934&mode=design&t=BZluPPW9HSfX38Y3-0

Kanban board

Stakeholders

Primary Contributors

• edX
• edunext
• Axim Collaborative

Community release milestones

• Quince:

• Redwood: Will be released

How to contribute

• Has a community backlog with work to pick up?

[github-actions]

Thanks for your submission, @openedx/open-edx-project-managers will review shortly.

[jmakowski1123]

@bryan-kersten's team is thinking through a Studio redesign. 2U should drive this

[jmakowski1123]

Spanish scope - Studio homepage upgrades to nav

Next steps - align the spanish use case to Studio homepage MFE

[felipemontoya]

Case for the Spanish use in campus for this feature.

Abstract

The overall interface of Studio is very inconvenient when dealing with a large number of courses or libraries.
Thinking of campus authors with large ammounts of courses and libraries in the homepage of studio, the requirement for them would be to make that page deal with large lists much better.

This includes:

• pagination
• filtering (by name, org, course ID, active/archived courses)
• sorting (by name, org, course ID)

The same improved listing capabilities would apply to libraries.

Context & Background

With the context of the modernization of the complete UI and the conversation held on the first meeting with @bryan-kersten and @cablaa77 we are aligned that the best way forward would be the creation of a MFE to handle the Studio Homepage. A second meeting will be held tomorrow for further steps.

Scope & Approach

From the Spanish campus initiative I think the scope could cover the creation of a new MFE with the necessary connections to reach parity with the current page. This means the MFE would also require that the "New course" and "New library" forms are accounted for.

Value & Impact

I don't have a great data driven metric, but from what I can see the value would be:

• Move from old code to react UI
• Improved User Experience for authors
• A side effect for "superusers" in large instances is that around 30k total courses in the platform the rendering of the page for a superuser timesout thus removing the capability of creating new courses or libraries.

Milestones and/or Epics

Milestone 1: Creation of a skeleton MFE for studio-home.
Milestone 2: Reach feature parity for display and new course form.
Milestone 3: Addition of Filters and sorting capability.

Named Release

With a good pace this MFE could be experimental for Quince and properly supported with BRT and all for Redwood.

Proposed By

Spanish OpenedX for Campus Project

[jmakowski1123]

This is being delivered via the Studio Redesign project, being driven by Mike Leery at 2U.

1. Inclusive collaboration on a design sprint will land on alignment on specs for Studio Home page - target mid-June
2. Implementation plan TBD

[jmakowski1123]

Status update 7/20: Design sprint held on 7/12 with representatives from 2U, Axim, OC and edunext. Landed on a list (by vote) of top ideas to implement. Jenna and Brad to prioritize that list into an MVP spec and subsequent releases. Target timeline for spec end of July. 2U will then create lofi frames and put through the UI/UX Working Group for feedback to ensure they meet the edunext/Spanish needs.

[jmakowski1123]

@felipemontoya Question about the specs you have here for the sort and filter functionality:

filtering (by name, org, course ID, active/archived courses)
sorting (by name, org, course ID)

1. Checking my assumption that "name" means title of the course?
2. Org - Unclear on this one. When multiple orgs may function as course owners/authors under the same instance?
3. I believe Course IDs are unique, how would a user use those in a filter or sort? If we also implement a free text/keyword search on course listings, would that be a better path for users to search by Course ID?
4. Active/archived - We are also including published/unpublished in the spec. There are nuanced differences between them. Do we need both?

[felipemontoya]

Hello @jmakowski1123 thanks for the clarification questions. Let's see:

1. Yes, name is the title. I call it name, because "Course Display Name" is how it appears in the studio advanced settings. There is a course name value that can be set upon creation but that can't be updated and "Course Display Name" overrides it.

2. This refers to the Org of the course. If we were filtering as free text on the courseID field this would partially solve it already. However taking it one step further it would be great to be able to filter by the organization long name and not only the short name used for the course Id. E.g ASU is the short name, but writing arizona should match as the long name would be Arizona State University

3. Yes, filtering by free text and having this match the courseID string would be a nice way of accomplishing this goal.

4. I think the status of a course goes from unpublished to published/active and when the course dates run out then it gets archived. The request by the spanish universities is only to add the filtering without removing the active/archived separation. I think having a filter by status is enough. If we later maintain the 3 status in the future or even more possible status arise (publisher comes to mind) then the filter should pick them up. Would this suffice for the use cases you have in mind?

[jmakowski1123]

Update 8/16

MVP Spec has been defined: https://openedx.atlassian.net/wiki/spaces/OEPM/pages/3840868428/MVP+Studio+Home+Enhancements

UX/UI work has started, being driven by 2U

Plan to present frames at the UX/UI Working Group meeting on 9/7

[felipemontoya]

After the first big transformation was made by the team at 2U (thanks a lot for that) we are now able to get started on some of the next steps.

As we will be doing some incremental updates, but don't have the project scope to take it all the way to the figma design, I made a wiki page detailing what our current plan is.

https://openedx.atlassian.net/wiki/spaces/OEPM/pages/4032856101/Studio+Home+incremental+upgrades+-+product+approach

@jmakowski1123 @santiagosuarezedunext please let me know all the comments and feedback you might have.
Jenna do you think we need some early engineering review on the approach there?