Post on 19-Jan-2017
Nick Floro
Prototyping + Feedback Loops: Turning Concepts into Reality
sealworks.com/prototyping.pdf
thinkinspire & have funshare & explore
experiment
Experiment
experiment
experiment
sealworks.com/prototyping.pdf slideshare.net/nickfloro
Sketching where ideas begin
Do you sketch?
communicate
tell a story
Contents
Open Accordion
Closed Accordion
Closed Accordion
Closed Accordion
Hamburger Menu
Accordion
Blind / MODAL
Play
TextYES
Button
peek and pop
Sketch A
Screen New Project
Stakeholder
Activity
• Multiple Choice
• Drag & Drop
• Photos
• Mobile + Desktop
Sketch A
Screen New Project
Stakeholder
Activity
• Multiple Choice
• Drag & Drop
• Photos
• Mobile + Desktop
Questions?
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?
Visual Thinking
L O O P S
FeedbackConcept Sketch Prototype
Brainstorming
What is the challenge?
What are the options?
Architect a plan.
Present. Feedback. Develop.
3 Key Factors1. Audience
2. Technology
3. User Stories
3 Key Factors1. Audience
2. Technology
3. User Stories Why?
Post-It App
Post-It App
desktoptabletphone
Content Strategy
phone
tablet
Ready or not, here they come : )
Keep it Simple
Mobile Apps
Adobe Illustrator Draw
Paper by FiftyThree for iOS
SketchBook
Paper by FiftyThree for iOS
Microsoft Surface
Microsoft Surface
Microsoft Surface
CarboHandwriting in the Digital Age
MarvelApp.com
MarvelApp.com
MarvelApp.com
Download MarvelApp
011217
Screen 1 Menu
Screen 2 Content Screen
(include a video & text)
Screen 3 Interactive Timeline or
Activity
(move to see time)
MarvelApp.comon paper or in app draw
Wireframing Low / High Fidelity
Tools:
• Wireframes–Keynote / PowerPoint
Quick Prototyping Techniques
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
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.
keynotekungfu.com
keynotopia.com
Custom Template in Keynote
Microsoft PowerPoint
Apple Keynote
Powerpoint Create a new document
Add 3 Slides
Create 3 buttons
• Multiple Choice
• Drag & Drop
• Photos
• Mobile + Desktop
Adobe Acrobat
balsamiq.com
Sketchy & iMockUps
InvisionApp.com
Tools
labs.invisionapp.com/craft
sketchapp.com
Sketch
Adobe XD | Experience Design
www.adobe.com/products/experience-design.html
Adobe XD | Experience Design
www.adobe.com/products/experience-design.html
Feedback & Iterate Evolving Ideas
Communication
The Good The Ugly The Bad
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
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
It’s Critical
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
Discuss Discuss, Prioritize and Get on the Same Page
User Interface | UI
User Interface | UI
User Experience | UX
User Experience | UX
Responsive Design
Responsive Design
Parallax
Design for Flexibility
UI/UX Getting Inspired
Flat Pages
Apple Weather
Yahoo Weather
Yahoo Weather
Yahoo Weather
Tab Bar
Apple Clock
Tree Structure
One
Two
Three
Four
Five
Six
Tree Structure
< Back
Screen One >
Screen Two >
Screen Three >
Screen Four >
Screen Five >
Screen Six >
First Aid
First Aid
First Aid
First Aid
Innovation
>
Pulse
Pulse
Pulse
evernote
evernote
Zite
Zite
Resources To help you grow.
intuitive navigation and information design
abookapart.com
Nancy Durate Garr Reynolds
MobileAppsforLearning.com
UserTesting.com
Reflector Air Parrot
Mirror Your Device
ipsum-generator.com
CupCakeIpsum.com
storyboardthat.com
Adobe Capture
appear.in
What can you apply from today?
Thank You
Nick Florosealworks interactive studios
nick@sealworks.comwww.sealworks.com
twitter.com/NickFloro
Download the Presentation at:http://www.slideshare.net/nickfloro
Project
How would you convert it
to mobile?
How do you want to
improve the experience
UI/UX?
MarvelApp.com