prototyping - 2015 phillychi ux workshop series

LEONARDO DA VINCI

Artist Engineer Inventor Philosopher UX Designer

INTRODUCTIONS

noun

a first, typical or preliminary model of something from which other forms are developed or copied

verb

make a prototype of (a product)

PROTOTYPE  

/ prō də tīp /  

USER /’yōōzer/

noun

a person who uses or operates something, esp. a computer or other machine

noun

practical contact with and observation of facts or events

EXPERIENCE /ik’spi(ǝ)reǝns/

User experience encompasses all aspects of the end-user's interaction with a product, service, system, or environment.

USER EXPERIENCE

PROTOTYPING IS THE MATERIALZATION OF A DESIGN CONCEPT

PROTOTYPING IS ABOUT SIMULATING

SENSORY INPUT + OUTPUT

USER TESTING PRESENTATION COMMUNICATION FEASIBILITY

Will this work for my intended audience?

Will my stakeholders buy into this? Will this shit even work?

Will my stakeholders understand this?

So why do we prototype?

AND FOR FUN!

Am I having a good time?

“I have not failed, I’ve just found 10,000 ways that won’t work”

- Thomas Edison

FAIL FAST

FAIL OFTEN

PROTOTYPING SHOULD BE RAPID + ITERATIVE

Client or stakeholder can’t make it rain for prototyping and/or user testing?

DO IT ANYWAY.

RAPID INSIGHT

TESTING

Prototyping and testing at the minimum to maximize value and insight.

#MOTOTYPE A miniature prototype

Prototype a single novel feature or interaction to test or present.

PAPER TECHNIQUES

Strive for simulating true CONTEXT OF USE

Context

Production on-screen Paper on wrist Production on wrist

Less Context More Context Most Context

But…but…do I have to know programming to prototype?!

YES…NO…AND A LITTLE BIT.

PUSH YOUR CAPABILITIES THE RESOURCES ARE THERE FOR YOU

Prototype Fidelity Spectrum

Prototype Fidelity Spectrum

Production Software + Hardware

Fidelity != Insight

Questions?

TOOLS If your only one is a you’ll treat every problem as a

Good ol’ Paper and Pencil!

•  Anyone can do it •  Flexible •  Portable •  No barriers to entry •  Not really dynamic

•  Shareable •  Ubiquitous •  Simulate realistic state

changes •  Minimal animation •  Limited interactions •  Not really dynamic

framerjs

•  Requires some light programming knowledge

•  Simple, but powerful

•  Very flexible – can prototype almost anything

•  Collaborative – team share feature

•  Seasoned platform

•  Powerful animations and interactions

•  Recently acquired by Google

•  Render direct to device

•  Cloud-based •  Very easy to use •  Limited to

smartphones

•  Cloud-based •  Very easy to use •  Has smart watch

support

•  Large variety of boards from IoT to wearables

•  Easy for newbies •  C and C++ •  Huge community

•  Easy USB plug and play •  Tons of APIs (including

AS3) •  Lots of other boards to

connect to easily connect to

•  Cloud platform •  Tiny form factor •  Has a JavaScript

API

•  A lil motherboard! •  Micro SD ports •  USB Ports •  Programmable with

Scratch and Python

WHY MUST WE CARRY ALL THIS?!

THINK OUTSIDE THE

“RECTANGLE”

ACME Electronics is interested in competing in the Internet of Things market, and sees particular opportunity to sell products that improve the connection between consumers, their automobiles, and their home; as well as reduce the number of artifacts consumers must carry.

ACMEE is looking for vendors to think outside the box and employ a novel approach to overcoming some of the risk factors associated with safety, security, and identity.

ACMEE asks that vendors come up with a prototype that addresses a single use-case for the idea. The prototype should demonstrate all states of the design relevant to the use-case and should simulate context of use as closely as possible.

Group 1

Create a lo-fi prototype of a mobile or wearable product that integrates security between the car and home.

Group 2

Create a lo-fi prototype of a mobile or wearable product that can identify its users between the car and home (think personalization).

Group 3

Create a lo-fi prototype of a wearable and/or in-dash product that improves safety while driving. ACMEE has had trouble with complex voice recognition, so use this sparingly.

Group 4

Create a mid-to-hi-fi prototype of a wearable product that improves security for the car and/or home.

PAPER PROTOTYPING TIPS & TECHNIQUES

Cut Out and Slide Thru

Stick On and Peel Off

Duplicate and Change State

Questions?

Last Thoughts •  It only took you 2 hours to develop a prototype •  Dive in, don’t worry about the edge cases yet •  Are paper prototypes juvenile? Appropriate to

present to client or stakeholder? •  Don’t reinvent the wheel – not every idea has to be

original

Books

Thank you! I value your feedback!

Follow me: @mattinteractive