Financial Calculator

UX Analysis, UX/UI design, Responsive Design (Regent Education, )

        screenshot from Financial Calculator

I redesigned this financial calculator to make it easier to use on small screens

One of Regent's newer products is an online financial calculator which can be customised and branded for schools and other educational institutions. It guides students through a questionnaire which takes their personal information, applies it to their preferred program and length of study, and outputs the funding available to them from grants, loans, scholarships and other sources. This enables the student to make an informed decision– Can I afford to go to school?


I was armed with the following assumptions:

With no customers to interview, I relied on the data published by a cross-section of Regent clients to generate demographics. I found that on average:

These nuggets of information helped underline to assumptions and helped develop clear goals for creating a new design.

Finally, the format of the questionnaire was made available to me.

UX/UI Design

Here is a generic mockup of the calculator. It is unskinned and unbranded, with basic Bootstrap styling. These two screens show a range of inputs, hints, buttons, and a progress bar, at mobile and tablet size:

Generic Views

A conversational tone to instructions and text makes the process less intimidating, and required documentation (W2, FAFSA, etc.) is listed before the process begins to prevent students leaving the process half-completed while they search for the required information:

Start Screen

Only one question is visible on entering a questionnaire screen. As each question is completed, the next question appears below it. This avoids any missed additions to the screen and focuses the student on the current question, without them skipping ahead. It still allows the student to change previous answers. The Progress Bar updates after every question.

Here's a sequence of six mockups showing the screen as the student progresses through the questions:

Focused Inputs

The Plan Progress Information is updated infrequently during the process. On a small screen, it would exist as cognitive noise, whereas on a larger screen it can be placed below 'the fold.' It should only be displayed on the smaller screens when an update occurred. The screen should, in fact, consist only of the progress bar and either the Questionnaire or the Plan Progress Indicator— the Plan Progress being displayed between questionnaire screens when it is updated. Here's an example:

Plan Progress

The final summary screen presents all necessary information, but highlights the most important information (Which years are funded/underfunded?). Clear calls to actions are placed at the bottom of the screen:

Final Screen

Contact Me

Ask me a question via one of the following social networks: