Rapid Prototyping of Conceptual UI’s Using

BalsamiqNigel King ACMA, CISA, CISM, CISSP

Agenda1. 19:00 A little bit about me 2. 19:10 A little bit about conceptual prototyping3. 19:20 A little bit about the SafePaaS Company4. 19:30 A little bit about the problems in the worked examples5. 19:40 A review of the canvas, palette and layout behaviour of Balsamiq6. 19:50 A review of the worked examples

a. Audit Managerb. Compliance Managerc. Risk Managerd. Audit Intelligence

7. 20:00 Break8. 20:15 Poll for example from the audience9. 20: 20 Work the design

10. 20: 50 Q&A11. 21:00 Thats a wrap

A little bit about me1. Chartered Management Accountant2. Ex Chief Architect for PowerSchool3. Ex Vice President of Development at Oracle4. Lecturer in Information Technology at NTU5. Chief Strategy Officer for SafePaaS6. Worked in Oracle Applications Development for 22 Years

About Conceptual Prototyping1. Conceptual Prototype

a. Prototyping is an attempt to simulate the interaction between user and interface as realistically as possible. When a button is pressed, the corresponding operation must be carried out, and the corresponding pages must appear, try the best to simulate a full product experience.

2. Wireframinga. Wireframe is a low fidelity layout of the design which has 3 simple but direct targets:

i. Presents the main information group

ii. Draw the outline of structure and layout

iii. Vision and description of the user interface

Source: www.mockupsplus.com

Example: Wireframe

Source: UX Planet.Org

What I want from my conceptual prototype● Speed● Ability to develop test data / demo data / seed data design● Ability to develop test / demo / training flows● Ability to confirm features / functions with stakeholders● Psychological ability to through away experiments that do not work

Why ● Shorten time to first feedback● Fail early, fail often, fail at low cost

Ideas suck! Demos rule!

Getting Things (THAT MATTER) Done Against the Odds and in the Inky-black Shadow Cast by the Guardians of the Status Quo

Tom Peters 20 October 2014

Get testing● Unassisted task completion● Assistance rates● Assisted completion rates

Start the non coding stuff● Support enablement planning● Sales enablement planning● Consulting enablement planning● Partner enablement planning

My personal history with conceptual prototyping1. Visio2. Powerpoint3. Oracle UIX4. Oracle Apex5. Balsamic

My personal history with conceptual prototyping1. Visio

My personal history with conceptual prototyping1. Visio

a. Proi. Anybody can do it. ii. You can establish a template

b. Consi. Linking is fiddlyii. Snap and Glue makes layout exhaustingiii. Still not high fidelity, so may need a seperate specification for the UI.

My personal history with conceptual prototyping1. Powerpoint

My personal history with conceptual prototyping1. Powerpoint

a. Proi. Anybody can do it.ii. Templating is problematiciii. Linking is easier

b. Consi. My results have generally not conveyed the design very wellii. (Could be bad craftsman blaming the tool)iii. Not high fidelity

My personal history with conceptual prototyping1. Oracle UIX

<page xmlns="http://xmlns.oracle.com/uix/controller"><content> <header xmlns="http://xmlns.oracle.com/uix/ui" xmlns:data="http://xmlns.oracle.com/uix/ui" text="UIX Components Header Bean"> <contents> <dataScope> <contents> <link data:text="text1@dat1" data:destination="dest1@dat1"/> <link data:text="text2@dat1" data:destination="dest2@dat1"/> </contents> <provider> <data name="dat1"> <inline text1="Oracle" dest1="http://www.oracle.com" text2="Cnn" dest2="http://cnn.com" /> </data> </provider> </dataScope> </contents> </header></content></page>

My personal history with conceptual prototyping1. Oracle UIX

a. Proi. Ready Pallet of BLAF widgetsii. High Fidelity iii. Really quick

b. Consi. Coding rather than sketchingii. Pallet is restricted to standard BLAF componentsiii. Hard to walk away from the design

My personal history with conceptual prototyping1. Oracle APEX

My personal history with conceptual prototyping1. Oracle APEX

a. Proi. Ready Pallet of BLAF widgetsii. High Fidelity iii. A real working prototype

b. Consi. Coding rather than sketchingii. Pallet is restricted to standard BLAF componentsiii. Difficult to throw experiments away because it it working code

My personal history with conceptual prototyping1. Balsamiq

My personal history with conceptual prototyping1. Balsamiq

a. Proi. Anybody can do it.ii. Linking is easyiii. Really quickiv. Purposely tries to look like a quick sketch

b. Consi. Not high fidelity.

Other UI Prototyping tools1. Proto.io - Prototypes that feel real

a. Create fully-interactive high-fidelity prototypes that look and work exactly like your app should. No coding required…

2. Free mobile & web prototyping (iOS, Android) for designers - Marvela. Turn sketches and designs into interactive web, iPhone, iPad, Android and Apple Watch prototypes and

mockups…marvelapp.com

3. Adobe Experience Design CC | Download Adobe UX prototyping toolsa. Design and prototype websites and mobile apps with Adobe Experience Design CC (Beta), the first all-in-one

solution for…www.adobe.com

4. UXPin - UX Design, Wireframing Tools, Prototyping Toolsa. Create and collaborate across your entire design workflow with UXPin. Go quickly from wireframe to

interactive…www.uxpin.com

5. Origami Studio - Design Prototypinga. A new tool for designing modern interfaces, built and used by designers at Facebook

origami.design

A little bit about SafePaaS

Complete GRC with Integrated ERP Controls Management

ProcessPaaS

AccessPaaS Operations Management

SafeSight

Risk Library

Incident Workflow

Financial Close ManagerProcurement Manager Customer Order Manager

Audit Manager Policy ManagerCompliance Manager

Master Data Monitor

Dat

aPro

be In

tegr

atio

n Se

rvic

es

MonitorPaaSTransaction Monitor

Configuration Monitor

App Life Cycle Manager

Access Monitor

Policy Monitor

Roles Manager

ARCPaaS

iAccess

Enterprise Risk Manager Rules Repository

Predictive Analytics

Process Controls Management

IT Governance: Access Controls Management IT Governance: Continuous Controls Monitoring

Audit Risk and Compliance Management

Data Privacy Monitor

Data/Doc Manager

Approach

SOD Scanner Secure2Sign

Access AnalyticsERP MonitorsProcess Monitor Audit AnalyticsGRC Monitor

People Manager

A little bit about SafePaaS1. Cloud based provider of Governance Risk and Compliance services2. Based out of Austin Texas3. About 250 customers worldwide4. Centered around access application controls testing5. Needing to expand the offering / deal size / farm the install base

A little bit about the problems addressed by the prototypeAudit Manager - A specialized Project Management system for Internal and External Auditors.

Compliance Manager - A tool to collate management assertion of the effectiveness of the internal controls throughout the management chain.

Risk Manager - A tool to surface a library of risks, rate those risks for their impact and likelihood and declare the appropriate treatment for that risk.

Audit Intelligence - A tool for Audit Committees and Chief Audit Executives to confirm the state of internal controls and plan for testing across the enterprise.

A quick review of the canvas, palette and layout behaviour

Review of the UI Prototypes

Audit Manager - Review in Balsamiq

Compliance Manager - Review in PDF

Risk Manager - Review in PDF.

Audit Intelligence - Review in Balsamiq

Review of the UI Prototypes

● Audit Manager - Review in Balsamiq○ Features

■ Quick review of Pallet■ Pages■ Containers■ Breadcrumbs■ Links■ Data Tables■ Hierarchies

Review of the UI Prototypes

● Compliance Manager - Review in PDF○ Features

■ Saving to PDF■ Post it notes■ Links within PDF Document

Review of the UI Prototypes

● Risk Manager - Review in PDF.○ Features

■ Putting new widgets in the Pallet

Review of the UI Prototypes

● Audit Intelligence - Review in Balsamiq○ Features

■ Branding Area■ Badges

Polling for Worked Example● University Timetabling● Wellness Tracking● Citizen Issue Logging

References and Further Reading1. Create A Working Conceptual Prototype For Your App In Less Than A Week

a. https://hackernoon.com/create-a-working-conceptual-prototype-for-your-app-in-less-than-a-week-ce904fe3bc5d

2. Basic UI/UX Design Concept Difference Between Wireframe & Prototypea. https://uxplanet.org/basic-ui-ux-design-concept-difference-between-wireframe-prototype-e38c

d3580543