Creating Better Product Outcomes for the New World of FinTech & The Internet of Things

1. Wireframes, Mockups & Prototyping:
Beyond the 2D Web Page/App and Towards the 3D Future
Creating Better Product Outcomes for the
New World of FinTech & The Internet of Things
Copyright Down2BAskills Inc. 2020 ©
Presented by Steve Downer
CSPO® CSM® CBAP®
Founder & Principal Consultant
Down2BAskills Inc.

2. CONTENTS
TOPICS COVERED
Copyright Down2BAskills Inc. 2020 ©
• Introduction to the Presenter
• Wireframes vs Mockups vs Prototyping
• Key Definitions Driving Change: Terms to Consider
• 2D Wireframe for Mobile Age vs 3D Wireframe for
Fintech / IoT Age
• Wireframes: Benefits and Challenges
• 2D Mockup for Mobile Age vs 3D Mockup for
Fintech / IoT Age
• Mockups: Benefits and Challenges
• Mockups vs Prototyping: What’s the Difference?
• 2D Prototyping for Mobile Age vs 3D Prototyping for
Fintech / IoT Age
• Prototyping: Benefits and Challenges
• Key Take-Aways
• Key Resources: Diving Deeper

3. INTRODUCTION TO THE PRESENTER
EXPERIENCED CAREER COACH & THOUGHT LEADER
Experience
• Over 20 yrs.' experience as a career coach & mentor
• Accomplished Artificial Intelligence (AI), Blockchain &
cyber security consultant
• Expert in corporate strategy, product management,
process improvement and business analysis
• Experience filing intellectual property (IP) with USA,
Canada, UK, France, Singapore, Hong Kong & Australia
• Inventor of the Rapid Aqua Life Save™ innovation
• Content and approach internationally recognized by 'The
Economist' Newspaper, UK (2013), FirstRain Inc, USA
(2012) & Toronto Mobile UX Group, Canada (2017)
Qualifications
• Candidate for Advanced CSPO® (expected Feb 2020)
• Certified Scrum Product Owner® CSPO®
• Certified ScrumMaster® CSM®
• Certified Business Analysis Professional™ CBAP®
Copyright Down2BAskills Inc. 2020 ©

4. Wireframes vs Mockups vs Prototyping
WHAT’S THE DIFFERENCE?
Copyright Down2BAskills Inc. 2020 ©
Wireframe Mockup Prototype
No code or partially
functioning code

5. Key Definitions Driving Change
TERMS TO CONSIDER
Copyright Down2BAskills Inc. 2020 ©
Source: Wikipedia.org
Term Definition
Wireframe • A diagram consisting of simple lines and shapes representing a skeleton website or an app’s UI
and core functionality. Source: www.lucidchart.com
Mockup • A static design of a web page or app that features many of its final design elements but is not
functional.
• Not as polished as a live page and typically includes some placeholder data
Prototyping • An early sample, model, or release of a product built to test a concept or process.
• It is a term used in a variety of contexts, including semantics, design, electronics, and software
programming.
• Generally used to evaluate a new design to enhance features and precision
3D Printing • A process of making 3 dimensional solid objects from a digital file.
• The creation of a 3D printed object is achieved using additive processes.
• An object is created by laying down successive layers of material until the object is created.
FinTech (Financial Technology) • A new tech that seeks to improve and automate the delivery and use of financial services
Internet of Things (IoT) • A system of interrelated computing devices, mechanical and digital machines, objects, animals
or people that are provided with unique identifiers (UIDs) and the ability to transfer data over a
network, without requiring human-to-human or human-to-computer interaction.

6. Wireframes vs Mockups vs Prototyping
BEYOND THE 2D WEB PAGE AND TOWARDS THE 3D FUTURE
Copyright Down2BAskills Inc. 2020 ©
Traditional 2D Wireframe for Mobile Web Age New 3D Wireframe for FinTech / IoT Age

7. Wireframes: Key Benefits vs Challenges
BEYOND THE 2D WEB PAGE/APP AND TOWARDS THE 3D FUTURE
Copyright Down2BAskills Inc. 2020 ©
2D Wireframe Key Benefits 3D Wireframe Key Benefits
• Easy to communicate web page/app contents between team
• Highly iterative and thus, well-aligned with agile practices
• Fast and easy to build: can create using pen and paper
• Low cost: even using a free wireframing tool, cost will be low
• Outlines page/app architectural structure and visual layout
• Displays basic website/app UI functionality and UX
• Focuses on relative priorities of the info and functions
• Focuses on business rules for displaying info
• Focuses on cause and effect of different scenarios
• Used for brainstorming @ early design stage
• Product team can focus on macro decisions early on
• Richer UX than 2D wireframe
• Ability to visually represent new FinTech 3D use cases (e.g.
Driverless Cars, Home Automation, Drone eVTOLs, IoT other)
• Greater accuracy than 2D modelling => better risk mitigation
• More valuable outcomes from:
• Stakeholder Interviews e.g. higher quality questions
• Job shadowing
• Innovation Games
• Human Behavioural Research
• Design Studio Collaboration
2D Wireframe Key Challenges 3D Wireframe Key Challenges
• Lo-fi wireframes have no interactions or animations
• Only hi-fi wireframes have limited interactions or animations
(e.g. clicking, logging in, checking out, navigating)
• Doesn’t account for hardware interfaces
• More complex, so harder to iterate
• No interactions or animations
• Slower to build
• Relatively more time to produce and higher cost
• Hardware focused rather than software
• Steeper learning curve

8. Wireframes vs Mockups vs Prototyping
BEYOND THE 2D WEB PAGE AND TOWARDS THE 3D FUTURE
Copyright Down2BAskills Inc. 2020 ©
Traditional 2D Mockup for Mobile Web Age New 3D Mockup for FinTech / IoT Age
Click here for www.cospaces.io demo

9. Mockups: Key Benefits vs Challenges
BEYOND THE 2D WEB PAGE AND TOWARDS THE 3D FUTURE
Copyright Down2BAskills Inc. 2020 ©
2D Mockup Key Benefits 3D Mockup Key Benefits
• Easy to create with minimum training & right tools
• Showcases project details => collaboration & calibration
• Easy for stakeholders to understand business goals
• Very iterative and thus, well-aligned with agile practices
• More UI and visual details than a 2D wireframe (e.g. colours,
styles, graphics, typography, actual buttons, text, content, nav)
• Richer & more realistic UX than 2D wireframe
• Easy to preview, test and iterate
• Used for brainstorming @ design stage
• All benefits of 3D Wireframes and 2D Mockups plus:
• Create any use case in 3D
• No prior coding required for some tools, e.g. www.cospaces.io
via visual programming language
• Construct and manipulate solid shapes
• Learn about the product’s pros/cons by doing / simulating
• Use Virtual Reality explore product’s capabilities & limitations
• Use Augmented Reality test capabilities & limitations
• Use for brainstorming AND bodystorming @ design stage
2D Mockup Key Challenges 3D Mockup Key Challenges
• Limited interactions or animations (e.g. clicking, logging in,
checking out, navigating)
• Doesn’t account for hardware interfaces
• More complex, so harder to iterate
• Slower to build
• Relatively higher cost
• Limited interactions or animations
• Hardware focused rather than software
• Steeper learning curve
• Regulatory compliance (e.g. for 3D printers in buildings)

10. Prototyping: Mockups vs Prototyping
WHAT’S THE DIFFERENCE?
Copyright Down2BAskills Inc. 2020 ©
• In manufacturing and design, a mockup is a scale or full-size model of a design or
device, used for teaching, demonstration, design evaluation, promotion, and other
purposes
• A mockup is a prototype if it provides at least part of the functionality of a system and
enables testing of a design
• Mockups are used by designers mainly to acquire feedback from users
• Mockups address the idea captured in a popular engineering one-liner:
“You can fix it now on the drafting board with an eraser or you can fix it later on the
construction site with a sledge hammer”
Sources: Wikipedia.org and Mockplus.com

11. Wireframes vs Mockups vs Prototyping
BEYOND THE 2D WEB PAGE AND TOWARDS THE 3D FUTURE
Copyright Down2BAskills Inc. 2020 ©
Traditional 2D Prototyping for Mobile Web Age New 3D Prototyping for FinTech / IoT Age
Application with little or no software code

12. Prototyping: Key Benefits vs Challenges
BEYOND THE 2D WEB PAGE AND TOWARDS THE 3D FUTURE
Copyright Down2BAskills Inc. 2020 ©
2D Prototyping Key Benefits 3D Prototyping Key Benefits
• Most realistic representation of product prior to full coding
=> mitigates more risk
• Greater ability to check if users’ & business needs are met
(e.g. via rich interactions and animations)
• Saves time and money through UI and UX functionality testing
• Transition from Proof-of-Concept -> Prototyping with testable
functionality
• Expedites discovery of new design ideas
• Potential for greater stakeholder engagement during demos
(e.g. clients & project team)
• Paper prototyping (low fidelity) is also simple and effective
NOTE: more colours, elements, interactions and components
than paper wireframes used with paper prototypes
• Most of the benefits of 3D Mockups & 2D Prototypes plus:
• Speeds up ideation & design process where hardware involved
• 3D printing (aka Additive Manufacturing) more affordable &
accessible than before (e.g. online services if no access)
• Used to evaluate new hardware designs to enhance features &
precision. Increasingly important as Fintech & IoT drives
merging of software with hardware use cases)
• A new level of design freedom to imagine & create the future!
• Used for brainstorming AND bodystorming @ design stage
2D Prototyping Key Challenges 3D Prototyping Key Challenges
• Limited to software, desktops, tablets & mobile devices
• Unable to model more complex use cases, e.g. for IoT
• Approach is no longer a strategic advantage; table stakes
• Most complex, so harder to iterate
• Slower to build
• Relatively higher cost of materials, process & skilled labour
• Steepest learning curve (blend of hardware & software)
• Regulatory compliance (e.g. for 3D printers in buildings)

13. SUMMARY AND NEXT STEPS
KEY TAKE-AWAYS
• 3D wireframes, mockups & prototypes = a Paradigm Shift for
traditional finance and insurance business
• 3D wireframing Richer UX than 2D predecessor
• New FinTech & IoT use cases driving 3D adoption
• Greater accuracy than 2D modelling => better risk mitigation
• No prior coding required for some tools
• Learn about the product’s pros/cons by doing / simulating
• Use VR & AR features help explore product’s capabilities
• Use for brainstorming AND bodystorming @ design stage
• Speeds up ideation & design process where hardware involved
• 3D printing more affordable & accessible than before
• Used to evaluate new hardware designs to enhance features &
precision.
• A new level of design freedom to imagine & create the future!
• Used for brainstorming AND bodystorming @ design stage
• 3D techniques more complex, so harder to iterate than 2D
• Relatively more time to produce and higher cost
• Hardware focused rather than software
• Steepest learning curve (blend of hardware & software)
• Regulatory compliance (e.g. for 3D printers in buildings)
Copyright Down2BAskills Inc. 2020 ©

14. KEY RESOURCES
DIVING DEEPER
• https://down2baskills.com/rals Steve Downer (2018)
• The Lean Mobile Research Approach Steve Downer (2016)
• Rapid Aqua Life Save™ Lean Business Canvas Steve Downer (2020)
• Rapid Aqua Life Save™ Client Journey Mapping Steve Downer (2020)
• Core Skills for UX Designers to Ethically Leverage AI Steve Downer (2017)
• Sculpeto.com
• Mockplus
• Cospaces.io
• The Lean Startup Eric Ries (2010)
• Disciplined Agile Delivery (DAD) Scott Ambler (2020)
• The Scrum Alliance
Copyright Down2BAskills Inc. 2020 ©