The assignment? To prototype a calculator that will allow an associate to refine the "best offer" for credit products, like loans or cash advances, to allow the associate to customize, analyze and present to the client (possibly multiple) variances on the "best offer".
Requirements included screenshots of exisiting calculators, spreadsheets of product data (that turned out to be fanciful simulacra), discussions with current users and those who help users of existing tools. I spent many hours interpreting the data on those spreadsheets to make sense of how one attribute of a product effected others.
At this stage all was designed in gray-scale to focus attention on interaction design. Calculations and data integrity were secondary concerns to demonstrating functionality in the initial iterations.
[Note: the green lines are rulers set in Axure panels that follow Bootstrap's RWD definitions.]
The values presented by the sliders are taken from a set of tables in a dynamic panel hidden from the user (see below). In short, once a Term is selected (i.e, the length of the loan or cash advance), values for Loan Amount, Daily Payment and Total Repayment are used as variables to pass into the various calculator views.
But how does a slider work? The following attempts to show both the defined interationcs for the "hot spots" and how those are drawn, but not exactly visible, in the rendered prototype.
The above wants to show both how the slider is drawn (at left) in the GUI area and interactions defined in the "Widget Interaction and Notes" panel (at right). Each integer or "hot spot" in the slider at left requires its own set of "Set text" definitions at right. To keep it simple I named the data cells to identify their data type (column) and value (row). This allowed me to abstractly define "Set text" interactions in the sliders without any need to know the actual values in any given data cell. After all, what if they may need to change? Updating data is easier than re-defining interaction details.
MUCH MORE TO COME!
Including video ...