TIMELINE: 12 weeks
ROLE: UX/UI Designer and QA
DELIVERABLES: 29 High-fidelity mockups for Desktop Breakpoint, 4 core calculators, 2 article page templates, and 3 additional grading tools
SOFTWARE: Figma and Illustrator
The GPA Calculator web app was designed for international high school and college students who want to study in the U.S. and need help figuring out their GPA. It offered a set of calculators and grading tools that helped them find their GPA equivalent, either manually or with the help of AI.
The Challenge
The brief required efficiency in the development phase, improvements in the UI, and added features that would make it stand out among competitors.
Decisions and design requirements:
Use a UI system of components already available to ease development
Make the UI attractive for young students and competitive with other products in the space
Add the AI calculator alternative. A conversational-style calculator
Budget only available for Desktop screens required and a 1-column layout for mobile responsiveness
UI Approach
This was a redesign, and the brief already listed what each screen needed, so I went straight into high-fidelity mockups.
Once the home page was approved, we agreed on the UI style. We also compromised on using Flowbite’s Figma components, built on Tailwind’s design system. It felt clean, current, and a good fit for the product. I customized most of the components to match the final look. The design system grew with each new screen, ending up as a mix of standard and custom components.
For the UI, I used shades of blue and purple. Blue felt trustworthy and educational, and brighter shades kept it fun. I paired this palette with the sans serif font Archivo for headings and paragraphs, which also fit the young audience.
UX Approach
To keep the design well grounded without a research budget, I leaned heavily on competitive benchmarking, usability, heuristics, and accessibility considerations. I audited existing GPA calculators to group interactive elements, establish a clear component hierarchy, and cover error states when needed.
Design Decisions and Scope
Visual consistency and removal of visual clutter
Typographic contrast and a clear hierarchy
Accessibility considerations for color contrast and legibility, ensuring WCAG AA Levels
Incremental improvements by using familiar UI patterns and UX best practices like ideal button placement and groupings of interactive elements.
29Desktop Screens | 4Calculator Types | 2Page Templates |
|---|
Core Calculators
01 | 02 | 03 | 04 |
|---|---|---|---|
College calculator A calculator to translate number or letter grades into US GPA (Blue) | High school calculator A calculator to translate number or letter grades into US GPA (Purple) | GPA scale converter A calculator to translate a letter or number grade into a GPA score | Raise your GPA A calculator to help you raise your GPA |
Other GPA calculating tools with search bar
01 | 02 | 03 |
|---|---|---|
GPA scale converter Long-form articles with an overview of each GPA score range. | Country Grade Converter Compare grades from any country. Pick your country to see how its grades match another country’s and the US GPA. | GPA search + filter Find college GPA requirements per college or university |
Handoff + Design system
Essential Developer handoff notes | UI Kit inside Figma |
|---|---|
Tailwind code snippet links where indicated, when applicable | Type scale, color palette, buttons, badges, inputs, and cards where noted |
Entry Point | Landing Page Hero
For his case study, I focus on the core calculators and the home/landing page to explain my design thinking process.
Core Calculators
Issue | Solutions proposed |
|---|---|
There is no straightforward way to add new semesters | Added a primary button with the label "Add Semester" in proximity to the semester title, before it was below all the courses |
The setting options are hidden | Tertiary-level button with added gear and icons so the settings could expand on top of the first semester without the need to open and close a modal, like before |
There is no straightforward way to add new courses and classes | Ensured both the input field in the table and the button to add courses used the same label, "courses". Before, the first column was named courses, and the button was labelled as "add classes". I made sure this button was close to the course column. |
College Manual Input
High School GPA Calculator Manual Input
Another feature needed was a quick way to visualize the results quickly. I proposed that this graph would stay at the top, thinking in a mobile-first scenario; however, it ended up at the bottom.
Issue | Solution |
|---|---|
There isn't a quick way to visualize the GPA score (graph) | Created a series of color-coded graphs that should result in a donut chart. I suggested showing this on top, rather than the bottom of the page. But it stood at the bottom. |
There isn't a way to share results and download the results | Added share icon buttons to the left and the download icon button to the right in the final chart result, separating both actions |
AI Calculator Prototype
The AI version calculator has a familiar conversational style with pre-defined options. In this case, the functionalities were limited just to the GPA score without the features and settings of the traditional calculator, as shown below:
Explore the complete Figma File
What I learned and do differently
This project was tough, and there wasn’t a clear roadmap to follow, which resulted in a fragmented approach. I think it deserved a bigger budget to cover the product creation process from end to end. It also needed more focus on mobile, since that’s where our audience was. Once the design was done, development stalled.
Working alone had its own limitations as well. I really wanted to test the AI version of the calculator, since it was the newest and most interesting part of the product.
If the stakeholder picks up this product launch, I’d insist on testing a simple prototype with five users first. We would check whether students can get their score before going into development. Their feedback would be the basis for fixing issues early and would give the product a better shot at reaching its full potential.
TIMELINE: 12 weeks
ROLE: UX/UI Designer and QA
DELIVERABLES: 29 High-fidelity mockups for Desktop Breakpoint, 4 core calculators, 2 article page templates, and 3 additional grading tools
SOFTWARE: Figma and Illustrator
The GPA Calculator web app was designed for international high school and college students who want to study in the U.S. and need help figuring out their GPA. It offered a set of calculators and grading tools that helped them find their GPA equivalent, either manually or with the help of AI.
The Challenge
The brief required efficiency in the development phase, improvements in the UI, and added features that would make it stand out among competitors.
Decisions and design requirements:
Use a UI system of components already available to ease development
Make the UI attractive for young students and competitive with other products in the space
Add the AI calculator alternative. A conversational-style calculator
Budget only available for Desktop screens required and a 1-column layout for mobile responsiveness
UI Approach
This was a redesign, and the brief already listed what each screen needed, so I went straight into high-fidelity mockups.
Once the home page was approved, we agreed on the UI style. We also compromised on using Flowbite’s Figma components, built on Tailwind’s design system. It felt clean, current, and a good fit for the product. I customized most of the components to match the final look. The design system grew with each new screen, ending up as a mix of standard and custom components.
For the UI, I used shades of blue and purple. Blue felt trustworthy and educational, and brighter shades kept it fun. I paired this palette with the sans serif font Archivo for headings and paragraphs, which also fit the young audience.
UX Approach
To keep the design well grounded without a research budget, I leaned heavily on competitive benchmarking, usability, heuristics, and accessibility considerations. I audited existing GPA calculators to group interactive elements, establish a clear component hierarchy, and cover error states when needed.
Design Decisions and Scope
Visual consistency and removal of visual clutter
Typographic contrast and a clear hierarchy
Accessibility considerations for color contrast and legibility, ensuring WCAG AA Levels
Incremental improvements by using familiar UI patterns and UX best practices like ideal button placement and groupings of interactive elements.
29Desktop Screens | 4Calculator Types | 2Page Templates |
|---|
Core Calculators
01 | 02 | 03 | 04 |
|---|---|---|---|
College calculator A calculator to translate number or letter grades into US GPA (Blue) | High school calculator A calculator to translate number or letter grades into US GPA (Purple) | GPA scale converter A calculator to translate a letter or number grade into a GPA score | Raise your GPA A calculator to help you raise your GPA |
Other GPA calculating tools with search bar
01 | 02 | 03 |
|---|---|---|
GPA scale converter Long-form articles with an overview of each GPA score range. | Country Grade Converter Compare grades from any country. Pick your country to see how its grades match another country’s and the US GPA. | GPA search + filter Find college GPA requirements per college or university |
Handoff + Design system
Essential Developer handoff notes | UI Kit inside Figma |
|---|---|
Tailwind code snippet links where indicated, when applicable | Type scale, color palette, buttons, badges, inputs, and cards where noted |
Entry Point | Landing Page Hero
For his case study, I focus on the core calculators and the home/landing page to explain my design thinking process.
Core Calculators
Issue | Solutions proposed |
|---|---|
There is no straightforward way to add new semesters | Added a primary button with the label "Add Semester" in proximity to the semester title, before it was below all the courses |
The setting options are hidden | Tertiary-level button with added gear and icons so the settings could expand on top of the first semester without the need to open and close a modal, like before |
There is no straightforward way to add new courses and classes | Ensured both the input field in the table and the button to add courses used the same label, "courses". Before, the first column was named courses, and the button was labelled as "add classes". I made sure this button was close to the course column. |
College Manual Input
High School GPA Calculator Manual Input
Another feature needed was a quick way to visualize the results quickly. I proposed that this graph would stay at the top, thinking in a mobile-first scenario; however, it ended up at the bottom.
Issue | Solution |
|---|---|
There isn't a quick way to visualize the GPA score (graph) | Created a series of color-coded graphs that should result in a donut chart. I suggested showing this on top, rather than the bottom of the page. But it stood at the bottom. |
There isn't a way to share results and download the results | Added share icon buttons to the left and the download icon button to the right in the final chart result, separating both actions |
AI Calculator Prototype
The AI version calculator has a familiar conversational style with pre-defined options. In this case, the functionalities were limited just to the GPA score without the features and settings of the traditional calculator, as shown below:
Explore the complete Figma File
What I learned and do differently
This project was tough, and there wasn’t a clear roadmap to follow, which resulted in a fragmented approach. I think it deserved a bigger budget to cover the product creation process from end to end. It also needed more focus on mobile, since that’s where our audience was. Once the design was done, development stalled.
Working alone had its own limitations as well. I really wanted to test the AI version of the calculator, since it was the newest and most interesting part of the product.
If the stakeholder picks up this product launch, I’d insist on testing a simple prototype with five users first. We would check whether students can get their score before going into development. Their feedback would be the basis for fixing issues early and would give the product a better shot at reaching its full potential.