Hi everyone,
I’m currently designing a grade calculator (GWA-style) in Figma where users can input multiple subjects along with their grades and credit units to calculate a weighted average.
The main issue I’m facing is keeping the UI clean and user-friendly when there are multiple input fields. As more subjects are added, the layout starts to feel cluttered and harder to manage.
I’m not sure about the best way to structure the inputs — whether to use cards, tables, or simple stacked rows. Also, handling dynamic actions like adding/removing subjects without breaking the design is a bit confusing.
I tested a basic working version here: https://gwacalculatorphilippines.netlify.app/ just to understand the flow, but I want to improve the UI/UX before finalizing the design.
What would be the best approach to:
- Keep the layout clean with multiple inputs?
- Organize grade + unit fields effectively?
- Design a smooth add/remove interaction?
Any suggestions, examples, or best practices would really help!