Too often we jump into our tools and start developing learning before we fully understand our audience, testing our ideas and working with just what we are told by a stakeholder. This can lead to dozens of changes or a poor reception to a new launch. Whether you are creating a new project, developing an app, or launching a new website, this session will help you find the latest strategies in brainstorming and prototyping. The speaker will highlight specific tools, techniques, and work flows to help you kick off any project the right way. Learn how to communicate a concept, beginning with low-fidelity prototypes; gather user feedback; and translate it into high-fidelity prototypes before you start development. You will learn which tools and techniques to apply to your prototype, including techniques for paper, web, and app prototyping, and how to utilize new web-based apps to accelerate your process. Bring your pens, crayons, markers, and paper to get your ideas out of your head and make them a reality! Application on the Job: - Discover how prototyping can improve results. - Explore the latest mobile and desktop apps, including free and paid solutions. - Sketch and build a prototype during the session. - Utilize dozens of tools, trends, and tips on your next project.

1. Nick Floro
Prototyping + Feedback Loops:
Turning Concepts into Reality
sealworks.com/prototyping.pdf

2. think
inspire & have fun
share & explore
experiment

3. Experiment
experiment

4. experiment
sealworks.com/prototyping.pdf slideshare.net/nickfloro

5. Sketchingwhere ideas begin

6. Do you sketch?

8. communicate

9. tell a story

14. Contents
Open Accordion
Closed Accordion
Closed Accordion
Closed Accordion
Hamburger Menu
Accordion
Blind / MODAL
Play
Text
YES
Button

15. peek and pop

16. Sketch A
Screen
New Project
Stakeholder
Activity
• Multiple Choice
• Drag & Drop
• Photos
• Mobile + Desktop

17. Sketch A
Screen
New Project
Stakeholder
Activity
• Multiple Choice
• Drag & Drop
• Photos
• Mobile + Desktop
Questions?

18. Questions
‣ Can you provide a sample question(s)
‣ Are the questions short or long (approx
how many words or sentences)?
‣ How many choices would a question have?
‣ When can we review the content?

19. Visual Thinking

24. L O O P S

25. Feedback
Concept Sketch Prototype

26. Brainstorming

28. What is the challenge?

29. What are the options?

30. Architect a plan.

31. Present. Feedback. Develop.

32. 3 Key Factors
1. Audience
2. Technology
3. User Stories

33. 3 Key Factors
1. Audience
2. Technology
3. User Stories Why?

37. Post-It App

39. Post-It App

40. desktoptabletphone
Content Strategy
phone
tablet

41. Ready or not, here they come : )

42. Keep it Simple

43. Mobile Apps

44. Adobe Illustrator Draw

45. Paper by FiftyThree for iOS

47. SketchBook

48. Paper by FiftyThree for iOS

50. Microsoft Surface

51. Microsoft Surface

52. Microsoft Surface

53. Carbo
Handwriting in the Digital Age

64. MarvelApp.com

65. MarvelApp.com

66. MarvelApp.com
Download MarvelApp
011217

67. Screen 1
Menu
Screen 2
Content Screen
(include a video & text)
Screen 3
Interactive Timeline or
Activity
(move to see time)
MarvelApp.com
on paper or in app draw

68. Wireframing
Low / High Fidelity

69. Tools:
• Wireframes
– Keynote / PowerPoint
Quick Prototyping Techniques

70. This is my question example
where you would tell a story and
ask for a response?
option 1
option 2
option 3
option 4
option 5

71. This is my question example
where you would tell a story and
ask for a response?
Answer example the user could select
from one of the options.
Answer example the user could select
from one of the options.
Answer example the user could select
from one of the options.
Answer example the user could select
from one of the options.
Answer example the user could select
from one of the options.

72. keynotekungfu.com

73. keynotopia.com

74. Custom Template in Keynote

75. Microsoft PowerPoint

78. Apple Keynote

81. Powerpoint
Create a new document
Add 3 Slides
Create 3 buttons
• Multiple Choice
• Drag & Drop
• Photos
• Mobile + Desktop

82. Adobe Acrobat

87. balsamiq.com

88. Sketchy & iMockUps

89. InvisionApp.com

91. Tools

92. labs.invisionapp.com/craft
sketchapp.com
Sketch

93. Craft for Photoshop and Sketch
labs.invisionapp.com/craft

94. Adobe XD | Experience Design
www.adobe.com/products/experience-design.html

95. Adobe XD | Experience Design
www.adobe.com/products/experience-design.html

96. Feedback
& Iterate
Evolving Ideas

97. Communication

98. The Good The Ugly The Bad

99. Date Description Details Screen/Video Results Estimate
12/11/16 The screen flashes.
When I click on the
screen it flashes. Its
not suppose to.
Attached.
Task
The Good The Ugly The Bad

100. Date Description Details Screen/Video Results Estimate
12/11/16 The screen flashes.
When I click on the
screen it flashes. Its
not suppose to.
Attached. Could not recreate.
Task
The Good The Ugly The Bad

101. It’s Critical

102. Date Description Details Screen/Video Results Estimate
12/11/16 The screen flashes.
When I click on the
screen it flashes. Its
not suppose to.
Attached.
Attached screen shows
how it was recreated.
1 Critical
Task
The Good The Ugly The Bad

103. Discuss
Discuss, Prioritize and Get on the Same Page

105. User Interface | UI

106. User Interface | UI

107. User Experience | UX

108. User Experience | UX

109. Responsive Design

110. Responsive Design

111. getskeleton.com

112. getBootStrap.com

118. Parallax

123. Design for Flexibility

124. UI/UX
Getting Inspired

125. Flat Pages

126. Apple Weather

127. Yahoo Weather

128. Yahoo Weather

129. Yahoo Weather

130. Tab Bar

131. Apple Clock

132. Tree Structure
One
Two
Three
Four
Five
Six

133. Tree Structure
< Back
Screen One >
Screen Two >
Screen Three >
Screen Four >
Screen Five >
Screen Six >

134. First Aid

135. First Aid

136. First Aid

137. First Aid

138. Innovation
>

139. Pulse

140. Pulse

141. Pulse

142. evernote

143. evernote

144. Flipboard

145. Zite

146. Zite

147. Zite

148. Zite

150. ResourcesTo help you grow.

151. intuitive navigation and information design

152. abookapart.com

153. Nancy Durate Garr Reynolds

154. MobileAppsforLearning.com

155. BrowserStack.com

156. UserTesting.com

157. uxpin.com

158. Reflector Air Parrot
Mirror Your Device

159. ipsum-generator.com

160. CupCakeIpsum.com

161. storyboardthat.com

162. JingProject.com

163. techsmith.com/Snagit

164. Adobe Capture

168. ExplainEverything.com

170. appear.in

171. What can you apply from today?

172. Thank You
Nick Floro
sealworks interactive studios
nick@sealworks.com
www.sealworks.com
twitter.com/NickFloro
Download the Presentation at:
http://www.slideshare.net/nickfloro

173. Project
How would you convert it
to mobile?
How do you want to
improve the experience
UI/UX?
MarvelApp.com