Collages: Design Tools for Non-Designers

By Brian Cronin 0 Comments


We frequently use sketching and concepting workshops with our clients to put them in a design-state-of-mind. These workshops are usually a collaborative process, involving people who represent the entire organization (i.e. business, technology, marketing, etc.). Having facilitated numerous concepting workshops, I have identified one simple truth: non-designers like to sketch out their ideas, but they like to talk about them even more.

You can never plan enough time for people to talk about their ideas. Some folks, when given a piece of paper and a pen, will quickly make the most rudimentary sketch. But when it comes time to talk about their sketch, they will describe the most elaborate idea. And in many cases it's an idea that had been locked away in their brain for years waiting for that moment to come out. Sometimes, there is just too much rust on the old gears that needs to get knocked off. Your goal as a facilitator is to give them the tools to knock those ideas loose.

Brian Cronin - brian@adaptivepath.com

Jump to: Adaptive Path News | Selections From Our Blog | What We're Reading
Collages: Design Tools for Non-Designers

Less talk, more action

So when we’re planning a concepting workshop, we think very carefully about what activities will help people focus on the right questions while giving us – the designers – what we need to move forward.

One trick we’ve found is to leave the sharpies at home and instead get the team to work together to create design collages. Here’s how we used design collages successfully on a recent project.

Step 1. We pulled together best-in class examples

Recently, I was working with a magazine publisher on a redesign that would bring two sites together into one experience. The client team knew the existing design very well. This gave us a chance to try a different tack.

Conferring with my colleague, Leah Buley, about workshop ideas, I realized she had developed a library of best-in-class interactions from some of her favorite sites. We borrowed Leah's set and, after augmenting with some of our own, printed several sets of them and laid them out on a table with some drafting dots for the workshop.

Step 2. We highlighted the intersections between user need and business needs

The workshop fell right at the point in the project where we had identified the design strategy and experience principles and we were beginning to move into connecting. We put boards on the wall that represented each intersection of a business need and a user need. For example, one board was: more site traffic (business) and the ability to connect with others (user).

Step 3. We matched needs with example solutions

Plotting the real life best-in-class interaction examples on the boards with drafting dots enabled us to have a discussion around how we could implement the strategy using the same language. It also allowed us to sketch out some other ways it might be done.

Step 4. We assessed desirability and feasibility

This helped us swiftly narrow the type of designs the client team felt were reflective of their brand experience, and after a quick feasibility exam from the technical architect, we were able to identify interactions that aligned with the development roadmap. We had it! We knew what we were going to design. We understood the user needs and business needs this new design was going to serve and we had a clear sense of how it might look. Heck, we even knew that the development team felt comfortable pulling it off in the ambitious timeline we had to work within.

Step 5. We created modular designs

A couple of weeks later we tried the exercise again. We had made progress on the information architecture and visual design, so we wireframed custom-designed modules depicting the interactions identified in the first round and some large templates for each page. All the custom modules were cut out on paper and placed on a movable cart along with blank paper and pens. On the walls we posted all the areas of the site that we needed to design. The design team had already laid out 60% of the design scope but we left several areas bare.

Step 6. We pieced it all together

Over the course of three five-hour sessions we walked through each area of the design. Using the drafting dots and the cutouts of our wireframed modules we were able shift the layout to get an immediate reaction to an idea or use the pens to sketch up something new on the spot. The client team debated the ideas internally and they were able to see the impact a new idea would have. If something new was introduced that might affect the large page template design, then the visual designer would mock that up while we moved on to another area of the site.

What we learned

In the end, our clients knew the site they wanted to have. It was locked inside each of their minds. With design collages, we brought those ideas out into the light where we could all see them.

These exercises were fun and delivered exactly what our client wanted. For them it was like paint-by-numbers. We knew what we were painting and the design team provided the structure of the outlines and the set of colorful pencils to bring it to life in a way that was uniquely theirs. This is a method that I'll definitely be using again.

For more on design strategy, sketching, and facilitation take a look at some of these past newsletters:

Strategy:

Kate Rutter's Making Design Principles Stick

Jared Cole's Making Strategy Tangible

Sketching:

Brandon Schauer's Sketchboards: Discover Better + Faster UX Solutions

Leah Buley's Instructions For Becoming a Sketcher

and Our Favorite Tools for Sketching

Kate Rutter's Joy of Sketch

Facilitation:

Sarah Nelson's No Designer is an Island

Julia Houck-Whitaker's Facilitation: A Love Story



Get the FeedAdaptive Path News


10th Anniversary of VisVocab (Just in time for iPad release)
We've just passed the 10th anniversary of the publishing of Jesse's famous diagram depicting The Elements of User Experience. Though the field has evolved quite a bit since 2000, it's remarkable how relevant The Elements remain.

elements of user experience

Later in 2000, Jesse released the Visual Vocabulary, a toolkit for diagramming interactive systems. In 2002, it was built-in to our favorite diagramming tool OmniGraffle, and with the launch of OmniGraffle on the iPad, we're happy to report that the Visual Vocabulary lives on in a multi-touch world!




Get the FeedSelections From Our Blog

 














What We're Reading

 







This entry was posted on Thursday, April 8, 2010 at 2:14 pm.

Add to the conversation.

Commenting is not available in this channel entry.