Slides from a presentation given by Jamie Clouting to the London branch of IIBA UK on 3 December 2015 - see https://www.iibauk.org/pastevents/163-london-evolution-of-user-centred-design-a-rapid-prototyping

1. Bringing projects to
life through Rapid
Prototyping
3rd December 2015

2. Overview
 What is a prototype?
 Why do we need prototypes
 What options are available for your project?
 Examples of a real prototypes
 The benefits
 Tools you can use
2 Bringing projects to life through Rapid Prototyping

3. “ A prototype is an early sample or model built to test a
concept or process or to act as a thing to be replicated
or learned from ~ Wikipedia
“ Interaction Design (IxD) defines the structure and
behaviour of interactive systems ~ IxDA
What is prototyping
3 Bringing projects to life through Rapid Prototyping

4. Bringing projects to life through Rapid
Prototyping
4
Why do we need
prototypes?

5. Bringing projects to life through Rapid
Prototyping
5
Why do we need
prototypes?
… this may sound
familiar!

6. What our customer wants…
6 Bringing projects to life through Rapid Prototyping

7. What the developer thinks the customer needs…
7 Bringing projects to life through Rapid Prototyping

8. Some building starts to happen
Bringing projects to life through Rapid Prototyping8

9. Excitement starts to build…
Some building starts to happen
Bringing projects to life through Rapid Prototyping9

10. What gets delivered
Bringing projects to life through Rapid Prototyping10

11. Maybe it wasn’t in the spec?
Bringing projects to life through Rapid Prototyping11

12. And so you start to enforce sign-offs
Or maybe it was
Bringing projects to life through Rapid Prototyping12

13. And so you start to enforce sign-offs
Or maybe it was
Bringing projects to life through Rapid Prototyping13

14. Bringing projects to life through Rapid
Prototyping
14
How can
prototypes help us?

15. How can prototypes help us?
Bringing projects to life through Rapid Prototyping15
Identify
Document
Validate

16. How can prototypes help us?
Bringing projects to life through Rapid Prototyping16

17. Where do we start?
Bringing projects to life through Rapid Prototyping17
Horizontal (pages & navigation)
Vertical(functionality)

18. Low-fidelity
Bringing projects to life through Rapid Prototyping18
Horizontal (pages & navigation)
Vertical(functionality)
Low

19. Document title21

20. Document title22
Ideation

22. Sketches

23. Rough concepts

24. Bringing projects to life through Rapid Prototyping24

25. Low-fidelity
Bringing projects to life through Rapid Prototyping25
Horizontal (pages & navigation)
Vertical(functionality)
Low
 Ideation
 Layout
 Expectation setting

26. Medium-fidelity
Bringing projects to life through Rapid Prototyping26
Horizontal (pages & navigation)
Vertical(functionality)
Low
 Ideation
 Layout
 Expectation setting
Medium

27. Medium-fidelity
Bringing projects to life through Rapid Prototyping27

28. SHOW PROTOTYPE
Document title30
Launch Prototype

29. Testing
Bringing projects to life through Rapid Prototyping29

30. Medium-fidelity
Bringing projects to life through Rapid Prototyping30
Horizontal (pages & navigation)
Vertical(functionality)
Low
 Ideation
 Layout
 Expectation setting
Medium
 Flow design
 Simple interactions
 Internal buy-in

31. High-fidelity
Bringing projects to life through Rapid Prototyping31
Horizontal (pages & navigation)
Vertical(functionality)
Low
 Ideation
 Layout
 Expectation setting
Medium
 Flow design
 Simple interactions
 Internal buy-in
High

32. Bringing projects to life through Rapid Prototyping32

33. High-fidelity
Bringing projects to life through Rapid Prototyping33
Horizontal (pages & navigation)
Vertical(functionality)
Low
 Ideation
 Layout
 Expectation setting
Medium
 Flow design
 Simple interactions
 Internal buy-in
High
 Complex interaction
 Animation
 Look & feel
 Functionality

34. Audience
Bringing projects to life through Rapid Prototyping34
Horizontal (pages & navigation)
Vertical(functionality)
Low
 Ideation
 Layout
 Expectation setting
Medium
 Flow design
 Simple interactions
 Internal buy-in
High
 Complex interaction
 Animation
 Look & feel
 Functionality
Internal
project team

35. Audience
Bringing projects to life through Rapid Prototyping35
Horizontal (pages & navigation)
Vertical(functionality)
Low
 Ideation
 Layout
 Expectation setting
Medium
 Flow design
 Simple interactions
 Internal buy-in
High
 Complex interaction
 Animation
 Look & feel
 Functionality
Internal
project
team
Other members
of the business

36. Audience
Bringing projects to life through Rapid Prototyping36
Horizontal (pages & navigation)
Vertical(functionality)
Low
 Ideation
 Layout
 Expectation setting
Medium
 Flow design
 Simple interactions
 Internal buy-in
High
 Complex interaction
 Animation
 Look & feel
 Functionality
Internal
project
team
Other
members of
the business
External
stakeholders

37. Story-telling
Bringing projects to life through Rapid Prototyping37
Horizontal (pages & navigation)
Vertical(functionality)
Low
 Ideation
 Layout
 Expectation setting
Medium
 Flow design
 Simple interactions
 Internal buy-in
High
 Complex interaction
 Animation
 Look & feel
 Functionality
Internal
project
team
Other
members of
the business
External
stakeholders

38. Quality expectation
Bringing projects to life through Rapid Prototyping38
Horizontal (pages & navigation)
Vertical(functionality)
Low
 Ideation
 Layout
 Expectation setting
Medium
 Flow design
 Simple interactions
 Internal buy-in
High
 Complex interaction
 Animation
 Look & feel
 Functionality
Internal
project
team
Other
members of
the business
External
stakeholders
Forgiving

39. Quality expectation
Bringing projects to life through Rapid Prototyping39
Horizontal (pages & navigation)
Vertical(functionality)
Low
 Ideation
 Layout
 Expectation setting
Medium
 Flow design
 Simple interactions
 Internal buy-in
High
 Complex interaction
 Animation
 Look & feel
 Functionality
Internal
project
team
Other
members of
the business
External
stakeholders
Forgiving
Expect
polish

40. Feedback
Bringing projects to life through Rapid Prototyping40
Horizontal (pages & navigation)
Vertical(functionality)
Low
 Ideation
 Layout
 Expectation setting
Medium
 Flow design
 Simple interactions
 Internal buy-in
High
 Complex interaction
 Animation
 Look & feel
 Functionality
Internal
project
team
Other
members of
the business
External
stakeholders
Forgiving
Expect
polish

41. Tools
Bringing projects to life through Rapid
Prototyping
41

42. Low-tech tools
Bringing projects to life through Rapid Prototyping42

43. High-tech fidelity tools
Bringing projects to life through Rapid Prototyping42

44. 46
Conclusions
Bringing projects to life through Rapid
Prototyping

45. Wrapping it up…
1. Prototyping can have real benefits to your project, no matter what the budget
2. Prototyping can lead to increased buy-in from internal stakeholders and users
3. Prototyping can save you money by reducing the amount of time it takes you to
get consensus on your project
4. Prototyping can highlights issues that are easier to fix before any code is written
5. Prototyping can be done by anyone
Conclusions
47 Bringing projects to life through Rapid Prototyping