Prototyping to the North Star

It Takes a Team
To Build a Great Product

davidhoang.com | david@davidhoang.com | @davidhoang
• Why prototyping?
• Nurturing a prototyping culture
• The many faces of prototypes
• “Now, Next, Future” framework
We’ll Cover

Current: Head of Product Design, One Medical 
Before:
• Director of Design, Black Pixel
• Lead Designer, Global Digital Creative at HTC
• Co-Founder, Xhatch Interactive (Product
Agency)
• Global Accounts Design Consultant, ExactTarget
(acquired by Salesforce)
About Me

My Principles

My Principles
Set your personal bar high.
I don’t expect you to be a
unicorn, but you should at least
try.

Next executable step.
What’s the next executable step you
can take to add value and make
progress?
My Principles

My Principles
Design is not magic.
It’s a rigorous process of exploration, iteration, and
validation until you reach your outcome; a process that
makes the end user feel like it is magic.

Continuous Improvement (Kaizen)

Product Vision
The product vision is the overarching
goal you are aiming for, the reason for
creating the product. It provides a
continued purpose in an ever-changing
world, acts as the product's true north,
provides motivation when the going
gets tough, and facilitates effective
collaboration.
Prototype
The ﬁrst example of
something, such as a
machine or other industrial
product, from which all later
forms are developed.

Prototyping enables pathways for your
product vision and keeps it dynamic.

The intention of prototyping is to prove
all your ideas wrong…until it is right.

Rule 11: “Putting it on paper lets you
start ﬁxing it. If it stays in your head, a
perfect idea, you’ll never share it with
anyone.”
Pixar’s 22 Rules to Storytelling

High Cost Low
High Insights
Low Insights
Ideal Prototype
(Do this all the time)

Nurturing a Prototyping Culture

Prototyping is not a task you check off.
It’s a culture.

Evidence-Based Design
We look for the treatment of product problems, not the
quick ﬁx. We are data-informed in our design approach
based on qualitative and quantitative data.
@davidhoang | d

60 Second Prototyping (Source: Apple)
1. Make
2. Show3. Learn

“How can we make this even better?”

Prototyping is not only
for makers and builders.
Everyone participates.

Set time for playing and learning

#FigmaFriday

The Builder’s High

Build prototyping in your DNA
through recruiting and hiring

Good prototypers are…
• Strong storytellers
• Experts at becoming experts
• Know enough code to be dangerous
• Fast and effective
• Care more about the end product
shipped vs. their prototype
•Not attached to their work
• Know when a prototype is done

“Which prototyping tool is the best?”
“Which prototyping tool is the
best for my current objective?”

Paper
Prototyping

Paper
Prototyping
Pros
•Extremely fast
•It’s a good way to show /
test ideas that may be
simple to complete
• Anyone can do it
Cons
• Sometimes not high
ﬁdelity enough to learn
• People interact with paper
differently than they do
with actual screens.

Keynote
or Powerpoint

Keynote
or Powerpoint
Pros
• Comes free with your
machine
• Downloadable
templates
• Simple and powerful
animations
Cons
• Limited in prototyping
ﬂow
• Does not allow much
conditions and states

Figma

Figma
Pros
• Can see iterations in real
time
• Web-based, so accessible
on Mac and PC
Cons
• Primarily requires an
internet connection

Node-Based
Prototyping

Node-Based
Prototyping
Pros
• Great visual of the
interaction
• Can often tap native
device features, such as
the camera
• Live preview
Cons
• Nodes can be really
intimidating to people at
ﬁrst
• Can be a high learning
curve

Xcode

Xcode
Pros
• Can build very high ﬁdelity
prototypes
• Native functionality
Cons
• Can be a high learning
curve
• Not ideal for Android
prototyping

HTML
/SCSS

HTML
CSS
Pros
• Can leverage existing
code
• Highly interactive
Cons
• Can create misleading
code if not careful (AKA
copying bad code into
production)

Now.
Next.
Future.
What is the current state of the product? What can
we do within a sprint cycle or two to deliver value?
What is on the horizon? What information do we
need to know and learn to inform the opportunity
backlog?
What is the future state of our product and
experience? Consider strategic elements that need
to inﬂuence what we do now.

Now: Integrated UX
Next
Future

Now: Integrated UX
What learning can we apply from user testing and
prototyping in our current and following sprint?

“The number one thing you can do to be
more productive is to reduce the iteration
cycle.”
 
—Izzy Fraimow

User Testing
in the Cadence

Rapid Prototyping

Prototype in the Product
Master
Prototype Branch
Don’t ever merge SRSLY!
• Allows you to use staging data
• Quickly reviewable and referred to
with engineers
• Forces you to think in the realm of
what exists

Next: Product Discovery
Now
Future

Next: Product Discovery
What problems are on the horizon that we can get
ahead of to de-risk and learn?

Dual Track Scrum
Idea
Backlo
g
Build
Test
Deliver
Analyze
Idea
Prototyp
e
Test
Feedbac
k
Product Discovery
Product Development Cycle

Learning From
Discovery
Product Release
Cycle

Future: Setting the Vision
Now
Next

Future: Setting the Vision
How do we tether what we’re doing now to our strategic
goals and initiatives?

Experience Prototypes

The Future Check-In Experience

How The Illusion Was Made

Evolutionary to Revolutionary
A prototype is successful if you get insights
that deliver value to the end user.

• Create prototypes that are low cost and high
insight
• Prototyping is a living and breathing culture
• No prototyping tool is perfect.
• User test every sprint to get nuggets of learning
• Use prototypes to convey the future state of your
product strategy in an engaging way
Recap

Stay in Touch
david@davidhoang.com
davidhoang.com
twitter.com/davidhoang
github.com/davidhoang
Thank You.
davidhoang.com/uxdx-2018

Appendix

“If Ernest Hemingway, James Mitchener, Neil Simon, Frank Lloyd
Wright, and Pablo Picasso could not get it right the ﬁrst time, what
makes you think that you will?”
—Paul Heckel, author of The Elements of Friendly Software Design

Prototyping to the North Star

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (19)

Semelhante a Prototyping to the North Star

Semelhante a Prototyping to the North Star (20)

Mais de UXDXConf

Mais de UXDXConf (20)

Último

Último (20)

Prototyping to the North Star