Rethinking our Design Workflows & Tools

Chris Wright, Product Manager
#Design | Posted

Over the last year or two, Agile methodologies have become much more common. Most development teams today have adopted some variant of Scrum, Agile, or Kanban -- which is is great! At Phase2 we are very much in favor of this and have spoken about it many times.

But while most development teams are better at adapting to change, getting both development and design teams to collaborate is tricky, and a lack of coordination results in a lot of unnecessary blockers. Requirements still come in giant text documents, while designs are delivered in large batches as static files -- which, needless to say, are hard for developers to implement from. Designs imply functionality which isn’t specced out or discussed until most of the site is built... causing a lot of rework to happen.

Screen Shot 2016-05-10 at 9.32.11 AM

Rethinking the Workflow

Agile is iterative. Design is iterative. Why couldn’t they work together? -Jeff Gothelf, author of Lean UX

This is especially a problem for teams building Drupal sites, where traditionally back-end systems are built out first, then the code handed over to a front-end developer to theme. We think there’s a better way to do things, so when we sat down and thought about what we wanted from our design process. This is what we came up with:

  • Agile
  • Iterative
  • Collaborative
  • Components/Atomic Design
  • Reusability
  • Inclusive
  • Fail fast, try new things, adapt

We’ve worked hard to develop a set of tools and processes that bring analysts, designers, and developers together. We've incorporated atomic design and prototyping to build functional designs much earlier in our development cycles, hopefully eliminating blockers before they happen. At a high level our design process has four steps:

[gallery columns="4" link="file" ids="17147,17146,17145,17144"]

Are you interested in learning how to do this too? I spoke at Drupalcon New Orleans about this very topic, joined by our head of Front-End Development Christopher Bloom!

Our session, Wireframes to Widgets: Using Paragraphs and Prototyping Tools to Create a Collaborative Design Process, is a practical guide to learning how to create a design workflow that incorporates the tools your teams are already using while leveraging Drupal 8’s theming tools and some systems like Sketch, Pattern Lab, and Paragraphs. The result: you'll create better sites and speed up the entire development process. This is an especially topical conversation to have since it looks like Drupal 8.2 is going to be moving Drupal's core theming engine to a component-based rendering approach.

We also debuted a project we've been working on internally that incorporates a lot of the ideas from this presentation into a single tool called DrupalLab.

DrupalLab is our attempt at integrating our design systems even further than we list above. It's powered by Drupal 8, PatternLab, and a Twig theme. We've built an easy to spin up Drupal 8 site that includes a version of PatternLab that is able to ingest the same Drupal specific version of twig markup as the included theme uses -- which means you no longer have to throw out your PatternLab template files!

To learn more, watch the recording of our DrupalCon session online, or register for our webinar on June 16th!

Chris Wright

Chris Wright

Product Manager