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.
The header details above the calculator display the Legal Name of the corporation. In some cases, they may operate under multiple DBAs ("Doing Business Under" aliases). In this example the DBAs operate at multiple Locations, each of which may have separate loan contracts. Data fields that remain the same across these multi-faceted relationships persist in the header. If, for example, multiple Legal Names were a factor most likely Owner would tie them together.
Complications like that make my hair stand on end, like it truly did when I was in the Canyonlands of Utah one spring, scrambling across sandstone as a spring thunderstorm rolled in ... exhilirating! Lightning storms of the mind are just as scary and fun.
The following illustration shows three different configurations of business details. Each tries to associate related fields, to emphasize more frequently referenced fields, and to allow for compromises for those fields whose lengths may vary greatly yet require spatial association and/or referential emphasis.
[Note: the green lines are rulers set in Axure panels that follow Bootstrap's RWD definitions.]
After selecting a Term, sliders are then enabled to calculate Loan Amounts, Daily Payments, Price and Commission.
The associate may then "add" the option to the crudely drawn tables at right for comparison later.
The sliders operate as both drag-and-drop or simple "click" actions to set the various values of the product. At this point, Price and Commission remain completely independent of the actions and values of the Loan Amount and Daily Payment.
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.
[NOTE: I am guilty of building a prototype with an Ix and UI fidelity much higher than is necessary. Many will argue, and in most cases I'd agree, that this is a waste of time if rapid prototyping is the objective. In this case, I wanted to prove that Axure could more than show "proof-of-concept". Axure 7.0 is a much welcome improvement.]
MUCH MORE TO COME!
Including video ...
