[Proposal] Enhanced Course Card Design in Open edX Dashboard

Owned by Asma Ahmed
Apr 25, 2024
2 min read

Objective

This proposal aims to improve the Open edX dashboard's user experience  by optimizing the course card design. Scientific principles of visual perception and information processing will guide these changes, leading to:

  • Increased discoverability: Learners can easily find relevant courses.

  • Improved comprehension: Information is clear and readily understood.

  • Enhanced engagement: Visually appealing design motivates learners.

Proposed Changes

  1. Information Prioritization & F-Pattern Scanning (Eye-Tracking Studies):

  • Move CTAs (Resume/Upgrade): Research shows users scan interfaces in an F-pattern (top-left to bottom-left, then horizontally). Placing CTAs below the organization name, course name, and end date aligns with this pattern, promoting intuitive action.

 

  1. Visual Hierarchy & Gestalt Principles of Perception:

  • Separate Information: Separating organization name, course name, and end date on different lines leverages Gestalt principles. Whitespace creates separation, allowing users to visually distinguish elements.

 

  1. Icon Integration & Symbol Recognition:

  • Integrate Icons: Icons are universally recognized symbols that enhance information processing speed. A book icon for the course name reinforces the context without additional reading.

 

  1. Typography & Readability:

    • Visual Hierarchy with Typography: Utilize typography to prioritize information. Titles can be bolder and larger, creating a hierarchy that guides user attention.

 

  1. Consistency & Cognitive Load Reduction:

    • Consistent Design: Maintaining consistency across all course cards minimizes cognitive load. Learners don't need to re-learn information layout for each card.

 

Visual Mockup:

  • Existing Course Card

 

  • Redesigned Course Card

       

Benefits

  • Faster Course Discovery: F-pattern scanning and clear information layout allow learners to quickly find the courses they need.

  • Reduced Cognitive Load: Separation, icons, and visual hierarchy make information processing easier, reducing mental strain.

  • Increased Engagement: The visually appealing design, with icons and clear CTAs, fosters learner motivation and interaction.

Conclusion

By applying UX principles and scientific research, we can elevate the Open edX dashboard's user experience. Optimized course cards will lead to increased discoverability, improved comprehension, and ultimately, higher learner engagement.