The document discusses effective prototyping for apps and websites, emphasizing the importance of rapid iteration and customer feedback to achieve product-market fit. It covers various types of prototypes, user personas, wireframing, and agile methodologies, and provides practical exercises for participants to enhance their prototyping skills. The document aims to teach entrepreneurs and non-technical individuals the fundamentals of prototyping to utilize any tool effectively.

1. Making Effective Protoypes
Matthew Ho, Native Tongue Apps!
November 2013

2. Background
‣ I am an entrepreneur. !
‣ Non-technical.!
‣ I have 12 apps on the app-store – iTunes, Google Play, Amazon, Nabi!
‣ Launched over a dozen websites!
‣ Worked with some of Australia’s largest brands!
‣ Worked with startups, enterprises, government:!
‣ Online marketing!
‣ Prototyping!
‣ Apps/Websites

3. Meet the class
‣ Who are you?!
‣ Your experience with prototyping!
‣ What do you want to learn?

4. Why I teach this class
- Other courses - “ Prototyping with Axure”, “Balsamiq”, etc..!
- Requires you to know what they are!
- Learning curve!
- Startup thinking!
- Learn the fundamentals so you can use any tool!
- Give back to the startup & tech community

5. Effective vs Perfect
"A good plan violently executed now is better than a perfect plan executed
next week." - George S. Patton

6. Mindset not a toolset
Scrappy and resourceful!
Be like MacGyver

7. AGENDA
SECTION 1 – Intro to Effective Prototyping!
▪ What is Prototyping?!
▪ Why do we prototype?!
▪ Personas!
▪ Wireframing!
▪ Userstories!
SECTION 2 – Lets get practical!!
▪ Overview of tools!
▪ Hands on application

8. What Is
Prototyping?
Prototyping

9. Question
What is a prototype?

10. What is a prototype
A prototype is an early sample, model or release of a product built to test a concept or process or to learn
from.

11. Different types of prototypes
1. UX!
2. Visual!
3. Functional!
4. Proof of concept

12. Prototype
Design
UX
Qualitative
Functional
Quantitative
Customer validation
Testing
Tweaks
Usability

13. Why do we
Prototype?
Prototyping

14. Why prototype?
‣ What are we trying to achieve?!
‣ Build things that PEOPLE WANT!
‣ Customer feedback.!
‣ Test a process!
‣ Feasibility!
‣ Cost – Less cost. !
‣ Risk – de-risk, assumptions

15. Traditional approach: Waterfall

16. Agile Method

17. Startup thinking: Lean = MVP

18. Lean everything
Lean
development
Lean
marketing
Lean
design

19. The only thing that matters
Product / market fit

20. Speed
1.Developed in 1 week!
2. Refined for 1 more week!
3. Submitted!
4. Constant iteration based on
feedback. !
5. Weekly release cycles!

21. Building the
future of vision
Prototyping

22. Got Glass?

23. Question
How long did it take to build the first working version of Google Glass?

24. 1 day to build first working version

25. Rule #1: Find the quickest path to experience

26. Minority Report Experience

27. HAIR BANDS 27

28. Rule #2: Doing is the best kind of thinking

29. Our consulting
website
Prototyping

30. PROBLEM 30
We need to make money!!
!
We need some work. !

31. PROBLEM 31
But we don’t have a website!!
!
We don’t have traffic ☹

32. Wireframes 32

33. Unbounce Landing page

34. Google Adwords Campaign 34

35. Process
Prototyping

36. Process
1. Workshop !
2. Sketches!
3. Navigational flow!
4. Wireframes!
5. Themes, Epics, User stories!
6. Design & Development!
Everyone is
thinking about
UX
Working with
developer &
designer

37. Project Questionnaire
Workshop Questions covering:
1. User personas!
2. Competitor apps!
3. What are our business objectives? Goals?!
4. What are the anticipated most used features!
5. See questionnaire spreadsheet for more!

38. Key objectives
Learn how to identify your own
process.
Exercise – What is your process?
agenda
5 mins 1. Identify each step in your own process.!
!
2. How can it be improved
deliverable
- Determine steps in your own
process for prototyping
38
resources
- Previous resources

39. Concepts
Prototyping

40. User Personas
Prototyping

41. User personas
Everyone who has a mobile
phone is a customer

42. User personas
Everyone who has a mobile
phone is a customer

43. User personas
“A product for everybody is a
product for nobody”
– Seth Godin

44. User personas
1. Who is the ideal customer!
2. How old are they? !
3. Where do they work?!
4. Where do they live? !
5. What are their personal attributes / habits!
6. What are their values?!
7. Where do they get their information!
8. What websites/apps do they use!
!
!

45. User personas
1. Key customer demographics - in priority order. !
e.g. 1) "any sex, 30 - 45, high income earner, inner city dweller”,
"any sex, 45 - 60, semi-retired, outer suburbs”!
!
2. Important user personas –
e.g. Young working professional female, no kids, with
high disposal income for fashion etc…!

46. User personas
• Get in their heads. !
• Understand how they think !
• Use a picture. !
• Write it up. !
• This can evolve over time as you learn more
about the customer!
• Ensures everyone is on the same page!
• Create a physical dummy with a face!!

47. User personas

48. User personas

49. User flows
Prototyping

50. Navigational flow

51. See Do Technique

52. See Do Example

53. See Do

54. More concepts
Prototyping

55. Wireframes

56. Themes, Epics, Userstories

57. An Epic is a group of related User Stories. !
!
Needs to be broken down into User Stories
Epic

58. User stories
A User story is an Independent, Negotiable,
Valuable, Estimatable, Small, Testable
requirement (“INVEST”).!
!

59. User stories
!
• Written in everyday language from
perspective of user!
• To do list!
• Contain basic details and open to
interpretation!
• Not agile in themselves, opportunity to
collaborate

60. User stories
!
As a [user role] I want to [goal] so I can
[reason].
!
Example: As a user, I would like the validation on the login page to
be very clear so that I can easily see when/if I make a mistake
when I log in

61. Priorities
1. Use ranking of 1 – 3. !
2. 1 is critical and 3 is nice to have.!
3. What will be the most used features?!
4. M means “Minimum” in MVP.!
5. Rank epics!
6. Rank user stories within the epic!
7. If there are too many #1’s, use scale of 1 – 5.
Then 1 – 10.

62. Tools
Prototyping

63. Tools
Use tools that you are most
comfortable with to get the fastest
& most effective results.

64. The cost of innovation
Innovation doesn’t need to cost
millions. It can cost $3.

65. Pen and paper

66. Pen and paper

67. Pen and paper

68. Entrepreneurs in the wild – sketching!

69. Pen and paper
Get users to sketch what they want
Pros!
Free.!
Fast. !
Changes are easy to make !
Free form!
Naïve design!
!
Cons!
Not easy to replicate changes!
Doesn’t look realistic

70. Other tools
Basics!
• Powerpoint!
• Keynote!
• Microsoft paint!
!
Prototyping software!
• Moqups!
• Balsamiq!
• Axure!
• FluidUI!
• Proto.io!
• Omnigraffle!
• Keynotopia!
• Mockgen!
!

71. Other tools
App specific software!
• Popapp!
• Appgyver!
• Flinto!
!

72. Other tools
Landing pages!
• Unbounce!
• Optimizely!
• Visual Website Optimizer!
• Launchrock!
!
Other tools!
• Skitch – screen grabs & annotations

73. Other tools
More technical users!
• Photoshop!
• Illustrator!
• Twitter Bootstrap!
• Build working software

74. Time to do
some work!
Practical

75. Requirements
1. I want to make ordinary photos on my phone look awesome like Polaroid !
camera shots.!
2. Be able to see your friends photos in my feed!
3. I want to discover other interesting photos.!
4. Search for other photos using hashtags.!
5. View my profile and update it!
!
I think this idea could be big! A billion dollar idea!

76. EXERCISE 1: Sketch
To do!
!
1. Free form sketch for the 3 main screens on your own.!
2. Compare with the people sitting next to you. In groups of 2 – 4. 5
mins. !
3. Do another sketch !
4. Come back to the group to discuss

77. EXERCISE 1: Interactive sketch
To do !
1. Go to https://popapp.in/ (or download via app store).!
2. Make it interactive!

78. Why I like POP
1. Its fast to go from paper to interactive mockup!
2. Easy to use!
3. Need to have an understanding of user flow!
4. Sometimes painful if you want to change a part of the sketch!
5. Free!
6. Easy to share using SMS, Email!
!

79. EXERCISE 2: Wireframes & user stories
1. User personas (5mins)!
2. User flow (10mins) – try see / do technique, navigation flows !
3. Write user stories (10mins) !
4. Produce wireframes (20mins)!

80. EXERCISE 2: Wireframes & user stories

81. Why I like Moqups
1. Fast !
2. Easy to use – drag and drop!
3. Good place to start!
4. Easy to replicate a page!
5. Free for 2 projects!
6. Easy to collaborate with others!
7. Can write notes!
!

82. EXERCISE 3: High Fidelity Prototype
1. Download the photos!
2. Go to http://www.appgyver.com/prototyper!
3. Create a prototype app!
4. Add transitions between screens!
5. Take a photo!
6. Go to a website URL!
7. Add an alert notification!
!
!
!

83. EXERCISE 4
Create a landing page for your app using unbounce.com!
!
!

84. TED Talks : Rapid Prototyping the Google Glasses!
37 Signals: A Shorthand for Designing UI Flows!
!
Agile – Epics, User Stories, Spikes!
Agile 101: The Difference between Themes, Epics and User Stories!
Agile101: Intro To Agile User Stories!
Scrum Alliance: New To User Stories!
Roman Pichler: Writing Good User Stories!
Agile 101: Using Spikes In Agile Development
UX!
Nathan Barry: Naïve Design!
Hack Design: Newsletter (awesome!)!
UX Rave: User Experience Rants & Raves!
Borkardo: Behaviour First, Design Second!
Erik Flowers: UX Is Not UI!
Other Great Resources

85. !
Mobile Specific!
Mobile Patterns: Mobile UI Examples!
Inspired UI: Mobile UI Examples!
Nima Gardide: 3 Things That Will Speed Up Mobile Development
Andrew Chen: How Mobile Startups Can Iterate Better, Faster, Stronger!
Other Great Resources

86. DISCUSSION
TIME
86Prototyping

87. Email: hello@nativetongue.com!
Website: http://nativetongue.com!
Personal blog: http://inspiredworlds.com!
Twitter: @inspiredworlds!
Linkedin: au.linkedin.com/in/matthewho1/
Contact me