Discovering TrustworthinessMar 10, 2010 In Design By Matt Brown
These days, one thing web designers don't have to worry about is how to do something. And by something, I mean just about anything
Want a subtle, rounded-corner effect that’s compatible in modern browsers? You’ll find a dozen tutorials to show you the way. Need a flexible CSS framework that supports hundreds of layouts? There are at least three, all with strong developer communities. IE float issues? Google ‘em. In many ways, the internet itself now provides answers to nearly all our implementation questions. We’ll never be scratching our heads wondering how? anytime soon.
And yet even today, it remains enormously difficult to design and launch a successful, well-designed website. Why? Because design is about much more than tactics and implementation. It’s about answering the what question-aka, what’s the problem we’re trying to solve? It’s about finding the core question that frames a project.
In this article, I’ll detail the design process I used for the MIX Online re-design and show how open communication, flexibility in your design approach and a thoughtful discovery phase can help you solve the what question—even when the process gets stuck.
This article is part IV in a series covering the topic of Web Design. Check out Part I—The Anatomy of Web Design, part II—The Future of Wireframes, and part III—A Common Sense Content Strategy. Evan Sharp will contribute the final article. Follow us on Twitter or subscribe to our RSS feed to be notified of the publication of the remaining articles in this series.
What is the What: Understanding Strategy
Most design projects can be split into two basic parts: strategy and execution. Defined broadly, strategy is everything you do (the questions you ask,discussions you have,and research you undertake) before the ‘real work’ (hours in Photoshop, lonely nights in Textmate) begin. Designers obsess over execution, but it’s really the mysterious, conceptual beginnings of a design that determine its success or failure.
Before I go any further, I should note that neither phase is more important than the other. Answering what and how are both essential to producing a complete work. As any disciplined designer will tell you, a great idea or novel concept is nothing without proper execution. In short, the details still count.
However, framing the strategic what is perhaps the more difficult of the two questions. For one, it must be answered first, before the design production begins. You can’t begin designing a site without a cohesive plan and understanding of the problem you’re trying to solve. And even before the strategy can be devised, the problem itself has to be framed: “What is it we’re doing?”
So then, how do we figure out where to start? The answer is as simple as it is maddening: discuss the project to death. This discussion is often called the client discovery phase and as you may have guessed, it’s a vital part of the design process.
Client Discovery: Finding The Truth
The early meetings and conversations with your client are the most instructive. Ideally, everyone is open-minded and prepared to help you isolate and frame the what question based on business goals, technical requirements and constraints.
And yet, it’s quite difficult to find the core of the problem. Often, clients rigorously promote a solution they want to explore, even if it doesn’t address the true goal. Other times, they’re unable to express what makes their business or organization special. Even the best clients can be ‘noisy’ in early meetings—eager to give you all the information, even when you don’t need it.
So how do you find the truth?
The short answer is: ask good questions. Unfortunately, this can be tricky. While it’s easy to compile as much information as possible and take your client’s answers at face value, it’s far more difficult to identify a what question that generates useful, concrete answers—and leads to a design strategy.
A good discovery process goes far beyond the ‘easy’ questions. In fact, you’ll probably have to design the dialogue itself and constantly come up with fresh, nuanced ways of shaping the conversation in order to get good answers.
Here are a few questioning techniques that have helped me get good answers.
- Give constraints. Instead of asking for free-wheeling, copy-and-paste answers to your questions, ask clients to limit their response to a tweet-length paragraph. This forces them to cut to the chase and reframe their ideas.
- Fill in the blanks. Sometimes just answering a question isn’t enough. Framing questions as ‘fill-in-the-blank sentences’ (e.g. “We started ‘oursite.com’ because we wanted to _____”) may generate more detailed and nuanced answers.
- Adjective dump. Many clients have a hard time expressing style, tone and visual concepts in complete paragraphs. I usually ask them to list adjectives that describe how they want the final site to feel.
- Ask again. Sometimes, asking the same question multiple times is the only way to get the answer you need. If you’re unclear what your client meant or don’t know what to do with a particular answer, ask again.
All of these questioning methods force the client to think and act differently. Instead of eliciting a regurgitation of the RFP, they manipulate in a good way, forcing the client pay attention to the ‘goals behind the goals.’ This extra mental effort can help reveal deeper problems and clearer answers.
Once you’ve settled on a key question or problem to frame your design process, you can move into a collaborative, visual discovery phase. In visual discovery, you link the the problem (what) with potential solutions (hows).
Design Discovery: Try Before You Buy
Transitioning from discovery straight into design can be a dangerous undertaking, because it’s difficult to directly translate the what question into full solutions (layout, type, illustration). The result is often that your client commits to a design direction before the time is right. And when that happens, things get rigid and costly to change in a hurry.
That’s why it’s best to work in an organic visual discovery phase that addresses the how, but keeps your process open and flexible.
Visual Research: Go Outside to Get Creative
Trolling a well-stocked RSS reader packed with CSS design galleries will only get you so far. To find real inspiration, you’ll need to get out of your comfort zone and away from your computer. The web is a great place, but so is the rest of the world—you just need to get outside to see it.
My most successful designs have been inspired BY any, simple, it, you, much, possible, ‘fill-in-the-blank, part, mentioned, well, the, discovery, a, much, Ihe freedom and mental space to “take things personally” and to successfully address both the what and the how?
It wasn’t easy, but here’s how I managed to do it.
Our initial client discovery sessions were short and sweet because we needed to move the project along quickly. Despite this, our talks produced some clear and actionable goals.
The new site would have to be:
- Bold, distinctive, and unique. The space for design-focused, community-based web journals is crowded, and the new site needed to be strong and iconic enough to stand out.
- Repositioned towards a larger audience. The previous design catered mainly to a technical crowd, not to designers. To appeal to this group, the design needed to be high-quality and trustworthy, and the content needed to be front-and-center, easier to read and presented in an engaging way.
With these two goals in mind, I proceeded with visual design. I was immediately drawn into the “bold, distinctive, unique” problem, and sought out ways to push the design forward.
Finding non-internet inspiration was helpful in these early stages. At the time, I’d recently picked up a turntable and had been making trips to Jive Time Records in Fremont. They had a mini-exhibition of a mid-60′s era jazz album covers up, with playful, inspiring dot and circle patterns that were unlike anything I’d seen on the web. I explored this motif, as well as the 80′s fashion resurgence, which featured similar bold bold colors, shapes and textures.
Although I didn’t present formal moodboards in this project because of our time constraints, Nishant and I reviewed these stylistic samples on Basecamp. Everything was right up his alley—the new site would be bold, colorful, and exciting. We agreed on a general art direction.
Armed with what I thought was a successful discovery process, I dove straight into design.
As discovery transitions into design, it’s easy to become obsessed with a specific idea or question at the expense of the larger, overarching what—the big picture. Unfortunately, this is exactly what I did with my first designs.
My early design comps were a too-literal rendering of the “bold, distinctive, unique” concept we’d talked about in visual discovery. Sure, there were dots and circles. Yep, there were the angled shapes hinting at Vignelli’s NYC Subway map from the early 70′s. All the designs had plenty of functional whitespace, and the layout brought everything together.
But none of these directions were working. The problem, I soon find out, was simple. The work didn’t address the larger goal of the project: repositioning MIX as a premier design journal. Instead, these designs merely refreshed the existing visual style.
While our project was slipping into shaky territory, I started trolling back through our early discovery talks, looking for goals I might have missed.
In one of our earliest threads, Nishant and I had discussed that the new site needed to feel “trustworthy.” Now that was an awesome concept, and one I’d glossed over in my first design. Right away I was hooked on figuring out how to make MIX a trusted publication.
I backtracked into discovery again, and started researching a handful of sites that I personally trusted—A List Apart, GOOD Magazine, The Morning News, and McSweeney’s. Of course, good content is the core foundation of these websites, but I started to see common design patterns emerge too—great art and illustration, warm and inviting color palettes, serif type, and a sense of detail and the unexpected (like Kevin Cornell’s always-awesome illustrations).
More than anything, though, these sites were proud of and focused on their content. The interface was built for the content; all other design elements played a supporting role.
That night, I sat down and created a fresh design based on the idea of showcasing MIX’s wonderful content and gaining designers’ trust. What I came up with was this:
Notice the clear and literary (yet playful) typography, the bold color circles that expose the brand concept of mixing, and the attention to detail in the microcopy illustrations: this is how I rendered the concept of trustworthiness.
Whereas my initial failed attempt had taken days, I created this design in a single sitting. I knew it was the right direction for the site.
Although we ran into snags getting sign off (these were related to how I’d pitched the earlier failed attempt, which you can read about in Nishant’s article), the trustworthy design ended up being the direction MIX chose, because it addressed the important questions.
Be Open to Answering “What?”
If you’ve read to here, you’ll notice that I haven’t touched on many technical details of my design. I intentionally left out what 16-column grid I used, the rationale for my type choices, what applications I used to layout the elements, and how I crafted my drop shadows for a reason: I don’t think tactical choices are the most interesting part of the story.
The real story behind the MIX Online redesign was how answering the right core question—the what—through a discovery-focused process made the whole thing come together. In addition to this, continuing to search for the what, even when I got off-course, is what lead me to a successful design.
In all my projects, I’ve noticed that more discussion, careful questions and true exploration have made the process more fun and successful.
In the excellent book “Art Direction Explained, At Last!,” designer Marco Fielder had this to say on the subject of strategy:
The what of a thing is very important to us. We try to find the clearest answer to this simple question. We never stop short of it. We push and push until we know for sure. Once we’ve got it, our design work becomes easy.
When you’re in the right mindset and focused on the core problems, the details of a design are far more likely to just “fall into place.” I hope you enjoy the new visitmix.com as much as I enjoyed designing it.
Stay tuned for Evan Sharp’s writeup of the absolute rock-solid HTML/css templates he created to bring my designs to life.