60

Prototyping - 2015 PhillyCHI UX Workshop Series

Embed Size (px)

Citation preview

Page 1: Prototyping - 2015 PhillyCHI UX Workshop Series
Page 2: Prototyping - 2015 PhillyCHI UX Workshop Series

LEONARDO DA VINCI

Artist Engineer Inventor Philosopher UX Designer

Page 3: Prototyping - 2015 PhillyCHI UX Workshop Series
Page 4: Prototyping - 2015 PhillyCHI UX Workshop Series

INTRODUCTIONS

Page 5: Prototyping - 2015 PhillyCHI UX Workshop Series

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 /  

Page 6: Prototyping - 2015 PhillyCHI UX Workshop Series

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/

Page 7: Prototyping - 2015 PhillyCHI UX Workshop Series

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

USER EXPERIENCE

 

Page 8: Prototyping - 2015 PhillyCHI UX Workshop Series
Page 9: Prototyping - 2015 PhillyCHI UX Workshop Series
Page 10: Prototyping - 2015 PhillyCHI UX Workshop Series
Page 11: Prototyping - 2015 PhillyCHI UX Workshop Series
Page 12: Prototyping - 2015 PhillyCHI UX Workshop Series
Page 13: Prototyping - 2015 PhillyCHI UX Workshop Series

PROTOTYPING IS THE MATERIALZATION OF A DESIGN CONCEPT

Page 14: Prototyping - 2015 PhillyCHI UX Workshop Series

PROTOTYPING IS ABOUT SIMULATING

SENSORY INPUT + OUTPUT

Page 15: Prototyping - 2015 PhillyCHI UX Workshop Series

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?

Page 16: Prototyping - 2015 PhillyCHI UX Workshop Series

AND FOR FUN!

Am I having a good time?

Page 17: Prototyping - 2015 PhillyCHI UX Workshop Series

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

- Thomas Edison

FAIL FAST

FAIL OFTEN

Page 18: Prototyping - 2015 PhillyCHI UX Workshop Series

PROTOTYPING SHOULD BE RAPID + ITERATIVE

Page 19: Prototyping - 2015 PhillyCHI UX Workshop Series

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

DO IT ANYWAY.

Page 20: Prototyping - 2015 PhillyCHI UX Workshop Series

RAPID INSIGHT

TESTING

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

Page 21: Prototyping - 2015 PhillyCHI UX Workshop Series

#MOTOTYPE A miniature prototype

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

Page 22: Prototyping - 2015 PhillyCHI UX Workshop Series

PAPER TECHNIQUES

Page 23: Prototyping - 2015 PhillyCHI UX Workshop Series

Strive for simulating true CONTEXT OF USE

Page 24: Prototyping - 2015 PhillyCHI UX Workshop Series

Context

Production on-screen Paper on wrist Production on wrist

Less Context More Context Most Context

Page 25: Prototyping - 2015 PhillyCHI UX Workshop Series

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

Page 26: Prototyping - 2015 PhillyCHI UX Workshop Series

YES…NO…AND A LITTLE BIT.

Page 27: Prototyping - 2015 PhillyCHI UX Workshop Series

PUSH YOUR CAPABILITIES THE RESOURCES ARE THERE FOR YOU

Page 28: Prototyping - 2015 PhillyCHI UX Workshop Series

Prototype Fidelity Spectrum

Page 29: Prototyping - 2015 PhillyCHI UX Workshop Series

Prototype Fidelity Spectrum

Page 30: Prototyping - 2015 PhillyCHI UX Workshop Series

Production Software + Hardware

Page 31: Prototyping - 2015 PhillyCHI UX Workshop Series

Fidelity != Insight

Page 32: Prototyping - 2015 PhillyCHI UX Workshop Series

Questions?

Page 33: Prototyping - 2015 PhillyCHI UX Workshop Series

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

Page 34: Prototyping - 2015 PhillyCHI UX Workshop Series

Good ol’ Paper and Pencil!

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

Page 35: Prototyping - 2015 PhillyCHI UX Workshop Series

•  Shareable •  Ubiquitous •  Simulate realistic state

changes •  Minimal animation •  Limited interactions •  Not really dynamic

Page 36: Prototyping - 2015 PhillyCHI UX Workshop Series

framerjs

•  Requires some light programming knowledge

•  Simple, but powerful

Page 37: Prototyping - 2015 PhillyCHI UX Workshop Series

•  Very flexible – can prototype almost anything

•  Collaborative – team share feature

•  Seasoned platform

Page 38: Prototyping - 2015 PhillyCHI UX Workshop Series

•  Powerful animations and interactions

•  Recently acquired by Google

•  Render direct to device

Page 39: Prototyping - 2015 PhillyCHI UX Workshop Series

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

smartphones

Page 40: Prototyping - 2015 PhillyCHI UX Workshop Series

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

support

Page 41: Prototyping - 2015 PhillyCHI UX Workshop Series

•  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

Page 42: Prototyping - 2015 PhillyCHI UX Workshop Series

WHY MUST WE CARRY ALL THIS?!

Page 43: Prototyping - 2015 PhillyCHI UX Workshop Series
Page 44: Prototyping - 2015 PhillyCHI UX Workshop Series
Page 45: Prototyping - 2015 PhillyCHI UX Workshop Series

THINK OUTSIDE THE

“RECTANGLE”

Page 46: Prototyping - 2015 PhillyCHI UX Workshop Series

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.

Page 47: Prototyping - 2015 PhillyCHI UX Workshop Series

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.

Page 48: Prototyping - 2015 PhillyCHI UX Workshop Series

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.

Page 49: Prototyping - 2015 PhillyCHI UX Workshop Series

Group 1

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

Page 50: Prototyping - 2015 PhillyCHI UX Workshop Series

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).

Page 51: Prototyping - 2015 PhillyCHI UX Workshop Series

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.

Page 52: Prototyping - 2015 PhillyCHI UX Workshop Series

Group 4

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

Page 53: Prototyping - 2015 PhillyCHI UX Workshop Series

PAPER PROTOTYPING TIPS & TECHNIQUES

Page 54: Prototyping - 2015 PhillyCHI UX Workshop Series

Cut Out and Slide Thru

Page 55: Prototyping - 2015 PhillyCHI UX Workshop Series

Stick On and Peel Off

Page 56: Prototyping - 2015 PhillyCHI UX Workshop Series

Duplicate and Change State

Page 57: Prototyping - 2015 PhillyCHI UX Workshop Series

Questions?

Page 58: Prototyping - 2015 PhillyCHI UX Workshop Series

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

Page 59: Prototyping - 2015 PhillyCHI UX Workshop Series

Books

Page 60: Prototyping - 2015 PhillyCHI UX Workshop Series

Thank you! I value your feedback!

Follow me: @mattinteractive