Proposal: Enhanced Course Card Design in Open edX Dashboard

[asma-ahmedd]

Abstract

This initiative proposes UI/UX improvements for the Open edX dashboard's course card design. By applying principles of visual perception and information processing, the goal is to enhance discoverability of courses, improve comprehension of key information, and increase learner engagement through a more user-friendly interface.

Context & Background

The current course card design presents information in a way that can be visually cluttered and difficult to scan. Learners struggle to quickly find relevant courses or identify important details like course end dates. This initiative aims to address these pain points and improve the overall user experience.

Scope & Approach

The primary persona for this initiative is the learner who interacts with the Open edX dashboard. The approach focuses on optimizing the information layout within the course card. This includes:

• Separating organization name, course name, and end date for improved readability.
• Integrating icons to enhance visual engagement and information processing speed.
• Utilizing typography and visual hierarchy to prioritize essential information.
• Maintaining consistent placement and styling across all course cards for a cohesive experience.

A detailed analysis of the proposal with supporting research can be found here: Wiki Proposal Link

Value & Impact

The success of this initiative will be measured by:

• Increased efficiency in finding relevant courses.
• Improved user comprehension of key information like course end dates.
• Higher learner engagement through a more visually appealing interface.

Milestones and/or Epics

Milestone 1: Course Card Information Redesign

• Implement separation of organization name, course name, and end date.
• Integrate icons for course name and potentially other elements.
• Refine typography and visual hierarchy for optimal readability.
• Measure user interaction time and success rate in finding desired courses.

Named Release

Unsure

Timeline

To be determined

Proposed By

Arbisoft

Additional Info

https://openedx.atlassian.net/l/cp/70SkWoTL

[github-actions]

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

[jmakowski1123]

Tag Liz C at Schema

[asma-ahmedd]

@ali-hugo @lizc577 when you have a moment, could you both please take a look at this project proposal?

[ali-hugo]

@asma-ahmedd Sure! Is there a date by which you'd like to have feedback? I'm working on a pretty tight deadline at the moment...

[asma-ahmedd]

@ali-hugo Thanks, Ali! Whenever it's convenient for you is fine, but could you please let me know a date by which you think you might be able to provide your feedback? I really appreciate it!

[ali-hugo]

@asma-ahmedd I found some time today to take a look at the proposal. It looks great! I left some feedback here. I wasn't able to upload an image to the wiki comments, so I'll add it to this ticket instead (the only thing that is different is the placement of the buttons. You'll see my thinking behind this in the wiki comment):

Thanks for your work on this!

[jmakowski1123]

cc @marcotuts for Liz to take a quick look

[lizc577]

Thanks for the time on this! While I do think the design is more readable and looks cleaner, I am curious if there are more impactful design changes that could be made to reach the value and impact that are proposed. For example, if course end date is a more important detail that helps a learner, let's enhance that, while keeping the lesser important info (org and course code) as tertiary. So maybe we utilize this design with the icon for course end date, but keep the org and course code as they are today.

Additionally, if we are going to attempt to clean up the cards and make them more scannable with the most impactful information, it would be helpful to pull out the most important information to a user, maybe we even enhance the CTAs so that it isn't just resume or upgrade, but rather guide the learner directly into specific places in the course (like we did on mobile). That said, could we pull out info about the learner's specific experience, such as past due assignments, upcoming homework assignment, etc? So rather than a generic card, it is specific, relevant information for the learner.

I wonder if we could also further simplify the card by reducing the real estate given to Related Programs and possibly make it a link under the course title (next to the org and course ID) as this information is not primary to the learner in this moment (my assumption being that they are in a mental model here of learn mode, not search/explore mode).

I also question the need for the 'grade required to pass this course' having an entire place below the card - how important is this for a user to see here? Could this information be displayed elsewhere, again in a more scannable pattern that matches its level of importance?

Just my 2 cents, hope this is helpful!