The document provides an overview of prototyping for beginners, emphasizing the importance of early and iterative design to improve user experience. It discusses various types of prototypes, their fidelity levels, and the necessity of usability testing to identify user needs and refine concepts. Key takeaways include learning from user feedback, adopting a mindset comfortable with early ideas, and utilizing minimal investment to explore and validate design solutions.

1. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
Prototyping for Beginners
- Learn Early!
Carol Smith
@carologic
Inclusive Innovation

2. Carol Smith
• 18 year user experience (UX) career
- leadership, management, and mentorship
in and consulting to Fortune 500 companies.
• MS, Human-Computer Interaction, DePaul Univ.

3. What is a prototype?

4. https://commons.wikimedia.org/wiki/File:Sethenfiona.jpg

5. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019Photo of spool holder: https://www.flickr.com/photos/creative_tools/15646389161
3D Modeling and Printing

7. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
A/B Testing

8. “Everything is a prototype”
- Kathryn McElroy
Prototyping for Designers: Developing the Best Digital
and Physical Products by Kathryn McElroy IBM Design Thinking: https://www.ibm.com/design/thinking/principles/restless-reinvention

9. Why Prototype?

10. Learn

11. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
Why?
• Minimal investment
• Change is easy and cheap

12. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
Enabling humans to complete a task
• Find information
• Submit form
• Contact someone
• Purchase item
A Scrum board suggesting to use Kanban by Jeff.lasovski
https://commons.wikimedia.org/wiki/File:Simple-kanban-board-.jpg

13. Usability
degree to which something
- software, hardware or anything else –
is easy to use and a good fit
for the people who use it.
Definition from UXPA Usability Body of Knowledge:
http://usabilitybok.org/glossary/19#letteru

14. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
How to learn?
• Humans
• Unaffiliated with project
• Representative users
– Matching need
– Expected user

15. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
Usability Testing is…
• Attempt task without help
• Do real tasks
• You only observe
• Painful and wonderful
Image: http://www.flickr.com/photos/raphaelquinet/513351385/sizes/l/in/photostream/

16. *All the Feels*

17. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
So many feelings
• Uncomfortable
– showing ugly, unfinished work (at first)
• Sad
– cringes when people struggle to get through task
• Happy
– learn a great deal very quickly!
Adapted from Prototyping for Designers: Developing the Best Digital
and Physical Products by Kathryn McElroy IBM Design Thinking:
https://www.ibm.com/design/thinking/principles/restless-reinvention

18. Mindset…
comfortable with testing
unfinished ideas in order
to make the best result possible
- Kathryn McElroy
Prototyping for Designers: Developing the Best Digital
and Physical Products by Kathryn McElroy, IBM Design Thinking:
https://www.ibm.com/design/thinking/principles/restless-reinvention

19. Types of Prototypes

20. Service Prototypes

21. Photo: https://c1.staticflickr.com/9/8113/8639449258_1e9857710d_b.jpg

22. Signs of a bad UI by Jeremy Keith Follow
https://www.flickr.com/photos/adactio/1423242310

23. Low-Fidelity Prototypes
Paper, Post-its, Cardboard

24. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
Really rough (but readable)

25. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
Post-its on Paper
Image by Caryn Vainio, Jun 26, 2013
https://medium.com/@hellchick/the-right-fidelity-for-the-job-2d767a5309d4

26. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
Change prototype as you learn
• Post-its
• Clear cover for dry erase markers
• Give participants sharpie and post-its
• Co-creation at its best
• Take photos!
*Paper prototypes are not accessible
– think through unintended consequences/implications

27. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
Sizing can be very important

28. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
Jeff Hawkins, an inventor of the Palm Pilot
My favorite pretotype story by Alberto Savoia August 20, 2010
http://pretotyping.blogspot.com/2010/08/one-of-my-favorite-pretotype-stories.html

29. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
Cardboard prototypes
Haunted House Prototype by Fabrice Florin
https://www.flickr.com/photos/fabola/29002046354/in/photostream/

30. Mid-Fidelity Prototypes
Pretend Functionality
Manipulatable/Clickable

31. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
Hand Manufacturing
Sofa manufacture worker handmade furniture
https://pixabay.com/en/artisan-sofa-manufacture-worker-895670/

32. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
No code - high functionality
https://www.axure.com

34. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
No Code MVP
• For validation
• Landing page with an email signup form
• Determine interest
• Get early adopters
• Invite to feedback sessions

35. High-Fidelity Prototypes

36. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
This is what you are launching
• Everything is a prototype!
• Make it small and learn from it
36

37. Getting Started

38. What problem
are you trying
to solve
and for whom?

39. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
Who are the Primary people who will use this?
• What are their goals?
• Common complaints/biggest issues?
• Most important/frequent tasks?

40. Focus

41. Who will frequently, actively
use your product?
What do they need to do?

42. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
Benefits of a Good User Experience
• Increased Usefulness
• Increased Efficiency
• Improved Productivity
• Fewer Errors
• Reduced Training Time
• Improved Acceptance
Image - Natural Smile by Bradley Davis:
https://www.flickr.com/photos/backpackphotography/1375817337

43. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
Case Study
• Creating a site for University students
• Think about the student you are designing for
– What kind of program?
– How old are they?
– What else?

44. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
Which Student?
Rick Connie
Photos http://www.flickr.com/photos/mrjkbh/ via http://creativecommons.org/licenses/by-nc-nd/2.0/deed.en
http://www.flickr.com/photos/caharley72/ (Christopher Alison Photography) via
http://creativecommons.org/licenses/by-nc-nd/2.0/

45. "The biggest waste
of all is building something
no one wants"
- @ericries #LeanStartupMI via @MelBugai

46. Activity!

47. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
Let’s prototype!
• Mock up prototype (10 minutes)
• Conduct guerilla usability test (10 minutes)
• What would you change?

48. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
Hotel Check-In App
• New hotel check-in app
– Request room type
– Check into room
– Request transportation to hotel from airport

49. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
User Scenario
• Your hotel sent you a link to their new app to check in,
and you decide to try it.
• You need to:
– Check in (prefer 1 King, non-smoking)
– Request transportation to hotel

50. Challenge!
What would you improve
for users unable
to see screen?

51. Start Making!

52. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
What fidelity is right?
• Is low-fi enough?
• If medium necessary keep it simple – resist overbuilding
• Time box yourself – set a deadline and keep it
• Goal is to learn quickly

53. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
Stencils make it quick (might be too pretty)
UI Stencils https://www.uistencils.com/collections/stencils

54. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
Low-fidelity/Paper Prototypes
• Initial feedback - concept, organization, feasibility
• Study participants may
– Not understand how to use/think about
– Not act same
• Issues with prototype vs. format?
• Always test with more realistic prototype
54

55. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
Low-fi Testing Methodology
• Warn participant
– Not everything will work
– May get frustrated
• You adjust interface
• Only observe – no discussion

56. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019Alastair Somerville viaTwitter: @Acuity_Design
https://twitter.com/Acuity_Design/status/937673959021178880

57. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
Medium-Fidelity Tool?
• Considerations
• Time
• Tools available (PowerPoint vs. Figma)
• Team
– Skill set and size?
– What does it need to do?

58. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
Clickable or Code?
• Clickable
– Easy and quick to create
– Easy to change
• Real Code
– Risky – more time invested
– Great if it’s the right solution

59. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
Don’t worry about full functionality
• Focus on what you need to learn
• Dead ends = great learning opportunity
– Let them attempt to go where they want
– Don’t worry about making everything “clickable”

60. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
No BDUF*
• Just enough
• Identify and solve problems
• Use each study to pick up information
*Big Design Up Front

61. Think ahead
(not make ahead)

62. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
Hosting clickable and code prototypes
• Where do I put it?
– Intellectual property (IP) considerations
– Security may make access difficult
• Reliability
– What if server goes down?
– Who contact for help?
– When available?

63. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
Much easier to test with Medium Fidelity
• Match participant expectations
• Easier to determine what is/is not working
• Takes more time/thinking to create
• Test pilot study first

64. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
Example schedule
• Create
prototype
• Recruit
Create:
Day 1-3
• Usability
study
Learn:
Day 4-7 • Based on
learnings
Improve:
Day 8
Repeat

65. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
True Statements
• All interfaces have usability problems
• Limited resources to fix
• More problems than resources
• Less serious problems distract
• Intense focus on fixing most serious problems first
Rocket Surgery Made Easy: The Do-It-Yourself Guide
to Finding and Fixing Usability Problems. By Steve Krug

66. The
prototype
will fail

67. Goal:
Learn
and improve

68. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
Tweak, Don’t Redesign
• Small iterative changes
– Make it better now
– Don’t break something else
• Take something away
– Reduce distractions
– Don’t just add – question it
Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding
and Fixing Usability Problems, by Steve Krug

69. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
Summary – Think Ahead
• Think deeply about
– Problem you are solving
– People who will use your solution
• Lowest possible fidelity to learn
• Emphasize learning and continuous improvement
• Use time and learning as your measures

70. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
Recommended Readings

71. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
Contact Carol
LinkedIn.com/in/caroljsmith
Twitter - @Carologic
Slides - Slideshare.net/carologic

72. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
Reference Sites
• Usability.gov
– https://www.usability.gov/
• W3C Web Accessibility Initiative
– http://www.w3.org/WAI/
• Accessibility Standards in US (Section
508)
– https://www.access-board.gov/
• Jakob Nielsen
– http://www.useit.com
UXPA – User Experience Professionals Association
– http://uxpa.org/
Information Architecture Institute
– http://iainstitute.org/
IxDA – Interaction Designers Association
– https://ixda.org/

73. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
References
• Albert, Bill, Tom Tullis, and Donna Tedesco. Beyond the Usability Lab.
• Bank, Christopher. 15 ways to test your minimum viable product by Christopher, Nov 12, 2014 in Design & Dev, The Next Web.
https://thenextweb.com/dd/2014/11/12/15-ways-test-minimum-viable-product/
• Barnum, Carol M. (Jan. 2003). What’s in a Number? STC Usability SIG Newsletter, Usability Interface.
http://www.stcsig.org/usability/newsletter/0301-number.html Retrieved: 20080323
• Beyer, Hugh. User-Centered Agile Methods (Synthesis Lectures on Human-Centered Informatics)
• Cato, John. User-Centered Web Design. Addison Wesley Longman; 2001.
• Dickie, Sam. Time to create a landing page and test your MVP by Sam Feb 8, 2017 https://medium.com/lean-startup-circle/time-to-create-a-
landing-page-and-test-your-mvp-acc028c0f8fe
• Dini, Dino. (March 2008). Wikipedia: Design. 2005 Game Design and Technology Workshop, Liverpool JM University.
http://en.wikipedia.org/wiki/Design Retrieved on 2008-03-23. Retrieved: 20080323
• Faulkner, Christine. The Essence of Human-Computer Interaction. Prentice Hall PTR; 1997.
• Gale, S. A Collaborative Approach to Developing Style Guides. Conference proceedings on Human factors in Computing Systems April 13 -
18, 1996, Vancouver Canada. ACM Press, (pp. 362-367).
• Gaffney, Gerry. (2000) What is Card Sorting? Usability Techniques Series, Information & Design.
http://www.infodesign.com.au/usabilityresources/design/cardsorting.asp
• Galitz, W. O. (2002). The essential guide to user interface design: An introduction to GUI design principles and techniques (Second Edition).
Wiley: New York, NY.

74. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
References
• Gothelf , Jeff. http://blog.usabilla.com/5-effective-ways-for-usability-testing-to-play-nice-with-agile/
• Grudin, J. 1989. The case against user interface consistency. Commun. ACM 32, 10 (Oct. 1989), 1164-1173.
• Hackos, JoAnn T., PhD and Redish, Janice C. User and Task Analysis for Interface Design. Wiley; 1998.
• Henry, Shawn Lawton. Just Ask: Integrating Accessibility Throughout Design.
• Henry, S.L. and Grossnickle, M. Accessibility in the User-Centered Design Process. Georgia Tech Research
Corporation, Inc; Atlanta, Georgia, USA; 2004. http://uiaccess.com/accessucd/personas.html
• Henry, S.L. and Martinson, M. Evaluating for Accessibility, Usability Testing in Diverse Situations. Tutorial,
2003 UPA Conference.
• Kuniavsky, Mike. Observing the User Experience: a Practitioner's Guide to User Research. Morgan
Kaufmann, 2003.
• Krug, Steve. Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems.
• Lewis, Clayton and Rieman, John. (1993, 1994) Task-Centered User Interface Design A Practical Introduction.
http://hcibib.org/tcuid/chap-4.html

75. Prototyping for Beginners - Learn Early! @carologic Inclusive Innovation Summit 2019
References
• Mandel, Theo. The Elements of User Interface Design. Wiley; 1997.
• McElroy, Kathryn. Prototyping for Designers: Developing the Best Digital and Physical Products. O’Reilly Media, Inc. 2017
• Neisser, Ulric. (1967) Cognitive Psychology
• Nielsen, Jakob and Robert L. Mack. Usability Inspection Methods. John Wiley & Sons, Inc. 1994.
• Powell, Thomas A. The Complete Reference: Web Design. Osborne/McGraw-Hill; 2000.
• Ratcliffe, Lindsay and Marc McNeill. Agile Experience Design: A Digital Designer's Guide to Agile, Lean, and Continuous.
• Rubin, Jeffrey and Dana Chisnell. Handbook of Usability Testing: How to Plan, Design, and Conduct Effective Tests. John
Wiley & Sons, Inc.
• Schaffer, Eric. Institutionalization of Usability: A Step by Step Guide. Human Factors International, 2004.
• Slatin, John M. and Sharron Rush Maximum Accessibility: Making Your Web Site More Usable for Everyone. Addison-
Wesley Pub Co., 2002.
• W3C Web Accessibility Initiative - http://www.w3.org/WAI/intro/accessibility