#WCORL – Designing for development, the value of collaborative design

This post is part of the series #WCORL 2014

Other posts in this series:

  1. #WCORL – WordPress JSON REST API
  2. #WCORL – Designing for development, the value of collaborative design (Current)
  3. #WCORL – Write Better Documentation

Speaker: Michelle Schulp
Twitter: @marktimemedia
Website: marktimemedia.com

What is collaborative design?

To help understand how collaborative design can help, we must look at the waterfall method first.


Linear, ie., content -> design -> development


  • Project scoping assumptions
    Whoever’s first in line needs to assume scope for the rest of the process.
  • Inefficient communication
    Game of telephone and very likely to have miscommunication
  • Hard to adapt to changing requirements
  • Decisions made outside of expertise
    Designer quoting development work, or vice versa, because of change requests in their phase.

Collaborative Workflow

Non-linear, stuff happens at the same time. Ie, Content <=> Design <=> Development <=> Content

  • Leads to more accurate scoping, because everyone’s involved in the process of scoping and estimating
  • More direct communication
  • Quickly adapt to changing requirements, no more need to wait for communication to go through the chain
  • Results in efficiency/time saved

Example workflow

Recommended Book: Strategic Web Designer (Christopher Butler)

  • Design elements, rather than literal mockups. Style tiles.
  • Communicates interpretation of brand at a high level, rather than specifics of the design
  • Design wireframes (static or dynamic)
  • Design system assets (Typography)
  • Mockup styleguide, CSS Styleguide for reusable elements

Involved early. Allows for catching of budget/time issues with functionality.

  • Know the design system
  • Prototyping, iterating, and testing
    Prototype functions, but doesn’t look like much. Stuff is in place, but not styled. Allows functional/flow tests
Project Management
  • Bridge between goals
  • Understand communication styles (how do people work/communicate best)
  • Leave good feedback!
  • Design specific feedback: Focus on look and feel, evaluate clarity, keep in mind that it’s for your visitors (not for you!), be specific.
  • Dev specific feedback: Focus on function, evaluate consistency across platforms, explain what you expect vs what happened (specificity!).
For all the peoples:
  • Understand vocabulary (within reason, know enough to be able to understand and communicate the basics)
  • Ask all the things
  • Define goals

Continue reading this series: