You are reading an article. Lots more of these in the archives. Matt Brown Meet Matt Arrow

Articles

33Comment Retweet

Discovering Trustworthiness

Mar 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

Become Strategic

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?”

What is the What?

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.

Design the Dialog

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.

Early discovery

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.

Jive Time Records

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.

Visual Discovery

Armed with what I thought was a successful discovery process, I dove straight into design.

Getting Lost

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.

First Design Comps

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.

Hitting Reboot

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.

Sites I Trust

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:

Final Ad

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.

Follow the Conversation

33 comments so far. You should leave one, too.

Kevin Kevin said on Mar 10, 2010

Thanks for this article, very insightful look at the end-to-end process behind creating a beautiful and functional site.

Jono Jono said on Mar 10, 2010

A nice, refreshing read. I even like the way you''ve applied a magical "what" to this comment form - walking the walk with the "Your Favorite Alias or Email," brilliant!

I don''t have to put in my email?...I have a choice of Alias or Email?...I can trust that.

Offbeatmammal Offbeatmammal said on Mar 10, 2010

I love the redesign, and the glimpse behind the curtains of the process... but all I was really looking for was a decent rounded corners sample! you have no rounded corners. storms off in a huff ;)

Matt Brown Matt Brown said on Mar 10, 2010

Kevin, Jono, Offbeatmammal — Thanks!

leah leah said on Mar 11, 2010

Enjoyed the article. A lot of times I have to get that first design out of my system to really start the visual discussion of what''s needed and what won''t work. Nice work on the redesign.

chris said on Mar 11, 2010

Speak your mind, but please--be kind
Very interesting.
It''s getting harder to find serious design blogs/articles these days - it''s almost becoming old school dare I say.
Keep up the good work!

Liz Gebhardt Liz Gebhardt said on Mar 11, 2010

Well written post, and I just want to recommend some complimentary material. BJ Fogg from Stanford also has some interesting things to say about the design process and Web trustworthiness/credibility in his book "Persuasive Technology" (see pages 156-157 in particular). His structure is: Perceived trustworthiness of site (unbiased/fair/honest) + Perceived expertise of site (knowledge/experience/intelligence) = Perceived credibility of site (ability to change people''s attitudes and behaviors)

His site : http://www.bjfogg.com/
The book: http://www.amazon.com/Persuasive-Technology-Computers-Interactive-Technologies/dp/1558606432/ref=sr_1_4?ie=UTF8&s=books&qid=1268340913&sr=1-4

Philippe Alves Philippe Alves said on Mar 11, 2010

I''ve often been mistaken on the true "what" question. I would have answered by the content the site should have and not the problem it should solve. I knew there was something wrong and it had to do with somehow the purpose of the website (or my creativity, which would be dreadful). Now I understand what I was missing.

Rian said on Mar 12, 2010

Thanks for this - I really like these real-world case studies and always learn a lot from them.

One question. Unless I missed something, you appear to have moved straight from Discovery to Visual Design, skipping the wireframe step. Was that a conscious decision? Can you talk more about why you did that? Time constraints, not needed, etc.?

Matt Brown Matt Brown said on Mar 12, 2010

Rian — Good observation. I should have made this more clear in my piece — I was working from a complete IA phase with full wireframes from the client. Check out, The Future of Wireframes [http://visitmix.com/Articles/The-Future-of-Wireframes].

Adam Blodgett Adam Blodgett said on Mar 16, 2010

Matt,

Thank you for the articulate and earnest article. I''ve been searching for a way to begin to articulate what wasn''t working well with my design process, and your article did a great job of helping me clarify that.

I''m also intrigued by the idea of using trust to gain trust. A site that trusts me to do the right thing is a site that I will trust in return, a site that fulfills my expectations, both in terms of easy access to information and reliable code serving up reliable pages full of reliable content, will be one I trust and come back to. Happily, the trustworthiness that you''ve imbued your code with is equally reflected in the content you created for the site.

A.

Jon Keefe Jon Keefe said on Mar 23, 2010

Great article I noticed you mentioned you use Basecamp. You should try http://www.bctoolkit.com and you can get productivity metrics form Basecamp data like time spent vs time estimated on projects.
Good Luck
Jon

Cristian Cristian said on Mar 23, 2010

I just stumbled across your site browsing CSSRemix. Great piece! And it is agreed that the initial questions of any design process are the most important. All the foundations of the project are laid out here. A decent web design with a good strategy will surpass and outlive a great design with poor strategy. Always.

Catriona Bache Catriona Bache said on Mar 23, 2010

y0

Jeffrey F. Jeffrey F. said on Mar 26, 2010

Thank you for the well organized and friendly article you wrote. Honestly, I tried to stick with you and read the whole thing. Your style, in this article, is very welcoming. But, alas, I couldn''t. Through no fault of yours I might add. I love the internet. I''m addicted, and I don''t care who knows I''m an addict! =), I love technology. Being able to be mobile with my technology allows me to integrate everything that comes with it, i.e., internet, social networking, texting, watching videos on the go, listening to internet based radio anywhere my phone gets reception, etc., etc., etc., into my life pretty smoothly, thus supplying my fix, and keeping me hooked. When it comes to how everything is built behind the scenes, eh, that''s when my eyes gloss over. I''m very grateful for all the techies out there that toil away at computer screens and keyboards, designing this cool shit. I''ve never received any education in code. Nothing even close, I just get lost. Thank you though, I look forward to what else you will be writing in the future. Seeing your face, at the beginning of a post adds to the attraction of the headline . . . significantly ; ) Thanks Matt . . . Jeff . . .

Jeffrey F. Jeffrey F. said on Mar 26, 2010

I remembered why I was looking through here in the first place, right after commenting, haha. Is anyone familiar with, Microsoft''s .NET Framework, extension for Firefox? What is it, and why is it there? I checked Mozilla''s extension site, no help. You would have thought Microsoft was a politician, and the Firefox users are effectively comparable to the recent "tea baggers" "protest", in their use of racial slurs, and homophobic remarks. The Firefox users have effected what amounts to digitally spitting in someone''s face, with the comments and ratings. When I last checked, I believe that particular 3rd party extension was rated perhaps, a two? I''m not sure what I should do, I''m very tempted to remove the extension, because of the very reasons that are being cited on that forum. But the actions, and the words those posters where using spread hate, and I will never be swayed by hate . . . as, again, I am unable to locate the answer to my query, I''m hopeful someone knowledgeable would be able to guide me? What''s your advice? What are/where your experiences with this add on? I want to thank anyone before hand that takes the time to at least read this. Again, I apologize for being so off topic. I''m just banking on someone that''s familiar with extensions, and such, coming across this, and being able to lend a hand. I''m assuming that this would be a good bet.

goodenough! said on Apr 1, 2010

I''ve been consuming the articles on the redesign process tirelessly.

The amount of honesty and transparency in the articles (and site design) is incredible. It''s a monument.

Keep doing what your doing, you''ve got me hooked.

ahmet maranki ahmet maranki said on May 1, 2010

Great article I noticed you mentioned you use Basecamp. You should try http://www.bctoolkit.com and you can get productivity metrics form Basecamp data like time spent vs time estimated on projects...

orjin krem orjin krem said on Aug 22, 2010

The Firefox users have effected what amounts to digitally spitting in someone’s face, with the comments and ratings.

the dreamer the dreamer said on Oct 5, 2010

Great article I noticed you mentioned you use Basecamp. You should try http://www.bctoolkit.com and you can get productivity metrics form Basecamp data like time spent vs time estimated on projects.
Good Luck
Jon

the dreamer the dreamer said on Oct 5, 2010

Great article I noticed you mentioned you use Basecamp. You should try http://www.bctoolkit.com and you can get productivity metrics form Basecamp data like time spent vs time estimated on projects.
Good Luck
Jon

kinect xbox elite said on Nov 17, 2010

Usually when I''m designing, I also take into account monetizing and optimizing for search engines...

blog stroke blog stroke said on Nov 21, 2010

web designing is not an easy task. always go for good people and test before buying it

sekreter sekreter said on Dec 4, 2010

Yes not easy

nkharwar007@gmail.com said on Dec 6, 2010

I love the redesign, and the glimpse behind the curtains of the process… but all I was really looking for was a decent rounded corners sample! you have no rounded corners. storms off in a huff ;)

Career Aptitude Test Career Aptitude Test said on Jan 13, 2011

A successful desing is half success of a website I''d say. I saw plenty search engine optimized sites with low quality designs and must admit it just doesn''t build trust

Ed

tv ürünleri said on Jan 18, 2011

I just stumbled across your site browsing CSSRemix. Great piece! And it is agreed that the initial questions of any design process are the most important. All the foundations of the project are laid out here. A decent web design with a good strategy will surpass and outlive a great design with poor strategy. Always.

tv ürünleri said on Jan 19, 2011

Usually when I’m designing, I also take into account monetizing and optimizing for search engines…

altin çilek said on Jan 23, 2011

I just stumbled across your site browsing CSSRemix. Great piece! And it is agreed that the initial questions of any design process are the most important. All the foundations of the project are laid out here. A decent web design with a good strategy will surpass and outlive a great design with poor strategy. Always.

tütüne son set said on Feb 20, 2011

I love the redesign, and the glimpse behind the curtains of the process… but all I was really looking for was a decent rounded corners sample! you have no rounded corners. storms off in a huff ;)

Mucize iksirler Mucize iksirler said on Mar 18, 2011

I love the redesign, and the glimpse behind the curtains of the process… but all I was really looking for was a decent rounded corners sample! you have no rounded corners. storms off in a huff ;)

anj said on Mar 15, 2012

Thanks for this, Matt. As a fledgling interaction designer in a developing country, it's been difficult to find real-life process-based advice to guide my work. Your article (and this series) helps so much. It's insightful and comprehensive. Congratulations to your team!

Jordan Retro 11 said on May 22, 2012

Thank you for your well-thought content. I'm really at perform proper now! So I ought to go off with no reading through all I'd like. But, I place your web site on my RSS feed in order that I can read mor