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.

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
37. TIME COST
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
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
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
64. Moodboards https://flic.kr/p/rRxnos
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”
73. Sketchboarding
74. 74 USER RESEARCH SPEC PROTOTYPING CONTINUOUS DESIGN DESIGN WORKSHOPS
75. Site Mapping https://flic.kr/p/8W2G6H
77. User Flows https://flic.kr/p/884GBP
80. Wireframes https://flic.kr/p/cpGAmA
83. Style Tiles
84. http://hellomarcus.com/#/pando-daily/
86. Mockups
88. UI Kits & Styleguides https://flic.kr/p/bR2ZmM
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
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!