Hi everyone
I’m currently working on a simple grade calculator UI (something like a GWA calculator), and I’m trying to keep the input experience clean and easy to understand for students.
The challenge I’m facing: Users need to input multiple subjects, and for each one:
- Grade (numeric)
- Units / weight
Then the system calculates a weighted average.
It sounds simple, but the UI starts to feel cluttered when:
- There are many subjects
- Users need to add/remove rows
- Inputs start looking repetitive
What I’ve tried:
- Basic table layout → works but feels a bit “heavy”
- Card-style inputs → cleaner, but takes too much space
- Minimal rows with “+ Add Subject” → better, but still not fully intuitive
I also checked how existing tools structure this kind of input (for example: https://gwa-calculator-phi.vercel.app/), and it helped me understand the flow but I still feel the UI could be improved from a design perspective.
Would love your thoughts on this:
- How would you structure repeated inputs like this without overwhelming the user?
- Is a table layout better, or would you suggest something more modern (like step-by-step input)?
- Any tips for keeping the UI clean while still allowing flexibility (adding/removing subjects)?
I’m mainly focusing on clarity and ease of use for students who might not be very technical.
Appreciate any ideas, Figma examples, or design patterns you’ve seen work well.