Please go to this link on a mobile device for a rough flow and go to the 5th screen: https://www.justinmind.com/usernote…index.html
The page we want to be designed in the 5th screen in the flow where it communicated the savings, has a graph and provides the user options to increase the savings. (For reference this his is the link to the specific screen: https://www.justinmind.com/usernote…bad0220d47 )
On this screen please toggle the "Refinance Loan" check box to see how the numbers and graph changes for the customer.
The purpose of this page is to communicate to the customer how much they will save on their student loan by using our services. The customer has the ability to see what saving impact is with a mix of various services. For example if they do not want to refinance or user round-ups they can "turn them off" and then the graph and impact should change. This page is part of an application process.
The tone should be congratulatory, hope inspiring and encouraging.
The goal of this page is to get customers excited about how much money they can save and how much earlier they can get out of student debt such that they move to the next step and complete the application.
This page will be viewed primary on a mobile device. Ideally on an iPhone Xs screen size. It will be implemented to be mobile responsive but the design should be optimized for a mobile web browser.
The core elements of the page will be:
1. Total Dollars Saved (how much money they will save)
2. Total Days Saved (how much early their will get out of debt)
3. A graph that clearly communicates their
a.) Current/original Payoff Date and Total Dollar amount they will pay
b.) The new Payoff Date and Total Dollar amount they will pay using Spinwheel.
4. Monthly spend estimate pre-filled but editable by the customer
5. Round-up transactions option with icon and ability to turn off/on and learn more
6. Family Champions option with icon and ability to turn off/on and learn more
7. Boost Payments option with icon and ability to turn off/on and learn more.
8. Refinance Loan option with icon and ability to turn off/on and learn more.
When the page loads we would like to animate #1, #2, #3 above so that it feels like it is being calculated. After it calculates and it might be cool to have something like a temporary confetti treatment to communicate congratulations.
This page needs to have a clear call to action to take the next step (Continue, Apply, Get Pre-Approved, etc)