A review of the prototyping process and how essential it is to UX and UI design. A Lecture and exercise given to Santa Monica City College in 2019.

1. Chris R. Becker
Copyright 2019
UX/Design Thinking:
Prototyping Lo-Fi > Hi-Fi
Hello
interaction education systems
art/design
Chris R. Becker
UX Design @cbecker
1

2. Chris R. Becker
WHO IS THIS GUY?
@cbecker
I have a background in
I have done projects for
Graphic Design - BFA : Colorado State University
MFA - Art Center College of Design : Media Design Program
Apple, Nissan, LAUSD, Art Center, Jet Propulsion Laboratory (NASA), VW, CB2, Adobe, Toyota, EA, Mattel, Kraft
Foods, Hyundai, Starwood Hotels, Fresh and Easy, HTC, OKGO and more.
I am a
Lead Curriculum Architect / Sr. User Experience (UX)
I have worked for
Red Design Consultants, JPL, Art Center, Schematic, Syynlabs, Saatchi & Saatchi, Phenomenon, Innocean,
Blitz, DeutschLA, the Ayzenberg Group, Handmade Mobile, Boombang, TBWA/Chait Day and Two Bit Circus,
Tool of North America, 100 Years
Currently - Lead Curriculum Architect @ Trilogy Education Services
I
who dabbles in physical computing experiences
2

3. Chris R. Becker
Copyright 2019 3
SOME OF MY PROJECTS
mens warehouse - Tux Rental Redesign
CB2 - Physical Interactive Campaign
OK GO music video - Interaction Builder
Apple - Macintosh 30 years

4. 4
Human Center Research (Discovery) > Definition > Ideation> Prototype
Design Thinking + UX
Chris R. Becker
Copyright 2019 http://www.nurun.com/en/what-we-do/

5. HERMENEUTICS & UX
Chris R. Becker
-App
-Website
-Product
- UI
- Interactions
- Features
-Task / Scenario
Testing
Prototyping /
Testing
!5

6. TEST A SCENARIO LEAD TO ITERATION
Chris R. Becker
!6

7. Chris R. Becker
Copyright 2019
prototyping
Brainstorm 1
Storytelling Prototyping
7

8. Chris R. Becker
Copyright 2019
Prototyping
A laboratory for testing ideas
8

9. UX Definition
Chris R. Becker
Paper Prototyping & Rapid Prototyping
9
Copyright 2019

10. 10
Concept Title
Chris R. Becker
Copyright 2019
Definition
Prototype
An early sample, model or release
of a product built to test a concept
or process.
A made object to act as a thing to
be replicated or learned from.
Prototyping is used in a variety of contexts, including
semantics, design, electronics, and software
programming.
A prototype is designed to test and trial a new design to
enhance precision by system analysts and users.
Prototyping serves to provide specifications for a real,
working system rather than a theoretical one
translucent concrete
Makes an idea tangible

11. Chris R. Becker
Copyright 2019
prototyping
At first fast and cheap
11

12. Chris R. Becker
Copyright 2019
Brainstorming & Ideation
Idea > Product
12

13. Chris R. Becker
Copyright 2019 13
http://www.embedded.com/design/prototyping-and-development/4008852/Why-When-and-How-The-basics-of-embedded-systems-prototyping
Prototyping

14. Chris R. Becker
Copyright 2019 14
http://www.innovationship.com/blog/the-value-of-early-prototyping
https://www.slideshare.net/InfoQ/build-to-learn-rapid-prototyping-methods
Prototype First Strategy

15. Chris R. Becker
Copyright 2019
Prototyping
Idea > Service
15

16. 16
Prototyping has user centered value that is make ideas tangible
Prototyping : Not just about the numbers
Chris R. Becker
Copyright 2019

17. Chris R. Becker
Copyright 2019
Prototyping
Ray & Charles Eames
17

18. Chris R. Becker
Copyright 2019
Prototyping
Douglas Englebart
18

19. EXERCISE (5 MINS)
Chris R. Becker
PART 1: GET OUT A SHEET OF PAPER
PART 2: DESIGN A WATCH
!19

20. Chris R. Becker
Copyright 2019
Prototyping
5 basic categories of Prototyping:
1.Proof of Principle
2.Form Study Prototype
3.User Experience Prototype
4.Visual Prototype
5.Functional Prototype
20

21. Chris R. Becker
Copyright 2019
Prototyping
1.Proof of Principle /
Proof of Concept
A Proof of concept prototype is used to test some
aspect of the intended design without attempting to
exactly simulate the visual appearance, choice of
materials or intended manufacturing process.
Such prototypes can be used to "prove" out a potential
design approach such as range of motion, mechanics,
sensors, architecture, etc. These types of models are
often used to identify which design options will not
work, or where further development and testing is
necessary.
(in electronics sometimes built on a breadboard).
21

22. Chris R. Becker
Copyright 2019
Prototyping: Proof of Principle
22

23. Chris R. Becker
Copyright 2019
Prototyping
<6>
Allows designers to explore the basic size, look
and feel of a product without simulating the
actual function or exact visual appearance of the
product. They can help assess ergonomic
factors and provide insight into visual aspects of
the product's final form. Form Study Prototypes
are often hand-carved or machined models from
easily sculpted, inexpensive materials (e.g.,
urethane foam), without representing the
intended color, finish, or texture. Due to the
materials used, these models are intended for
internal decision making and are generally not
durable enough or suitable for use by
representative users or consumers.
2. Form Factor Prototype
23

24. Chris R. Becker
Copyright 2019
Prototyping : Form Factor
<6>
24

25. Chris R. Becker
Copyright 2019
Prototyping
Frank Gehry Sketches
Prototyping is sketching through making
25

26. Chris R. Becker
Copyright 2019
Prototyping
<6>
3. User Experience
Prototype
A User Experience Model invites active human
interaction and is primarily used to support user
focused research.
While intentionally not addressing possible
aesthetic treatments, this type of model does more
accurately represent the overall size, proportions,
interfaces, and articulation of a promising concept.
This model allows early assessment of how a
potential user interacts with various elements,
motions, and actions of a concept which define the
initial use scenario and overall user experience.
26

27. Chris R. Becker
Copyright 2019
Prototype: User Experience Prototype
27

28. Chris R. Becker
Copyright 2019
prototype
4. Visual Prototype
Capture intended design aesthetic and simulate the
appearance, color and surface textures of the intended
product but will not actually embody the function(s) of the
final product. These models will be suitable for use in
market research, executive reviews and approval,
packaging mock-ups, and photo shoots for sales
literature.
28

29. Chris R. Becker
Copyright 2019
Prototyping
Idea - Prototyping
As these models are fully intended to be used and handled, more robust
construction is key.
Materials typically include heavy weight paper, plywood, foam, and CNC machined
components. Construction of user experience models is typically driven by
preliminary sketches / narrative or CAD drawing which may be constructed from
scratch or with methods such as 3D printers etc.
29

30. Chris R. Becker
Copyright 2019
Prototyping
5. Functional Prototype /
Working Prototype
will, to the greatest extent practical, attempt to simulate the
final design, aesthetics, materials and functionality of the
intended design.
The functional prototype may be reduced in size (scaled
down) in order to reduce costs. The construction of a fully
working full-scale prototype and the ultimate test of
concept, is the engineers' final check for design flaws and
allows last-minute improvements to be made before larger
production runs are ordered.
30

31. Chris R. Becker
Copyright 2019
Prototyping: Functional Prototype
31

32. Chris R. Becker
Copyright 2019
Prototyping
32

33. 33
Bill Buxton: Principle Design Researcher at Microsoft
Prototyping : Not just about the numbers
Chris R. Becker
Copyright 2019 https://blogs.microsoft.com/next/2015/03/11/the-next-at-microsoft-podcast-ep-2-philosophy-of-design/

34. 34
UX Definition
Chris R. Becker
Copyright 2019
Paper Prototyping Methods

35. Chris R. Becker
Copyright 2019 35
Concept Title
An paper model that pulls
content through an open window
in the device context to simulate
scrolling.
Pro: Connected 1 flow experience
Good for long pages and testing scrolling.
Con: Harder to iterate and patch
Harder to hide the next step
Method 1:
The paper strip scroll
model

36. Chris R. Becker
Copyright 2019 36
Paper Prototyping
An paper model that pulls
through an open window in the
device context from side to side.
Pro: Good for flowing experience
Good for swiping interactions
Good for stepped sequence
Con: Harder to iterate and patch
Harder to hide the next step
Method 2:
The paper strip pan
model

37. Chris R. Becker
Copyright 2019 37
Paper Prototyping
An paper model that stacks
Paper is in a stacked list from A
to B sequence for a device.
Pro: Easy to organize.
Good for iterating on individual screens.
Good for stepped sequences.
Con: Forces user through a linear interaction A
through (n)
Harder to show interactions / transitions.
More components to redraw.
Method 3:
The paper flip / stack
model

38. Chris R. Becker
Copyright 2019 38
Paper Prototyping
An paper model that has uses a
flipping interacting through the
sequence of an interface.
Pro: Good for lots of screens.
Good for organization.
Looks considered and more robust for testing.
Con: Harder to represent interactions.
Forces user through a linear interaction A
through (n)
More components to redraw.
http://desarrolloweb.dlsi.ua.es/cursos/2015/hci/paper-prototyping
Method 4:
The paper fan / book
model

39. Chris R. Becker
Copyright 2019 39
Paper Prototyping
An paper model that pulls
through an open window in the
device context. Tabs establish
the steps associated with the
user interactions.
Pro: Connected 1 flow experience
Allows steps to be skipped
Easier to guide a user and test a sequence.
Con: Harder to iterate and patch
Harder to maintain over time
Method 5:
The paper tabs
model
https://vimeo.com/38256134

40. Chris R. Becker
Copyright 2019 40
Paper Prototyping
An paper model that has
individual elements as floating
cut out shapes that can layer and
stack for context.
Pro: Can handel multiple interactions.
Can indicate internal interactions.
Can stack on top of other interactions.
Con: Harder to iterate and patch.
More components and pieces to maintain.
Method 6:
The paper sticky /
card model
http://desarrolloweb.dlsi.ua.es/cursos/2015/hci/paper-prototyping

41. Chris R. Becker
Copyright 2019 41
Paper Prototyping
An paper model that use how
paper can be folded to hide and
reveal content based on
interactions.
Pro: Can handel multiple interactions.
Can indicate internal interactions.
Good for showing stepped interactions.
Con: Harder to iterate
More components and pieces to maintain
Harder to reveal context
Method 7:
The paper fold
model
http://desarrolloweb.dlsi.ua.es/cursos/2015/hci/paper-prototyping
https://www.youtube.com/
watch?v=GrV2SZuRPv0

42. Chris R. Becker
Copyright 2019 42
Paper Prototyping
An paper model that has uses both
directions for how a user interacts
with a interface.
Pro: Can handle multiple interaction directions.
Addresses animation functionality of devices.
Looks considered and more robust.
Con: Harder to think about and build.
More components and pieces to maintain.
Harder to understand the sequence during testing.
Method 8:
The paper directional
UI model

43. Chris R. Becker
Copyright 2019 43
Paper Prototyping
An paper model that uses the
spacial experience and 1 to 1
context of an interaction.
Pro: Can simulate group interactions.
Addresses ergonomic contexts.
Applies a duel handed touch interface.
Con: Harder to think about and build.
Larger surface to draw.
Harder to understand the sequence.
http://sva.isotope221.com/mta-map-paper.html
Method 10:
The large format
model

44. Chris R. Becker
Copyright 2019 44
Paper Prototyping
An paper model that considers a
unique application of a screen or
other physical interface.
Pro: Can simulate the form and function of a product.
Approximates components and physical interaction
Applys a duel handed touch interface.
Con: Harder to think about and build.
More complicated construction.
Harder to understand the sequence.
Method 11:
The non standardized
screen model
https://www.youtube.com/watch?v=k_9Q-KDSb9o

45. Chris R. Becker
Copyright 2019
Prototyping
<6>
Rapid Prototyping
Laser Cutters
3D Printers
3D modeling software
45

46. Chris R. Becker
Copyright 2019
Prototyping
Microprocessing
Ubiquitous Computation
(ubicomp)
is an advanced computing concept where computing is made to
appear everywhere and anywhere. In contrast to desktop
computing, ubiquitous computing can occur using any device, in
any location, and in any format. A user interacts with the
computer, which can exist in many different forms, including
laptop computers, tablets, terminals and phones. The underlying
technologies to support ubiquitous computing include Internet,
advanced middleware, operating system, mobile code, sensors,
microprocessors, new I/O and user interfaces, networks, mobile
protocols, location and positioning and new materials.
46

47. Chris R. Becker
Copyright 2019 47
Paper Prototyping
Bruce Sterling
Michael Bruce Sterling is an American science
fiction author known for his novels and work on the
Mirrorshades anthology. This work helped to define
the cyberpunk genre.
Recommended
Reading
https://mitpress.mit.edu/books/shaping-things
Shaping things
http://wtf.tw/ref/
sterling_shaping_things.pdf

48. EXERCISE
Chris R. Becker
PART 1 : DEFINE A METHOD
PART 2 : BUILD A PAPER MODEL
PART 3 :
!48

49. Chris R. Becker
Copyright 2019 49
Prototyping
Prototyping has user centered value that is make ideas
tangible & Should be Tested
Class Responsibilities
https://humanfactors.jmir.org/2016/1/e12/

50. Chris R. Becker
Copyright 2019
Brainstorming & Ideation
Story > Prototype
Make>Test>Make Again
50

51. 51
Prototype / MVP / Software should use an Agile process for better results
Design Thinking
Chris R. Becker
Copyright 2019 http://intellicagroup.com/how-not-having-a-prototype-can-ruin-a-startup/

52. PAPER WIREFRAME SKETCHES
Chris R. Becker
!52

53. DOUBLE DIAMOND PROCESS
Chris R. Becker
We Are Here
!53

54. Chris R. Becker
Copyright 2019
Sketch > Wireframe
54
Wire Sketch Digitized Wireframe

55. Chris R. Becker
Copyright 2019
Interaction Model & Framework
55
Empathy MapPING
Shows & Features
Content Depth
1. Card Model
2. Scroll Model
3. Hub & Spoke Model
6. Directional Model
4. Unfold Model
5. Mosiac Model

56. Chris R. Becker
Copyright 2019
UX Wireframing
56
1. What is your Interface?
A phone, a computer, a kiosk, a car dashboard,
etc.
2. Know your Pixel size ( Sketch 1 to 1)
When learning to wireframe always sketch 1 to 1
to help build muscle memory and sketching
interface understanding.
3. Sketch sequence first then versions.
You are prototyping interactions with an interface
so all sketches should be 2 or more screens.
4. Define State Change with Color .
You are prototyping interactions with an interface
so defining active states and areas of interaction
with a color can assist in discussion and
presentation.

57. Chris R. Becker
Copyright 2019
Know your Size
57

58. Chris R. Becker
Copyright 2019
Sketch with a grid
“the design of anything independent of medium or across [device] with human
experience as an explicit outcome and human engagement as an explicit goal”
58

59. Chris R. Becker
Copyright 2019
Parts UX Wireframing
Ut ac venenatis odio. Donec
pellentesque felis in purus
consectetur, sed interdum nulla
commodo. Etiam augue neque,
tempor quis nulla eu, ultricies iaculis
ligula. Morbi tincidunt scelerisque
nulla, ut luctus justo rutrum sit amet.
Nunc nec tellus rutrum orci sagittis
imperdiet. Aliquam sit amet mauris
et nisl eleifend venenatis vel
dignissim orci. Duis quis nulla sit
amet ante posuere bibendum.
Stay Connected
Basic Callout Box
Quisque viverra metus non dui egestas, ac dignissim
risus sollicitudin. Vestibulum eu nisl vel libero suscipit
interdum id et orci. Cras imperdiet in neque vitae.
Read More
1. Structure
Navigation & Current State (Tabs, UI -
Hamburger,
2. Layout and Composition
Using a logic to design based on a grid.
3. Content
Boxes with x’s equal images / video.
Lines can represent copy
4. Define State Change with Color .
You are prototyping interactions with an
interface so defining active states and
areas of interaction with a color can assist
in discussion and presentation.
4. Define State Change with Color .
You are prototyping interactions with an
interface so defining active states and
areas of interaction with a color can assist
in discussion and presentation.
59

60. Chris R. Becker
Copyright 2019
Responsive Web
Design
“the design of anything independent of medium or across [device] with human experience
as an explicit outcome and human engagement as an explicit goal”
A Website design process that adapts the layout to the
viewing environment by using fluid, proportion-based grids,
flexible images, and CSS3 media queries (an extension of
the @media rule)
RESPONSIVE WEB DESIGN
60

61. Chris R. Becker
Copyright 2019
Layout / Navigation UI Elements
User Interface / GUI Development
61

62. 62
Clickable prototyping is about speeding up design to market
Prototyping Tools
Copyright 2019
http://www.prototypr.io/

63. Chris R. Becker
Copyright 2019
Part 1: Paper Sketches + Invision
“the design of anything independent of medium or across [device] with human experience
as an explicit outcome and human engagement as an explicit goal”
63

64. EXERCISE
Chris R. Becker
PART 1 : ADD PROTOTYPE WALK THROUGH TO INVISION
PART 2 : LEAVE COMMENTS ON NEIGHBORS PROTOTYPE
PART 3: ITERATE AND DIGITIZE YOUR WIREFRAME
!64