Designing Digital Products

49eec51ef4a3335cb3247a41d1f08971?s=47 Jay Stakelon
September 09, 2015

Designing Digital Products

I had an opportunity to give a talk to a group of students at USC about UX and product design. Their class is a semester-long, concept-to-completion web application development project.

There's a bit of theoretical "what is UX?" type-stuff here, but the goal was really to give everyone techniques and tools that they could turn around and use when building their products.

49eec51ef4a3335cb3247a41d1f08971?s=128

Jay Stakelon

September 09, 2015
Tweet

Transcript

  1. ITP 460 / Web Application Project USC Viterbi School of

    Engineering Designing
 Digital Products
  2. Hello

  3. Jay Stakelon Software Product Designer

  4. @stakelon

  5. speakerdeck.com/stakes

  6. AGENDA Talking the Talk
 Vocabulary & theory Walking the Walk


    Tools & techniques
  7. Talking the Talk

  8. UI VISUAL DESIGN UXD XD HCI IxD U IA UXD

    XD UX IA L UR UX IA CONTEN STRATEGY UI UX I
  9. UI VISUAL DESIGN UXD XD HCI IxD U IA UXD

    XD UX IA L UR UX IA CONTEN STRATEGY UI UX I WTF
  10. Ed Lea, http://cl.ly/AX4l/o

  11. Ed Lea, http://cl.ly/AX4l/o

  12. Ed Lea, http://cl.ly/AX4l/o

  13. Ed Lea, http://cl.ly/AX4l/o

  14. Ed Lea, http://cl.ly/AX4l/o

  15. Jesse James Garrett, http://www.jjg.net/elements/pdf/elements.pdf

  16. Peter Morville, http://semanticstudios.com/publications/semantics/000029.php CONTEXT CONTENT USERS

  17. Peter Morville, http://semanticstudios.com/publications/semantics/000029.php FINDABLE USABLE ACCESSIBLE DESIRABLE CREDIBLE VALUABLE USEFUL

  18. ☂ User Experience Design - or - Product Design

  19. http://stackoverflow.com/questions/1654093/what-is-difference-between-interaction-design-visual-design-web-design-ux-des USER RESEARCH What users need from it INFORMATION ARCHITECTURE

    How it’s organized ▶ USER INTERFACE DESIGN How it appears to work INTERACTION DESIGN How it works when it’s used VISUAL DESIGN How it looks USABILITY How successful it is ☂ UX/PRODUCT DESIGN How a user feels about it
  20. 20 Product Design = “Full-Stack” Design

  21. Time Out* *A really quick and oversimplified history of
 software

    product development methods
  22. Waterfall development c. 1970 http://www.flickr.com/photos/iain/353671249/

  23. REQUIREMENTS DESIGN DEVELOPMENT TESTING DEPLOYMENT MAINTENANCE

  24. Sitemaps REQUIREMENTS DESIGN DEVELOPMENT TESTING DEPLOYMENT MAINTENANCE Visual Design Wireframes

  25. http://www.flickr.com/photos/alandd/4637759763/ Lightweight methodologies c. 2000

  26. ↻ Think > Make > Check ↻ Build > Measure

    > Learn LEAN STARTUP LEAN UX
  27. Jeff Gothelf, http://www.jeffgothelf.com/blog/

  28. Walking the Walk

  29. Why?

  30. Concept, create & invent what you’re building

  31. Generate shared understanding
 of what you’re building

  32. Validate what you’re building

  33. “No plan survives first contact
 with customers” Steve Blank http://www.flickr.com/photos/61382024@N02/7513008946/

  34. “Everyone has a plan until they get punched in the

    face” Mike Tyson
  35. TIME COST

  36. None
  37. TIME COST

  38. None
  39. http://www.flickr.com/photos/cannedtuna/7034085653/ Ideas are cheap

  40. Building things is expensive http://www.cashcats.biz/

  41. Tools of the Trade

  42. 42 USER RESEARCH SPEC PROTOTYPING CONTINUOUS
 DESIGN DESIGN WORKSHOPS

  43. 43 USER RESEARCH SPEC PROTOTYPING CONTINUOUS DESIGN DESIGN WORKSHOPS

  44. https://flic.kr/p/8oPDq6 Personas

  45. None
  46. Data Analysis

  47. Surveys https://flic.kr/p/2t4Syg

  48. Focus Groups

  49. Interviews https://flic.kr/p/nhcwCM

  50. Contextual Analysis https://flic.kr/p/pFEVKw

  51. 51 USER RESEARCH SPEC PROTOTYPING CONTINUOUS DESIGN DESIGN WORKSHOPS

  52. Inclusive & cross-functional

  53. CONTEXT

  54. Canvases https://flic.kr/p/qm5mF8

  55. Business Model Canvas
 businessmodelgeneration.com Lean Canvas
 leanstack.com

  56. Empathy Mapping https://flic.kr/p/byTKSv

  57. None
  58. Comparative Analysis

  59. VISUAL VOCABULARY

  60. Design Principles

  61. http://www.slideshare.net/ugleah/ux-team-of-one-sxsw-2009-1161299

  62. Branding Exercises https://flic.kr/p/5Qx5j6

  63. None
  64. Moodboards https://flic.kr/p/rRxnos

  65. None
  66. PRODUCT

  67. Customer Journey

  68. https://robots.thoughtbot.com/design-spiking

  69. Story Mapping

  70. https://www.thoughtworks.com/insights/blog/story-mapping-visual-way-building-product-backlog

  71. “Design Studio”

  72. None
  73. Sketchboarding

  74. 74 USER RESEARCH SPEC PROTOTYPING CONTINUOUS DESIGN DESIGN WORKSHOPS

  75. Site Mapping https://flic.kr/p/8W2G6H

  76. None
  77. User Flows https://flic.kr/p/884GBP

  78. None
  79. None
  80. Wireframes https://flic.kr/p/cpGAmA

  81. None
  82. None
  83. Style Tiles

  84. http://hellomarcus.com/#/pando-daily/

  85. None
  86. Mockups

  87. None
  88. UI Kits & Styleguides https://flic.kr/p/bR2ZmM

  89. None
  90. http://www.lightningdesignsystem.com

  91. 91 USER RESEARCH SPEC PROTOTYPING CONTINUOUS DESIGN DESIGN WORKSHOPS

  92. MINIMAL REALISM

  93. HIGH FIDELITY

  94. Paper Prototyping https://flic.kr/p/eaoxYj

  95. Pen & Paper POP
 popapp.in

  96. Functional Prototyping https://flic.kr/p/buQ5qu

  97. Omnigraffle
 omnigroup.com Balsamiq
 balsamiq.com Bootstrap / Foundation
 getbootstrap.com / foundation.zurb.com

  98. Visual Prototyping https://flic.kr/p/qeBY8Q

  99. Invision
 invisionapp.com Keynote
 framerjs.com Flinto / Marvel / UXPin
 flinto.com

    / marvelapp.com / uxpin.com HTML & CSS & Javascript
  100. Interaction Prototyping

  101. Framer
 framerjs.com Principle
 principleformac.com Origami
 facebook.github.io/origami Form
 relativewave.com

  102. 102 USER RESEARCH SPEC PROTOTYPING CONTINUOUS
 DESIGN DESIGN WORKSHOPS

  103. a.k.a. “Working Together”

  104. In Practice

  105. 105

  106. 106 DESIGN WORKSHOP Includes designers, eng, PM, biz. Requirements gathering,

    stakeholder feedback, sketching, flows, wireframes.
  107. 107 PROTOTYPING Lo-fi or die. Intended to validate hypotheses as

    cheaply and quickly as possible.
  108. 108 USER RESEARCH Hourlong 1:1 sessions. Test lo-fi prototypes developed

    during the weeklong design sprint.
  109. 109 MOCKS Visual design polish, fit and finish. Focus on

    main views and recurring
 design patterns.
  110. 110 MORE PROTOTYPING Detailed interactive prototyping. Helps ensure shared understanding

    of more complex user flows and animation/motion.
  111. 111 CONTINUOUS DESIGN Product designer embedded with the engineering team

    shipping product.
  112. Three Things to Read

  113. Google Ventures Design Library
 gv.com/library/design Thoughtbot Playbook
 playbook.thoughtbot.com & github.com/thoughtbot/design-sprint

    Sidebar Newsletter
 sidebar.io
  114. Jay Stakelon / @stakelon / speakerdeck.com/stakes Thanks!