Build sh*t that matters
Design is simply the act of
creating intentionally
What the heck even is design even?
HOW!!!
That’s cute and all, but…
History of Design Thinking
• Popularized and refined by experts at IDEO (Including David & Tom Kelly)
• David Kelly then went on to help found the Stanford D. School
• Used by Teach for America, Gates Foundation, Mozilla Foundation, GE,
Facebook, Google, SFMOMA, and more
• Focus on creative solutions to complex problems through understanding
other’s experiences
5 Stages of Design Thinking
Empathize
Define
Ideate
Prototype
Test
Adapted from the D. School
EVERYONE!!!
Who can do this?
The scenario
• Kat and I own a coffee shop
• We have 4 locations across the city
• Need to fill tables and provide the best ordering experience
• The solution needs to be technical in part
Empathize
Get to know your user and their stories
• Observation
• Research
• Analyzing Data
• User Interviews
How can you do this?
User interviews
• Ask open-ended questions
• Use: why, how, what
• Ask “why” 5 times
Find their needs through their stories
• Ask close-ended questions
• Use: did, do, would you
• Be prescriptive or projecting
DO DON’T
Time to get scrappy!
Define
Boil raw stories down to a user point of view that
you’ll address in your design
• Personas
• “Job to be done” definition
• Success definition
• Point of view statements
How can you do this?
Point of view statement
User 

Female junior in college studying business
Need

To find the best location for her group project work sessions
Insight

Managing a large group project across varied personalities and schedules comes
with social pressure
Take the needs you’ve uncovered and turn them into insights
Take the needs you’ve uncovered and turn them into insights
User 

32 yo. male freelance graphic designer
Need

To get out of his home office for client meetings and for a change of pace
Insight

Home office life can get lonely and he likes to see familiar faces while conducting
business
Point of view statement
Time to get scrappy!
Ideate
Let the user POV guide you in generating a metric ton of
possible solutions
• Sketch sessions / whiteboarding
• User flows
• Conversations / meetings
• Brainstorming
How can you do this?
Brainstorming
Keep generating possible solutions that speak to the user POV
• Keep in mind your user POV
• Come up with crazy & sober
solutions
• Connect possible solutions
• Let it flow, man!
• Shooting down the ideas of
others… and yourself
• Selecting ideas for a solution
• Being rooted by what’s worked in
the past
DO STAY AWAY FROM
Time to get scrappy!
Prototype
Take the possible solutions that most clearly speak to your
user point of view and make some physical stuff
• User flows
• Information Architecture
• Thumbnail sketches
• Wireframes
• Sketch / XD / Photoshop mocks
• Working code
How can you do this?
User flows
Fancy conditional logic is cool but it’s often helpful to start simple
Source: A shorthand for designing UI flows – Signal v. Noise
User flows
Fancy conditional logic is cool but it’s often helpful to start simple
Source: A shorthand for designing UI flows – Signal v. Noise
Thumbnail sketches
Draw some metaphorical stick figures
Source: How I Rapidly Prototype Websites – Treehouse
Prototyping
Time to get scrappy!
Test
You have a prototype (or two) and now you need
see what’s working and what’s not
How can you do this?
• User testing our prototypes
• In person, invision, xd share links, paper mocks
• Beta testing live code from smaller to bigger groups over time
• You’re at the end of the process, not at the end of design thinking
In-person user testing
• Ask open-ended questions
• Look for new pain points
• Give the user space to interact
More interviews!
• Ask close-ended questions
• Use: did, do, would you
• Be Prescriptive or projecting
DO DON’T
Time to get scrappy!
Wash & Repeat
WE’LL COVER
• Intro Design Thinking
• Workshop the 5 stages
• Goal of each stage
• Get scrappy with an exercise
• Wash & Repeat
• Wrap up & Resources
–Tom Kelley, IDEO
“It’s not about just coming up with
the one genius idea that solves the
problem, but trying and failing at a
hundred other solutions before
arriving at the best one.”
Ideo – Design Thinking Resources
Treehouse – How I Rapidly Prototype Websites
Signal v. Noice – A shorthand for designing UI flows
About the D. School
Design thinking origin story
Design Thinking workshop with Justin Ferrell of Stanford d. School
Resources
Questions
@nickchickinelli @KatSlump
Product ManagementProduct Design
Holla at us on twitter

Build sh*t that matters

  • 3.
  • 4.
    Design is simplythe act of creating intentionally What the heck even is design even?
  • 5.
  • 6.
    History of DesignThinking • Popularized and refined by experts at IDEO (Including David & Tom Kelly) • David Kelly then went on to help found the Stanford D. School • Used by Teach for America, Gates Foundation, Mozilla Foundation, GE, Facebook, Google, SFMOMA, and more • Focus on creative solutions to complex problems through understanding other’s experiences
  • 7.
    5 Stages ofDesign Thinking Empathize Define Ideate Prototype Test Adapted from the D. School
  • 8.
  • 9.
    The scenario • Katand I own a coffee shop • We have 4 locations across the city • Need to fill tables and provide the best ordering experience • The solution needs to be technical in part
  • 10.
    Empathize Get to knowyour user and their stories
  • 11.
    • Observation • Research •Analyzing Data • User Interviews How can you do this?
  • 12.
    User interviews • Askopen-ended questions • Use: why, how, what • Ask “why” 5 times Find their needs through their stories • Ask close-ended questions • Use: did, do, would you • Be prescriptive or projecting DO DON’T Time to get scrappy!
  • 13.
    Define Boil raw storiesdown to a user point of view that you’ll address in your design
  • 14.
    • Personas • “Jobto be done” definition • Success definition • Point of view statements How can you do this?
  • 15.
    Point of viewstatement User 
 Female junior in college studying business Need
 To find the best location for her group project work sessions Insight
 Managing a large group project across varied personalities and schedules comes with social pressure Take the needs you’ve uncovered and turn them into insights
  • 16.
    Take the needsyou’ve uncovered and turn them into insights User 
 32 yo. male freelance graphic designer Need
 To get out of his home office for client meetings and for a change of pace Insight
 Home office life can get lonely and he likes to see familiar faces while conducting business Point of view statement Time to get scrappy!
  • 17.
    Ideate Let the userPOV guide you in generating a metric ton of possible solutions
  • 18.
    • Sketch sessions/ whiteboarding • User flows • Conversations / meetings • Brainstorming How can you do this?
  • 19.
    Brainstorming Keep generating possiblesolutions that speak to the user POV • Keep in mind your user POV • Come up with crazy & sober solutions • Connect possible solutions • Let it flow, man! • Shooting down the ideas of others… and yourself • Selecting ideas for a solution • Being rooted by what’s worked in the past DO STAY AWAY FROM Time to get scrappy!
  • 20.
    Prototype Take the possiblesolutions that most clearly speak to your user point of view and make some physical stuff
  • 21.
    • User flows •Information Architecture • Thumbnail sketches • Wireframes • Sketch / XD / Photoshop mocks • Working code How can you do this?
  • 22.
    User flows Fancy conditionallogic is cool but it’s often helpful to start simple Source: A shorthand for designing UI flows – Signal v. Noise
  • 23.
    User flows Fancy conditionallogic is cool but it’s often helpful to start simple Source: A shorthand for designing UI flows – Signal v. Noise
  • 24.
    Thumbnail sketches Draw somemetaphorical stick figures Source: How I Rapidly Prototype Websites – Treehouse
  • 25.
  • 26.
    Test You have aprototype (or two) and now you need see what’s working and what’s not
  • 27.
    How can youdo this? • User testing our prototypes • In person, invision, xd share links, paper mocks • Beta testing live code from smaller to bigger groups over time • You’re at the end of the process, not at the end of design thinking
  • 28.
    In-person user testing •Ask open-ended questions • Look for new pain points • Give the user space to interact More interviews! • Ask close-ended questions • Use: did, do, would you • Be Prescriptive or projecting DO DON’T Time to get scrappy!
  • 29.
  • 30.
    WE’LL COVER • IntroDesign Thinking • Workshop the 5 stages • Goal of each stage • Get scrappy with an exercise • Wash & Repeat • Wrap up & Resources
  • 31.
    –Tom Kelley, IDEO “It’snot about just coming up with the one genius idea that solves the problem, but trying and failing at a hundred other solutions before arriving at the best one.”
  • 32.
    Ideo – DesignThinking Resources Treehouse – How I Rapidly Prototype Websites Signal v. Noice – A shorthand for designing UI flows About the D. School Design thinking origin story Design Thinking workshop with Justin Ferrell of Stanford d. School Resources
  • 33.
  • 34.