At the age of three I decided that three was the best number. This was based on sound science: my toddler-brain resolved that being 3 was the best age. This infatuation has stuck around for years, and now taken root in my design methodology. Ever since my first creative director demanded three different concepts, I’ve always subscribed to the Rule of Three (3): it’s my de facto way to structure process and unveil work to clients. Want Happy Cog to design your website? You’ll probably get three different solutions to choose from.

Of course there is a lot more to our process than that. During our visual design phase, the Rule of Three means distinguishing three unique but strategically related solutions. The ingredients for this cocktail can change. One project might be three different art directions built on the same user experience. Another might explore three very different user experiences, each with a similar look based on a well-honed identity. The three different designs fit together in a manner that presents a purposeful range. One might be structured on storytelling. Another might employ a highly focused primary navigation system based on key user tasks. We mix and match in a manner we feel will solve the important design problems while still exploring different conceptual directions.

Three provides the opportunity to solve beyond the expected. I can’t think of a project where it wasn’t worth our time to think beyond the obvious. When presenting our ideas, clients feel good because we are bringing some adventurous thinking to the table. We are exploring every nook and cranny, leaving no stone unturned. And my favorite part of this approach is that we involve the client in the decision-making process. They don’t feel like they are being dictated to or coerced into choosing our favorite design solution.

Irrational

I’m a practical person, and I realize that this approach has some painfully costly drawbacks:

• Time in total hours: Creating three independent stand-alone concepts uses a hefty share of the hours allocated for the design phase. Might those hours be more valuable later? Also, those extra hours add to our overall estimate, making it less competitive.
• Time in designer hours: Our Rule of Three also came with the stipulation that each design must be created by a different designer. That means that every new project immediately needs three designers. This can be very hard to plan for a shop juggling multiple projects.
• 2/3 of the effort is discarded: 99% of Happy Cog projects are structured around the idea of getting our clients to a good place, then letting the client take command. In many cases there won’t be a follow-up project. Unless some key ideas are plucked and saved from the unchosen directions for incorporation into the selected design, the work ends up on the design cutting room floor: unrecoverable and lost forever.

Rational

So what is a creative director to do? I love the range and quality of work that the Rule produces, but more often than I’d like, we find ourselves struggling to find the hours necessary to complete the design phase. We’ve tried some early phase intermediary deliverables like mood boards, and while they are great to get to an aesthetic earlier, the client doesn’t always understand them. Much like the glassy-eyed stare we occasionally get from presenting information architecture deliverables, early phase exploratory work is not always right for every situation.

We’ve also toyed with doing only one concept with multiple iterations. When I casually polled my Twitter followers this was the most popular process. Perhaps it is because of faster timelines, tighter budgets, fewer people working on a project, or all three. I don’t know if they’ve ever tried the Rule of Three.

And this makes me a bit sad.

I think of all the amazing work that will never be conceived. Or amazing work that was conceived but not nourished. Or amazing work that was never shared with the client to discuss its possible merits. How many great ideas never made it past the perhaps “too-quick-to-please-the-client” design director?

Designers should attack projects with obvious gusto. The best ones will always want to push boundaries and expand their range. With only one solution provided, is there a possibility that they might rely on their strengths and not stretch themselves? My experience has shown me that supporting this type of design process is a surefire way to ensure my team and I don’t grow.

Rationale

Thankfully, process is something we love to scrutinize here at Happy Cog. Expect my future Cognition posts to expose some of our tweaks and experimentation with the Rule of Three. And I’ll happily surface the realities of our process, as pretty or ugly as they might be.

Meanwhile, I’m still going to fight for stickin’ with the Rule. Quality and quantity still reign in this agency. But I concede that tough times call for more focused efforts. When you deliver one direction, are you confident it is the best direction? Is your design process ensuring that the sole idea is as strong as it can be? Or are you a Rule of Three believer, like myself?

He invoked a sense of dread every Monday and Wednesday from 3:00 to 6:00 p.m. At the age of 18, “color theory” wasn’t something I necessarily “got.” Yet the facts were unavoidable. The class was mandatory. All design majors had to take it and endure it. And almost all of us were clueless in the art of discussing design. We were at the mercy of the scariest design professor this side of the Bauhaus, Keith Newhouse.

Critiques were cold sweat-inducing stress marathons. Didn’t have a strong reason why that purple was paired with that specific shade of orange? A furrowed brow and squinty stare was your reward. Wouldn’t divulge the driving impulse behind your Pollock-esque composition? Expect an audible “tsk, tsk, tsk” combined with a deliberate, slow shaking of his head. Couldn’t articulate the process of how you arrived at this particular solution? Expect the worst. Class then transformed into a whirlwind of loud and angry chastising that often resulted in the ejection of some poor soul’s blood, sweat and tears out the window.

The fear of humiliation in front of peers can be a strong motivator. In retrospect, Mr. Newhouse’s teaching tactics were incredibly valuable. The importance of being able to talk about finished work and eloquently defend design decisions was forever ingrained in my mind. Mr. Newhouse understood the significance of being able to justify your choices and expose what went on behind the curtain, even if it wasn’t the correct path.

That’s why I cringe upon hearing about web design trends described in such catch-all, light-beer words as “Clean,” “Minimalist” or “Modern.” Words of this calibre never expose the quality of a solution, regardless of how perfect the final design might be.

If you don’t know yet, design is causality. Every decision that goes into a properly researched design should have an intended effect. Need to break out of using pre-canned adjectives to describe design? Become comfortable in sharing the process of birthing a design. How did you make decisions about the visual relationships and content hierarchy on the page? Are the font pairings evoking the right mix of historical relevance and on-screen readability? Share the details that go beyond the obvious. Break down the visual characteristics to their origin in your process. Provide insight into the history and purpose of the design elements being employed. And don’t forget the most important part; how do these collective decisions come together and solve a problem? Designers are problem solvers, not style propagators. Attributing the success of a design solely to its cleanliness is like attributing my wife’s greatness solely to her “brunette-ness.”

Consequently, our industry needs to promote the idea of constructive criticism regarding visual design. Done correctly, it would go beyond just lumping work together by general-purpose attributes. We can openly regard what is cliché, what is convention and who is doing the really great work out there. No more lists of the best clean, minimal and simple websites necessary.

Sure, Mr. Newhouse wanted us to create great (color theory) work. Yet, finding the value in communicating design process ended up being the true lesson.

Variety is a blessing. Here at Happy Cog, each and every design project is radically different. Show me the day when any two client design challenges are exactly the same and I’ll turn in my font library, ergonomic chair, and scribble-filled Field Notes. Retirement at 34? Sounds good. Now, where’s my fishing pole…

Since we deal with such variety, how we get to client-ready designs is as important as the outcome. Planning the right mix of tactics creates a roadmap that steers our team towards success. Situation-specific design exercises arm our designers with the ingredients for that success, and different clients require different recipes. Combining, tweaking, and blending techniques becomes part of the design-making process. Recognize a challenge? Bring the right tool for the job. Then the process becomes the art, and the design itself becomes the artifact.

You may recognize most of the ingredients that follow already, but the three specific situations for which we employ them might be a surprise.

1. Weak Brand

“Our brand just, well… isn’t exciting.”

The client’s brand needs an intervention, and they’ve decided the website is the place to start. Unfortunately, there isn’t a true rebranding effort anywhere in sight. A brand identity is made up of many different pieces; the logo, typeface choices, colors, voice, and tone. But the actual brand is the combined emotional experience of all these things. Contemplate the effect of this on your design process.

In this situation, we’ve found that jumping right into website layout exploration creates undue stress. Each website concept in our Rule of Three now has an additional, very heavy variable to solve. It must not only visualize a new experience, but it also has to introduce a smartly reinvigorated brand.

Our ingredient of choice here? Samantha Warren’s Style Tiles. By focusing a more precise effort into conversations with the client about the building blocks of their brand, we get brand consensus before moving onto the website.

Trying to hit the target by blending the brand work into the site layout creates a monster task, so when the brand is weak, we have presented the Style Tiles as the first step in visual design work. An agreed-upon, homogenized set of identity and brand design decisions saves countless hours downstream. Without this approach, feedback will inevitably be a blend of website critique and brand critique, and trying to sort out the mess can lead to endless rounds of revision and trouble finding a clear path forward.

2. Strong Brand but Inconsistent Identity

“Of course we have a brand identity! Here’s our 15 typefaces and 23 color swatches.”

Sometimes we have the honor of working with a world-renowned institution. And sometimes, they lack an internal brand identity shepherd. The pieces are there: logo, typefaces, colors…but their application is inconsistent. Turning this confusion into a logical visual design strategy can be tricky. A situation like this lead to our first successful use of Mood Boards.

Mood Boards always felt a bit too “arts and crafty” to me. They also seemed to be a very poor client-facing deliverable. Internally though, they work wonders. Wading through a schizophrenic brand and selecting different art directions is tough. Combined with a project that requires three different executions, it can be difficult to visualize where the concepts will go. Mood Boards have gotten us unstuck in this situation.

In our application of this ingredient, each of our three visual designers combines the identity building blocks with design ephemera to create a unique visual fingerprint. They push and pull their Mood Boards in different directions to represent divergent visual approaches quickly. When done well, a Mood Board becomes a lighthouse for staying true to an art direction. Honor thy Mood Board and thy Mood Board will lead the way.

3. Reliance on Cliched Approaches and Patterns

“Where’s our messaging carousel?”

Within our Rule of Three process, three different visual designers tackle visual design using the same set of wireframes. While we are prepared for the differences in the brand or identity in our designs, we also want to make the experiences of our concepts unique.

I hereby dub this process ingredient, which is relatively new to us, “Game the ‘Frame.” Despite the silly name, the tactic requires that we don’t simply execute upon the user interface patterns defined in the wireframes. We single out approaches to those interfaces that are considered cliché. Then, we partake in a sketching exercise that focuses just on the patterns in question. By sketching the translation of a single pattern or user interface element, designers are free from the stress of completing an entire page (for now). This achieves additional creativity by adding constraint.

For instance, take the pervasive web pattern known as the carousel.

Lately, the carousel has been under the microscope here at Happy Cog. Employed again and again, it has become synonymous with messaging-heavy modern web design. “Game the ‘Frame” looks at the purpose and function the carousel pattern brings to the site experience, but also acknowledges its shortcomings. We refuse to blindly accept a landscape photo box and two adjoining arrows. We break it apart. Rebuild it. We try to remember what it was like to play with LEGOS.

Steps to More Successful Design

Hopefully you’ve found these tactics promising, but the real moral of the story is this: never be satisfied with your process. New scenarios that require calling an audible help you innovate and hone your tactics.

Stop looking just at the end deliverable and take greater care to recognize the important opportunities for a better understanding of the design problem, or for the best of all tactics: good old-fashioned teamwork. The byproduct of this might mean less total hours spent in Photoshop, and no one will complain about that. Except maybe Adobe.

At Happy Cog, successful design means smarter process. There’s a stirring satisfaction from discovering and implementing new tactical tools that help us work better. The journey, as they say, is as important as the destination.

With my Pittsburgh roots comes a 30+ year fandom of the NHL hockey team the Pittsburgh Penguins. But one of my favorite Pens memories didn’t happen during a game; it was actually a text message. A message sent by owner and legendary player, Mario Lemieux, to the team and coaches before decisive game 7 of the 2009 Stanley Cup finals.

Clear underdogs for the final game, the team awoke that day of the game to this bit of inspiration:

Play without fear and you will be successful!

I can’t help but think about this statement in relation to the current state of the web design industry. Are we working in a fear-free environment? I can’t say that we are; it feels like there’s a dark cloud hanging ‘round. This negativity is like the angry blob slowly oozing out of the Phoenixville Colonial Theater. It’s dastardly mission is seemingly to lodge doubt and fear into the mindset of hard working web designers everywhere. This hive-mind secretion provides no positive alternative: it bluntly decrees what we must do and know. But do I have the specific skills to actually live up to the title on my business card? According to the blob, I don’t, and perhaps you don’t either.

We should stop being frauds and just quit, right?

Of course not.

This continual land-grabbing for ownership of the term “web designer” seems silly and counterproductive. Isn’t the Internet big enough for all of us? I’d be lying if all this chatter hasn’t rattled my confidence a bit. When these moments of insecurity arise, I have to rely on my experience to remind me that I’m good enough, smart enough, and gosh… you know the rest. So how do we avoid the blob? Take a look in your own mirror and say these three mantras.

You are passionate about what you do.

Think quickly of a designer who has inspired you. Are you able to quantify exactly how you were inspired? Those fleeting and often intoxicating moments can be hard to define. But think about a designer who didn’t inspire you; someone whose presence fell flat. Pinpointing specific attributes of failure is easier. You likely saw evidence of uncertainty, apathy, or doubt.

Somewhere during their sad existence, these designers lost their passion. Luckily, I know the antidotes and am happy to share.

Do you create design? Express yourself excitably when talking about your work. Project Kickoff meetings are a great opportunity to demonstrate how much you care about the craft of design. Here at the ‘Cog, we ensure that graphic design is a hearty portion of our workshop-driven Kickoffs. It provides our design leads with opportunities to establish our passion for creating a quality product.

Do you sell design? Share your design values with your clients. Not a conversation after you’ve delivered the work, but a clear manifesto of your design ethics even before you’ve opened Photoshop. During the sales process or during the Kickoff meeting, demonstrate evidence of your specific design ethos. Then when you bring solutions to the table, clients can understand their origin and have better insight into what motivates your work.

Proudly own the responsibility of shepherding smart and beautiful design. When discussing the merits of your work, don’t be afraid to battle for the strongest ideas. Ask many questions to better understand the nature of your client’s feedback. No one was ever fired from a gig for asking someone to explain their reasoning behind a criticism.

When you disagree, argue your points with logic and purpose. You won’t win every fight, but you’ll earn the reputation of being a stalwart of quality and intention. Recently I had to stick my Creative Director neck out for our concept to one of our large clients. A few long Basecamp posts and an hour long conference call got us back on track. If I had not taken the extra time to ensure our vision stayed true, I would have been kicking myself for as long as that site was live. No one wants to stare at missed opportunities. No one wants to live with regret.

You’ll always have ideas.

If you’ve been at this for awhile, you know that creativity isn’t a well. There will never be a morning that doesn’t contain the same creative potential as the previous. Yet, what designer hasn’t agonized about the idea factory in their noggin grinding to a halt prematurely? Thankfully, the more experienced have learned that creativity isn’t divine. It’s based in process and hard work.

Consequently many young designers fear process; they irrationally push away the sense that they are automating creativity. But by allowing a design process to relieve some of the burden of the “how,” designers can be free to focus on the “what.” This is nothing new; Ellen Lupton’s Graphic Design Thinking: Beyond Brainstorming. provides one hundred thirty-six techniques for generating results. A casual read-through will inspire and (re)acquaint you with the notion that not all great design is a result of light bulbs and lightning strikes. Great design often comes from just working smarter.

You must succeed.

What’s the expected retirement age these days? 80? (Best stay sharp, Cashdollar.) Watching my 401k dwindle reminds me there is always work to be done, and there is always opportunity for improvement. Fear keeps me sufficiently curious and striving to evolve into a smarter, faster, each-day-is-slightly-better-than-the-last-day designer. Fears help us recognize the consequences of our actions (or in-actions) and change behaviors for the better. Subsequently, repeated behaviors become habits. Shut the baby gate. Check the oil. Always place iPhone in front, left pants pocket.

Fear is powerful. What other options do we have? Mortgages, families, and recreational kickball leagues all demand our money and our time. Are they going anywhere? Are our lives getting less expensive? It’s not likely.

Failure is not an option. To paraphrase Ian Mackaye, this is a life-thing; there is no back-up career or family business to fall back on. I will fight to make this work regardless of what the blob is blathering about. Fear will not keep me from helping my clients, learning as much as I can from my talented peers, and creating something beautiful every day I step into the office.

But who won the Cup?

The Penguins won that fateful final game and brought the Stanley Cup back to Pittsburgh. Of course the team had the talent to win, but that short communication gave them license to relax in a very stressful situation. They were able to enjoy the moment and just do their job. Simply put, Mario’s message took the fear out of the fear of losing.

Sadly, not all of our bosses can send us morning motivational text messages before big days. And we can’t win every time, of course. Perhaps someday, we will be the New York Yankees of web design, but until then, all we can do is focus on what we do well. The more curious and more engaged of us will survive just fine. Seriously, how fast can a blob really move?

How do you “play without fear” in your job?

You’ve crafted the “big picture” view. The client loves the new branding direction; they can practically smell the future you’ve unveiled for them. Now it’s time to get to work. That means you likely have a bazillion different projects in play to bring this new brand to life: identity packages, brochures of all shapes and sizes, tickets, annual reports, bus wraps, on-site signage, and, yes, the website.

(Time to break the ice.)

Hello, it’s really nice to meet you! We’re the web design agency the client hired to bring the branding direction to the web. So, we’re over here and you’re over there, and our client is in the middle. Yes, we know you weren’t awarded the website portion of the RFP. Of course, that doesn’t mean we can’t be partners with our client’s best intentions in mind. No need to be nervous, we are considerate teammates. We hope you know why we are here, and that you are curious about what we do really well. Not sure? Read on, new friend.

How do we set our client up for success beyond just the initial launch of a new website?

Online experiences are more than just vessels for logos and photography; they are living, breathing manifestations of an organization. Real people maintain the site. Real people ensure that this part of the brand experience is alive and functioning properly. Multiple authors share duties of bringing new content to life. In-house graphic designers partner with marketing teams to bring new offers, deals, and promotions to the site in a timely manner. There are many moving parts, and each part brings an internal approval process. We know this, so we plan for this. We listen to our clients, understand their internal processes, and get to know our clients in order to build a site for them that they can sustain. Our recommendations for maintaining a new website must match up with the resources that our client has available to maintain it. If our client can’t maintain a site beyond launch, then it was a flawed concept from the start.

Does the client have a limited photography budget or lack a professional photographer resource?

Not every organization has deep coffers of cash to ensure top-notch-photography is always available. If the need arises, we brainstorm compelling ways to get by on microstock or completely avoid a design that relies heavily on custom images. How about the client team’s Photoshop skills? A year from now, when the primary marketing messaging has changed and a new crop of events has launched, will the site design still hold up without the perfect images that our designer selected for launch? An appropriately planned “system” that drives the graphic design of the site has to alleviate some of that stress from internal teams. Looking for opportunities to educate our clients about the design intentions is as important as the actual execution. If necessary, we provide them with template Photoshop documents or photography usage guidelines to help them make smarter selections once our involvement in the project has long since ended.

What about selecting typefaces for online usage?

Even though webfonts have recently exploded in use, there are still gaps in quality. Just because the font is available for the web, it doesn’t mean it’s been properly prepared and tested. Need some evidence? As the web-partner on a recent project, we raised a red flag to our client recommending that their branding agency revisit a typeface choice. When considered for print and identity work, there was nothing wrong with this specific typeface. Hell, there was even an @font-face licensing agreement that came with it. But, when it came to actually implementing the font, it was obvious that this face wasn’t ready for prime time. The x-height was much smaller when rendered in a browser, making it hard to discern the characters. And let us not forget Windows. In IE, it was downright ug-ly. Here’s a tip: if you haven’t been exposed to what “font hinting” is yet, I suggest you get friendly with your favorite type foundry and ask them how they prepare their faces for the web. At the very least, test, test, test that typeface before purchasing. We are happy to help you out when scrutinizing typeface choices.

When it works, it’s a thing of beauty.

“One must know the rules to break ‘em” is a well-trodden graphic design axiom. We think this also applies to brands. In 2010, we learned this firsthand due to our involvement in the redesign of the United States Holocaust Memorial Museum. Prior to starting the graphic design of the site, lead designer of the brand, Pentagram’s Paula Scher led a workshop for USHMM and Happy Cog designers. Wanting to get it right, we were hungry to learn how we should best “web-ize” the brand.

Her answer was surprising: respect the intentions but drop the dogma. Instead of never deviating from the Pentagram guidelines, she told us to adapt those decisions to fit the evolving needs of the brand. We (the designers, the people who have to live with the brand day-in-and-day-out) are the real experts. Ownership isn’t exclusive to the creator. Whether or not “it works” is decided by the designers who have the most experience with the brand in practice. Empower those folks to make the best decisions.

Best Friends Forever

I’ll be frank: we like to think there are oodles of other opportunities to which we can contribute. Yet, we aren’t out to obfuscate your work. Instead, we want to learn the “how” and “why” of this brand’s evolution. Share with us. Provide us the research and the insights you’ve learned. Treat us like an equal partner and we will provide the same respect back to you. Trust is hard to earn and easy to lose. So, let’s get to know each other.

At the end of the day, our value can be summed up with this statement: we bring brands to life appropriately for the web (even if our client’s audience is experiencing this brand at 3:00 a.m. in their underwear). Please, don’t be nervous. I think this is the start of a beautiful relationship.

Hugs and pixels,

Hiring a new designer is exciting. The hiring process is not. As someone who has recently been on the receving end of hundreds of applications, I’m noticing a few alarming trends. New graduate or seasoned veteran, it doesn’t seem to matter.

Job seekers, beware. How and what you provide in your initial response to a job posting is very telling and can make you attractive (or delete-worthy) in just a few seconds. Help the hiring manager out. They don’t have an excess amount of time to figure out who you are, what you do, and why you might be the right fit. Trust me, I know. For a small agency, hiring just one person can feel like a part-time job layered on top of an already overloaded workday. Yet, it takes just a few specific fixes to ensure that your message actually gets earmarked for follow-up.

Tip 1: Don’t Overdo It

The message or cover letter you write will elicit a reaction. (I’m not proud to say it, but I remember the bad ones more.) To ensure you don’t make the “naughty” list, keep it short and business-toned. Leave the snark and humor elsewhere. Yes, I know you want to instill a bit of you, but don’t make that a barrier to what I’m really looking for first; your credentials and experience.

Keep those credentials simple. A URL to your portfolio is more than sufficent. I don’t have time nor do I really care about your Pinterest, Facebook, and Twitter accounts (yet). Provide those ancillary links at a later time when appropriate.

Avoid the temptation to over-design the resumé. Yes, you are a designer and want someone to know just by looking at your resumé that, hey, you can design! (Raise your hand if you haven’t been guilty of that at some point in your career.) Instead, focus on clarity and scannability. That means one page. “Quantity” in a resumé is the same as overloading a portfolio with too many pieces. Exhibit a knack for purposeful editing; include just enough to provide a snapshot of your history.

That also means just saying no to design fads. Turning your skillsets into an infographic might seem like a very “now” technique. Unless it provides some crucial insight into your experience, drop ‘em and opt for clarity. A concise statement will communicate faster.

Tip 2: Don’t Underdo It

Nothing says candidate apathy more than an uninformed piece of communication from a job applicant. Do your research; know why you want to work for the company. What makes the company special? Who are their thought leaders and why would you want to work for them? (Get your hands dirty with LinkedIn, if you have to.) Find the blogs they write or make a point to see them speak at a conference. The more you can uncover, the more likely you’ll have an opinion about the work the company creates.

Embrace the truth. If your work experience doesn’t match that of the agency, own up to it. I’ve seen too many print/identity portfolios of candidates applying for a digital design job that never address that gap in reality. It’s better to honestly state that, yes, this job is outside of your current experience but you are trying to learn and grow as a professional.

Finally, really read the job posting to which you are responding. Many hiring managers (myself included) include small details in the posting that act as a canary in the coal mine. These help employers see which candidate is putting a concerted effort into their communication versus one who is in mass-reply mode. Miss those details and your application gets deleted without hesitation. I know because I’ve done it.

Tip 3: The Medium Is (Part of) the Message

Hiring managers use smart phones. The PDF attachment of your resumé might not be the best way to provide a concise view of your experience. If you don’t believe me, please read this A List Apart article that expounds upon the benefits of a responsive HTML resumé

This technique not only benefits the recipient but you, the candidate. It’s quick to load, easy to update, and shows that you have a passion for communicating appropriately for the medium. Best of all, it shows you respect the time of the potential employer you are courting. Nobody wants to download then pinch-and-zoom a PDF on a 3-inch screen.

A dedication to differentiation is valuable. Like a responsive resumé, consider crafting a password protected webpage curated solely for the potential employer. Everyone wants to feel “special,” employers included. If you’re willing to dedicate your valuable time to constructing a personalized web experience, the employer will notice. The very few times I’ve come across these candidates, they’ve shot right to the top of my list.

Foot, Arm, Leg In the Door

There is no denying the obvious. Talent will always open doors. Yet, an attention to detail and a desire to differentiate yourself all point to two very important facts that are overlooked in the hiring process: an obvious demonstration of caring about the job for which you are applying and taking the pursuit of that role seriously.

Now, get out there and woo some Creative Directors.

Time flies by. Cognition recently crossed its one-hundred-article threshold. While there is nothing particularly newsworthy about this milestone, the interesting fact is that numerous hands cooperate each week to birth a new post. One unique part of this behind-the-scenes magic is the weekly pairing of our author with an in-house illustrator. Editorial illustration, when done well, helps to bring the essence of the article to life via a single, compelling image.

The reality: We have zero budget for hired guns—nor do we inherently know much about editorial illustration. Instead, we’ve always tackled Cognition in a true DIY manner. Our illustrators are Happy Cog employees volunteering to help out. In fact, the only trained illustrator on staff is…wait for it…our Business Development Director, Joe Rinaldi.

Each week, one of our seven illustrators takes a turn in the rotation. To keep the overall effort from being too bureaucratic, each illustrator works directly with the author to discuss the direction for the art. So, how do you craft an editorial illustration process that is decentralized yet still conforms to a consistent art direction? As all designers know, a smart process and specific constraints are your allies.

Constraints for Freedom

Constraint 1: Don’t overwhelm. Large canvases tend to create nervousness. Our image is petite on purpose. That means an increased focus on the idea and less ephemera.

Constraint 2: Offload some of the decisions. We work with a limited color palette. The reduced color options ensure that each illustration will fit in with the entire Cognition family and take that burden off of the illustrators.

Constraint 3: Time is never in abundance. Timeboxing the effort helps to clarify when decisions need to be made or diagnose when a specific step is dragging. A draft of the article is due on Monday, and the illustration needs to be prepped and ready by Wednesday for a Thursday launch. Combine that with normal agency duties, and you can see how crucial it is to be time-efficient. Not all of our illustrators timebox. To better monitor my own efforts, I’ve honed my process to ensure I create (idea to completion) the entire illustration in a three-hour window. Disclaimer: Not every illustration actually hits that mark, but most come close.

The Magic Revealed

Another meaningless milestone: I’ve now contributed 25 illustrations for Cognition (and have had my hand in another 10–12, assisting in the idea or production). Look between the lines again. As a result of all these attempts, I now have a clear process that makes the best use of limited time. Let me divulge the important steps that save me time while I craft the style and form of my illustrations:

Step 1: It’s all about the idea (Tools: pencil, paper, and your mind).

Strong editorial illustration is infused with a core truth about the article it supports. How to actually uncover this didn’t occur to me until I had a conversation with Yesenia Perez-Cruz regarding a lecture she attended by renown illustrators and designers, The Heads of State.

Their concepts are born from trying to combine two separate ideas into a forced connection. The practice of forced connection provides the opportunity to discuss the absurd, impractical, or potentially intriguing results of the mash-up. In order to successfully integrate this approach into my process, I needed a tool— mind mapping.

Listing all of the derivative words and ideas directly (or loosely) tied to the article’s main idea is therapeutic. This list becomes the first visual artifact in finding potential connections and surfacing a concept.

To be honest, this doesn’t always lead to a slam dunk. Often, I need to abandon mind mapping for a day and wait until my mind settles down and begins its own processing work. At least half of my illustration concept epiphanies have occurred in the shower or during the morning commute when my mind was a bit more adrift and relaxed to make that successful connection.

Step 2: Sketch and Layer (Tools: pencil, paper, and scanner)

With a forced connection concept firmly rooted in my brain, I then determine the form the illustration will take. For me, form is directly linked to style. Drawing by hand has become the fastest and most successful method for me to create form.

Rough thumbnails for layout quickly evolve into layered sketches; each object (the background, the foreground, the shadowing) is an individual sketch and scan, so that final compositing is easier and quicker. If I need source material to help me define something, I use stock imagery and rely on tracing paper and a steady hand. The key, though, is to keep the drawing dissected into as many layers as possible.

Step 3: Vectorize (Tools: Photoshop, Illustrator)

I want my illustration assets to be as malleable as possible, so to set myself up for successful compositing, each layer needs to be a vector.

After scanning each sketch, I adjust the levels in Photoshop to ensure a strong contrast, then copy the image into Illustrator. There, the Image Trace tool is my best friend.

It might take some fiddling in the settings to get the result I want, but well-drawn source material should translate clearly. Once I’m happy with the vectorization, I hit Expand to finally render the drawing and make each individual piece selectable. (A few Ungroups are usually necessary.)

For years, this next maneuver eluded me. My knowledge of Illustrator didn’t include the understanding that I could select all objects based on common color or stroke. This crucial part enables manipulation of just the foreground part of the scanned drawing that is now vectorized and gets rid of any negative space fills that are a left over from the Image Tracing.

In Illustrator, I use the Direct Selection tool to select any white elements that have been added automatically during the Image Tracing. The resulting vector object shouldn’t have any shapes or fills that aren’t necessary for compositing. Then, I navigate to the Select menu option and choose Same > Fill & Stroke. This automatically selects all the “white” objects in my vectorized drawing.

Hitting delete never felt better.

The resulting drawing in Illustrator should match what was on my paper. Now, the fun begins.

Step 4: Compositing (Tools: Photoshop)

The final illustration compositing happens in Photoshop. I’m quicker in Photoshop, so it has always been my tool of choice. The transition from AI-to-PSD begins with copying and pasting each scanned object (one by one—not together) into Happy Cog’s preset Photoshop template.

To ensure scalability and easy manipulation of color, I use Shape Layers instead of any of the other objects.

Once in Photoshop, each copied vectorized drawing is its own scalable, colorable element on its own layer. This lets me re-layer or individually manipulate each element. Using ye olde imagination is often rewarded at this juncture. Do not allow yourself to be handcuffed by your original sketches. Manipulating each object and letting happy accidents occur can help shape the final form and bring the illustration to life in ways that often can’t be sketched or planned.

(Note: Want to see the final result? Read Patrick Marsceill’s great article on prototyping)

The Last Draw

Editorial illustrations work an entirely different part of our designer brains. I’m proud of the body of work our team has created in support of Cognition. Yes, it would have been easier to write articles without illustrations or just give all illustrations to one person, but the opportunity to stretch our own skill sets has made us learn and grow.

As a result, we have become better problem solvers. Having the confidence to say, “Hey, I don’t know what I’m doing, but I’m going to learn,” is how we can differentiate ourselves and improve our skills as professionals. Remember, no one is ever an expert when trying something for the first time.

Remember the childhood game of “Telephone”? One person whispers a message into the ear of their friend, and that action is repeated until everyone in attendance has heard and relayed the statement. The last person blurts out to the group what they heard, and, usually, laughter ensues.

Everyone understands why this happens. Translation and less-than-pristine reinterpretation damage the fidelity of the message. There is no copy-and-paste equivalent for verbal storytelling. A photocopy of a photocopy of a photocopy of an image will always render that image indistinguishable from the original.

Unfortunately, the waterfall web design process and “Telephone” are similar, and too much valuable, primary research (in this case stakeholder interviews) ends up being reinterpreted to the point that the original sentiment and answers are lost. The process of conducting and then documenting stakeholder interviews can keep a team at an arm’s length from a project. Instead, place designers and developers closer to the project discovery and research phase. Maintaining the fidelity of the research helps our team craft the best user experience possible. While not everyone has a background in research, anyone can conduct a stakeholder interview.

The barrier to entry might be lower than you think. In the last 12 months, I’ve had to go from interviewer novice to Charlie Rose as the Happy Cog research process was revamped. Being thrown into the deep end of the pool has forced me to recognize quickly some of the more important aspects that make an interview successful. The following tips guide how I plan for and conduct any stakeholder interviews.

(Note: At Happy Cog, we work with our clients to determine what defines a “stakeholder” of the project. Stakeholders may just include the core members of a client team or can extend to content owners, key opinion leaders, potential audience types, users, etc. These interviews tend to take 30 to 60 minutes and are typically conducted by phone. To ensure our interviewee can focus on conducting the interview, a project manager captures notes from the call, and from time to time, we also record interviews.)

The script matters.

“Do you know how to have a conversation? Then you can conduct an interview.”
— Michael Johnson, Design Director at Happy Cog

Having the “gift of gab” doesn’t mean you can skimp on drafting a well-structured script for the interview. A strong interview script works from the general (big-picture project goals) to the specific (role-based concerns regarding features and functionality.) Start with the basics to get the interviewee comfortable. Ask about their role on the project and how they see themselves providing value. Allow interviewees to talk about themselves in their own words. Build confidence in the interviewee that their vision matters, because it does.

Once you outline the easy questions, work backwards. Consider the goals of the project and the goals set forth by the client. What questions will help you learn more about how this interviewee can help articulate the path to success? Always consider the uniqueness of the interviewee’s position and role on the project when deciding appropriate questions.

But, sometimes the script doesn’t matter.

Yes, the script is important, but it shouldn’t be carved out of stone. Just because questions are in a specific order shouldn’t dictate how the interview is conducted. Let the natural flow of the conversation govern the order in which you ask questions. Be cognizant of the topical threads in the answers the interviewee provides; look for the right moments to shift to a question in the script that might keep that narrative thread intact. Mentally check off the questions as you go, ensuring you still cover everything the session demands.

Prepare appropriately. Know who you are interviewing.

Knowing the right way to version the script means the interviewer must do some homework. Set yourself up for success by spending a brief amount of time familiarizing yourself with who you are interviewing and their role. This shouldn’t be a research project unto itself; a quick Google search should suffice. Don’t make the mistake of asking a question that exposes a lack of preparation. The same questions won’t apply to the Dean of the College and a prospective student. Respect the time that the interviewee is providing by making sure you aren’t asking questions that aren’t relevant.

Consider the difference between these two questions:

“What are the most important types of information on yourwebsite.com?”

Versus:

“As the VP of Marketing, how do you use yourwebsite.com to accomplish your team’s goals?”

While the purpose is the same, the second question is much more personable for our fictional VP of Marketing to highlight what types of content are valuable specifically to her and her team. Awkward bulleted-list responses can halt momentum in a productive interview. Avoid the inevitable “umms” found in responses from question #1, and, instead, focus on prompts that will promote free-flowing feedback. Let the interviewee be the storyteller.

Don’t be a robot.

Interviews should be a conversation, not an interrogation. Levity is not a bad thing. The conveyed expression in the interviewer’s voice, the manner in how questions are delivered, how introductions occur and the ice is broken—these all create an “air” enveloping the interview situation. Address this head-on. It starts with the tone in your voice. Keep it happy, upbeat, and generally interested. Let the interviewee know you are a blank slate, ready to learn. Not only does this help establish a more relaxing environment, but it also empowers the interviewee, letting them feel that their input is valuable and that their answers aren’t just checking off a compulsory check box in the project process.

Actually listen.

The best interviews often go completely off-script. Why does this happen? A topic or comment by the interviewee often leads to follow-up questions that can never be predicted. That can only happen if the interviewer is actually listening to the answers and not mentally multitasking. Listen for cues for follow-up questions. Never be afraid to ask “why?” Get comfortable asking for the interviewee to clarify an answer. You should be trying to get the best answers, not just the answers you expect.

Don’t have the last word.

End the interview with some humility. An hour-long conversation can never capture everything that the interviewee can contribute or exhaust their thoughts regarding a project. Quite often, they have more to say. To open a window for this last bit of insight, let the final question be phrased like this:

“What haven’t we asked you today that you think would be valuable for us to know?”

This allows them to shift the conversation to anything they find valuable that hasn’t been addressed yet.

Opt in to being better informed.

“Being able to tailor questions to different stakeholders based on their unique roles and goals gave me firsthand insights that I couldn’t (and didn’t) get from just reading requirements documents.”
–Yesenia Perez-Cruz, Designer at Happy Cog

Being closer to a project’s research phase can be beneficial to the design process. Working in a small(er) agency, UX often falls on the shoulders of more than one person or team. Use this as an advantage. I’ve never heard a designer or developer state “I want to know less about this project.”

Having firsthand exposure to what stakeholders are saying creates less chances for those findings to be watered down. Put an end to whisper-down-the-lane requirements and tactics. Keep what is learned in the interview intact by removing extraneous voices and filters from the process. Consequently, designers and developers can have more of a say in the overall project strategy and design process. Intimacy in the research phase instills project ownership. Ownership is an investment that will manifest itself in the project quality.

Everyone wins.

Almost four years ago, I wrote a Cognition post about my Rule of Threes. In it, I explained that pushing a design effort far enough often resulted in stronger, better-conceived, and more thoroughly vetted solutions. If you didn’t read the article, let me give you a quick recap:

At the conclusion of the information architecture phase, multiple designers worked in unison to evolve three unique design concepts. Each effort was aimed at different, but agreed upon goals. By varying art direction, user-interface interpretation, and content prioritization, the Rule stressed designing a “range” of static mock-up solutions to present to a client. Whichever concept garnered the most attention became the “base model” that was iterated on and drove the overall look and feel moving forward.

Then, along came RWD.

Faster than you could resize a browser, the Rule of Threes morphed into a ball and chain shackled to an already-stressed project budget. Even before RWD, the cost of three staff members dedicated to designing three full-fidelity Photoshop compositions was pricey. But, the big kicker: Static JPGs aren’t responsive. Clients inevitably ask, “What does it look like on mobile?” MOAR PHOTOSHOP isn’t a viable strategy. We can’t “comp” our way to a true solution. Instead, we needed to cash in all those hours spent perfecting pixels on a process with a higher return on investment.

As a result, the Rule became a frequent time and budget casualty. We needed to arrive at solutions faster. Our methods for getting to those solutions had to adapt, as well. Style/mood boards, benchmarking discussions, art direction worksheets, interactive prototypes, visual inventories, and pattern libraries all rushed in to fill the void those pristine Photoshop comps left.

Honing our RWD processes cannot mean we forgo exploration. The need for critical thinking hasn’t changed. The need for purposeful critique hasn’t changed.

Do we still have “ideas” in a world where preset patterns have proliferated? The Rule secretly did something really, really well: It provided the designer a safe zone to explore. In that space, a work-in-progress experience was more malleable. Risks could be taken. Ideas became conversation starters. “Skinning” a wireframe was never an option. Instead, the Rule incubated an honest evolution of the wireframe. Uninterrupted space to think meant room to grow ideas.

Thankfully, RWD is a team sport. If we aren’t going to invoke the Rule, we should honor what it provided. Responsibility for “design” should be shouldered across multiple roles and disciplines; our content strategists, designers, and developers need moments to pause and reflect. Look back at your recent RWD project and ask yourself these questions:

• Were there purposeful pauses that allowed inspiration to sneak in?
• If so, where and when did innovative thinking occur, and who was responsible for whatever “that” was?
• Did you truly scrutinize the problem and recommend the appropriate solution to your clients or did the outcome just repurpose an existing idea?
• Do you have an internal design critique process, and is it providing value?

Others out there are starting to question outcomes too. Elliot Jay Stocks reiterated his 2007 call-to-arms in a recent article for CreativeBloq. He reminds us that, “as designers, we need to consider exactly why we’re making specific design choices. We shouldn’t be blindly following current trends.”

Yet, to reject trends, you have to make sure your process provides space to do so. Where is that quiet, reflective time? At what point in your process does someone speak up and say, “Hey, is this the best we can do?” As our industry scrambles to start writing code earlier in the process and refine later (if at all), let’s not usher in a generation of design staleness.

Let’s not slip into a RWD limbo.

When it comes to conducting a well-orchestrated design presentation, having prior presentation experience is a false measuring stick for success. Preparedness, not experience, actually breeds the confidence needed.

“Are you ready?” Klaus asked finally.
“No,” Sunny answered.
“Me neither,” Violet said, “but if we wait until we’re ready we’ll be waiting for the rest of our lives, Let’s go.”
– Lemony Snicket, The Ersatz Elevator

Like Violet states, you can’t wait for the perfect moment or the deserving job title to feel comfortable presenting work to clients. To help nudge you out of the nest, I’ve culled these personal tips for anyone who has to stand up in front of an audience and talk about design fluently and with confidence.

1. Reestablish the past

History matters. Each step in our design process is informed by something that preceded it. Provide a quick recap or overview of the key findings that informed your current artifact. We live and breathe our projects day in, day out. Most of our stakeholders don’t. Help put them in the frame of mind that enables them to feel informed. Serialized TV show producers understand this. Even though the show ended years ago, I still can’t get the “Last week on LOST…” episode bumper voiceover out of my head.

2. Establish the goals

Make sure everyone in attendance understands the purpose of the meeting as well as the expected outcomes. We shouldn’t assume all participants know the boundaries they are supposed to stay within. Even though this likely will occur prior to the meeting, it always helps to quickly reinforce why everyone has gathered and the agenda for the time you’ll be spending together.

3. Create parameters

Illustrate what should and shouldn’t be focused on. If you want participants to home in on a specific aspect of a design, be sure to delineate what’s “in play” and what’s “out of bounds.” Also, creating parameters is a great way to highlight specific aspects of your work that need further feedback. If you are in the middle of a design process, remind participants of what might have already been decided upon at an earlier phase.

4. Provide guidelines

No one is born a helpful critiquer. Don’t assume that all stakeholders know how to be productive in a critique situation. Coach them. Provide specific questions that the attendees can use as a lens for their feedback. (E.g. “Does the design execute the brand guidelines appropriately?) This is especially helpful for large-group scenarios. Make sure your first questions isn’t, “Well, what do you think?”

5. Illuminate reasons

Discuss qualities of the work that go deeper than the veneer. Everything that is baked into a design needs to have a backstory and purpose. Put yourself in the shoes of the participants. What do they care about? What information will make them respond critically to your presentation? What are the questions that you know they will ask? Tailor your presentation to get ahead of these inquiries. Provide the context of how decisions were made, and you’ll avoid talking about the surface-level qualities.

6. Reiterate language

Mine the kickoff meeting, benchmarking, documentation, and interviews for specific points that are worth unearthing to validate design decisions. If it makes sense, draw attention to specific participants in the design process who have contributed exemplary feedback—especially if they are attendees. Doing so demonstrates to stakeholders that design is as much about listening as it is about creating.

7. Express excitement

Talking about your project might be the highlight of an attendee’s day. Make sure to exhibit that excitement back to them. Yes, not all projects are the same. Demonstrate you care to attendees by the tone of your voice, your body language, and the general fluency you have about the project. Clients deserve the same level of excitement from designers regardless if it’s a project for Disney World or dandruff shampoo.

Being properly prepared for a design presentation (or any presentation) can remind your clients why you were hired. Don’t let titles or a lack of experience hold you back from being able to talk about design with confidence. Take the leap, but meticulously and thoroughly pack your parachute.

We’re bringing you this special edition of Cognition Roundtable, where Assistant PM Mica McPheeters speaks with our VP of Design Chris Cashdollar about the client’s role in design projects. Spend the next half hour with Chris, as he pulls inspiration from his upcoming presentation at HOW Interactive Design Conference in Washington, DC—“Reevaluating the Role of Your Client in the Design Process.” Specifically, he’ll cover:

• Recent changes in traditional agency/client roles—and how RWD has impacted expectations and responsibilities
• Common communication pitfalls to avoid when working on RWD projects
• Why and how we’ve expanded our tool belt beyond Photoshop
• Tips for helping communicate design intent—and how doing so can help you craft a strategic process for your clients

If you’re interested in learning how to better collaborate with clients, there’s still time to grab a ticket to HOW Interactive Design Conference next week. If you’ll be in attendance, make sure to say howdy to Chris or leave questions or comments below.

Cognition Roundtable 004 — Full Transcript:

Mica McPheeters (MM): Hey everybody, and welcome to another Cognition Roundtable. Today we’re going to be talking with Chris Cashdollar, the VP of design at Happy Cog. And my name is Mica McPheeters, and I’m an assistant project manager here.

So Chris, I hear that we’re going to be talking about reevaluating the role of the client in the design process.

Chris Cashdollar (C$): For the past few years, as responsive design has kind of become more the norm than the exception in the work we do, it’s created a lot of new headaches, and kind of hurdles for us in the design process to ensure that we are putting forth the right type of design artifacts for our clients, keeping the project moving ahead swiftly, purposefully; not wasting time, too.

And from that, I’ve had to work with our design team here to really look at the process and say okay, do we have the right tool sets, and are we using them at the right time Ultimately, this is important because when you’re considering the fact that we are creating really complex, interactive solutions for our clients big and small, there’s really a lot of opportunity for error, if you aren’t really taking a look at your process, and saying are we putting forth the right thing at the right time, evaluating it, testing it, and ensuring we aren’t wasting our clients’ dollars and budget time.

MM: It seems like you’re taking a really proactive approach to this. How has the traditional agency/client role changed recently?

C$: It’s really changed a lot of our tools in our tool set, essentially. When we consider what we have in our design process, but it’s also mad us reevaluate when and why we use these tools. For instance, four or five years ago, to articulate design intent you would probably 99% of the time create a whole bunch of paper wireframes, and essentially recreate the content needs, functional needs, hierarchy needs of a website, in paper, and get that in front of your clients, and then review it. It might be 12 pages long. It might be 60 pages long. But it was essentially a dead artifact. And they’d have to kind of evaluate your thinking in this kind of very non-digital form, and tell you yes, this captured everything, or we would revise it as needed.

Unfortunately, that’s a layer removed from what you actually are creating. It shows design intent, but if you consider what responsive design creates, the new set of problems, thinking about things in a fluid manner, paper isn’t going to be fluid for you. So you can’t really evaluate whether or not your proposed design solution on a small screen and a big screen is correct, or going the right direction, unless you’re making now multiple layouts per page. And now you’re basically multiplying that effort two-, three-fold, depending on how may kind of core break points you want to maybe work into your design.

So instead, we’ve taken a lot at other things. We’ve looked at HTML prototyping as a way to kind of evolve paper wireframes. So instead of creating page after page of the layout, we’ve taken a lot of that effort and put it into a framework. We’ve been using ZURB Foundation as a way to get quickly into a framework that allow us to articulate content needs, functional needs, hierarchy of that content in something that is responsive and allows us to work in a manner that’s a bit more fluid, that’s a bit more realistic. We can start to see and play with the content and functionality and breakpoints in order to determine how well the design solutions coming together with this type of artifact.

We’ve also found that sometimes you can’t go all-in on that. Some solutions need to be looked at a bit more singularly. For instance, we’re working on a large project now for a consumer-product website, where the core transaction is e-commerce, essentially, and it includes a lot of things like very robust account management, menus, checkout carts, things of that nature.

When you’re tackling an entire project of this scale, you have to start looking at some of these individual patterns, some of these individual interactions and say okay, we probably should really just think about this navigational structure. We should probably look at what happens here at the different states of the account set up, and how the consumer manages this, and look at that pattern outside of the whole of everything.

Yes, we know what’s going to be on the page, but we really need to get this menu system right. We need to get this account system right so that if this page translates to small screens, we need to look at, and evaluate that everything’s there that needs to be there. It’s working on all the small screens, and we’re not kind of hiding something that the consumer actually needs.

It’s being aware of employing the right type of focus on the right type of thing and finding the right artifact to pair with that effort. It’s a bit more of a challenge, of course. It forces our teams to be a bit more self-conscious of what tasks they need to be focusing on. Of course, it allows our project managers to have to manage a lot more touch points with our clients as well, but ultimately what we get out of it is the collective understanding that we’re moving in the right direction.

As opposed to throwing a lot of very complex problems into a single deliverable, and expecting our clients and our users to say yes, this is correct, right away, and not really evaluate each of these decisions independently, which is ultimately what it demands.

MM: On that topic, when you have a client who might be used to the traditional “I want to redesign my website,” but they haven’t been exposed to responsive web design before, that’s a pretty exciting thing. How do you go about introducing that to them?

C$: What we look at when we put together a design process for our clients is we consider the role of education in this equation. I don’t think any more that you can just assume that client services is just going away and creating. I think because we have our clients very heavily involved in our process, we have to expect that there’s going to be things they don’t understand, and it’s our job to ensure that they understand the purpose and reason why we’re prescribing or recommending certain tactics, techniques, artifacts.

There’s a sense of patience that has to emanate from everybody on our team because we want to make sure that our clients understand why we’re doing something. So that means there has to be an aspect of our role that is very much about education. It’s about informing those who need to know something at the right time, with the right type of tone, and demeanor so that there isn’t a misunderstanding. Misunderstandings often lead to pauses and hiccups in the process which of course, if you’re in a deadline-driven business like we are, those things add up over time, and they can eat away at the overall metrics of success for a project.

MM: You mentioned design intent earlier. What does that mean when it comes to crafting a strategic design process for your clients?

C$:Design intent is something I’ve kind of felt really strongly about recently. I read an article a few years ago about design is the rendering of intent, I think was the quote. It’s from Jared Spool. And our design intent is manifested in everything we do in the design process. We don’t like to make dead artifacts. I mentioned that earlier. We don’t like to make things that are created for the sake of their creation. We want to make sure everything we’re doing is driving the purpose forward; it’s educational, and it also demonstrates some aspect of our recommendations of our design intent.

Now, you could say that the end result, the site itself, the code that goes live, that is the manifestation of all of our design intent, all of our working towards. And so everything that we create along the way, our kind of yellow-brick road of design deliverables, these are things that have to carry some sort of understanding or some sort of communicative power of our recommendations. So you could say that HTML wireframes are a very strong artifact in rendering design intent for some small-screen patterns, and how patterns change, based on view-port size.

You could say that Photoshop documents and comps are a great artifact to drive brand and identity intent in the aesthetic purpose for getting that checkbox marked off. We’ll create really robust design—pattern libraries, and once again demonstrate a lot of our design intent for key interactions and the atomic-level components of the design system. Ensuring that our client can maintain and govern their site long after we’re involved.

So every one of these pieces has a role and a goal in the overall process. Each one kind of carries their own flag of design intent along the way. When you step back and look at everything all together, that essentially is the entire demonstration of the strategy. It’s the demonstration of everything working together, hand-in-hand, in order to carry the strategy through, to ensure that what ends up in that end goal is the proper gestalt of all of this, and is actually demonstrating what we intended to occur.

MM: When you’re thinking of different ways to present the information to your clients, do you do a lot of research online? Is there a sub industry that’s coming up with innovative ways to present?

C$: I wish there was. I wish there was some sort of magical realm we could peak into that knows, and does this, and knows all the answers. The answer is no. What we do is we have to keep our ear to the ground, and we also have to be good listeners. We have to understand the problems we’re trying solve, and really look at everything together. Step back and say we’re not just going to blindly go into an artifact we know has worked before. We’re going to evaluate the problem and then prescribe a solution for the right kind of piece of the phase that we’re tackling.

There’s a lot of people out there doing great things like this. One person I admire very much, Dan Mall, he and I have talked about this a lot. He’s somebody that I take inspiration from too. He understands that you look back at the problem and you don’t try to just Photoshop it to death. You don’t try to just build it to death. There’s very key, distinct things you get to get buy-in from your clients, at key points in time, that can help you just keep moving on, keeping the momentum positively moving forward, without having to dedicate 120 hours to just Photoshop work before you can get approval, per se.

As a whole, the industry’s moving this way, slowly. It’s a big change. Historically designers were more comfortable with putting their nose into a computer, into Photoshop, and just designing as much as they can — designing the solution all the time.

For us, we have to step back and say design isn’t Photoshop. Design is the aggregate of all these different things we can do to make sure that our intentions are communicated, so that then they find their appropriate spot downstream, in the final execution of the site itself.

MM: What kind of indicators come up in a project that tell you okay, we had planned to view Photoshop comps at this point, but I think we need to do some HTML now?

C$: Good question. Time and budget will always have some sort of bearing on what we should be using. But sometimes certain things crop up that can be key indicators of hitting pause, an evaluating again. For instance, last year, we did a design for a Spanish-language newspaper. And initially, the project scope called for HTML wireframes, which before we started working on the project made sense, because we’re dealing with a lot of content types, a lot of module types, a lot of navigation.

It made a lot of sense to say let’s dive into HTML wireframes right away, as kind of the first core artifact. But we found out, after diving into some of our discovery work, and user research, and stakeholder interviews, was that actually there’s kind of two core problems that had to be solved early on in this process.

There was the editorial process, which is essentially the experience that most of us use newspapers for, which is the content itself. And there’s also the advertising component, which is basically funding the newspaper itself, which is all the ad buys that are around the content that you are often aware of.

These were two strategies that had to align and we had to figure them out at the same time, but working with different teams. That means we couldn’t just kind of dive head first into very time-consuming HTML wireframes without better understanding that advertising strategy first, and how that was going to impact the wireframes themselves.

We had to hit pause. We had to say okay, it actually makes sense here. Let’s go back to paper wireframes, and sure enough, we spent a little bit more time creating something a bit lower fidelity but we could get earlier buy-in on this. That ensured we didn’t waste a lot of time by just kind of creating HTML wireframes, that could ultimately have been misaligned to the overall advertising strategy. It would’ve been a big miss by us and a waste of time, effort, and budget, and might potentially put the project deadline at risk.

We have to be aware of those scenario. We have to be aware also of the brand itself. I think brand and how we articulate brand in a digital experience is something we have to be confident we’re going to do right. Often, we’ll take a bit of extra time at the beginning of a project to ensure we really understand our clients’ goals for where the site needs to go, aesthetically speaking.

We have a lot of techniques and tactics we’ll employ, exercises in our kick-off workshops, or even kind of competitive analysis exercises that we’ll conduct with our clients to uncover potential biases that might exist on their team about where the aesthetic needs to go, or might even exist between our two teams about where the aesthetic might go.

For example, if I say the word — I don’t like the word, but if I say “clean design” to you, you might have something in your mind when you hear that, and I might have something in my mind as well. But we need to understand if we have the same understanding of that word. If a client comes to us and says we think the site should be X aesthetic, we need to make sure there’s no ambiguity between our two collective brains and what that term means.

MM: How has this forced your designers to adapt and expand their skill set?

C$: Tough one, good one. I respect our designers a lot. And I know that this has put them into situations where they’ve had to expand their skill sets a bit more in the last couple years. I think it’s made them stronger designers. I think it’s helped them better understand the solutions they’re recommending. And I think it’s helped them communicate not only with our clients better, but with our development team better, as well.

What happens is our designers need to be a bit more adept at helping to create essentially what could be any one of these different pieces, or artifacts that prescribe design intent. That might mean that they have a hand in conducting stakeholder interviews, or user research. It might mean they have a hand in crafting the actual communication strategy the new site needs to achieve.

That definitely means they’re probably going to have their hand in creating some sort of wireframe. It could be an HTML wireframe, it could be paper wireframe. It could be something like a keynote, which we’ve been messing with a bit in order to articulate interaction. Anything that they can potentially do to illustrate and educate our clients about our preferred interaction, aesthetic, articulation of whatever, I encourage them to do so. That’s getting out of Photoshop and finding the best way to communicate something.

Video is great for that. Motion is great for that. Interactive tapes are great for that. They don’t need to make these things real. They can be faux, emulations of interactions but the point is to decide specifically what they want to communicate, and then make sure that whatever they’re using to communicate it is clear and as purposeful as possible.

MM: Have you seen that this fosters an enhanced sense of exploration while they’re working on a project?

C$: Definitely. It forces our teams to work more cross-discipline. It also creates more of a shared understanding of the goals of a project. No longer do we have pass-the-baton type of responsibilities. Our developers, our designers, our project managers all have a shared understanding of what we’re trying to create together, very early on in the process. And you can’t really check out.

I encourage everyone to work together to find the best path forward. Hear at Happy Cog we say we don’t have UX designers. We have a shared responsibility across everyone for user experience. That means our designers and developers are all equally responsible for creating a solution that’s powerful and purposeful and meets the business goals and goals of a project.
(MM): What are a few of the common client communication pitfalls that you’ve found you need to avoid?

C$: I think in the past it was easy to use email as a crutch for getting on the phone. When I say education, what I really mean is demonstration. Demonstration with clear instruction, so when possible, make time to talk to your clients. When possible, make time to get in front of your clients.

Important deliverables should never be done over email. Of course, this isn’t always realistic. It’s important to maybe in a case where budget is tight or time line is tight, identify just the key points in the process, where you know you need to kind of heighten your interaction with your clients.

Look for those problem areas where you know there are stakeholders that need to be involved that have some sort of level of input that could definitely affect the future of the project as well. Make sure there’s opportunity to kind of get in front of them and help them understand where the project’s going.

That said, every time I present something, and I also encourage the teams to present something, you give a bit of history. You give a bit of understanding to the attendees, of whatever you’re presenting, or describing how you got there, what the intentions of the meeting are that you’re in, and ultimately how you would like them to frame and shape their thoughts moving forward.

It’s kind of basis meeting 101 stuff. You want somebody to understand why they’re sitting there with you, and what the purpose of the meeting is. But when you reference the history, you reference the goal, and you essentially put a bit of boundaries around what you want them to focus on. It helps align everyone in the meeting. You reduce that opportunity for somebody to go rogue and wanting to revisit something that maybe is already approved or already agreed upon maybe a couple meetings ago.

You look for opportunities to once again shape the conversation. I equate this to teachers. Teachers craft lesson plans. They craft syllabi. They put their students in a situation where they can be successful. I like to think of every time we present work or we present design thinking, we do the same thing.

MM: What’s next for you now?

C$: One is I think Mica we need to continue to explore in the design process better ways to communicate our design intent. As I said earlier, we’re starting to experiment with more animation techniques that once again demonstrate interaction. We’re looking at new tools that can help us reduce that boundary between what we want something to be, and the method in which we communicate to our clients.
I’m excited to speak at HOW Interactive Design Conference in DC and share these ideas with a lot of interactive designers coming in from around the country. Hoping also to potentially start talking to more colleagues and industry peers out there about this topic. And see what else we can learn and roll into, collectively, client services that once again help us better communicate with our clients, and also keep the quality high in what we’re actually creating.

MM: Thanks, Chris.

C$: This was great. Thanks, Mica.

He invoked a sense of dread every Monday and Wednesday from 3:00 to 6:00 p.m. At the age of 18, “color theory” wasn’t something I necessarily “got.” Yet the facts were unavoidable. The class was mandatory. All design majors had to take it and endure it. And almost all of us were clueless in the art of discussing design. We were at the mercy of the scariest design professor this side of the Bauhaus, Keith Newhouse.

Critiques were cold sweat-inducing stress marathons. Didn’t have a strong reason why that purple was paired with that specific shade of orange? A furrowed brow and squinty stare was your reward. Wouldn’t divulge the driving impulse behind your Pollock-esque composition? Expect an audible “tsk, tsk, tsk” combined with a deliberate, slow shaking of his head. Couldn’t articulate the process of how you arrived at this particular solution? Expect the worst. Class then transformed into a whirlwind of loud and angry chastising that often resulted in the ejection of some poor soul’s blood, sweat and tears out the window.

The fear of humiliation in front of peers can be a strong motivator. In retrospect, Mr. Newhouse’s teaching tactics were incredibly valuable. The importance of being able to talk about finished work and eloquently defend design decisions was forever ingrained in my mind. Mr. Newhouse understood the significance of being able to justify your choices and expose what went on behind the curtain, even if it wasn’t the correct path.

That’s why I cringe upon hearing about web design trends described in such catch-all, light-beer words as “Clean,” “Minimalist” or “Modern.” Words of this calibre never expose the quality of a solution, regardless of how perfect the final design might be.

If you don’t know yet, design is causality. Every decision that goes into a properly researched design should have an intended effect. Need to break out of using pre-canned adjectives to describe design? Become comfortable in sharing the process of birthing a design. How did you make decisions about the visual relationships and content hierarchy on the page? Are the font pairings evoking the right mix of historical relevance and on-screen readability? Share the details that go beyond the obvious. Break down the visual characteristics to their origin in your process. Provide insight into the history and purpose of the design elements being employed. And don’t forget the most important part; how do these collective decisions come together and solve a problem? Designers are problem solvers, not style propagators. Attributing the success of a design solely to its cleanliness is like attributing my wife’s greatness solely to her “brunette-ness.”

Consequently, our industry needs to promote the idea of constructive criticism regarding visual design. Done correctly, it would go beyond just lumping work together by general-purpose attributes. We can openly regard what is cliché, what is convention and who is doing the really great work out there. No more lists of the best clean, minimal and simple websites necessary.

Sure, Mr. Newhouse wanted us to create great (color theory) work. Yet, finding the value in communicating design process ended up being the true lesson.

Variety is a blessing. Here at Happy Cog, each and every design project is radically different. Show me the day when any two client design challenges are exactly the same and I’ll turn in my font library, ergonomic chair, and scribble-filled Field Notes. Retirement at 34? Sounds good. Now, where’s my fishing pole…

Since we deal with such variety, how we get to client-ready designs is as important as the outcome. Planning the right mix of tactics creates a roadmap that steers our team towards success. Situation-specific design exercises arm our designers with the ingredients for that success, and different clients require different recipes. Combining, tweaking, and blending techniques becomes part of the design-making process. Recognize a challenge? Bring the right tool for the job. Then the process becomes the art, and the design itself becomes the artifact.

You may recognize most of the ingredients that follow already, but the three specific situations for which we employ them might be a surprise.

1. Weak Brand

“Our brand just, well… isn’t exciting.”

The client’s brand needs an intervention, and they’ve decided the website is the place to start. Unfortunately, there isn’t a true rebranding effort anywhere in sight. A brand identity is made up of many different pieces; the logo, typeface choices, colors, voice, and tone. But the actual brand is the combined emotional experience of all these things. Contemplate the effect of this on your design process.

In this situation, we’ve found that jumping right into website layout exploration creates undue stress. Each website concept in our Rule of Three now has an additional, very heavy variable to solve. It must not only visualize a new experience, but it also has to introduce a smartly reinvigorated brand.

Our ingredient of choice here? Samantha Warren’s Style Tiles. By focusing a more precise effort into conversations with the client about the building blocks of their brand, we get brand consensus before moving onto the website.

Trying to hit the target by blending the brand work into the site layout creates a monster task, so when the brand is weak, we have presented the Style Tiles as the first step in visual design work. An agreed-upon, homogenized set of identity and brand design decisions saves countless hours downstream. Without this approach, feedback will inevitably be a blend of website critique and brand critique, and trying to sort out the mess can lead to endless rounds of revision and trouble finding a clear path forward.

2. Strong Brand but Inconsistent Identity

“Of course we have a brand identity! Here’s our 15 typefaces and 23 color swatches.”

Sometimes we have the honor of working with a world-renowned institution. And sometimes, they lack an internal brand identity shepherd. The pieces are there: logo, typefaces, colors…but their application is inconsistent. Turning this confusion into a logical visual design strategy can be tricky. A situation like this lead to our first successful use of Mood Boards.

Mood Boards always felt a bit too “arts and crafty” to me. They also seemed to be a very poor client-facing deliverable. Internally though, they work wonders. Wading through a schizophrenic brand and selecting different art directions is tough. Combined with a project that requires three different executions, it can be difficult to visualize where the concepts will go. Mood Boards have gotten us unstuck in this situation.

In our application of this ingredient, each of our three visual designers combines the identity building blocks with design ephemera to create a unique visual fingerprint. They push and pull their Mood Boards in different directions to represent divergent visual approaches quickly. When done well, a Mood Board becomes a lighthouse for staying true to an art direction. Honor thy Mood Board and thy Mood Board will lead the way.

3. Reliance on Cliched Approaches and Patterns

“Where’s our messaging carousel?”

Within our Rule of Three process, three different visual designers tackle visual design using the same set of wireframes. While we are prepared for the differences in the brand or identity in our designs, we also want to make the experiences of our concepts unique.

I hereby dub this process ingredient, which is relatively new to us, “Game the ‘Frame.” Despite the silly name, the tactic requires that we don’t simply execute upon the user interface patterns defined in the wireframes. We single out approaches to those interfaces that are considered cliché. Then, we partake in a sketching exercise that focuses just on the patterns in question. By sketching the translation of a single pattern or user interface element, designers are free from the stress of completing an entire page (for now). This achieves additional creativity by adding constraint.

For instance, take the pervasive web pattern known as the carousel.

Lately, the carousel has been under the microscope here at Happy Cog. Employed again and again, it has become synonymous with messaging-heavy modern web design. “Game the ‘Frame” looks at the purpose and function the carousel pattern brings to the site experience, but also acknowledges its shortcomings. We refuse to blindly accept a landscape photo box and two adjoining arrows. We break it apart. Rebuild it. We try to remember what it was like to play with LEGOS.

Steps to More Successful Design

Hopefully you’ve found these tactics promising, but the real moral of the story is this: never be satisfied with your process. New scenarios that require calling an audible help you innovate and hone your tactics.

Stop looking just at the end deliverable and take greater care to recognize the important opportunities for a better understanding of the design problem, or for the best of all tactics: good old-fashioned teamwork. The byproduct of this might mean less total hours spent in Photoshop, and no one will complain about that. Except maybe Adobe.

At Happy Cog, successful design means smarter process. There’s a stirring satisfaction from discovering and implementing new tactical tools that help us work better. The journey, as they say, is as important as the destination.

With my Pittsburgh roots comes a 30+ year fandom of the NHL hockey team the Pittsburgh Penguins. But one of my favorite Pens memories didn’t happen during a game; it was actually a text message. A message sent by owner and legendary player, Mario Lemieux, to the team and coaches before decisive game 7 of the 2009 Stanley Cup finals.

Clear underdogs for the final game, the team awoke that day of the game to this bit of inspiration:

Play without fear and you will be successful!

I can’t help but think about this statement in relation to the current state of the web design industry. Are we working in a fear-free environment? I can’t say that we are; it feels like there’s a dark cloud hanging ‘round. This negativity is like the angry blob slowly oozing out of the Phoenixville Colonial Theater. It’s dastardly mission is seemingly to lodge doubt and fear into the mindset of hard working web designers everywhere. This hive-mind secretion provides no positive alternative: it bluntly decrees what we must do and know. But do I have the specific skills to actually live up to the title on my business card? According to the blob, I don’t, and perhaps you don’t either.

We should stop being frauds and just quit, right?

Of course not.

This continual land-grabbing for ownership of the term “web designer” seems silly and counterproductive. Isn’t the Internet big enough for all of us? I’d be lying if all this chatter hasn’t rattled my confidence a bit. When these moments of insecurity arise, I have to rely on my experience to remind me that I’m good enough, smart enough, and gosh… you know the rest. So how do we avoid the blob? Take a look in your own mirror and say these three mantras.

You are passionate about what you do.

Think quickly of a designer who has inspired you. Are you able to quantify exactly how you were inspired? Those fleeting and often intoxicating moments can be hard to define. But think about a designer who didn’t inspire you; someone whose presence fell flat. Pinpointing specific attributes of failure is easier. You likely saw evidence of uncertainty, apathy, or doubt.

Somewhere during their sad existence, these designers lost their passion. Luckily, I know the antidotes and am happy to share.

Do you create design? Express yourself excitably when talking about your work. Project Kickoff meetings are a great opportunity to demonstrate how much you care about the craft of design. Here at the ‘Cog, we ensure that graphic design is a hearty portion of our workshop-driven Kickoffs. It provides our design leads with opportunities to establish our passion for creating a quality product.

Do you sell design? Share your design values with your clients. Not a conversation after you’ve delivered the work, but a clear manifesto of your design ethics even before you’ve opened Photoshop. During the sales process or during the Kickoff meeting, demonstrate evidence of your specific design ethos. Then when you bring solutions to the table, clients can understand their origin and have better insight into what motivates your work.

Proudly own the responsibility of shepherding smart and beautiful design. When discussing the merits of your work, don’t be afraid to battle for the strongest ideas. Ask many questions to better understand the nature of your client’s feedback. No one was ever fired from a gig for asking someone to explain their reasoning behind a criticism.

When you disagree, argue your points with logic and purpose. You won’t win every fight, but you’ll earn the reputation of being a stalwart of quality and intention. Recently I had to stick my Creative Director neck out for our concept to one of our large clients. A few long Basecamp posts and an hour long conference call got us back on track. If I had not taken the extra time to ensure our vision stayed true, I would have been kicking myself for as long as that site was live. No one wants to stare at missed opportunities. No one wants to live with regret.

You’ll always have ideas.

If you’ve been at this for awhile, you know that creativity isn’t a well. There will never be a morning that doesn’t contain the same creative potential as the previous. Yet, what designer hasn’t agonized about the idea factory in their noggin grinding to a halt prematurely? Thankfully, the more experienced have learned that creativity isn’t divine. It’s based in process and hard work.

Consequently many young designers fear process; they irrationally push away the sense that they are automating creativity. But by allowing a design process to relieve some of the burden of the “how,” designers can be free to focus on the “what.” This is nothing new; Ellen Lupton’s Graphic Design Thinking: Beyond Brainstorming. provides one hundred thirty-six techniques for generating results. A casual read-through will inspire and (re)acquaint you with the notion that not all great design is a result of light bulbs and lightning strikes. Great design often comes from just working smarter.

You must succeed.

What’s the expected retirement age these days? 80? (Best stay sharp, Cashdollar.) Watching my 401k dwindle reminds me there is always work to be done, and there is always opportunity for improvement. Fear keeps me sufficiently curious and striving to evolve into a smarter, faster, each-day-is-slightly-better-than-the-last-day designer. Fears help us recognize the consequences of our actions (or in-actions) and change behaviors for the better. Subsequently, repeated behaviors become habits. Shut the baby gate. Check the oil. Always place iPhone in front, left pants pocket.

Fear is powerful. What other options do we have? Mortgages, families, and recreational kickball leagues all demand our money and our time. Are they going anywhere? Are our lives getting less expensive? It’s not likely.

Failure is not an option. To paraphrase Ian Mackaye, this is a life-thing; there is no back-up career or family business to fall back on. I will fight to make this work regardless of what the blob is blathering about. Fear will not keep me from helping my clients, learning as much as I can from my talented peers, and creating something beautiful every day I step into the office.

But who won the Cup?

The Penguins won that fateful final game and brought the Stanley Cup back to Pittsburgh. Of course the team had the talent to win, but that short communication gave them license to relax in a very stressful situation. They were able to enjoy the moment and just do their job. Simply put, Mario’s message took the fear out of the fear of losing.

Sadly, not all of our bosses can send us morning motivational text messages before big days. And we can’t win every time, of course. Perhaps someday, we will be the New York Yankees of web design, but until then, all we can do is focus on what we do well. The more curious and more engaged of us will survive just fine. Seriously, how fast can a blob really move?

How do you “play without fear” in your job?

You’ve crafted the “big picture” view. The client loves the new branding direction; they can practically smell the future you’ve unveiled for them. Now it’s time to get to work. That means you likely have a bazillion different projects in play to bring this new brand to life: identity packages, brochures of all shapes and sizes, tickets, annual reports, bus wraps, on-site signage, and, yes, the website.

(Time to break the ice.)

Hello, it’s really nice to meet you! We’re the web design agency the client hired to bring the branding direction to the web. So, we’re over here and you’re over there, and our client is in the middle. Yes, we know you weren’t awarded the website portion of the RFP. Of course, that doesn’t mean we can’t be partners with our client’s best intentions in mind. No need to be nervous, we are considerate teammates. We hope you know why we are here, and that you are curious about what we do really well. Not sure? Read on, new friend.

How do we set our client up for success beyond just the initial launch of a new website?

Online experiences are more than just vessels for logos and photography; they are living, breathing manifestations of an organization. Real people maintain the site. Real people ensure that this part of the brand experience is alive and functioning properly. Multiple authors share duties of bringing new content to life. In-house graphic designers partner with marketing teams to bring new offers, deals, and promotions to the site in a timely manner. There are many moving parts, and each part brings an internal approval process. We know this, so we plan for this. We listen to our clients, understand their internal processes, and get to know our clients in order to build a site for them that they can sustain. Our recommendations for maintaining a new website must match up with the resources that our client has available to maintain it. If our client can’t maintain a site beyond launch, then it was a flawed concept from the start.

Does the client have a limited photography budget or lack a professional photographer resource?

Not every organization has deep coffers of cash to ensure top-notch-photography is always available. If the need arises, we brainstorm compelling ways to get by on microstock or completely avoid a design that relies heavily on custom images. How about the client team’s Photoshop skills? A year from now, when the primary marketing messaging has changed and a new crop of events has launched, will the site design still hold up without the perfect images that our designer selected for launch? An appropriately planned “system” that drives the graphic design of the site has to alleviate some of that stress from internal teams. Looking for opportunities to educate our clients about the design intentions is as important as the actual execution. If necessary, we provide them with template Photoshop documents or photography usage guidelines to help them make smarter selections once our involvement in the project has long since ended.

What about selecting typefaces for online usage?

Even though webfonts have recently exploded in use, there are still gaps in quality. Just because the font is available for the web, it doesn’t mean it’s been properly prepared and tested. Need some evidence? As the web-partner on a recent project, we raised a red flag to our client recommending that their branding agency revisit a typeface choice. When considered for print and identity work, there was nothing wrong with this specific typeface. Hell, there was even an @font-face licensing agreement that came with it. But, when it came to actually implementing the font, it was obvious that this face wasn’t ready for prime time. The x-height was much smaller when rendered in a browser, making it hard to discern the characters. And let us not forget Windows. In IE, it was downright ug-ly. Here’s a tip: if you haven’t been exposed to what “font hinting” is yet, I suggest you get friendly with your favorite type foundry and ask them how they prepare their faces for the web. At the very least, test, test, test that typeface before purchasing. We are happy to help you out when scrutinizing typeface choices.

When it works, it’s a thing of beauty.

“One must know the rules to break ‘em” is a well-trodden graphic design axiom. We think this also applies to brands. In 2010, we learned this firsthand due to our involvement in the redesign of the United States Holocaust Memorial Museum. Prior to starting the graphic design of the site, lead designer of the brand, Pentagram’s Paula Scher led a workshop for USHMM and Happy Cog designers. Wanting to get it right, we were hungry to learn how we should best “web-ize” the brand.

Her answer was surprising: respect the intentions but drop the dogma. Instead of never deviating from the Pentagram guidelines, she told us to adapt those decisions to fit the evolving needs of the brand. We (the designers, the people who have to live with the brand day-in-and-day-out) are the real experts. Ownership isn’t exclusive to the creator. Whether or not “it works” is decided by the designers who have the most experience with the brand in practice. Empower those folks to make the best decisions.

Best Friends Forever

I’ll be frank: we like to think there are oodles of other opportunities to which we can contribute. Yet, we aren’t out to obfuscate your work. Instead, we want to learn the “how” and “why” of this brand’s evolution. Share with us. Provide us the research and the insights you’ve learned. Treat us like an equal partner and we will provide the same respect back to you. Trust is hard to earn and easy to lose. So, let’s get to know each other.

At the end of the day, our value can be summed up with this statement: we bring brands to life appropriately for the web (even if our client’s audience is experiencing this brand at 3:00 a.m. in their underwear). Please, don’t be nervous. I think this is the start of a beautiful relationship.

Hugs and pixels,

Hiring a new designer is exciting. The hiring process is not. As someone who has recently been on the receving end of hundreds of applications, I’m noticing a few alarming trends. New graduate or seasoned veteran, it doesn’t seem to matter.

Job seekers, beware. How and what you provide in your initial response to a job posting is very telling and can make you attractive (or delete-worthy) in just a few seconds. Help the hiring manager out. They don’t have an excess amount of time to figure out who you are, what you do, and why you might be the right fit. Trust me, I know. For a small agency, hiring just one person can feel like a part-time job layered on top of an already overloaded workday. Yet, it takes just a few specific fixes to ensure that your message actually gets earmarked for follow-up.

Tip 1: Don’t Overdo It

The message or cover letter you write will elicit a reaction. (I’m not proud to say it, but I remember the bad ones more.) To ensure you don’t make the “naughty” list, keep it short and business-toned. Leave the snark and humor elsewhere. Yes, I know you want to instill a bit of you, but don’t make that a barrier to what I’m really looking for first; your credentials and experience.

Keep those credentials simple. A URL to your portfolio is more than sufficent. I don’t have time nor do I really care about your Pinterest, Facebook, and Twitter accounts (yet). Provide those ancillary links at a later time when appropriate.

Avoid the temptation to over-design the resumé. Yes, you are a designer and want someone to know just by looking at your resumé that, hey, you can design! (Raise your hand if you haven’t been guilty of that at some point in your career.) Instead, focus on clarity and scannability. That means one page. “Quantity” in a resumé is the same as overloading a portfolio with too many pieces. Exhibit a knack for purposeful editing; include just enough to provide a snapshot of your history.

That also means just saying no to design fads. Turning your skillsets into an infographic might seem like a very “now” technique. Unless it provides some crucial insight into your experience, drop ‘em and opt for clarity. A concise statement will communicate faster.

Tip 2: Don’t Underdo It

Nothing says candidate apathy more than an uninformed piece of communication from a job applicant. Do your research; know why you want to work for the company. What makes the company special? Who are their thought leaders and why would you want to work for them? (Get your hands dirty with LinkedIn, if you have to.) Find the blogs they write or make a point to see them speak at a conference. The more you can uncover, the more likely you’ll have an opinion about the work the company creates.

Embrace the truth. If your work experience doesn’t match that of the agency, own up to it. I’ve seen too many print/identity portfolios of candidates applying for a digital design job that never address that gap in reality. It’s better to honestly state that, yes, this job is outside of your current experience but you are trying to learn and grow as a professional.

Finally, really read the job posting to which you are responding. Many hiring managers (myself included) include small details in the posting that act as a canary in the coal mine. These help employers see which candidate is putting a concerted effort into their communication versus one who is in mass-reply mode. Miss those details and your application gets deleted without hesitation. I know because I’ve done it.

Tip 3: The Medium Is (Part of) the Message

Hiring managers use smart phones. The PDF attachment of your resumé might not be the best way to provide a concise view of your experience. If you don’t believe me, please read this A List Apart article that expounds upon the benefits of a responsive HTML resumé

This technique not only benefits the recipient but you, the candidate. It’s quick to load, easy to update, and shows that you have a passion for communicating appropriately for the medium. Best of all, it shows you respect the time of the potential employer you are courting. Nobody wants to download then pinch-and-zoom a PDF on a 3-inch screen.

A dedication to differentiation is valuable. Like a responsive resumé, consider crafting a password protected webpage curated solely for the potential employer. Everyone wants to feel “special,” employers included. If you’re willing to dedicate your valuable time to constructing a personalized web experience, the employer will notice. The very few times I’ve come across these candidates, they’ve shot right to the top of my list.

Foot, Arm, Leg In the Door

There is no denying the obvious. Talent will always open doors. Yet, an attention to detail and a desire to differentiate yourself all point to two very important facts that are overlooked in the hiring process: an obvious demonstration of caring about the job for which you are applying and taking the pursuit of that role seriously.

Now, get out there and woo some Creative Directors.

Time flies by. Cognition recently crossed its one-hundred-article threshold. While there is nothing particularly newsworthy about this milestone, the interesting fact is that numerous hands cooperate each week to birth a new post. One unique part of this behind-the-scenes magic is the weekly pairing of our author with an in-house illustrator. Editorial illustration, when done well, helps to bring the essence of the article to life via a single, compelling image.

The reality: We have zero budget for hired guns—nor do we inherently know much about editorial illustration. Instead, we’ve always tackled Cognition in a true DIY manner. Our illustrators are Happy Cog employees volunteering to help out. In fact, the only trained illustrator on staff is…wait for it…our Business Development Director, Joe Rinaldi.

Each week, one of our seven illustrators takes a turn in the rotation. To keep the overall effort from being too bureaucratic, each illustrator works directly with the author to discuss the direction for the art. So, how do you craft an editorial illustration process that is decentralized yet still conforms to a consistent art direction? As all designers know, a smart process and specific constraints are your allies.

Constraints for Freedom

Constraint 1: Don’t overwhelm. Large canvases tend to create nervousness. Our image is petite on purpose. That means an increased focus on the idea and less ephemera.

Constraint 2: Offload some of the decisions. We work with a limited color palette. The reduced color options ensure that each illustration will fit in with the entire Cognition family and take that burden off of the illustrators.

Constraint 3: Time is never in abundance. Timeboxing the effort helps to clarify when decisions need to be made or diagnose when a specific step is dragging. A draft of the article is due on Monday, and the illustration needs to be prepped and ready by Wednesday for a Thursday launch. Combine that with normal agency duties, and you can see how crucial it is to be time-efficient. Not all of our illustrators timebox. To better monitor my own efforts, I’ve honed my process to ensure I create (idea to completion) the entire illustration in a three-hour window. Disclaimer: Not every illustration actually hits that mark, but most come close.

The Magic Revealed

Another meaningless milestone: I’ve now contributed 25 illustrations for Cognition (and have had my hand in another 10–12, assisting in the idea or production). Look between the lines again. As a result of all these attempts, I now have a clear process that makes the best use of limited time. Let me divulge the important steps that save me time while I craft the style and form of my illustrations:

Step 1: It’s all about the idea (Tools: pencil, paper, and your mind).

Strong editorial illustration is infused with a core truth about the article it supports. How to actually uncover this didn’t occur to me until I had a conversation with Yesenia Perez-Cruz regarding a lecture she attended by renown illustrators and designers, The Heads of State.

Their concepts are born from trying to combine two separate ideas into a forced connection. The practice of forced connection provides the opportunity to discuss the absurd, impractical, or potentially intriguing results of the mash-up. In order to successfully integrate this approach into my process, I needed a tool— mind mapping.

Listing all of the derivative words and ideas directly (or loosely) tied to the article’s main idea is therapeutic. This list becomes the first visual artifact in finding potential connections and surfacing a concept.

To be honest, this doesn’t always lead to a slam dunk. Often, I need to abandon mind mapping for a day and wait until my mind settles down and begins its own processing work. At least half of my illustration concept epiphanies have occurred in the shower or during the morning commute when my mind was a bit more adrift and relaxed to make that successful connection.

Step 2: Sketch and Layer (Tools: pencil, paper, and scanner)

With a forced connection concept firmly rooted in my brain, I then determine the form the illustration will take. For me, form is directly linked to style. Drawing by hand has become the fastest and most successful method for me to create form.

Rough thumbnails for layout quickly evolve into layered sketches; each object (the background, the foreground, the shadowing) is an individual sketch and scan, so that final compositing is easier and quicker. If I need source material to help me define something, I use stock imagery and rely on tracing paper and a steady hand. The key, though, is to keep the drawing dissected into as many layers as possible.

Step 3: Vectorize (Tools: Photoshop, Illustrator)

I want my illustration assets to be as malleable as possible, so to set myself up for successful compositing, each layer needs to be a vector.

After scanning each sketch, I adjust the levels in Photoshop to ensure a strong contrast, then copy the image into Illustrator. There, the Image Trace tool is my best friend.

It might take some fiddling in the settings to get the result I want, but well-drawn source material should translate clearly. Once I’m happy with the vectorization, I hit Expand to finally render the drawing and make each individual piece selectable. (A few Ungroups are usually necessary.)

For years, this next maneuver eluded me. My knowledge of Illustrator didn’t include the understanding that I could select all objects based on common color or stroke. This crucial part enables manipulation of just the foreground part of the scanned drawing that is now vectorized and gets rid of any negative space fills that are a left over from the Image Tracing.

In Illustrator, I use the Direct Selection tool to select any white elements that have been added automatically during the Image Tracing. The resulting vector object shouldn’t have any shapes or fills that aren’t necessary for compositing. Then, I navigate to the Select menu option and choose Same > Fill & Stroke. This automatically selects all the “white” objects in my vectorized drawing.

Hitting delete never felt better.

The resulting drawing in Illustrator should match what was on my paper. Now, the fun begins.

Step 4: Compositing (Tools: Photoshop)

The final illustration compositing happens in Photoshop. I’m quicker in Photoshop, so it has always been my tool of choice. The transition from AI-to-PSD begins with copying and pasting each scanned object (one by one—not together) into Happy Cog’s preset Photoshop template.

To ensure scalability and easy manipulation of color, I use Shape Layers instead of any of the other objects.

Once in Photoshop, each copied vectorized drawing is its own scalable, colorable element on its own layer. This lets me re-layer or individually manipulate each element. Using ye olde imagination is often rewarded at this juncture. Do not allow yourself to be handcuffed by your original sketches. Manipulating each object and letting happy accidents occur can help shape the final form and bring the illustration to life in ways that often can’t be sketched or planned.

(Note: Want to see the final result? Read Patrick Marsceill’s great article on prototyping)

The Last Draw

Editorial illustrations work an entirely different part of our designer brains. I’m proud of the body of work our team has created in support of Cognition. Yes, it would have been easier to write articles without illustrations or just give all illustrations to one person, but the opportunity to stretch our own skill sets has made us learn and grow.

As a result, we have become better problem solvers. Having the confidence to say, “Hey, I don’t know what I’m doing, but I’m going to learn,” is how we can differentiate ourselves and improve our skills as professionals. Remember, no one is ever an expert when trying something for the first time.

Remember the childhood game of “Telephone”? One person whispers a message into the ear of their friend, and that action is repeated until everyone in attendance has heard and relayed the statement. The last person blurts out to the group what they heard, and, usually, laughter ensues.

Everyone understands why this happens. Translation and less-than-pristine reinterpretation damage the fidelity of the message. There is no copy-and-paste equivalent for verbal storytelling. A photocopy of a photocopy of a photocopy of an image will always render that image indistinguishable from the original.

Unfortunately, the waterfall web design process and “Telephone” are similar, and too much valuable, primary research (in this case stakeholder interviews) ends up being reinterpreted to the point that the original sentiment and answers are lost. The process of conducting and then documenting stakeholder interviews can keep a team at an arm’s length from a project. Instead, place designers and developers closer to the project discovery and research phase. Maintaining the fidelity of the research helps our team craft the best user experience possible. While not everyone has a background in research, anyone can conduct a stakeholder interview.

The barrier to entry might be lower than you think. In the last 12 months, I’ve had to go from interviewer novice to Charlie Rose as the Happy Cog research process was revamped. Being thrown into the deep end of the pool has forced me to recognize quickly some of the more important aspects that make an interview successful. The following tips guide how I plan for and conduct any stakeholder interviews.

(Note: At Happy Cog, we work with our clients to determine what defines a “stakeholder” of the project. Stakeholders may just include the core members of a client team or can extend to content owners, key opinion leaders, potential audience types, users, etc. These interviews tend to take 30 to 60 minutes and are typically conducted by phone. To ensure our interviewee can focus on conducting the interview, a project manager captures notes from the call, and from time to time, we also record interviews.)

The script matters.

“Do you know how to have a conversation? Then you can conduct an interview.”
— Michael Johnson, Design Director at Happy Cog

Having the “gift of gab” doesn’t mean you can skimp on drafting a well-structured script for the interview. A strong interview script works from the general (big-picture project goals) to the specific (role-based concerns regarding features and functionality.) Start with the basics to get the interviewee comfortable. Ask about their role on the project and how they see themselves providing value. Allow interviewees to talk about themselves in their own words. Build confidence in the interviewee that their vision matters, because it does.

Once you outline the easy questions, work backwards. Consider the goals of the project and the goals set forth by the client. What questions will help you learn more about how this interviewee can help articulate the path to success? Always consider the uniqueness of the interviewee’s position and role on the project when deciding appropriate questions.

But, sometimes the script doesn’t matter.

Yes, the script is important, but it shouldn’t be carved out of stone. Just because questions are in a specific order shouldn’t dictate how the interview is conducted. Let the natural flow of the conversation govern the order in which you ask questions. Be cognizant of the topical threads in the answers the interviewee provides; look for the right moments to shift to a question in the script that might keep that narrative thread intact. Mentally check off the questions as you go, ensuring you still cover everything the session demands.

Prepare appropriately. Know who you are interviewing.

Knowing the right way to version the script means the interviewer must do some homework. Set yourself up for success by spending a brief amount of time familiarizing yourself with who you are interviewing and their role. This shouldn’t be a research project unto itself; a quick Google search should suffice. Don’t make the mistake of asking a question that exposes a lack of preparation. The same questions won’t apply to the Dean of the College and a prospective student. Respect the time that the interviewee is providing by making sure you aren’t asking questions that aren’t relevant.

Consider the difference between these two questions:

“What are the most important types of information on yourwebsite.com?”

Versus:

“As the VP of Marketing, how do you use yourwebsite.com to accomplish your team’s goals?”

While the purpose is the same, the second question is much more personable for our fictional VP of Marketing to highlight what types of content are valuable specifically to her and her team. Awkward bulleted-list responses can halt momentum in a productive interview. Avoid the inevitable “umms” found in responses from question #1, and, instead, focus on prompts that will promote free-flowing feedback. Let the interviewee be the storyteller.

Don’t be a robot.

Interviews should be a conversation, not an interrogation. Levity is not a bad thing. The conveyed expression in the interviewer’s voice, the manner in how questions are delivered, how introductions occur and the ice is broken—these all create an “air” enveloping the interview situation. Address this head-on. It starts with the tone in your voice. Keep it happy, upbeat, and generally interested. Let the interviewee know you are a blank slate, ready to learn. Not only does this help establish a more relaxing environment, but it also empowers the interviewee, letting them feel that their input is valuable and that their answers aren’t just checking off a compulsory check box in the project process.

Actually listen.

The best interviews often go completely off-script. Why does this happen? A topic or comment by the interviewee often leads to follow-up questions that can never be predicted. That can only happen if the interviewer is actually listening to the answers and not mentally multitasking. Listen for cues for follow-up questions. Never be afraid to ask “why?” Get comfortable asking for the interviewee to clarify an answer. You should be trying to get the best answers, not just the answers you expect.

Don’t have the last word.

End the interview with some humility. An hour-long conversation can never capture everything that the interviewee can contribute or exhaust their thoughts regarding a project. Quite often, they have more to say. To open a window for this last bit of insight, let the final question be phrased like this:

“What haven’t we asked you today that you think would be valuable for us to know?”

This allows them to shift the conversation to anything they find valuable that hasn’t been addressed yet.

Opt in to being better informed.

“Being able to tailor questions to different stakeholders based on their unique roles and goals gave me firsthand insights that I couldn’t (and didn’t) get from just reading requirements documents.”
–Yesenia Perez-Cruz, Designer at Happy Cog

Being closer to a project’s research phase can be beneficial to the design process. Working in a small(er) agency, UX often falls on the shoulders of more than one person or team. Use this as an advantage. I’ve never heard a designer or developer state “I want to know less about this project.”

Having firsthand exposure to what stakeholders are saying creates less chances for those findings to be watered down. Put an end to whisper-down-the-lane requirements and tactics. Keep what is learned in the interview intact by removing extraneous voices and filters from the process. Consequently, designers and developers can have more of a say in the overall project strategy and design process. Intimacy in the research phase instills project ownership. Ownership is an investment that will manifest itself in the project quality.

Everyone wins.

Almost four years ago, I wrote a Cognition post about my Rule of Threes. In it, I explained that pushing a design effort far enough often resulted in stronger, better-conceived, and more thoroughly vetted solutions. If you didn’t read the article, let me give you a quick recap:

At the conclusion of the information architecture phase, multiple designers worked in unison to evolve three unique design concepts. Each effort was aimed at different, but agreed upon goals. By varying art direction, user-interface interpretation, and content prioritization, the Rule stressed designing a “range” of static mock-up solutions to present to a client. Whichever concept garnered the most attention became the “base model” that was iterated on and drove the overall look and feel moving forward.

Then, along came RWD.

Faster than you could resize a browser, the Rule of Threes morphed into a ball and chain shackled to an already-stressed project budget. Even before RWD, the cost of three staff members dedicated to designing three full-fidelity Photoshop compositions was pricey. But, the big kicker: Static JPGs aren’t responsive. Clients inevitably ask, “What does it look like on mobile?” MOAR PHOTOSHOP isn’t a viable strategy. We can’t “comp” our way to a true solution. Instead, we needed to cash in all those hours spent perfecting pixels on a process with a higher return on investment.

As a result, the Rule became a frequent time and budget casualty. We needed to arrive at solutions faster. Our methods for getting to those solutions had to adapt, as well. Style/mood boards, benchmarking discussions, art direction worksheets, interactive prototypes, visual inventories, and pattern libraries all rushed in to fill the void those pristine Photoshop comps left.

Honing our RWD processes cannot mean we forgo exploration. The need for critical thinking hasn’t changed. The need for purposeful critique hasn’t changed.

Do we still have “ideas” in a world where preset patterns have proliferated? The Rule secretly did something really, really well: It provided the designer a safe zone to explore. In that space, a work-in-progress experience was more malleable. Risks could be taken. Ideas became conversation starters. “Skinning” a wireframe was never an option. Instead, the Rule incubated an honest evolution of the wireframe. Uninterrupted space to think meant room to grow ideas.

Thankfully, RWD is a team sport. If we aren’t going to invoke the Rule, we should honor what it provided. Responsibility for “design” should be shouldered across multiple roles and disciplines; our content strategists, designers, and developers need moments to pause and reflect. Look back at your recent RWD project and ask yourself these questions:

• Were there purposeful pauses that allowed inspiration to sneak in?
• If so, where and when did innovative thinking occur, and who was responsible for whatever “that” was?
• Did you truly scrutinize the problem and recommend the appropriate solution to your clients or did the outcome just repurpose an existing idea?
• Do you have an internal design critique process, and is it providing value?

Others out there are starting to question outcomes too. Elliot Jay Stocks reiterated his 2007 call-to-arms in a recent article for CreativeBloq. He reminds us that, “as designers, we need to consider exactly why we’re making specific design choices. We shouldn’t be blindly following current trends.”

Yet, to reject trends, you have to make sure your process provides space to do so. Where is that quiet, reflective time? At what point in your process does someone speak up and say, “Hey, is this the best we can do?” As our industry scrambles to start writing code earlier in the process and refine later (if at all), let’s not usher in a generation of design staleness.

Let’s not slip into a RWD limbo.

When it comes to conducting a well-orchestrated design presentation, having prior presentation experience is a false measuring stick for success. Preparedness, not experience, actually breeds the confidence needed.

“Are you ready?” Klaus asked finally.
“No,” Sunny answered.
“Me neither,” Violet said, “but if we wait until we’re ready we’ll be waiting for the rest of our lives, Let’s go.”
– Lemony Snicket, The Ersatz Elevator

Like Violet states, you can’t wait for the perfect moment or the deserving job title to feel comfortable presenting work to clients. To help nudge you out of the nest, I’ve culled these personal tips for anyone who has to stand up in front of an audience and talk about design fluently and with confidence.

1. Reestablish the past

History matters. Each step in our design process is informed by something that preceded it. Provide a quick recap or overview of the key findings that informed your current artifact. We live and breathe our projects day in, day out. Most of our stakeholders don’t. Help put them in the frame of mind that enables them to feel informed. Serialized TV show producers understand this. Even though the show ended years ago, I still can’t get the “Last week on LOST…” episode bumper voiceover out of my head.

2. Establish the goals

Make sure everyone in attendance understands the purpose of the meeting as well as the expected outcomes. We shouldn’t assume all participants know the boundaries they are supposed to stay within. Even though this likely will occur prior to the meeting, it always helps to quickly reinforce why everyone has gathered and the agenda for the time you’ll be spending together.

3. Create parameters

Illustrate what should and shouldn’t be focused on. If you want participants to home in on a specific aspect of a design, be sure to delineate what’s “in play” and what’s “out of bounds.” Also, creating parameters is a great way to highlight specific aspects of your work that need further feedback. If you are in the middle of a design process, remind participants of what might have already been decided upon at an earlier phase.

4. Provide guidelines

No one is born a helpful critiquer. Don’t assume that all stakeholders know how to be productive in a critique situation. Coach them. Provide specific questions that the attendees can use as a lens for their feedback. (E.g. “Does the design execute the brand guidelines appropriately?) This is especially helpful for large-group scenarios. Make sure your first questions isn’t, “Well, what do you think?”

5. Illuminate reasons

Discuss qualities of the work that go deeper than the veneer. Everything that is baked into a design needs to have a backstory and purpose. Put yourself in the shoes of the participants. What do they care about? What information will make them respond critically to your presentation? What are the questions that you know they will ask? Tailor your presentation to get ahead of these inquiries. Provide the context of how decisions were made, and you’ll avoid talking about the surface-level qualities.

6. Reiterate language

Mine the kickoff meeting, benchmarking, documentation, and interviews for specific points that are worth unearthing to validate design decisions. If it makes sense, draw attention to specific participants in the design process who have contributed exemplary feedback—especially if they are attendees. Doing so demonstrates to stakeholders that design is as much about listening as it is about creating.

7. Express excitement

Talking about your project might be the highlight of an attendee’s day. Make sure to exhibit that excitement back to them. Yes, not all projects are the same. Demonstrate you care to attendees by the tone of your voice, your body language, and the general fluency you have about the project. Clients deserve the same level of excitement from designers regardless if it’s a project for Disney World or dandruff shampoo.

Being properly prepared for a design presentation (or any presentation) can remind your clients why you were hired. Don’t let titles or a lack of experience hold you back from being able to talk about design with confidence. Take the leap, but meticulously and thoroughly pack your parachute.