Given at BigDesign 2015. Discussing the benefits of rapid prototyping, the stress of selecting a prototyping tool, and an overview of available apps for desktop and mobile.

1. RAPID
PROTOTYPING:
2015
Its a
MAD, MAD
World

2. Managing Director
User Experience
Marti GoldMarti Gold
@martigold@martigold

3. Why Use Prototypes?

4. Static images
cannot
communicate
interactions

6. • Minimizes Risk
• Permits Innovation
• Saves Time and
Money
• Reduces
misinterpretation
• Tests Assumptions

7. And the most direct benefit for you…

8. If a picture is
worth 1,000
words…

9. …A prototype is worth 1,000 emails.

10. Traditional Workflow
vs.
Prototyping Workflow

11. In Traditional Workflows…
Step 1: Management
communicates a product idea

12. Step 2:
“The
Powerpoint
Development
Phase”

13. Step 3:
“We’re Agile so we start coding.”

14. “Please sir, may I do some user testing?”

15. NO
“There’s no room in the timeline…”
“We don’t have the budget…”
“There aren’t any available resources…”
“We can’t change the specs…”
“The project is already yellow…”

16. A DEVELOPER WITH A FREE HOUR

17. So now the
clock is
running…
Tick tock, tick tock…..
The app is often in
late alpha stage
before a real user
ever sees a
working interface.

18. But after all this work,
what happens if users hate it?

19. Well, it could
go back up
the funnel
for revisions…

20. Or it could be released “as is” with the intention of
“fixing minor issues via future updates.”

21. This process is unavoidably
Company-Centric
The company builds products the company wants,
and then hopes the User will like them.

23. When using prototypes,
the workflow is very different.

24. A small team quickly gathers
core requirements and defines the product’s goals.
DEVELOPER

25. Sketching and paper prototyping
starts almost immediately.
Business, Design, and Dev are ALL involved,
generating ideas and discussing problems.

26. THE GOAL:
Get an early
concept prototype
in front of a real
user as quickly as
possible.

27. Features and
interactions are
rapidly refined by
user feedback.
Each iteration’s
prototypes
increase in
fidelity.

28. The “Go” or “NO Go” Decision
When prototype confidence
reaches a certain level either…
• The idea is funded and
approved for development
OR…..
• The idea is abandoned

29. Powerpoints vs.
Tested Prototypes
If you are an executive,
which project are you
most likely to approve?

30. Prototyping processes are inherently
User-Centric
The company builds products the User wants,
and can be confident the User will like them.

31. <disclaimer> </disclaimer>

32. The Current State of
UX Prototyping Tools:
“WHICH ONE?”

33. The Good News
There are many
easy-to-use,
inexpensive tools
non-Developers
can use for
prototyping.

34. Most are Very Affordable
and
$15–$40
per user, per month

35. But…….EEEKKKK!!

36. “They All Sound the Same”

37. Prototyping Tool Selector
www.cooper.com/prototyping-tools
by Emily Schwartzman
Every article comparing tools
sent me here…

38. http://socialcompare.com/en/comparison/mockup-wireframing-design-tools
34” monitor? It STILL didn’t fit.
Then I found this….

39. And this
is what it
looks like
vertically!

40. The Really Bad News?
• ALL of them still have at
least one major, potentially
“deal killing” shortcoming
• Very few of us have time to
discover what those
shortcomings are.

41. medium.com called 2014
“The Year of
Interactive Design Tools”

42. PTSD
Prototyping Tool
Selection Disorder
The UX disease of 2015

43. PTSD ??
Do you have symptoms of

44. “How can I call
myself a UX Pro?
I only know Visio!
“I’ve never
even heard
of those apps!”
“Please stop talking
about prototyping
before someone asks
me which app I use!”

45. Have you become a “Free Trial Junkie”?

46. Advanced Cases?
$100+ a month
in recurring billing
for apps you
never even open?

47. OMG! I HAZ IT!OMG! I HAZ IT!

48. The Dangers of PTSD

49. #1: Staying with paper prototypes for too long

50. At some point you have to jump from…
This…. To This….

51. And then from…
This…. To This….

52. Danger #2:
“We’re in a hurry…
so I’ll just do it in
Photoshop.”

53. #3: Staying Current

54. The PTSD Recovery Process

55. First, identify “your preferred type”

56. Paper
Clickable Wireframe
Image-Based High Fidelity

57. Paper Prototyping Tools

60. Tools to work
with sketches and paper prototypes
remotely

61. POP

62. POP - Pros and Cons
• PRO: Photos can come from the camera, camera roll,
Adobe Creative Cloud, or Dropbox
• PRO: Easy “hot spot” based interactions
• PRO: Companion web app
• PRO: Sharing via email, SMS, Facebook, or Twitter
• Deal Killer? Only that its very limited — but the
convenience may be worth it in many instances.

63. Mural (www.mural.ly)

64. Mural - Pros and Cons
• BIG PRO: Lets you create, update, and even TEST
sketches and paper prototypes with participants in
remote locations
• PRO: VERY easy to use and learn
• PRO: Creates a “Paper Prototype Paper Trail”
• Deal Killer? I haven’t found one yet

65. Clickable Wireframe Tools

67. HotGloo (hotgloo.com)
• Good news — its no
longer Flash-based
• Solid library of UI
elements
• Support for
responsive design
• Designed to create
work in the tool -
painful to if you have
existing mockups

68. • No support for gestures (only
mouse interactions
• No options for animated
transitions (fade, wipe left, etc.)
• No templates for specific
devices
HotGloo
Pain Points

69. Balsamiq Mockups (https://balsamiq.com/products/mockups/)
• Intentionally keeps wireframes
rough and hand-drawn looking
using “Sketch Skin”
• Works on all major OS
• Lots of community support
• Now has Google Drive
integration
• Known for its clean interface
and ease of use.

70. “We think that in most cases,
wireframes + running code is
much better than prototyping.
…We consciously decided not to
let users specify interactivity other
than the ability to link wireframes
together into a storyboard.”
The
Balsamiq
Deal Killer
(for me)
from their website…

71. Image Based Tools

72. Flinto (flinto.com)
• POP on steroids
• Easy to drag links
from one hots spot
to another
• Can be sent to
anyone via SMS
• Looks like a native
app - icon on home
screen

73. Flinto for Mac (flinto.com/mac)

74. Invision (invisionapp.com)
• The “Axure” of the
image-based tools
• Widely used, lots
of community
support
• Important: Syncs
with native .psds
• Great
collaboration tools

75. I kept hitting the wall.”
“Why did I give it up?

76. Hi-Fidelity Tools

77. Justinmind (justinmind.com)
• Will feel very familiar
to Adobe users
• Lots of UI tools and
widgets
• Lets you add
conditionals, data
sets, even does
math
• App is a download,
so you can work
offline

78. You could create it, but editing
anything was a NIGHTMARE.
Need to change a complex
interaction? Throw it all away and
start over.
No styles? No Master Pages?
SRSLY???
Next….
The
JustinMind
Deal Killer
(for me)

79. Proto.io (proto.io)
• Very popular for
mobile app
prototyping
• Extensive tools
• Great community
support
• The only real
problem? No
desktop version.

80. So, what DO you use?

81. For Early Concept
Work?
For Mobile App
Prototypes?
https://mural.ly/bigD

82. …and for Responsive Web?
• My favorite tool doesn’t appear on a single prototyping app list
• Creates prototypes for desktop, tablet, and mobile
• Integrates seamlessly with Photoshop and Illustrator, but I usually create
everything I need directly in the app
• Has Master pages and grid support; plus paragraph, character, and object styles
• Reusable libraries of UI elements - built in, third-party, or my own
• Generates readable HTML/CSS, and I can name my own classes
• Can be instantly published and viewed by anyone, on any device with a browser
• Has extremely active corporate, third-party, and community support
• If you are familiar with Adobe products, you can learn it in about 15 minutes.
• You probably already have the full working version, and have just never opened it.

85. But whatever tool you select…

86. Don’t “marry”
your first visions
• Prototypes WILL
uncover many
unexpected things
• Logic flaws
• Critical overlooked
features
• Incorrect
assumptions

87. If you aren’t
prototyping
already,
just START.

88. Before I go…

89. Shameless
Book Plug
CREATING COLLABORATIVE STANDARDS
MARTI GOLD

90. Thank you!
marti.gold@tonic3.com
@martigold