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:
- Financial Aid is hard to understand
- It is better to walk a user through a process than give them opaque questions and hope for good answers
- Users with full-time jobs may not have time to perform adequate research, so we should give them as much information during the process as is possible
- All users are intimidated by long forms: break up the questions into small, easy-to- understand chunks
- We cannot presume the user is using a desktop or laptop
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:
- 72% are female
- 41% are minorities
- 12% speak another language first language, then English
- 76% are over 30 years old
- 50% work full-time and will continue to do so alongside college
- 20% are returning graduates
- 21% use their phone as their primary internet browser
- 37% own a tablet
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.
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:
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:
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:
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:
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:
Ask me a question via one of the following social networks: