Your SlideShare is downloading. ×
0
Making Effective Protoypes
Matthew Ho, Native Tongue Apps!
November 2013
Background
‣ I am an entrepreneur. !
‣ Non-technical.!
‣ I have 12 apps on the app-store – iTunes, Google Play, Amazon, Na...
Meet the class
‣ Who are you?!
‣ Your experience with prototyping!
‣ What do you want to learn?
Why I teach this class
- Other courses - “ Prototyping with Axure”, “Balsamiq”, etc..!
- Requires you to know what they ar...
Effective vs Perfect
"A good plan violently executed now is better than a perfect plan executed
next week." - George S. Pa...
Mindset not a toolset
Scrappy and resourceful!
Be like MacGyver
AGENDA
SECTION 1 – Intro to Effective Prototyping!
▪ What is Prototyping?!
▪ Why do we prototype?!
▪ Personas!
▪ Wireframi...
What Is
Prototyping?
Prototyping
Question
What is a prototype?
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...
Different types of prototypes
1. UX!
2. Visual!
3. Functional!
4. Proof of concept
Prototype
Design
UX
Qualitative
Functional
Quantitative
Customer validation
Testing
Tweaks
Usability
Why do we
Prototype?
Prototyping
Why prototype?
‣ What are we trying to achieve?!
‣ Build things that PEOPLE WANT!
‣ Customer feedback.!
‣ Test a process!
...
Traditional approach: Waterfall




Agile Method




Startup thinking: Lean = MVP




Lean everything


Lean
development


Lean
marketing


Lean
design
The only thing that matters
Product / market fit
Speed
1.Developed in 1 week!
2. Refined for 1 more week!
3. Submitted!
4. Constant iteration based on
feedback. !
5. Weekl...
Building the
future of vision
Prototyping
Got Glass?
Question
How long did it take to build the first working version of Google Glass?
1 day to build first working version
Rule #1: Find the quickest path to experience
Minority Report Experience
HAIR BANDS 27
Rule #2: Doing is the best kind of thinking
Our consulting
website
Prototyping
PROBLEM 30
We need to make money!!
!
We need some work. !
PROBLEM 31
But we don’t have a website!!
!
We don’t have traffic ☹
Wireframes 32
Unbounce Landing page
Google Adwords Campaign 34
Process
Prototyping
Process
1. Workshop !
2. Sketches!
3. Navigational flow!
4. Wireframes!
5. Themes, Epics, User stories!
6. Design & Develo...
Project Questionnaire
Workshop Questions covering:

1. User personas!
2. Competitor apps!
3. What are our business objecti...
Key objectives
Learn how to identify your own
process.
Exercise – What is your process?
agenda
5 mins 1. Identify each ste...
Concepts
Prototyping
User Personas
Prototyping
User personas
Everyone who has a mobile
phone is a customer
User personas
Everyone who has a mobile
phone is a customer
User personas
“A product for everybody is a
product for nobody” 

– Seth Godin
User personas
1. Who is the ideal customer!
2. How old are they? !
3. Where do they work?!
4. Where do they live? !
5. Wha...
User personas
1. Key customer demographics - in priority order. !
e.g. 1) "any sex, 30 - 45, high income earner, inner cit...
User personas
• Get in their heads. !
• Understand how they think !
• Use a picture. !
• Write it up. !
• This can evolve ...
User personas
User personas
User flows

Prototyping
Navigational flow
See Do Technique
See Do Example
See Do
More concepts
Prototyping
Wireframes
Themes, Epics, Userstories
An Epic is a group of related User Stories. !
!
Needs to be broken down into User Stories
Epic
User stories
A User story is an Independent, Negotiable,
Valuable, Estimatable, Small, Testable
requirement (“INVEST”).!
!
User stories
!
• Written in everyday language from
perspective of user!
• To do list!
• Contain basic details and open to
...
User stories
!
As a [user role] I want to [goal] so I can
[reason].
!
Example: As a user, I would like the validation on t...
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....
Tools
Prototyping
Tools
Use tools that you are most
comfortable with to get the fastest
& most effective results.
The cost of innovation
Innovation doesn’t need to cost
millions. It can cost $3.
Pen and paper
Pen and paper
Pen and paper
Entrepreneurs in the wild – sketching!
Pen and paper
Get users to sketch what they want 

Pros!
Free.!
Fast. !
Changes are easy to make !
Free form!
Naïve design...
Other tools
Basics!
• Powerpoint!
• Keynote!
• Microsoft paint!
!
Prototyping software!
• Moqups!
• Balsamiq!
• Axure!
• F...
Other tools
App specific software!
• Popapp!
• Appgyver!
• Flinto!
!
Other tools
Landing pages!
• Unbounce!
• Optimizely!
• Visual Website Optimizer!
• Launchrock!
!
Other tools!
• Skitch – s...
Other tools
More technical users!
• Photoshop!
• Illustrator!
• Twitter Bootstrap!
• Build working software
Time to do
some work!
Practical
Requirements
1. I want to make ordinary photos on my phone look awesome like Polaroid !
camera shots.!
2. Be able to see y...
EXERCISE 1: Sketch
To do!
!
1. Free form sketch for the 3 main screens on your own.!
2. Compare with the people sitting ne...
EXERCISE 1: Interactive sketch
To do !
1. Go to https://popapp.in/ (or download via app store).!
2. Make it interactive!
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 use...
EXERCISE 2: Wireframes & user stories
1. User personas (5mins)!
2. User flow (10mins) – try see / do technique, navigation...
EXERCISE 2: Wireframes & user stories
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 f...
EXERCISE 3: High Fidelity Prototype
1. Download the photos!
2. Go to http://www.appgyver.com/prototyper!
3. Create a proto...
EXERCISE 4
Create a landing page for your app using unbounce.com!
!
!
TED Talks : Rapid Prototyping the Google Glasses!
37 Signals: A Shorthand for Designing UI Flows!
!
Agile – Epics, User St...
!
Mobile Specific!
Mobile Patterns: Mobile UI Examples!
Inspired UI: Mobile UI Examples!
Nima Gardide: 3 Things That Will ...
DISCUSSION
TIME
86Prototyping
Email: hello@nativetongue.com!
Website: http://nativetongue.com!
Personal blog: http://inspiredworlds.com!
Twitter: @inspi...
Upcoming SlideShare
Loading in...5
×

Making Effective Prototypes

341

Published on

If you're new to prototyping or wireframing then this presentation is for you. Attendees will gain an understanding of prototyping and some of the different tools available.

We will cover 3 main topics:
1. Why do we make prototypes?
2. The prototyping process
3. Tools available for making prototypes

Students will gain an understading of how the different tools available can be combined to produce meaningful results to aid with iterative development. Starting at the lo-fi end with pen and paper (it's important!), the class will move on to lean, web based tools (popapp.in, moqups.com and appgyver.com).

The fundamentals covered in this presentation also prove useful for dealing with developers and agile teams.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
341
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
12
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Making Effective Prototypes"

  1. 1. Making Effective Protoypes Matthew Ho, Native Tongue Apps! November 2013
  2. 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. 3. Meet the class ‣ Who are you?! ‣ Your experience with prototyping! ‣ What do you want to learn?
  4. 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. 5. Effective vs Perfect "A good plan violently executed now is better than a perfect plan executed next week." - George S. Patton
  6. 6. Mindset not a toolset Scrappy and resourceful! Be like MacGyver
  7. 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. 8. What Is Prototyping? Prototyping
  9. 9. Question What is a prototype?
  10. 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. 11. Different types of prototypes 1. UX! 2. Visual! 3. Functional! 4. Proof of concept
  12. 12. Prototype Design UX Qualitative Functional Quantitative Customer validation Testing Tweaks Usability
  13. 13. Why do we Prototype? Prototyping
  14. 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. 15. Traditional approach: Waterfall 
 

  16. 16. Agile Method 
 

  17. 17. Startup thinking: Lean = MVP 
 

  18. 18. Lean everything 
 Lean development 
 Lean marketing 
 Lean design
  19. 19. The only thing that matters Product / market fit
  20. 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. 21. Building the future of vision Prototyping
  22. 22. Got Glass?
  23. 23. Question How long did it take to build the first working version of Google Glass?
  24. 24. 1 day to build first working version
  25. 25. Rule #1: Find the quickest path to experience
  26. 26. Minority Report Experience
  27. 27. HAIR BANDS 27
  28. 28. Rule #2: Doing is the best kind of thinking
  29. 29. Our consulting website Prototyping
  30. 30. PROBLEM 30 We need to make money!! ! We need some work. !
  31. 31. PROBLEM 31 But we don’t have a website!! ! We don’t have traffic ☹
  32. 32. Wireframes 32
  33. 33. Unbounce Landing page
  34. 34. Google Adwords Campaign 34
  35. 35. Process Prototyping
  36. 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. 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. 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. 39. Concepts Prototyping
  40. 40. User Personas Prototyping
  41. 41. User personas Everyone who has a mobile phone is a customer
  42. 42. User personas Everyone who has a mobile phone is a customer
  43. 43. User personas “A product for everybody is a product for nobody” 
 – Seth Godin
  44. 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. 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. 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. 47. User personas
  48. 48. User personas
  49. 49. User flows
 Prototyping
  50. 50. Navigational flow
  51. 51. See Do Technique
  52. 52. See Do Example
  53. 53. See Do
  54. 54. More concepts Prototyping
  55. 55. Wireframes
  56. 56. Themes, Epics, Userstories
  57. 57. An Epic is a group of related User Stories. ! ! Needs to be broken down into User Stories Epic
  58. 58. User stories A User story is an Independent, Negotiable, Valuable, Estimatable, Small, Testable requirement (“INVEST”).! !
  59. 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. 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. 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. 62. Tools Prototyping
  63. 63. Tools Use tools that you are most comfortable with to get the fastest & most effective results.
  64. 64. The cost of innovation Innovation doesn’t need to cost millions. It can cost $3.
  65. 65. Pen and paper
  66. 66. Pen and paper
  67. 67. Pen and paper
  68. 68. Entrepreneurs in the wild – sketching!
  69. 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. 70. Other tools Basics! • Powerpoint! • Keynote! • Microsoft paint! ! Prototyping software! • Moqups! • Balsamiq! • Axure! • FluidUI! • Proto.io! • Omnigraffle! • Keynotopia! • Mockgen! !
  71. 71. Other tools App specific software! • Popapp! • Appgyver! • Flinto! !
  72. 72. Other tools Landing pages! • Unbounce! • Optimizely! • Visual Website Optimizer! • Launchrock! ! Other tools! • Skitch – screen grabs & annotations
  73. 73. Other tools More technical users! • Photoshop! • Illustrator! • Twitter Bootstrap! • Build working software
  74. 74. Time to do some work! Practical
  75. 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. 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. 77. EXERCISE 1: Interactive sketch To do ! 1. Go to https://popapp.in/ (or download via app store).! 2. Make it interactive!
  78. 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. 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. 80. EXERCISE 2: Wireframes & user stories
  81. 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. 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. 83. EXERCISE 4 Create a landing page for your app using unbounce.com! ! !
  84. 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. 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. 86. DISCUSSION TIME 86Prototyping
  87. 87. Email: hello@nativetongue.com! Website: http://nativetongue.com! Personal blog: http://inspiredworlds.com! Twitter: @inspiredworlds! Linkedin: au.linkedin.com/in/matthewho1/ Contact me
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×