Skip to content

GuideCollaborativeDesign

Jump to bottom
Victor Kane edited this page Dec 17, 2013 · 13 revisions

The Collaborative Design Guide is at the heart of Drupal Lean Process, very much design centered and team driven, avoiding waterfall style handoffs like the plague. We don't want: "Steve gets the design done, and then Ken does the front-end programming and then Melisa does the back-end programming." We want the team to work together, in parallel, with everyone receiving as much feedback as possible. To this end, Drupal Lean Process keeps things as incremental as possible with collective team focus atomically associated with one or more user story being processed. The outcomes should be realizable and testable with as much cross-functional, multi-disciplinary enriched collaboration as possible, with everyone excelling in their particular skill sets.

Once the hypothesis statements are accepted by all and the personas and user story specified, it's time to move on to Collaborative Design with the aim of team wireframe sketching and software analysis and design, effectively planning and executing the work in scope with the aim of getting the user story accepted by the client, once outcomes are validated by measurable goals having been attained.

There are different levels of collaboration, but they should be design instigated. At times, it will be a designer consulting with a front-end coder, or any kind of one-on-one or small group sessions. At times there will be a need for the whole team to formally participate in a Design Studio session, where the final cut of artifacts will drive the implementation of the user story across the board.

Drupal Lean Process Workflow

Collaborative Design will make use of the following techniques and team-owned resources:

  • Informal sessions in order to guarantee feedback and to break the habit of waterfall, non-parallel handoffs.
  • Design Studio: Collaborative sketching of flexible, functional wireframes in parallel with front-end and back-end analysis and design.
  • Style Guides and Pattern Libraries of all user facing elements, available to all members of the team in the repo.
  • Techniques for distributed teams meeting mainly online.

Design Studio

"Design Studio follows this path (Gothelf, Jeff (2013-02-22). Lean UX: Applying Lean Principles to Improve User Experience, Chapter 4):

  • Problem definition and constraints (input: problem statements, assumptions list, hypothesis statements, working constraints)
  • Individual idea generation (diverge)
  • Presentation and critique
  • Iterate and refine (emerge)
  • Team idea generation (converge)

With the team using sketching tools of all kinds to produce the final cut, "the artifacts created in the design studio are now used to create refined wireframes, prototypes, and early code that will drive the team forward in proving their hypotheses."

Style Guide

"A style guide is a broadly accepted pattern library that codifies the interactive, visual, and copy elements of a user interface and system.... a living collection of all of your product’s customer-facing components. If it’s made of pixels, it goes in the style guide. Headers, footers, grids, forms, labels, button logic, and everything else that goes into your product’s user experience goes in the style guide.

"Style guides create efficiency. They provide a repository of ready-to-go, approved interface components that can be assembled and aligned to form a workflow. By minimizing debate over mundane elements like the placement of labels in forms or the never-ending debate over left/ right placement of the “positive” action button, developers can get started creating core UI components without waiting for a designer to define and specify these assets. The assets are already designed, defined, and collected in one place." (Gothelf, Jeff (2013-02-22). Lean UX: Applying Lean Principles to Improve User Experience, Chapter 4.

Static documents, or Wikis may be used. Drupal Lean Process strongly recommends a Living Style Guide. Using Drupal itself (of course!). Living Style Guide's are repositories of front-end code and design that not only define how the product looks and behaves, but actually function as the underlying markup and stylesheets for that experience.

What goes into the Style Guide:

  • Interactive design elements (include appearance, screen position, when used)
    • Form fields
    • Labels
    • Drop-down menus,
    • Radio button placement and behavior
    • Ajax and jQuery events
    • Buttons
  • Visual design elements (include appearance, screen position, when used)
    • General color palette (primary, secondary and complementary hex values)
    • Use of color in the state of buttons and other elements
    • Logos
    • Headers
    • Footers
    • Grid structure
    • Typography
  • Branding and copyrighting styles

Capture the tone of your brand, specific words you will and won’t use, grammatical choices, tolerated (and not tolerated) colloquialisms, along with button language (OK? Yes? Go? etc.) and other navigation language (previous/ next, more/ less, etc.). (Gothelf, Jeff (2013-02-22). Lean UX: Applying Lean Principles to Improve User Experience)

Characteristics of a successful Style Guide:

  • Be accessible to the whole team
    • Easy to find
    • Easy to search and navigate, with an index and table of contents
    • Easy to use
  • Undergo continual improvement as development reaches maturity, whether a significant amount is invested in one go at the start of the project or not.
  • Be actionable
    • "It should be a “widget factory” that can produce any interface element on demand."
  • Include code snippets also.

Online Team Guide

Resources:

Collaborative design is the evolution of UX. “Open sourcing” the design process brings the entire team deeper into the project. The low-fidelity drawings created in Design Studio sessions can help teams generate many ideas and then converge on a set the entire team can get behind. Using tools such as style guides, Design Studio, and simple conversation, your team members can build a shared understanding, the fundamental currency of Lean UX, that allows them to move forward at a much faster pace than in traditional environments.

Clone this wiki locally