GradeEasy

Grade Tracking Application

Overview
GradeEasy is a web app that allows users to track grades and calculate their GPA across multiple institutions.

I was in charge of building the end-to-end figma prototype of the product, in collaboration with a developer.
Try Out GradeEasy!
Role
Product Designer
Responsibilities
UX/UI Design
Prototyping
Feature Scoping
Team
Ronald Jin, Full-Stack Developer & UX Designer
Timeline
Jul 2024 - Present
Problem
Students struggle with the tedious process of manual grade tracking. Most rely on spreadsheets or school portals that lack flexibility, personalization, and insights.
In my first year of engineering at UWaterloo, spreadsheets became my go‑to for tracking every assignment and exam. However, building them was tedious, formulas were always one typo away from inaccuracy, and the endless grid of cells made it hard to spot trends at a glance.

Without clear organization or visual hierarchy, it was impossible to quickly scan my progress, and just as easy to miss a forgotten entry. Those frustrations sparked the idea for GradeEasy.
Tracking grades through spreadsheets
Tracking grades through GradeEasy
How Can We Improve This Experience?
We set out to design a student-friendly web app that not only simplifies grade tracking, but also helps students stay organized, informed, and in control of their academic progress. A few of our early needs are listed below.
1
Centralized tracking
Keep grades organized across all courses, terms, and institutions in one place.
2
Smart forecasting
Help students predict best and worst-case outcomes to plan ahead.
3
Clear visuals
Make grades and trends easy to understand at a glance with less noise and more clarity.
Goal
Build a cohesive, purpose-driven tool that fills the gaps left by generic solutions, tailored to the real workflows, habits, and challenges students face throughout their academic journey.
Research
Understanding Student Needs
I began by identifying gaps in how students currently track their grades through user interviews. This helped me understand the broader perspective instead of only designing an app that matches my own preferences.
User pain points on existing grade tracking methods
Key Insights from Interviews
Lack of clarity
Students feel unsure about their academic standing throughout the term and want tools that clearly show where they stand and what’s at stake.
Manual tracking is fragile
Spreadsheets are the default, but they’re error-prone, hard to maintain, and visually overwhelming, especially under pressure.
Existing tools don’t check all boxes
Most existing solutions are either too generic or built for educators. Students want intuitive, visual tools that reflect their real goals, habits, and struggles.
Market Gap
Most grade tracking tools available on the market lacked: transcript import, predictive insights (min/max grades), cross-term or cross-school tracking, and a clean UI.
Competitive analysis of other grade trackers
Design
Foundations First
I started by designing the essential screens and flows to support onboarding and daily usage before creating all of the additional features.
Login Screen
The first version of the login screen felt very generic with a lack of branding. Thus, I added a hand-drawn background art for warmth and personalization, making the login page feel more aligned with the overall product.
❌ Login screen with lack of branding
✅ Final login screen with customized branding
Term Cards
I designed and tested multiple layouts for clarity, information density, and visual hierarchy. Although I had initially thought providing a lot of information (such as grades for all courses) would be beneficial, user interviews helped uncovered that a simpler card would make the information easier to skim.
❌ Previous term card options
✅ Final term card design
Grade Tracking Tables
The initial table featured an overwhelming amount of columns while the final design features only the key columns to present a minimal overview of grades.
❌ Several columns to display information
✅ Consolidated columns
Features
Designing for Differentiation
After designing the base pages and adding basic functionality to the web app in development, it was time to start adding more features to match up with competitors.
Modals for transcript upload
Transcript Upload
No competitors offered this feature, leaving a gap in the market. Transcript upload would allow users to easily migrate their information onto GradeEasy, especially if they’ve already completed several terms and want to track their overall GPA.
Upload anytime
Users can upload transcripts during onboarding or later via Settings to provide a flexible experience.
Modals instead of full pages
This feature was built in modals instead of a full page view since it’s a temporary action, providing less white space and preventing users from completing any other actions in the background.
Grade Forecasting
Minimum and maximum grade predictions allow users to project final grades and plan for the future.
Straight-forward UI
Despite testing out several layout options, the final design was the simplest and most straight-forward to provide an ease in navigation.
Reduced visual clutter
Eliminates excessive detail while maintaining all critical information for academic performance tracking.
Several design options
Final min/max grade design
Final dashboard design
Dashboard
A visual graph tracks grade trends over time. Users can toggle between overall average, term performance, or custom views.
Visual performance tracking
Allows students to immediately see trends in their academic performance over time.
Empty States
To make the onboarding experience feel more welcoming, I added hand-drawn graphics to empty states. These illustrations align with GradeEasy’s student-friendly branding and help fill the visual gaps when no data is present.
Marketing
Building the Landing Page
To support onboarding and awareness, we created a marketing site focused on:
1
Clear feature communication
2
Visual walkthroughs of key flows
3
Language that connects with students
Results
Final Designs
The final designs deliver a streamlined, student-focused experience that brings clarity to academic progress. GradeEasy supports grade tracking across courses and terms, transcript import, and institution management. Forecasting tools help visualize best and worst-case outcomes, while advanced settings like bonus marks and drop rules give students more control over how their grades are calculated.
View Web App
Reflection
Results
6x
Faster tracker setup time
50+
Users pre-launch
100%
Accuracy in grade tracking
In the current beta stage, GradeEasy has already gained traction with over 50 users joining before its official launch. Feedback has shown strong usability improvements, including a 6× faster setup time compared to traditional spreadsheet methods. Users also reported a smoother experience with 100% accuracy in grade tracking, reinforcing confidence in the platform’s core functionality.

These early results highlight both the demand for a student-focused tool and the effectiveness of GradeEasy’s design decisions.
Next Steps
GradeEasy is an ongoing project where we’re always looking for new features to add to improve the product. A couple features we’re looking to add in the future include:
Course outline parsing. Users will be able to upload course outlines to automatically populate the grade table with assignments and weights, removing the need for manual setup.
Grade goal setting. Students can set a target grade, and GradeEasy will calculate the scores needed on upcoming assignments to reach that goal.
Temporary access pages. Users will be able to try GradeEasy without creating an account, using temporary sessions to explore features and see value before signing up.
Made with love by Nancy.