$30 off During Our Annual Pro Sale. View Details »

Workflow on RWD Projects

Ben Callahan
April 07, 2014

Workflow on RWD Projects

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

Ben Callahan

April 07, 2014
Tweet

More Decks by Ben Callahan

Other Decks in Design

Transcript

  1. @bencallahan
    WORKFLOW ON
    RWD PROJECTS

    View Slide

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

    View Slide

  3. View Slide

  4. Stop streaming

    Game of Thrones

    View Slide

  5. Game of Thrones

    View Slide

  6. Why are you here?

    View Slide

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

    View Slide

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

    View Slide

  9. fixed width
    1024ish
    768ish

    View Slide

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

    USERS
    THROW IN
    SOME CONTENT

    View Slide

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

    View Slide

  12. Hello,
    RWD.

    View Slide

  13. Hello,
    tiny browsers.

    View Slide

  14. Hello,
    reality.

    View Slide

  15. THIS IS AWESOME,

    LET’S JUMP IN!

    View Slide

  16. Me too!
    Ditto!
    Old Linear Workflow
    Now with
    RWD!
    CONTENT UX DESIGN FRONT-END BACK-END LAUNCH!

    View Slide

  17. This doesn’t work.

    View Slide

  18. We need to invite others
    into the process.

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. There is no “One Way.”

    View Slide

  33. Embrace the constraints.

    View Slide

  34. View Slide

  35. Find a way.

    View Slide

  36. Choose your tools.

    View Slide

  37. PRODUCTIVITY
    TIME
    Dissecting Workflow

    View Slide

  38. PRODUCTIVITY
    TIME
    Dissecting Workflow

    View Slide

  39. Establish
    DISSECTING WORKFLOW

    View Slide

  40. Solve
    DISSECTING WORKFLOW

    View Slide

  41. Refine
    DISSECTING WORKFLOW

    View Slide

  42. View Slide

  43. THE WAY WE BUILD THE WEB
    ESTABLISH

    View Slide

  44. Content Audit

    View Slide

  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/

    View Slide

  46. Style Comparisons
    Light vs Dark

    View Slide

  47. Style Comparisons
    Flat vs Textured

    View Slide

  48. Style Comparisons
    Illustration vs Photography

    View Slide

  49. Style Tiles

    View Slide

  50. Style Tiles

    View Slide

  51. Style Tiles

    View Slide

  52. Style Prototypes

    View Slide

  53. Style Prototypes

    View Slide

  54. Style Prototypes

    View Slide

  55. Comfort

    View Slide

  56. THE WAY WE BUILD THE WEB
    SOLVE

    View Slide

  57. Content Priority Guide

    View Slide

  58. Content Prototype

    View Slide

  59. Static Wireframes

    View Slide

  60. Interactive Wireframes

    View Slide

  61. Static Design Tools

    View Slide

  62. Static Design Tools

    View Slide

  63. Static Design Tools

    View Slide

  64. Responsive Design Tools

    View Slide

  65. Responsive Design Tools

    View Slide

  66. Responsive Design Tools

    View Slide

  67. HTML/CSS/JS

    View Slide

  68. Fluency

    View Slide

  69. THE WAY WE BUILD THE WEB
    REFINE

    View Slide

  70. Refine in code.

    View Slide

  71. LAUNCH
    DESIGN
    FRONT
    END
    BACK
    END
    CONTENT
    DECISIONS
    MADE
    DECISIONS
    MADE
    DECISIONS
    MADE
    DECISIONS
    MADE
    Refine in code.

    View Slide

  72. Refine in code.

    View Slide

  73. Refine in code.
    You don’t want to do the long
    tail more than once

    View Slide

  74. Refine in code.
    The Switching Point

    View Slide

  75. Efficiency

    View Slide

  76. EXERCISE

    View Slide

  77. Draw your current process.

    View Slide

  78. Draw your ideal process.

    View Slide

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

    View Slide

  80. View Slide

  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

    View Slide

  82. Group Improvisation

    View Slide

  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

    View Slide

  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

    View Slide

  85. The Challenge of the Individual

    View Slide

  86. The Challenge of the Individual
    Fluency Humility Empathy

    View Slide

  87. THE CHALLENGE OF THE INDIVIDUAL
    FLUENCY

    View Slide

  88. View Slide

  89. View Slide

  90. Unconscious

    Incompetence

    View Slide

  91. Conscious

    Incompetence
    Unconscious

    Incompetence

    View Slide

  92. Conscious

    Competence
    Conscious

    Incompetence
    Unconscious

    Incompetence

    View Slide

  93. Unconscious

    Competence
    Conscious

    Competence
    Conscious

    Incompetence
    Unconscious

    Incompetence

    View Slide

  94. Fluency

    View Slide

  95. Fostering Fluency

    View Slide

  96. Fostering Fluency
    Encourage Writing and Speaking

    View Slide

  97. Fostering Fluency
    Bring in Experts

    View Slide

  98. Fostering Fluency
    Host Meetups

    View Slide

  99. THE CHALLENGE OF THE INDIVIDUAL
    HUMILITY

    View Slide

  100. View Slide

  101. View Slide

  102. “The Dip” keeps us humble.

    View Slide

  103. Fostering Humility

    View Slide

  104. Fostering Humility
    “Fail without the fear of failure.”
    Mark Boulton
    http://www.markboulton.co.uk/journal/it-s-not-working-for-me-crit

    View Slide

  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

    View Slide

  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

    View Slide

  107. Fostering Humility
    Start taking the blame.
    Stop taking the credit.

    View Slide

  108. Fostering Humility
    Do the Dishes

    View Slide

  109. View Slide

  110. THE CHALLENGE OF THE INDIVIDUAL
    EMPATHY

    View Slide

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

    View Slide

  112. Fluency
    Ignorance

    View Slide

  113. Ignorance
    User

    Experience
    User

    Interface
    Fluency
    Content CMS

    View Slide

  114. Ignorance
    User

    Experience
    User

    Interface
    Fluency
    Content CMS

    View Slide

  115. Ignorance
    User

    Experience
    User

    Interface
    Fluency
    Content CMS

    View Slide

  116. Ignorance
    User

    Experience
    User

    Interface
    Threshold
    of Empathy
    Fluency
    Content CMS

    View Slide

  117. Ignorance
    Content
    User

    Experience
    User

    Interface
    CMS
    Threshold
    of Empathy
    Fluency

    View Slide

  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

    View Slide

  119. View Slide

  120. Back to our roots.

    View Slide

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

    View Slide

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

    View Slide

  123. We’re better when we work together.

    View Slide

  124. Fostering Empathy

    View Slide

  125. Fostering Empathy
    Non-Obvious Pairing

    View Slide

  126. Fostering Empathy
    Eat Together

    View Slide

  127. Fostering Empathy
    The Cheesy Lunch & Learn

    View Slide

  128. Fostering Empathy
    Nobody Struggles Alone

    View Slide

  129. The Challenge of the Individual
    Fluency Humility Empathy

    View Slide

  130. THE CHALLENGE OF THE INDIVIDUAL
    FROM THE TRENCHES

    View Slide

  131. View Slide

  132. View Slide

  133. View Slide

  134. View Slide

  135. View Slide

  136. View Slide

  137. View Slide

  138. View Slide

  139. View Slide

  140. How do you stay humble?
    Strive for fluency. Embrace empathy.

    View Slide

  141. Humility
    Fluency
    Empathy

    View Slide

  142. EXERCISE

    View Slide

  143. Ignorance
    Fluency
    Areas of Expertise

    View Slide

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

    View Slide

  145. View Slide

  146. Group Improvisation

    View Slide

  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

    View Slide

  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

    View Slide

  149. The Challenge of the Team

    View Slide

  150. How do we facilitate

    true collaboration?

    View Slide

  151. View Slide

  152. View Slide

  153. View Slide

  154. View Slide

  155. View Slide

  156. View Slide

  157. Create guidelines instead
    of rigid process.

    View Slide

  158. The rigidity of your process should be
    inversely proportional to the level of
    fluency, humility, and empathy
    demonstrated by your team.

    View Slide

  159. Ability to

    improvise
    Fluency, humility, empathy demonstrated by team

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  163. Collaboration is a balance between
    freedom and accountability.

    View Slide

  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

    View Slide

  165. Collaboration is a child of
    culture—it must be fostered.

    View Slide

  166. Fostering Collaboration

    View Slide

  167. Fostering Collaboration
    Mentoring Relationships

    View Slide

  168. Fostering Collaboration
    Intentional Apprenticeships

    View Slide

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

    View Slide

  170. People who work 

    in the business.
    People who work 

    on the business.
    Fostering Collaboration

    View Slide

  171. Collaborative Space

    View Slide

  172. View Slide

  173. View Slide

  174. View Slide

  175. Whiteboards FTW.

    View Slide

  176. Collaborative Workflows

    View Slide

  177. Collaborative Workflows

    View Slide

  178. Collaborative Workflows

    View Slide

  179. Collaborative Workflows

    View Slide

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

    View Slide

  181. Clients are people.

    View Slide

  182. Collaborative Estimation

    View Slide

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

    View Slide

  184. Frequent Updates

    View Slide

  185. Work for Hire

    View Slide

  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

    View Slide

  187. Initial Engagements

    View Slide

  188. Leveling clients up

    View Slide

  189. THE CHALLENGE OF THE TEAM
    FROM THE TRENCHES

    View Slide

  190. Sparkbox Team

    View Slide

  191. Sparkbox Team

    View Slide

  192. Web
    Developer
    Creative
    Director
    Technical
    Director
    UX

    Director
    Content

    Director
    Web
    Developer
    Project
    Manager
    At Sparkbox

    View Slide

  193. Web
    Empathy
    Development
    Fluency
    At Paravel
    Design
    Fluency

    View Slide

  194. Designer Developer
    Project
    Manager
    At Happy Cog
    Designer Developer

    View Slide

  195. EXERCISE

    View Slide

  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

    View Slide

  197. Draw your current team structure.

    View Slide

  198. Draw your ideal team structure.

    View Slide

  199. LEARN FROM OUR MISTAKES
    LESSONS LEARNED
    PART 4

    View Slide

  200. Testing

    View Slide

  201. LESSONS LEARNED
    Testing
    ‣ You must test on real devices
    ‣ Do your development in a webkit
    browser
    ‣ Build libraries of your patterns

    View Slide

  202. Pricing

    View Slide

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

    View Slide

  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?

    View Slide

  205. LESSONS LEARNED
    Pricing
    ‣ Testing (labs & time)
    ‣ Fewer patterns
    ‣ Project management
    ‣ Learning curve
    ‣ Maintenance
    ‣ Content strategy

    View Slide

  206. Prioritization

    View Slide

  207. Prioritization

    View Slide

  208. Prioritization

    View Slide

  209. Prioritization

    View Slide

  210. Prioritization

    View Slide

  211. Prioritization

    View Slide

  212. Performance

    View Slide

  213. Performance starts on day one.

    View Slide

  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

    View Slide

  215. Barriers

    View Slide

  216. Barriers
    The people are what make this hard.

    View Slide

  217. The Maze

    View Slide

  218. amazon.com

    View Slide

  219. amazon.com

    View Slide

  220. amazon.com

    View Slide

  221. amazon.com

    View Slide

  222. amazon.com

    View Slide

  223. amazon.com

    View Slide

  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

    View Slide

  225. A Taxonomy
    ‣ Trigger Indicators
    ‣ Trigger (reveal) Patterns
    !
    ‣ Interaction Indicators
    ‣ Interaction Patterns

    View Slide

  226. Trigger Indicators

    View Slide

  227. What is a Trigger?

    View Slide

  228. Trigger Indicators
    ‣ Words
    ‣ menu, main menu
    ‣ nav, navigation
    ‣ site specific

    (sections, topics,

    products, etc.)
    ‣ Icons
    ‣ plus
    ‣ hamburger
    ‣ arrows
    ‣ “x”

    View Slide

  229. TRIGGER INDICATORS
    Words

    View Slide

  230. TRIGGER INDICATORS
    Icons
    Plus Hamburger Down Arrow

    View Slide

  231. TRIGGER INDICATORS
    Other & Combinations

    View Slide

  232. Trigger Indicators
    ‣ Words
    ‣ menu, main menu
    ‣ nav, navigation
    ‣ site specific

    (sections, topics,

    products, etc.)
    ‣ Icons
    ‣ plus
    ‣ hamburger
    ‣ arrows
    ‣ “x”

    View Slide

  233. Trigger Patterns

    (or, Reveal Patterns)

    View Slide

  234. Trigger Patterns
    ‣ Always Available
    ‣ Anchor to Footer
    ‣ Select Element
    ‣ Make Room
    ‣ Cover Up
    ‣ Off Canvas
    ‣ Priority +
    ‣ Full Screen Takeover

    View Slide

  235. TRIGGER PATTERNS: ALWAYS AVAILABLE

    View Slide

  236. TRIGGER PATTERNS: ANCHOR TO FOOTER

    View Slide

  237. TRIGGER PATTERNS: SELECT ELEMENT

    View Slide

  238. iOS 7
    TRIGGER PATTERNS: SELECT ELEMENT

    View Slide

  239. TRIGGER PATTERNS: SELECT ELEMENT
    Chrome on OS X

    View Slide

  240. TRIGGER PATTERNS: MAKE ROOM

    View Slide

  241. TRIGGER PATTERNS: COVER UP

    View Slide

  242. TRIGGER PATTERNS: OFF CANVAS

    View Slide

  243. TRIGGER PATTERNS: PRIORITY +

    View Slide

  244. TRIGGER PATTERNS: FULL SCREEN TAKEOVER

    View Slide

  245. Trigger Patterns
    ‣ Always Available
    ‣ Anchor to Footer
    ‣ Select Element
    ‣ Make Room
    ‣ Cover Up
    ‣ Off Canvas
    ‣ Priority +
    ‣ Full Screen Takeover

    View Slide

  246. Interaction Indicators

    View Slide

  247. INTERACTION INDICATORS
    Icons

    View Slide

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

    View Slide

  249. Interaction Patterns

    View Slide

  250. Interaction Patterns
    ‣ List
    ‣ Accordion
    ‣ Paging

    View Slide

  251. INTERACTION PATTERNS: LIST

    View Slide

  252. INTERACTION PATTERNS: ACCORDION

    View Slide

  253. INTERACTION PATTERNS: PAGING

    View Slide

  254. Interaction Patterns
    ‣ List
    ‣ Accordion
    ‣ Paging

    View Slide

  255. Other Considerations

    View Slide

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

    View Slide

  257. OTHER CONSIDERATIONS: ARCHITECTURE

    View Slide

  258. OTHER CONSIDERATIONS: ARCHITECTURE

    View Slide

  259. OTHER CONSIDERATIONS: FOCUS

    View Slide

  260. OTHER CONSIDERATIONS: BEHAVIOR
    Multi Open

    View Slide

  261. OTHER CONSIDERATIONS: BEHAVIOR
    Single Open

    View Slide

  262. OTHER CONSIDERATIONS: BEHAVIOR
    Single Open

    View Slide

  263. Auto Scroll
    OTHER CONSIDERATIONS: BEHAVIOR

    View Slide

  264. Other Considerations
    ‣ JavaScript
    ‣ Visible by Default
    ‣ Anchor to Footer
    ‣ Single DOM

    View Slide

  265. mediaCheck, by @robtarr

    View Slide

  266. Other Considerations
    ‣ Usability
    ‣ User Expectations
    ‣ Plan for the Worst
    ‣ Teach Use

    View Slide

  267. What’s Next

    View Slide

  268. Fluency

    View Slide

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

    View Slide

  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.

    View Slide

  271. The Responsive Dip
    !
    http://bit.ly/MasqBk

    View Slide

  272. Responsive web design is about
    much more than making stuff fit
    on small screens.

    View Slide

  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

    View Slide

  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

    View Slide

  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/

    View Slide

  276. There are many
    problems left to solve.
    !
    We’ll solve them much faster if we
    solve them together.

    View Slide

  277. THANK YOU
    @bencallahan

    View Slide

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

    View Slide

  279. Defend Your Process

    View Slide

  280. THANK YOU
    @bencallahan

    View Slide