Badass Ideas

A few years ago, Jim and I attended an open house at an architecture and interior design studio near our home in Alexandria, Virginia. We wanted to get some design inspiration for our new place, and the owner (who happened to be Jim’s cousin) encouraged us to check out their space. So, we did.

[Update: Check out http://styletil.es for more on Style Tiles]

While touring the beautiful studio, we came to a marvelous room covered with samples and swatches. Everywhere we looked was lined with elements like blinds, tiles, fabrics, and wall coverings — it was a giant style library all within this one room. It was spectacular.

As we began to peruse through the layers of patterns and colors, we were pulling out elements that captured our vision and assembling those pieces into a palette of goodness. And when we were done piling these colorful, beautiful, and intriguing things onto a flat tray, we realized how productive, collaborative, and centering the process of design discovery had been.

Design Thinking for Problem Solving

Since we’re both designers, we are reminded each day that designing is a complex process that extends far beyond swatches and colors; it’s a comprehensive approach to problem solving. It requires “Design Thinking,” a process quoted by Tim Brown of Ideo as being

“a discipline that uses the designer’s sensibility and methods to match people’s needs with what is technologically feasible and what a viable business strategy can convert into customer value and market opportunity.”

This is a process that clients may not be familiar with. And really, who can blame them? They’re not designers by specialization, and they only see the final product I present to them — the one that already incorporates all the tiny decisions I’ve made to solve their unique business, marketing, and user challenges.

This typical approach of gathering qualitative info and then showing a client a mock-up made me feel pressure to explain every little detail so they would understand the TLC and thought that went into the overall design. Yet their instant reactions to the overall aesthetic — opinions that often had nothing to do with the original problems the design was attempting to solve — ultimately reigned supreme, and I would find myself changing colors or pushing pixels away from what I considered to be the ideal solution.

(Frustration isn’t a good creative motivator, I’ve found.)

Everyone has an opinion about design, which is why I’ve found it more helpful to embrace my client’s opinions from Day 1. The client as a collaborator whose input drives smaller, iterative chunks of deliverables before I delve into a full-fledged composition avoids the Frankencomp and makes everyone feel better along the way, too.

And this is how the style tile evolved — I took what I learned from my afternoon in the swatch library collaborating with Jim and incorporated the same idea for my clients at Phase2 Design Studio to enjoy.

Style Tiles Within the Design Process

A style tile is a visual “tray” of paint chips, fabric patterns, and color choices that support the client’s goals. I have a Photoshop template with specifically masked areas where, rather than showing paint chips, I display samples of button styles, navigational treatments, and typographic possibilities. (When an interior designer sits down with a client, they don’t design three different rooms, so why do we design three full comps?)

The style tile is not a literal translation of what the website is going to be, but a starting point for the designer and the client to have a conversation and establish a common visual language. When a client says “clean,” does she mean Apple.com clean or NYTimes.com clean? Speaking the same visual language clarifies aesthetic opinions before getting too far into the actual design of the site. So I now interpret these formerly vague statements as conversation starters.

Human nature is to combine elements from separate options, which is another reason the style tile has proved so helpful. It gives clients the option to do this in the early stages of the project rather than in the later stages where it could take far more time to modify full compositions. An iterative approach allows incremental progress to be made with lots of checkins. There are no surprises along the way, and plenty of opportunities for the designer to make the case to the client behind detailed thinking within the decisions made.

A very important point to note here is that a style tile is not changing the design decisions to meet clients’ whims, it is about visualizing your decisions in a way that they can understand that you are working towards solving their design challenges.

Also, when it comes to scoping budget for style tiles, consider this: creating different comps for a client guarantees that time will be thrown away. A style tile is quick and dirty, and its goal is to visualize as many adjectives as you can in as little time as you can to get a reaction from the client. Amid project management and client concerns that this element may be unnecessary, I have found the opposite (much to my PM and clients’ delights): iterating on style tiles moving into comps re-purposes valuable time that can be used to focus on little nuggets of detail that can really set a design apart.

How I Actually Apply Style Tiles

I use the style tile as a starting point to discover if the client’s visual translation of descriptive words and mine are similar. I ask questions that provoke rich answers with lots of adjectives. Tons of adjectives give me great material for kicking off my style tile. After finishing the conversation, I start to make associations by grouping similar adjectives together. I usually group adjectives as “Conservative, Moderate, or Aggressive” based on how similar or different the adjectives are from the client’s current site or brand. And once I get these three columns completed, I’m ready to start creating visualizations of those adjectives.

Ultimately, these three groups become the themes for my style tiles: Conservative, Moderate, or Aggressive. On each, I’ve taken the actual words that the client used and designed them into buttons, typographic treatments, or illustrations that represent what I think that word means visually.

And style tiles are an assembly of pieces — they don’t have to be thoughtfully placed together in a holistic aesthetic like Mood Boards (see below). They are purposefully chunked so that a client can say “yes” or “no” easily and without being distracted by other elements that are imperative to the overall “mood.” Again, the goal is to speak a common language in order to avoid misinterpretations later, after problem-solving decisions have been made.

So, for example, if a client says “Whimsical” and their current brand is incredibly conservative, I would probably create a button in a script font that literally says “Whimsical” and place it on the Aggressive tray. That way, the client can consider how “Whimsical” literally looks as I interpret it visually, and that client can consider how “Whimsical” fits within the existing brand or its future goals.

And even if the client changes her mind or doesn’t like it, again, the conversation is key. I immediately start asking new questions to achieve a higher understanding of our shared visual language.

Style Tiles Aren’t Mood Boards or Comps

What makes a style tile unique from other tools is that it is specifically a method for establishing a visual vocabulary between the designer and the client, rather than setting a “mood” or defining elements that will ultimately be included in a full layout. (Though obviously the style tile elements may indeed make it into the final design).

Throughout my design career I have had the opportunity to present comps, mood boards, and style tiles, and I have found that it is really important to use the right tool for the job. Mood boards work great for startup clients or opportunities where you are designing an identity to go along with a website and you have very limited budgets. It’s great for discovery and brainstorming; distilling big picture feelings and ideas into more clearly defined visuals.

However, when a client has already gone through a branding process, particularly ones that have put a lot of effort into crafting a very specific personality and “mood” for their organization or company, the “mood board” deliverable can be a bit off putting. Even just the name “mood board” can be a reason for alarm to some clients causing confusion. Many clients are looking at bringing their brand online or reinvigorating it, not re-creating it. And this is where style tiles really shine. A mood board can be too vague, confusing, or intangible for a client to make the connections between what they need and what you are going to eventually build for them. Bringing a brand online is more complex than just taking print collateral and adapting it to the screen, but it doesn’t mean the client needs a new logo or color scheme to establish an overall mood.

And a comp combines all of the research and analysis behind a wireframe and layout with style, and this can be a very difficult thing for a non-designer to understand. The entire process of layout and user experience discovery can be halted because of color, pattern, or application. While they definitely influence each together, separating the two discovery processes allows for iterative progress to be going on simultaneously. By the time you get to the comp stage, the client has had dozens of conversations and checkins regarding how you arrived at the composition. High fives all-around!

While style tiles work really well for the Phase2 design team and me, I understand that it may not be the best method for everyone. But sharing information across our specialization and communicating expectations to our clients makes for a stronger design industry all together. So when clients know what to expect working with a designer, it makes designing awesome stuff a lot easier.

Style Tiles Are All About Communication

In the end the style tile has a very practical purpose: it helps the designer to establish an important psychological connection with the client that they are contributing to the process. And this is something that creative people before the web existed — like architects and interior designers — have probably known for decades.

For example, “Color Confidential” on HGTV, is a perfect illustration of how an interior designer does something very similar when choosing paint colors. The designer asks clients questions about the feeling they hope to have when entering their newly designed room. Let’s say they want it to remind them of summer’s spent on the New England coast. The designer then takes objects that represent the colors which the designer knows will help create that mood. A deep rusty red may be represented by a lobster or a photo of the crisp water may represent the blue. There is then a clear connection for the client to how that decision was arrived at by the designer.

Letting your client know you aren’t just throwing darts at a board builds trust, but collaborative communication is what helps clients feel even more endeared to the final product.

—-
If you are interested in learning more about the Phase2 design process and why we use style tiles, check out my presentation from DrupalCon or read another post of mine on the Phase2 Technology blog.

If you are looking to get a hands-on introduction to Style Tiles and other methods that I use when working with clients, check out my workshop at the Interlink Conference in June.

Finally, I’d love to hear your methods and ideas, so let’s make client collaboration within the design process a hot topic. Ready. Set. Blog.