After multiple rounds of wireframing and user testing, our team created a calculator that was simple to its core while being user friendly and easy to follow.
A step tracker at the top helps users navigate the process and also allows the user to save and finish later. On desktop, a sidebar tracks their inputted information while showing real-time data based on their inputs. On mobile, a drawer at the bottom shows the numerical data and can be opened for full viewing at any time.
We purposefully kept the design clean and simple, using transitions and animations to allow the user to focus on the key information.
Income
User enters their income information, monthly or annually.
Cost of Living
User can input a general number for cost of living data, or can choose to itemize it.
Financing
User can input any scholarships or aid they have already received, or can skip and check "I don't know" if they're unsure.
Savings
User can input savings they already have allocated towards education.
Educational Expenses
Student can input an overall or itemized cost they want to put towards educational supplies.
Final Estimate
The final estimate allows the viewer to see how much they could afford with a monthly tuition payment or the finalized tuition number. The final screen allows the user to see all inputed information and make any necessary changes.