Your SlideShare is downloading. ×
0
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comUSER-CENTRIC DESIGNby Kyle Racki
What makes an experience?
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com• Useful• Easy to use• Learnable• Aesthetically pleasing• Ev...
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comUser-centric design puts users needs first.
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comUser wants Business goals
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comTest early, test often.
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com$$ Test hereTime
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comNon user-centricThe last step is to hope and pray your assum...
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comUser-centricIDEAQUALITATIVERESEARCHUX RESEARCH VALIDATE USER...
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comHow to get started.
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com1. Antecedent - Event trigger2. Behavior - Causes or influen...
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comQuantitative• Design landing page• Drive traffic• Measure si...
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com• Understand a pain point• There is a paying market• Product...
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comCase Study: Pitch Perfect
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comUX Research Methods
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comUX Research MethodsInterviews
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comUX Research MethodsSurveys
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comUX Research MethodsGroup discussions
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comUX Research Methods• Researcher• Interation Designer• Visual...
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comMaking sense of the data.
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com• Create 2 or 3 stereotypes• Detailed profile info• Refer th...
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comMaking sense of the data• Context scenarios• Key pathway sce...
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comMaking sense of the dataFogg - B=MATMotivationAbilityTrigger...
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comTo change behaviour, all 3 need to bepresent at the same tim...
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com• What is the core pain we’re solving?• What behaviour are w...
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comSketching concepts
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com• Helps you think• Solve key problem• Explore interationKey ...
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com• Work out the flow• Use scenarios• Minimize stepsSketching ...
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comSketching conceptsOnboarding• Orient new users• Increase eng...
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comSketching conceptsMicrodetails
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comInvision let’s you dragand drop multipleimage files and auto...
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comPitch Perfect emulatesa desktop applicationby allowing keybo...
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comSketching conceptsTeam sketching
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comSketching conceptsMental Models
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comPrototyping
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comHigh vs Low FidelityPrototyping
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com• Omnigraphle• Balsamiq• Adobe Fireworks• InvisionPrototypin...
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comPrototyping• Only prototype key parts• Learn early, fail fas...
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comBuild
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comName of section• Freeze user testing while in production• Us...
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comLaunch and learn
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com• Stay user-centric• Talk to the community• Periodic polls a...
Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comThank you.Kyle Racki kyle@headspacedesign.ca
User Centric Design
Upcoming SlideShare
Loading in...5
×

User Centric Design

1,854

Published on

UX Design and how to use research methods to test your designs before they're built and help mitigate risk.

Published in: Design, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,854
On Slideshare
0
From Embeds
0
Number of Embeds
78
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "User Centric Design"

  1. 1. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comUSER-CENTRIC DESIGNby Kyle Racki
  2. 2. What makes an experience?
  3. 3. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com• Useful• Easy to use• Learnable• Aesthetically pleasing• Evoke emotional responseGood experiences are
  4. 4. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comUser-centric design puts users needs first.
  5. 5. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comUser wants Business goals
  6. 6. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comTest early, test often.
  7. 7. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com$$ Test hereTime
  8. 8. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comNon user-centricThe last step is to hope and pray your assumptions were correct.IDEASELL TOSTAKEHOLDERSDETAIL SPECS FINANCE DESIGN/CODE LAUNCH/TEST SELLIDEASELL TOSTAKEHOLDERSMINIMALFINANCINGDESIGN CODEFINANCE LAUNCH REFI
  9. 9. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comUser-centricIDEAQUALITATIVERESEARCHUX RESEARCH VALIDATE USER TESTQUANTITATIVEMEASURINGSELL TOSTAKEHOLDERSMINIMALFINANCINGDESIGN CODEFINANCE LAUNCH REFINE
  10. 10. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comHow to get started.
  11. 11. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com1. Antecedent - Event trigger2. Behavior - Causes or influences an individualto act.3. Consequence - Outcome you observe.ABCWhat behaviours do you want to change?
  12. 12. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
  13. 13. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comQuantitative• Design landing page• Drive traffic• Measure signupsQualitative (UX)• Contextual inquiry• Surveys• Group discussions• Review competitorsroadmapsTesting an idea with research
  14. 14. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com• Understand a pain point• There is a paying market• Product idea solves pain• Testing validated product/market fit• Sell to stakeholders, aquire minimal financeDo you have abusiness case?
  15. 15. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comCase Study: Pitch Perfect
  16. 16. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comUX Research Methods
  17. 17. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comUX Research MethodsInterviews
  18. 18. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comUX Research MethodsSurveys
  19. 19. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comUX Research MethodsGroup discussions
  20. 20. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comUX Research Methods• Researcher• Interation Designer• Visual Designer• Front-end Developer• Back-end DeveloperBuild a team
  21. 21. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comMaking sense of the data.
  22. 22. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com• Create 2 or 3 stereotypes• Detailed profile info• Refer throughout designUser PersonasMaking sense of the data
  23. 23. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
  24. 24. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comMaking sense of the data• Context scenarios• Key pathway scenarios• Validation scenarios• Magic scenariosScenarios
  25. 25. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comMaking sense of the dataFogg - B=MATMotivationAbilityTriggers failTriggers succeed
  26. 26. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comTo change behaviour, all 3 need to bepresent at the same time:• Motivation (sensation, expectation, belonging)• Ability• TriggerMaking sense of the dataFogg-Behavior Model
  27. 27. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
  28. 28. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com• What is the core pain we’re solving?• What behaviour are we hoping to change?• What habits do we aim to create in users?Minimum Viable ProductMaking sense of the data
  29. 29. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comSketching concepts
  30. 30. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com• Helps you think• Solve key problem• Explore interationKey page viewsSketching concepts
  31. 31. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com• Work out the flow• Use scenarios• Minimize stepsSketching conceptsSequencing
  32. 32. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comSketching conceptsOnboarding• Orient new users• Increase engagement• Minimize abandonment
  33. 33. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
  34. 34. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
  35. 35. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comSketching conceptsMicrodetails
  36. 36. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comInvision let’s you dragand drop multipleimage files and autoreplaces ones withthe same name andautomatically makestitle-case and addsspaces.
  37. 37. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comPitch Perfect emulatesa desktop applicationby allowing keyboardshortcuts and right-click contextual menu
  38. 38. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comSketching conceptsTeam sketching
  39. 39. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comSketching conceptsMental Models
  40. 40. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comPrototyping
  41. 41. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comHigh vs Low FidelityPrototyping
  42. 42. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com
  43. 43. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com• Omnigraphle• Balsamiq• Adobe Fireworks• InvisionPrototypingTools that work
  44. 44. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comPrototyping• Only prototype key parts• Learn early, fail fast• Measuring the success rateTesting
  45. 45. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comBuild
  46. 46. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comName of section• Freeze user testing while in production• Use professional QA during development• User test once complete• Private betaMethods of testing
  47. 47. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comLaunch and learn
  48. 48. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.com• Stay user-centric• Talk to the community• Periodic polls and surveys• Test new features• Measure quantitative dataYou are never done.Launch and learn
  49. 49. Twitter: @kyleracki | headspacedesign.ca | pitchperfectapp.comThank you.Kyle Racki kyle@headspacedesign.ca
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×