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

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.

Waterfall

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

Downsides:

• 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)

Designer

• 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

Developer

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)

Client

• 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