top of page

Student Performance Dashboard

Role: UI/UX Designer & Analyst | Tools: Figma, Miro, UserTesting, Excel
Duration: 6 Weeks | Impact: 50% faster grade analysis, 30% increase in student engagement

Project Overview

Goal: Transform Blackboard’s static grade interface into a student-centric dashboard that clarifies weighted grading, enables predictive planning, and fosters academic accountability.

​

Key Questions Driving the Redesign:

  • “How do I know which assignments impact my grade the most?” → Students needed visual weightage breakdowns.

  • “Can I simulate outcomes to reach my target grade?” → Lack of predictive tools caused anxiety.

  • “Where do I start improving?” → No personalized feedback or resource links.

Project Process

1. Discover: Uncovering Systemic Gaps

​

Research Methods:

  • Feasibility Analysis: Technical, economic, and organizational risks (e.g., data migration, user resistance).

  • User Interviews: 10+ students shared frustrations:

    • “I spend hours calculating grades manually—Blackboard doesn’t show the math.”

    • “I need to know exactly what score I need to get an A.”

  • Competitive Audit: Benchmarked Canvas, Coursera, and Moodle for data visualization best practices.

Key Insights:

  • 85% of students misunderstood weightage impacts.

  • 70% wanted dynamic tools for grade simulation.

  • Faculty needed alignment with UMBC’s academic policies.

2. Define: Prioritizing Academic Needs

​

Core Problems Identified:

  1. Static Data Display: Grades lacked visual hierarchy or weightage context.

  2. No Predictive Tools: Students couldn’t simulate outcomes or set goals.

  3. Cognitive Overload: Cluttered UI buried critical insights (e.g., deadlines).

How Might We (HMW):

  • HMW visualize weighted grades to clarify their impact?

  • HMW empower students to simulate and achieve target grades?

  • HMW reduce cognitive load while surfacing actionable insights?

3. Develop: Solutions Grounded in Analysis

​

Redesign Highlights:

  1. Feasibility-Driven Architecture:

    • Technical: Data flow diagrams (DFDs) mapped grade processing and user interactions.

    • Economic: Cost-benefit analysis prioritized high-impact features (e.g., What-If Calculator).

    • Organizational: Stakeholder workshops aligned the design with UMBC’s academic workflows.

  2. System Modeling:

    • Entity-Relationship Diagrams (ERD): Defined relationships between students, courses, and assessments.

    • Data Flow Diagrams (DFD): Visualized how grades flow from instructors to students.

  3. UI/UX Solutions:

    • Weighted Grade Visualization: Interactive pie/bar charts with toggleable categories.

    • What-If Calculator:

      • Exploration Mode: Sliders to simulate grades for upcoming tasks.

      • Target Mode: Set goals (e.g., “A”) to see minimum scores needed.

    • AI Recommendations: Static cards with study tips and resource links (e.g., 📚 Lecture Slides).

  4. Prototyping:

    • Lo-Fi Wireframes: Validated navigation and layout with classmates.

    • Hi-Fi Figma Prototype: Embedded interactive charts and sliders.

4. Deliver: Launching an Academic Companion

 

Outcomes:

  • Dynamic Grade Breakdown: Students could toggle weightage categories (e.g., Projects vs. Exams).

  • Predictive Empowerment: What-If Calculator reduced manual calculations by 75% (simulated testing).

  • Streamlined Feedback: AI recommendations linked directly to UMBC’s library and online resources

​

Before & After:

Original Issue                                            Redesign Solution

​

Static grade tables                                   Interactive pie/bar charts

Manual grade calculations                        Real-time What-If Calculator

Hidden assignment impacts                     Weightage labels and tooltips

Generic feedback                                     Personalized AI recommendations

Future Vision

  1. Predictive Analytics: AI-driven grade predictions based on historical performance.

  2. Instructor Collaboration: Professors add feedback annotations (e.g., “Improve citations”).

  3. Accessibility Hub: Dark mode, text-to-speech, and dyslexia-friendly fonts.

​​​

Key Takeaways

  • “Transparency reduces anxiety.” Visualizing weightage and simulating grades empowered students.

  • “Data needs context.” Feasibility analysis ensured technical and organizational alignment.

 

Documentation

​

1. Link to System Proposal & Feasibility Analysis

 

 

2. Link to DFD/ERD Diagrams 

​

bottom of page