Workflow on RWD Projects

Fe8510ee8e06c36d02799dbf8f934b9c?s=47 Ben Callahan
April 07, 2014

Workflow on RWD Projects

Deck from my full day workshop at UX Immersion, 2014, in Denver, CO.

Fe8510ee8e06c36d02799dbf8f934b9c?s=128

Ben Callahan

April 07, 2014
Tweet

Transcript

  1. @bencallahan WORKFLOW ON RWD PROJECTS

  2. http://bit.ly/uxim-rwd-workflow

  3. None
  4. Stop streaming
 Game of Thrones

  5. Game of Thrones

  6. Why are you here?

  7. WORKFLOW ON RWD PROJECTS THE WAY WE BUILD THE WEB

    PART 1
  8. We used to pretend like things were pretty simple.

  9. fixed width 1024ish 768ish

  10. DESIGN FRONT-END BACK-END LAUNCH! Linear Workflow THINK ABOUT 
 USERS

    THROW IN SOME CONTENT
  11. Slightly Better Linear Workflow CONTENT UX DESIGN FRONT-END BACK-END LAUNCH!

  12. Hello, RWD.

  13. Hello, tiny browsers.

  14. Hello, reality.

  15. THIS IS AWESOME,
 LET’S JUMP IN!

  16. Me too! Ditto! Old Linear Workflow Now with RWD! CONTENT

    UX DESIGN FRONT-END BACK-END LAUNCH!
  17. This doesn’t work.

  18. We need to invite others into the process.

  19. CONTENT UX FRONT-END DESIGN BACK-END “1 Deliverable” Workflow

  20. CONTENT UX FRONT-END DESIGN BACK-END “1 Deliverable” Workflow

  21. CONTENT UX FRONT-END DESIGN BACK-END “1 Deliverable” Workflow

  22. LAUNCH DESIGN FRONT END BACK END CONTENT DECISIONS MADE DECISIONS

    MADE DECISIONS MADE DECISIONS MADE CONTENT UX FRONT-END DESIGN BACK-END
  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. None
  31. None
  32. There is no “One Way.”

  33. Embrace the constraints.

  34. None
  35. Find a way.

  36. Choose your tools.

  37. PRODUCTIVITY TIME Dissecting Workflow

  38. PRODUCTIVITY TIME Dissecting Workflow

  39. Establish DISSECTING WORKFLOW

  40. Solve DISSECTING WORKFLOW

  41. Refine DISSECTING WORKFLOW

  42. None
  43. THE WAY WE BUILD THE WEB ESTABLISH

  44. Content Audit

  45. Style Comparisons “I could create an illustration or a 3D

    rendering of what I want my new office to look like, but that doesn’t take advantage of his great ideas. It’s dictation, not collaboration. Instead, I show him a Pinterest board my wife and I created.” ! @danielmall http://danielmall.com/articles/the-post-psd-era/
  46. Style Comparisons Light vs Dark

  47. Style Comparisons Flat vs Textured

  48. Style Comparisons Illustration vs Photography

  49. Style Tiles

  50. Style Tiles

  51. Style Tiles

  52. Style Prototypes

  53. Style Prototypes

  54. Style Prototypes

  55. Comfort

  56. THE WAY WE BUILD THE WEB SOLVE

  57. Content Priority Guide

  58. Content Prototype

  59. Static Wireframes

  60. Interactive Wireframes

  61. Static Design Tools

  62. Static Design Tools

  63. Static Design Tools

  64. Responsive Design Tools

  65. Responsive Design Tools

  66. Responsive Design Tools

  67. HTML/CSS/JS

  68. Fluency

  69. THE WAY WE BUILD THE WEB REFINE

  70. Refine in code.

  71. LAUNCH DESIGN FRONT END BACK END CONTENT DECISIONS MADE DECISIONS

    MADE DECISIONS MADE DECISIONS MADE Refine in code.
  72. Refine in code.

  73. Refine in code. You don’t want to do the long

    tail more than once
  74. Refine in code. The Switching Point

  75. Efficiency

  76. EXERCISE

  77. Draw your current process.

  78. Draw your ideal process.

  79. WORKFLOW ON RWD PROJECTS THE CHALLENGE OF THE INDIVIDUAL PART

    2
  80. None
  81. Group improvisation is a challenge. Aside from the weighty technical

    problem of collective coherent thinking, there is the very human, even social need for sympathy from all members to bend for the common result. ! Bill Evans
  82. Group Improvisation

  83. Group improvisation is a challenge. Aside from the weighty technical

    problem of collective coherent thinking, there is the very human, even social need for sympathy from all members to bend for the common result. ! Bill Evans
  84. Group improvisation is a challenge. Aside from the weighty technical

    problem of collective coherent thinking, there is the very human, even social need for sympathy from all members to bend for the common result. ! Bill Evans
  85. The Challenge of the Individual

  86. The Challenge of the Individual Fluency Humility Empathy

  87. THE CHALLENGE OF THE INDIVIDUAL FLUENCY

  88. None
  89. None
  90. Unconscious
 Incompetence

  91. Conscious
 Incompetence Unconscious
 Incompetence

  92. Conscious
 Competence Conscious
 Incompetence Unconscious
 Incompetence

  93. Unconscious
 Competence Conscious
 Competence Conscious
 Incompetence Unconscious
 Incompetence

  94. Fluency

  95. Fostering Fluency

  96. Fostering Fluency Encourage Writing and Speaking

  97. Fostering Fluency Bring in Experts

  98. Fostering Fluency Host Meetups

  99. THE CHALLENGE OF THE INDIVIDUAL HUMILITY

  100. None
  101. None
  102. “The Dip” keeps us humble.

  103. Fostering Humility

  104. Fostering Humility “Fail without the fear of failure.” Mark Boulton

    http://www.markboulton.co.uk/journal/it-s-not-working-for-me-crit
  105. ‣ Listen, then talk. ‣ It’s about the work. ‣

    It’s a conversation. ‣ It’s public. ‣ What’s said in a critique, stays in a critique. Fostering Humility http://www.markboulton.co.uk/journal/it-s-not-working-for-me-crit
  106. Fostering Humility “What a fun read—an exciting time to be

    part of the Sparkbox team!” ! “You constantly remind me that signing on to work at Sparkbox was the right thing to do.” ! “Thanks for this. I love reading your thoughtful emails—seriously.” ! “Thanks. I don’t think many people get these kinds of thoughtful emails from bosses. Much appreciated.” Talk About Successes
  107. Fostering Humility Start taking the blame. Stop taking the credit.

  108. Fostering Humility Do the Dishes

  109. None
  110. THE CHALLENGE OF THE INDIVIDUAL EMPATHY

  111. Empathy is struggling with your teammates in areas where you

    are not fluent.
  112. Fluency Ignorance

  113. Ignorance User
 Experience User
 Interface Fluency Content CMS

  114. Ignorance User
 Experience User
 Interface Fluency Content CMS

  115. Ignorance User
 Experience User
 Interface Fluency Content CMS

  116. Ignorance User
 Experience User
 Interface Threshold of Empathy Fluency Content

    CMS
  117. Ignorance Content User
 Experience User
 Interface CMS Threshold of Empathy

    Fluency
  118. The Empathetic Web Maker Content User
 Experience User
 Interface CMS

    Gap Analysis
 Information Architecture Content Priority Wireframe
 Usability Test Heuristic Evaluation Visual Design
 Typography
 Illustration Content Modeling
 Management Workflow
 Content Governance Semantic Markup (HTML) Interaction Layer
 (JS) Style
 (CSS) Ruby
 PHP
 .NET Design Develop Empathy
  119. None
  120. Back to our roots.

  121. Our specializations of expertise are fragmenting the experiences we build.

  122. Empathy requires a vision for something bigger than ourselves.

  123. We’re better when we work together.

  124. Fostering Empathy

  125. Fostering Empathy Non-Obvious Pairing

  126. Fostering Empathy Eat Together

  127. Fostering Empathy The Cheesy Lunch & Learn

  128. Fostering Empathy Nobody Struggles Alone

  129. The Challenge of the Individual Fluency Humility Empathy

  130. THE CHALLENGE OF THE INDIVIDUAL FROM THE TRENCHES

  131. None
  132. None
  133. None
  134. None
  135. None
  136. None
  137. None
  138. None
  139. None
  140. How do you stay humble? Strive for fluency. Embrace empathy.

  141. Humility Fluency Empathy

  142. EXERCISE

  143. Ignorance Fluency Areas of Expertise

  144. WORKFLOW ON RWD PROJECTS THE CHALLENGE OF THE TEAM PART

    3
  145. None
  146. Group Improvisation

  147. Group improvisation is a challenge. Aside from the weighty technical

    problem of collective coherent thinking, there is the very human, even social need for sympathy from all members to bend for the common result. ! Bill Evans
  148. Group improvisation is a challenge. Aside from the weighty technical

    problem of collective coherent thinking, there is the very human, even social need for sympathy from all members to bend for the common result. ! Bill Evans
  149. The Challenge of the Team

  150. How do we facilitate
 true collaboration?

  151. None
  152. None
  153. None
  154. None
  155. None
  156. None
  157. Create guidelines instead of rigid process.

  158. The rigidity of your process should be inversely proportional to

    the level of fluency, humility, and empathy demonstrated by your team.
  159. Ability to
 improvise Fluency, humility, empathy demonstrated by team

  160. Inexperienced Experienced Rigid Process Group Improvisation • Missed deadlines •

    Blown budgets • Poor work • Frustrated team • Doubt in leadership • Great work • Meet deadlines • Sense that there’s a better way • Average work • Culture of trust • Regular innovation • Timeless work
  161. Inexperienced Experienced Rigid Process Group Improvisation • Missed deadlines •

    Blown budgets • Poor work • Frustrated team • Doubt in leadership • Great work • Meet deadlines • Sense that there’s a better way • Average work • Culture of trust • Regular innovation • Timeless work
  162. Inexperienced Experienced Rigid Process Group Improvisation • Missed deadlines •

    Blown budgets • Poor work • Frustrated team • Doubt in leadership • Great work • Meet deadlines • Sense that there’s a better way • Average work • Culture of trust • Regular innovation • Timeless work
  163. Collaboration is a balance between freedom and accountability.

  164. Collaboration is a balance between freedom and accountability. “Without the

    possibility of failure, there is no possibility for real success. You have to introduce real risk for something really good to happen.” ! Ben Sidran
  165. Collaboration is a child of culture—it must be fostered.

  166. Fostering Collaboration

  167. Fostering Collaboration Mentoring Relationships

  168. Fostering Collaboration Intentional Apprenticeships

  169. Fostering Collaboration Peaceful disagreement is a sign that there might

    be a better way.
  170. People who work 
 in the business. People who work

    
 on the business. Fostering Collaboration
  171. Collaborative Space

  172. None
  173. None
  174. None
  175. Whiteboards FTW.

  176. Collaborative Workflows

  177. Collaborative Workflows

  178. Collaborative Workflows

  179. Collaborative Workflows

  180. Collaboration is all or nothing. Let’s talk about clients.

  181. Clients are people.

  182. Collaborative Estimation

  183. Hourly Pricing $200 $165 half day full day

  184. Frequent Updates

  185. Work for Hire

  186. Frame the Project “Problem solving is actually some of the

    most valuable work that we do for our clients. Taking our technology expertise and coupling it with their business expertise allows us to really think outside the box for profitable solutions. We’ve found that creative solutions often come when a third party looks at a problem from outside normal day-to-day operations.” Rob Harr
  187. Initial Engagements

  188. Leveling clients up

  189. THE CHALLENGE OF THE TEAM FROM THE TRENCHES

  190. Sparkbox Team

  191. Sparkbox Team

  192. Web Developer Creative Director Technical Director UX
 Director Content
 Director

    Web Developer Project Manager At Sparkbox
  193. Web Empathy Development Fluency At Paravel Design Fluency

  194. Designer Developer Project Manager At Happy Cog Designer Developer

  195. EXERCISE

  196. Inexperienced Experienced Rigid Process Group Improvisation • Missed deadlines •

    Blown budgets • Trouble shipping • Frustrated team • Doubt in leadership • Average work • Meet deadlines • Sense that there’s a better way • Average work • Culture of trust • Regular innovation • Timeless work
  197. Draw your current team structure.

  198. Draw your ideal team structure.

  199. LEARN FROM OUR MISTAKES LESSONS LEARNED PART 4

  200. Testing

  201. LESSONS LEARNED Testing ‣ You must test on real devices

    ‣ Do your development in a webkit browser ‣ Build libraries of your patterns
  202. Pricing

  203. LESSONS LEARNED Pricing ‣ As much as 100% more, initially

    ‣ Likely to be 50% more, soon after ‣ Probably never less than 25% more
  204. LESSONS LEARNED Pricing ‣ As much as 100% more, initially

    ‣ Likely to be 50% more, soon after ‣ Probably never less than 25% more COMPARED TO WHAT?
  205. LESSONS LEARNED Pricing ‣ Testing (labs & time) ‣ Fewer

    patterns ‣ Project management ‣ Learning curve ‣ Maintenance ‣ Content strategy
  206. Prioritization

  207. Prioritization

  208. Prioritization

  209. Prioritization

  210. Prioritization

  211. Prioritization

  212. Performance

  213. Performance starts on day one.

  214. Performance ‣ Optimize or cut out images ‣ Decrease the

    number of requests ‣ Gzip if you can ‣ Concat and minify CSS/JS ‣ Load CSS at the top ‣ Load JS at the bottom ‣ Follow @souders on Twitter
  215. Barriers

  216. Barriers The people are what make this hard.

  217. The Maze

  218. amazon.com

  219. amazon.com

  220. amazon.com

  221. amazon.com

  222. amazon.com

  223. amazon.com

  224. Congratulations! In celebration of all your hard work and discipline,

    as a reward for all the risk you’ve taken to reach this point, we’re quite pleased to present you with…YOUR CONTENT! ! Keep up the good work! ! ~ The Management
  225. A Taxonomy ‣ Trigger Indicators ‣ Trigger (reveal) Patterns !

    ‣ Interaction Indicators ‣ Interaction Patterns
  226. Trigger Indicators

  227. What is a Trigger?

  228. Trigger Indicators ‣ Words ‣ menu, main menu ‣ nav,

    navigation ‣ site specific
 (sections, topics,
 products, etc.) ‣ Icons ‣ plus ‣ hamburger ‣ arrows ‣ “x”
  229. TRIGGER INDICATORS Words

  230. TRIGGER INDICATORS Icons Plus Hamburger Down Arrow

  231. TRIGGER INDICATORS Other & Combinations

  232. Trigger Indicators ‣ Words ‣ menu, main menu ‣ nav,

    navigation ‣ site specific
 (sections, topics,
 products, etc.) ‣ Icons ‣ plus ‣ hamburger ‣ arrows ‣ “x”
  233. Trigger Patterns
 (or, Reveal Patterns)

  234. Trigger Patterns ‣ Always Available ‣ Anchor to Footer ‣

    Select Element ‣ Make Room ‣ Cover Up ‣ Off Canvas ‣ Priority + ‣ Full Screen Takeover
  235. TRIGGER PATTERNS: ALWAYS AVAILABLE

  236. TRIGGER PATTERNS: ANCHOR TO FOOTER

  237. TRIGGER PATTERNS: SELECT ELEMENT

  238. iOS 7 TRIGGER PATTERNS: SELECT ELEMENT

  239. TRIGGER PATTERNS: SELECT ELEMENT Chrome on OS X

  240. TRIGGER PATTERNS: MAKE ROOM

  241. TRIGGER PATTERNS: COVER UP

  242. TRIGGER PATTERNS: OFF CANVAS

  243. TRIGGER PATTERNS: PRIORITY +

  244. TRIGGER PATTERNS: FULL SCREEN TAKEOVER

  245. Trigger Patterns ‣ Always Available ‣ Anchor to Footer ‣

    Select Element ‣ Make Room ‣ Cover Up ‣ Off Canvas ‣ Priority + ‣ Full Screen Takeover
  246. Interaction Indicators

  247. INTERACTION INDICATORS Icons

  248. Interaction Indicators ‣ Icons ‣ plus ‣ dash ‣ “x”

    ‣ various arrows
  249. Interaction Patterns

  250. Interaction Patterns ‣ List ‣ Accordion ‣ Paging

  251. INTERACTION PATTERNS: LIST

  252. INTERACTION PATTERNS: ACCORDION

  253. INTERACTION PATTERNS: PAGING

  254. Interaction Patterns ‣ List ‣ Accordion ‣ Paging

  255. Other Considerations

  256. Other Considerations ‣ Architecture ‣ Focus ‣ Behavior ‣ JavaScript

    ‣ Usability
  257. OTHER CONSIDERATIONS: ARCHITECTURE

  258. OTHER CONSIDERATIONS: ARCHITECTURE

  259. OTHER CONSIDERATIONS: FOCUS

  260. OTHER CONSIDERATIONS: BEHAVIOR Multi Open

  261. OTHER CONSIDERATIONS: BEHAVIOR Single Open

  262. OTHER CONSIDERATIONS: BEHAVIOR Single Open

  263. Auto Scroll OTHER CONSIDERATIONS: BEHAVIOR

  264. Other Considerations ‣ JavaScript ‣ Visible by Default ‣ Anchor

    to Footer ‣ Single DOM
  265. mediaCheck, by @robtarr

  266. Other Considerations ‣ Usability ‣ User Expectations ‣ Plan for

    the Worst ‣ Teach Use
  267. What’s Next

  268. Fluency

  269. Jakob Nielsen Says... ‣ Build a separate mobile site ‣

    Cut features ‣ Cut content http://www.nngroup.com/articles/mobile-site-vs-full-site/
  270. Jakob Nielsen Says... ‣ Build a separate mobile site ‣

    Cut features ‣ Cut content http://www.nngroup.com/articles/mobile-site-vs-full-site/ PLEASE, NO.
  271. The Responsive Dip ! http://bit.ly/MasqBk

  272. Responsive web design is about much more than making stuff

    fit on small screens.
  273. viewport width input method context low bandwidth no bandwidth available

    light location history state of mind intent viewport height right content speed user preference cross-width consistency Web Design
  274. Web Design viewport width input method context low bandwidth no

    bandwidth available light location history state of mind intent viewport height right content speed user preference cross-width consistency
  275. The Responsive Mindset ! “The truly responsive design web designer

    wasn’t born until after the launch of the iPhone. We haven’t seen his or her work yet.” ! Andy Clarke ! http://the-pastry-box-project.net/andy-clarke/2012-april-8/
  276. There are many problems left to solve. ! We’ll solve

    them much faster if we solve them together.
  277. THANK YOU @bencallahan

  278. ANYTHING GOES NOTHING IS OFF-LIMITS PART 4B

  279. Defend Your Process

  280. THANK YOU @bencallahan