Interaction Design and Interactive Prototypes (Axure RP)

This page is demonstrating what kind of interactive prototypes can be designed/developed in Axure RP.
To achieve the complex interactions, involving some basic math functions, and DOM updates, I injected javascript through the back door the Axure leaves for designers. The trick consists in ability of jquery-based javascript access any DOM element on the html page, and manipulate it.
However the detailed explanation how and why I developed these prototypes is outside of the scope of this article.  At least for now.

Below are my examples of interactive design, along with the instructions how to use some of their interactive features. These Interactive Prototypes are not part of my portfolio. Notice these are just some examples. I did much more while working in Calypso Technology.

Interactive Prototypes created with Axure RP prototyping software

Forex/Equity Options Flow Pricer
1.    In the datagrid, in the "Enter new trade" only dropdown, choose several different types of trades.
Notice how datagrid is populated with the records.
Click on Buy/Sell and Call/Put icons.
2.    Choose Vanilla trade type. Click on [Hedge] button. Observe Error popup message, and highlighted missing field. Enter some letters inside the highlighted field. Click on [Hedge] button now. Observe how a new raw was added to the datagrid with the information you entered.
3.    Now click on [Save Strat] button. Observe the new Trade ID and transformation of [Save Strat] button into disabled [Saved] button.
4.    Click on the "EQ" (Equity) tab above datagrid. Notice differences in datagrid.
5.    Cells with yellow background are editable. Make empty any "Strike %" cell. Observe "Strike" and "Quantity" cells became editable. Enter anything in "Strike" cell. Observe "Strike %" and "Notional" became non-editable.

 All calculations are coded with JavaScript, styles are done with CSS/HTML.

Forex Trading Quick Entry console
1.    Find "Buy EUR" field. Enter "1M" there. Observe how other fields in the form are auto-populated. You can click on arrow down and choose preselected amount. You can remove any number and manually type your own. Observe the auto-formatting, and auto-calculation, depending on the currency trading rates. You can choose any different "Ccy Pair" and notice the different exchange rate, and currency titles.
2.    Click on the "Buy EUR" or "Sell USD" titles (cells with green or red background). Observe the reverse in colors and notionals.
3.    Play (enter) with different numbers in "Spot", "Spot Margin", "Final Rate", "Margin Value" fields. Observe the auto-calculated changes in fields.
4.    Click on "Create Ticket" green button. Observe the changes in "Position Monitor" datagrid on the right, and added new line in the bottom "Trade Blotter" datagrid.

All calculations are coded with JavaScript, styles are done with CSS/HTML.

LiftDay mobile application
On the Onboard Wizard click on any buttons.
To proceed further during in the wizard click on the dots at the bottom.

Calypso PnL Dashboard
1.    Click on "Close Hints", then click on and different Layouts.
2.    On the left panel choose "P&L Dashboards with Errors", and click on "Errors(2)" tab.

Proof of concept developed with AngularJS

Calypso Product Inventory and Roadmap web application

Recorded video of developed Proof of Concept:

Technologies used: AngularJS web app, and D3.js javascript library with custom component.

See also my Sankey diagram project on GitHub:

And a live example of a Sankey diagram based on D3.js library:

Shoot me a message if you have any questions about these prototypes.


Popular posts from this blog

Data visualization for Roadmap Microsite (Angular and D3.js)

Conceptual design

Four tools for prototyping: Sketch, Figma, Principle, and FramerX