<?xml version="1.0" encoding="utf-8"?>
<feed version="0.3" xmlns="http://purl.org/atom/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xml:lang="en">
<title>Mule Design : Off the Hoof</title>
<link rel="alternate" type="text/html" href="http://weblog.muledesign.com/" />
<modified>2010-08-30T17:31:39Z</modified>
<tagline></tagline>
<id>tag:weblog.muledesign.com,2010://2</id>
<generator url="http://www.movabletype.org/" version="3.36">Movable Type</generator>
<copyright>Copyright (c) 2010, Mike Monteiro</copyright>
<entry>
<title>Presenting Design Like You Get Paid For It</title>
<link rel="alternate" type="text/html" href="http://weblog.muledesign.com/2010/08/presenting_design_like_you_get.php" />
<modified>2010-08-30T17:31:39Z</modified>
<issued>2010-08-30T16:29:21Z</issued>
<id>tag:weblog.muledesign.com,2010://2.346</id>
<created>2010-08-30T16:29:21Z</created>
<summary type="text/plain"> Welcome back. In my last post, I wrote about buying design. That was mostly for potential clients, but a designer might learn a thing or two from it as well. Now, let’s imagine that you’ve been lucky and good...</summary>
<author>
<name>Mike Monteiro</name>

<email>mike@muledesign.com</email>
</author>
<dc:subject>Design</dc:subject>
<content type="text/html" mode="escaped" xml:lang="en" xml:base="http://weblog.muledesign.com/">
<![CDATA[<p><img alt="presentingdesign.jpg" src="http://weblog.muledesign.com/presentingdesign.jpg" width="670" height="220" /></p>

<p>Welcome back.</p>

<p>In my last post, I wrote about <a href="http://weblog.muledesign.com/2010/08/tips_on_buying_design.php">buying design</a>. That was mostly for potential clients, but a designer might learn a thing or two from it as well. Now, let’s imagine that you’ve been lucky and good enough (It takes both, chum.) to sell your services to someone. You’re now in the position to solve some design problems and present those solutions like you’re getting paid for it (which you are).</p>

<p>I’ve been presenting design to clients and internal teams for a long time (Bush senior in the White House when I started), and I still get anxious about it. It may have been a while since I’ve thrown up in a client’s bathroom and washed off next to the person I’d eventually be presenting to, sure, but I still get nerves. The only thing that’s changed is I’ve gotten through enough presentations to I know I can do it.</p>

<p>Along the way I’ve picked up a few helpful tips that may help designers as well as clients to know what to expect during a presentation. Bear in mind that this works for me. It’s A way and not THE way, and all dogmatic systems that suggest the contrary are bullshit. Happy place.</p>
]]>
<![CDATA[<h3>Don’t Fake It</h3>

<p>Early in Mule’s existence, I learned an incredible lesson from a client. He cancelled an hour before we were to give a presentation, because a job they’d been preparing for one of their clients wasn’t up to his standard of quality.</p>

<p>Be ready to impress. If you aren’t ready, postpone until you are.</p>

<p>Yes, rescheduling is a pain in the ass. But it can be handled properly and is much easier to recover from than walking into a presentation with anything less than quality. Could you wing it? Possibly once or twice, maybe more even. Every good designer should be a little Don Draper in the boardroom. But your clients aren’t paying you to wing it. Treat them with more respect than that.</p>

<p>So what do you tell them? Tell them the truth. “I need to postpone this presentation because the work’s not at the level I’d like it to be and I don’t want to waste your time.” Then buy your project manager a really big fucking cookie. In the end, it’s easier to recover from rescheduling a presentation than from bombing. If you have the right sort of client, you may even gain more of their respect. You know&#8230;the first time, which is best if it’s the only time.</p>

<h3>It’s Not Going to Sell Itself. Ever.</h3>

<p>The biggest myth ever perpetuated in the design field is that good design sells itself. Design can’t speak for itself any more than a tamale can take off its own husk. You’re presenting a solution to a business problem, and you’re presenting it as an advocate for the end users (we hope). The client needs to know that you’ve studied the problem, understood its complexities, and are working from that understanding.</p>

<p>Stop trying to get your clients to “understand design” and show them that you understand what they hired you to do. Explain how the choices you’ve made will make them more successful. This isn’t magic. It’s math. Show your work. Don’t HOPE someone “gets it”, and don’t blame them if they don’t — convince them.</p>

<p>(Related: Stop complaining your parents don’t get YOU, and attempt to understand them. That is the sort of empathy that will help you as a designer.)</p>

<h3>Present Your Own Work</h3>

<p>Being able to present your own work is a core design skill. If you’re working at an agency that won’t let you present your own work, get the hell out.</p>

<h3>Don’t Let It Get Subjective</h3>

<p>Before presenting your work, reiterate the goals of the project. Reiterate the research findings. Reiterate how you agreed to solve those goals. And explain how what you’re about to show does that. Structure the discussion so that it’s about how well the proposed solutions work, whether the client’s voice is coming through, etc. Who cares if someone “likes” it? That’s not going to sell pants. We don’t even care if the target audience “likes” it.  In fact, avoid the word “like” completely. Save it for middle school crushes and focus groups (which are equally applicable to design.)</p>

<h3>Give The Client Permission To Go Negative</h3>

<p>We all suffer at the hands of the current cult of self-esteem. When clients really like you—and particularly when they have demonstrated so with their checkbooks—they can be loathe to say anything negative about your work. Something about “upsetting the sensitive, talented creatives.” This is terrible. Unspoken expectations unmet lead to seething unspoken frustration which ultimately bursts forth in an ugly mess when you’ve run out of budget.</p>

<p>Let them know that negative feedback is an essential part of the process. We prefer constructive and well reasoned negative feedback, but even an outburst of “Never show me that puerile crap again!” saves everyone a lot of time.</p>

<p>At the beginning of every visual design presentation, particularly in the early stages, we give a little speech, some variation of, “Today, we are going to show you some things that may not be right. If you see something that isn’t working, you need to point it out. If you don’t tell us what you think isn’t working, we will show you the same thing again and again until we are out of time and money and you are stuck with it.”</p>

<p>We’ve found this exercise makes everyone a lot more comfortable with the process and saves a lot of time wasted by clients saying “Yeah, that seems fine.” when they’re thinking “That is a pile of puerile crap for our customers to poop on.”</p>

<h3>Don’t Give a Real Estate Tour</h3>

<p>The most obvious sign that a designer is nervous is the real estate tour. You’ve seen this. The presenter will start by telling you where the logo is, describing how it “pops” and then taking you on a guided tour of every element on the page, winding up at the copyright notice in the footer.</p>

<p>Just as you should never spend any energy undermining anything that’ll eventually collapse on itself, don’t waste a client’s time walking them through what they can already see. Your job is to explain how what they’re looking at is the best way to achieve their goals.</p>

<h3>Never Embarrass Your Client. Ever.</h3>

<p>Chances are your direct client reports to someone, someone who may be present for your little show. (Make sure you know this in advance!) Whether this is the CEO, or one of 32 “Executive” VPs, not only is your work under scrutiny, but also your client’s judgment in hiring you. Do your clients a favor. Make them look good. Be prepared. Be honest. Engage them in the conversation and listen to their feedback.</p>

<p>And for the love of God, respect that these are the people putting your kids through orthodonture and put on a clean shirt.</p>
]]>
</content>
</entry>
<entry>
<title>Why We Don&amp;#8217;t Deliver Photoshop Files</title>
<link rel="alternate" type="text/html" href="http://weblog.muledesign.com/2010/08/why_we_dont_deliver_photoshop_files.php" />
<modified>2010-08-30T21:55:47Z</modified>
<issued>2010-08-26T19:34:50Z</issued>
<id>tag:weblog.muledesign.com,2010://2.345</id>
<created>2010-08-26T19:34:50Z</created>
<summary type="text/plain"> Occasionally a potential client will ask us to give them Photoshop comps as the final deliverable, to be coded either by an internal implementation team or a technical partner. We don&amp;#8217;t do that. Here&amp;#8217;s why. A website is code....</summary>
<author>
<name>mccreath</name>
<url>http://dmccreath.org/</url>
<email>david@muledesign.com</email>
</author>
<dc:subject>Design</dc:subject>
<content type="text/html" mode="escaped" xml:lang="en" xml:base="http://weblog.muledesign.com/">
<![CDATA[<p><img alt="Ceci n'est pas une site" title="Ceci n'est pas une site" src="http://weblog.muledesign.com/kramer-vs-kramer.jpg" width="670" height="220" /></p>

<p>Occasionally a potential client will ask us to give them Photoshop comps as the final deliverable, to be coded either by an internal implementation team or a technical partner. We don&#8217;t do that. Here&#8217;s why.</p>

<p>A website is code. Sure, it&#8217;s images and copy, too, and those images and copy are placed in the code only after careful consideration of the client&#8217;s strategy for the site. But a website is code. Even if you just saved all the comps as JPGs and made image maps out of them (funny story there, but later), you still need code to make those image maps work.</p>

<p>Our design process is not short and it is not simple. We spend significant time and effort doing research and visual design before we even get to the code. That process results in a set of sample pages that demonstrate all the pieces of the visual system for the new design. Depending on the project, we&#8217;ll either create all of those pages in Photoshop or do a few in Photoshop and build out the rest in code. But <em>all</em> the comps are delivered as code.</p>

<p>That code is two things: </p>

<ol>
<li>It is the final culmination and proof of all the work that we&#8217;ve done with and on behalf of the client.</li>
<li>It is the basis of a design system that will be used by the implementation team to build the rest of of the site.</li>
</ol>

<p>When we take a website&#8217;s design all the way through code, it means that we have spent the time to test the solutions proposed by our strategy, IA, and visual design work. We have made some potentially difficult decisions about whether a particular aspect illustrated in the PSD can actually be implemented in a way that benefits the site, not just code something because it&#8217;s in the PSDs. </p>

<p>Finally, it ensures that the code that forms the basis of the entire design system and website is clean, conformant, and tested. We don&#8217;t just slice up our PSDs and export them through ImageReady. We code our final pages by hand. What goes in the code is only what should be in the code.</p>

<p>As Mike is fond of saying, &#8220;A PSD is a painting of a website.&#8221; We don&#8217;t spend weeks or months understanding a client&#8217;s complex needs and issues to make them paintings. We spend all that time to solve problems, and paintings don&#8217;t solve problems. They may illustrate potential solutions, but there&#8217;s a lot of room left for interpretation, and that poor interpretation of a solution is often what has led the client to our office in the first place. So we don&#8217;t do it.</p>
]]>


</content>
</entry>
<entry>
<title>&amp;#8220;Working Hours&amp;#8221; Unsucked</title>
<link rel="alternate" type="text/html" href="http://weblog.muledesign.com/2010/08/working_hours_unsucked.php" />
<modified>2010-08-26T19:40:37Z</modified>
<issued>2010-08-26T17:44:25Z</issued>
<id>tag:weblog.muledesign.com,2010://2.344</id>
<created>2010-08-26T17:44:25Z</created>
<summary type="text/plain">I love what I do for a living, and I love the people I work with. We strive to maintain the environment that allows us to have the best time doing the best work. However, every single day a bitter...</summary>
<author>
<name>erika</name>

<email>erika@muledesign.com</email>
</author>
<dc:subject>Unsuck</dc:subject>
<content type="text/html" mode="escaped" xml:lang="en" xml:base="http://weblog.muledesign.com/">
<![CDATA[<p><p><img src="http://muledesign.com/tub/unsuckbug.png" align="right">I love what I do for a living, and I love the people I work with. We strive to maintain the environment that allows us to have the best time doing the best work. </p>

<p>However, every single day a bitter resource war rages in our office. At stake is our precious, finite time. </p>

<p>We each have our own responsibilities and deadlines. It is also essential that we collaborate and communicate with each other throughout the day. Let&#8217;s call these opposing claimants &#8220;work&#8221; and &#8220;meetings&#8221;.</p>

<p>This battle plays out on Google Calendar. When I opened it this morning to assess the state of things, a chipper new feature announcement greeted me:</p>

<p><img alt="workinghours.png" src="http://weblog.muledesign.com/workinghours.png" width="649" height="123" /></p>

<p>At first I was confused, then super annoyed. My &#8220;working hours&#8221; are the times it&#8217;s OK for other people to invite me to events? Oh, heck no. To a person on deadline, a calendar invitation is a hostile land grab. </p>

<p>Even though we do work with a lot of folks in other time zones which can be tricky to track, this is solving the opposite of our thorniest problem. In fact, it is enshrining in the interface just the attitude we are trying to combat, that work is defined by meetings—or, euphemistically, &#8220;events.&#8221; Events are what I attend outside of work.</p>

<p>My working time should belong to me. Please Google, don&#8217;t strip me of that illusion.</p>

<p>A simple change in nomenclature to &#8220;Available to meet&#8221; would feel way more respectful and accurate, and this is the direction we entreat business communication to go. </p>
]]>


</content>
</entry>
<entry>
<title>Strong Voice, Engaged Newsmaking</title>
<link rel="alternate" type="text/html" href="http://weblog.muledesign.com/2010/08/strong_voice_engaged_newsmaker.php" />
<modified>2010-08-19T00:11:56Z</modified>
<issued>2010-08-18T22:05:12Z</issued>
<id>tag:weblog.muledesign.com,2010://2.343</id>
<created>2010-08-18T22:05:12Z</created>
<summary type="text/plain">ColorLines is a publication that deals with racial justice; they analyze race from a political and structural perspective, making news out of elements and forces of society too frequently taken for granted. Saving journalism has been a hot topic for...</summary>
<author>
<name>katiegillum</name>

<email>katie@muledesign.com</email>
</author>
<dc:subject>Projects</dc:subject>
<content type="text/html" mode="escaped" xml:lang="en" xml:base="http://weblog.muledesign.com/">
<![CDATA[<p><a href="http://ColorLines.com">ColorLines</a> is a publication that deals with racial justice; they analyze race from a political and structural perspective, making news out of elements and forces of society too frequently taken for granted. </p>

<p><img alt="colorlines-screenshot.jpg" src="http://weblog.muledesign.com/colorlines-screenshot.jpg" width="680" height="476" /></p>

<p>Saving journalism has been a hot topic for a while now.  And rightly so: newspapers are closing.  Magazines are halting the presses, and people are scrambling to find ways to move traditional publications online.  At Mule we have been working in many different industries to explore some new publishing models, and on the face of it, ColorLines came to us simply to move from a print publication to an online publication.  But since ColorLines works to reframe social issues and uncover the nuances and structures that affect all of our lives, I will be precise.  The ColorLines staff came to Mule to create a website that more actively embodies their strategy for making social change.</p>

<p>As an advocacy focused media maker myself, I have received calls and blasts and bursts about nonprofits and activist groups launching new websites and inviting people to collaboration campaigns.  On more than one occasion, these new initiatives do not support the organization’s mission well or end up looking like little more than thinly veiled requests for other people to make content for them and to increase their traffic.</p>

<p>When first speaking with ColorLines, I was excited not only by their insightful writing grounded in solid research, but also the passion they had for being conversation starters.  ColorLines wants to raise issues and focus discussions on high level structural racism that journalists, filmmakers, and other people with ideas can take to examine further. </p>

<p>It was clear from the beginning that the motivation for this website redesign was not simply to take their writing to a place where the articles would get more readers, but to raise awareness about the structural injustice that many organizations cannot or do not take the time and care to report on.</p>

<p>We needed ColorLines to have the freedom to work in a strong voice and design system that is as authoritative and more insistent than the entrenched forces they are working to uncover. And we wanted to create a website that does not simply encourage commenting or contribution to the ColorLines website but to build a site with tools that allow readers to make connections to other media outlets or add their own take while keeping the context of racial justice at the forefront.   To focus on those active newsmakers that ColorLines partners with, we focused on understanding the writers so we could design a site that can inform and galvanize people but is also just a really attractive place to have your work published.  </p>

<p>The subtle developments on the publishing and community-building model made working with ColorLines an interesting design problem, but it was the importance of communicating their specific mission to reset the dialogue about racial justice from the level of the personal to the structural that made me so excited about the project and turned me into an enthusiastic regular reader and community member.  We take projects like this not only because we are excited by the challenges they provide; we were inspired to create an online strategy that complements and extends the ColorLines mission that has them researching and publishing the most comprehensive coverage of a critical trial like Oscar Grant as well as the most insightful analysis of chronic injustices that we all deal with silently everyday.  </p>
]]>


</content>
</entry>
<entry>
<title>Breaking News: Douche is Down 300%</title>
<link rel="alternate" type="text/html" href="http://weblog.muledesign.com/2010/08/breaking_news_douche_is_down.php" />
<modified>2010-08-13T23:07:05Z</modified>
<issued>2010-08-13T22:18:35Z</issued>
<id>tag:weblog.muledesign.com,2010://2.342</id>
<created>2010-08-13T22:18:35Z</created>
<summary type="text/plain">It&amp;#8217;s been quite a busy week here at Mule. When we launched Unsuck It on Wednesday afternoon, we were expecting excitement, intrigue, snark, and even some opposition. But, we were not expecting the incredible response we received in less than...</summary>
<author>
<name>nicole</name>

<email>nicole@muledesign.com</email>
</author>
<dc:subject>Language</dc:subject>
<content type="text/html" mode="escaped" xml:lang="en" xml:base="http://weblog.muledesign.com/">
<![CDATA[<p>It&#8217;s been quite a busy week here at Mule. When we launched <a href="http://unsuck-it.com">Unsuck It</a> on Wednesday afternoon, we were expecting excitement, intrigue, snark, and even some opposition. But, we were not expecting the incredible response we received in less than two days!</p>

<p>Within the last 48 hours, we&#8217;ve received over 1300 submissions. Some of them are hilarious, and some of them are clever. Some of them are duplicates, and some of them are perverted spam. We have a lot of unsucking to do over the next few weeks, but we&#8217;re thrilled to know you like the site, you&#8217;re using it, and you want to contribute to our war on suck.</p>

<p>Please enjoy this fan art from Fernando Espinoza at Slide about the <a href="http://unsuck-it.com/social-media-guru/">Social Media Guru</a> entry.</p>

<p><img alt="douche-rockets.jpg" src="http://weblog.muledesign.com/douche-rockets.jpg" width="680" height="680" /></p>

<p>Wow. Thank you, Internet! Especially these folks:</p>

<ul>
<li><a href="http://lifehacker.com/5611085/unsuck-it-translates-awful-corporate-speak-into-plain-english" target="_blank">LifeHacker</a></li>
<li><a href="http://daringfireball.net/linked/2010/08/12/unsuck-it" target="_blank">Daring Fireball</a></li>
<li><a href="http://laughingsquid.com/unsuck-it-helps-you-translate-terrible-business-jargon/" target="_blank">Laughing Squid</a></li>
<li><a href="http://dealbook.blogs.nytimes.com/2010/08/13/morning-take-out-65/" target="_blank">New York Times - DealBook Blog</a></li>
<li><a href="http://www.bbc.co.uk/blogs/seealso/2010/08/tech_brief_66.html" target="_blank">BBC News - Tech Brief Blog</a></li>
<li><a href="http://www.boingboing.net/2010/08/13/unsuck-it-translate.html" target="_blank">BoingBoing</a></li>
<li><a href="http://mashable.com/2010/08/13/unsuck-it/" target="_blank">Mashable</a></li>
</ul>
]]>


</content>
</entry>
<entry>
<title>Unsuck It</title>
<link rel="alternate" type="text/html" href="http://weblog.muledesign.com/2010/08/unsuck_it.php" />
<modified>2010-08-12T21:20:12Z</modified>
<issued>2010-08-12T20:19:04Z</issued>
<id>tag:weblog.muledesign.com,2010://2.341</id>
<created>2010-08-12T20:19:04Z</created>
<summary type="text/plain"> A couple of months ago, Jason Santa Maria called upon the Internet for assistance: Can one of you wonderful content strategists start a Tumblr site, post awful business speak (“boil the ocean”), and provide alternatives? Shortly thereafter, we set...</summary>
<author>
<name>nicole</name>

<email>nicole@muledesign.com</email>
</author>
<dc:subject>Language</dc:subject>
<content type="text/html" mode="escaped" xml:lang="en" xml:base="http://weblog.muledesign.com/">
<![CDATA[<p><img alt="unsuckit-post-header.jpg" src="http://weblog.muledesign.com/unsuckit-post-header.jpg" width="680" height="224" /></p>

<p>A couple of months ago, Jason Santa Maria <a href="http://twitter.com/jasonsantamaria/status/14251586122" target="_blank">called upon the Internet</a> for assistance:</p>

<blockquote>Can one of you wonderful content strategists start a Tumblr site, post awful business speak (“boil the ocean”), and provide alternatives?</blockquote>

<p>Shortly thereafter, we set up a Tumblr account for translating douchey business jargon into understandable English. That started well, but we wanted to do more than Tumblr allows. We want Unsuck It to reflect our passion for clear, direct language, using words to communicate rather than obscure. We also wanted to add enough space to entries for sample sentences, and better pagination for the archives.</p>

<p>So we built it ourselves. Here it is, ready for you to play with: <a href="http://unsuck-it.com/">unsuck-it.com</a>.</p>

<p>The new site lets you share a term on Twitter, e-mail a douchebag who used it, or suggest a new term we have yet to unsuck. Enjoy.</p>
]]>


</content>
</entry>
<entry>
<title>Tips On Buying Design</title>
<link rel="alternate" type="text/html" href="http://weblog.muledesign.com/2010/08/tips_on_buying_design.php" />
<modified>2010-08-12T17:30:07Z</modified>
<issued>2010-08-12T16:11:07Z</issued>
<id>tag:weblog.muledesign.com,2010://2.340</id>
<created>2010-08-12T16:11:07Z</created>
<summary type="text/plain"> I sell design for a living. I also design things, but right now that’s beside the point except inasmuch that if I can’t sell it, there’s really no need for me to make it. As with all transactions, you...</summary>
<author>
<name>Mike Monteiro</name>

<email>mike@muledesign.com</email>
</author>
<dc:subject>Design</dc:subject>
<content type="text/html" mode="escaped" xml:lang="en" xml:base="http://weblog.muledesign.com/">
<![CDATA[<p><img alt="buyingdesign.jpg" src="http://weblog.muledesign.com/buyingdesign.jpg" width="671" height="200" /></p>

<p>I sell design for a living. I also design things, but right now that’s beside the point except inasmuch that if I can’t sell it, there’s really no need for me to make it. As with all transactions, you need a seller and a buyer. And because I enjoy selling design, I really want you to enjoy buying. (I also want you to buy it from me, but let’s not focus on that right now.)</p>

<p>Some people we talk to are nervous about the process because they aren’t designers themselves. This makes them feel as though they are at a disadvantage. We want to help with this. We want clients to feel terrific about having an opportunity to work on a design project with skilled professionals (even if they are skilled professionals other than us).</p>

<p>By the end of this piece you should know enough to be reasonably good at buying design (especially from me) because I’m going to show you that you already know how to do it. You probably make purchase decisions several times a day. Design doesn’t have to be a great mystery. Those same tools you use to buy other things can be used to buy design.</p>

<p>Let’s start at the top:</p>
]]>
<![CDATA[<h3>What Is Design?</h3>

<p><a href="http://en.wikipedia.org/wiki/Design">The Wikipedia definition</a> is as good as any: a specification of an object (your website or app), manifested by an agent (hi!), intended to accomplish goals (make you money, most likely), in a particular environment (probably through the Internet).</p>

<p>There will be 50 comments following this article arguing about that definition. Don’t bother with them. Let’s move on. Now that you know what design is, do you really need it?</p>

<h3>Do You Need To Buy Design?</h3>

<p>Most people don’t need to buy design. And only about half the people trying to buy design should be. Your designer should be a partner, helping you solve your problem.  You have a goal in mind; the two of you work together for a solution. Getting to that solution includes researching the people you want using your object, the market for that object and who, if anyone, is trying to sell that same sort of object. If all of that sounds like a pain in the ass, and it kind of is, then don’t buy design. Hire a production team. You’ll save money.</p>

<p>Also, if you have a detailed picture in your head of exactly what your object should look like and how it should function, hire a production team to execute your idea. A design team will only frustrate you by wanting to see your project as a problem to be solved instead of an idea to be illustrated.</p>

<p>Think of it this way: You just bought a house. It has a big beautiful backyard. You want to plant a couple of fruit trees. Don’t waste money on a landscape architect hoping they come to the same conclusion. Just hire a couple of guys to plant the trees.</p>

<h3>Don’t Be Weird About Money</h3>

<p>You’re a business, calling a business, about conducting business. Don’t be surprised when money comes up. Expect it. Buying design is like buying a car. You can pay very little for one that will—probably—get you back and forth to work. Or you can pay more for a model that is safe and reliable, and gets you up a mountain, or gets excellent mileage, or gets you noticed. Asking you about the budget you had in mind isn’t a trick, it tells me which section of the car lot to walk you towards, or to direct you to another dealership. I need to know what your budget is, which means YOU need to know what your budget is.</p>

<p>Sometimes people don’t know how much they should be spending. And that’s fine. We can talk about that. We’ll work with you to understand the sort of work you really need and what parts of the process your business will most benefit from. We promise not to try to sell you the undercoating if you don’t need it.</p>

<p>And while we’re talking about things not to be weird about: don’t talk professional designers down by telling them “this will look good in your portfolio.” Designers work for a living. You don’t tell your doctor your colonoscopy will look great on his office wall. This is no different.</p>

<h3>How Much Design Should You Buy?</h3>

<p>Easy peasy. Buy as much as you can within your budget. And if you have a limited budget (and who doesn’t) make sure you’re working with a team that understands the core of your problem and can design a solution that addresses it, giving you the foundation of a system you can extend later. It’s better to have a quality core than a mediocre everything. Better to spend your money on one basic, well-tailored suit that makes you look like a million bucks on any occasion than a whole wardrobe of ill-fitting numbers that get shiny in the ass after a few wearings. (Just think of occasions as use cases. It’s not all about looks.)</p>

<p>Let me put it another way: say your dream is to have a 52” flat-screen TV in your living room. But getting that TV would max out your budget and you wouldn’t have money for a chair to sit in. Do you downgrade the size of the TV in order to get a chair? Hell no. You sit on a milk carton and you enjoy the fuck out of that 52” TV. Because a tiny TV will NEVER turn into a monster flatscreen no matter how much you cry into it, and you’ll eventually earn enough money for the chair.</p>

<p>So when you’re buying design, make sure you’re working with the team that best understands the core of your problem. Even if it means delaying a few of the non-essential pieces for a while. Do the core right, because you can extend a solid and stable core. Also, a really smart, well-informed team can find ways to solve more of your problem by prioritizing the pieces that get you the most, as they say, bang for your buck.</p>

<h3>Buy Design From Someone Who Can Solve Your Problem, Not Whose Portfolio You Like Looking At</h3>

<p>Don’t hire an agency that does sample work before you’ve explained your problem. What could they possibly be solving? They’re trying to impress you with pretty. Look through their portfolio and make sure the work is polished, sure. But don’t buy design unless you feel comfortable the practitioners have a good problem-solving process.</p>

<p>Remember, a designer won’t know how to solve your problem right away. (Beware of those that claim to!) But they should be able to explain their process for figuring out the right solution.</p>

<p>Just as importantly,  talk to their former clients. Not just the ones on the list they gave you (those guys got the nice gift baskets ahead of time) but do a little googling of your own and find the clients they didn’t want you talking to.</p>

<p>It’s like buying a melon. Any sample the grocer is handing out won’t come from the melon you’re about to buy. And don’t buy on looks. To really know a melon you’ve got to squeeze it hard at the ends. Also, a melon analogy? Not my best moment. Let’s move on.</p>

<h3>Hire a Design Team You Can Argue With</h3>

<p>You’re about to spend some time with these people. You are going to have to put in some work as well. There are going to be a few sticking points. Things get heated, and that’s fine. You want to make sure you’re working with a team that’s as passionate about what they’re doing as you are, and not people who will just do what you tell them to (see above: production team). At the same time, you want to make sure that passion comes from wanting to solve your problem. Good arguments need to come from a place of mutual respect.</p>

<h3>Don’t Hire Artists</h3>

<p>Design is a job. It requires understanding and applying business rules, technical constraints, research analysis, success metrics, and user needs. Don’t hire “creatives.” Hire smart workers.</p>

<h3>Work With a Designer Who Wants to Work With You</h3>

<p>We have a rule at Mule. We don’t work on projects that aren’t essential to the client’s business. The further a project gets from a client’s core concerns, the more likely it will be run on subjectivity and whims, or be starved of the internal attention and resources it needs to succeed. The same applies to hiring a design team. Work with someone who’s excited to be working with you. You’ll get better work.</p>

<p>Case in point: across from my local Safeway there’s a small family-owned grocery store. (Golden, for you locals.) Best fresh vegetables and meat counter in town. Always happy to see you come in. They know my kid’s name. They make sure to stock the licorice he mentioned liking once. They’re never going to knock Safeway out of business, and they know that. But the product is good and they want my business more than Safeway does, so they get it.</p>

<p>In summary, buying design can be challenging and a bit of an act of faith. You’re trusting people with your business, but they’re also trusting you with theirs. Use clear, explicit contracts to protect both sides, make sure the team or person you’re hiring clearly understands the problem in front of them, and make sure they have a history of success in similar problems. With those things in place, do a gut check and ask yourself, “Are these the people I want to work with?” If the answer is “Yes!” then figure out a way to make it happen.</p>
]]>
</content>
</entry>
<entry>
<title>Serious Eats Recipes</title>
<link rel="alternate" type="text/html" href="http://weblog.muledesign.com/2010/07/serious_eats_recipes.php" />
<modified>2010-08-26T22:07:34Z</modified>
<issued>2010-07-30T00:29:22Z</issued>
<id>tag:weblog.muledesign.com,2010://2.338</id>
<created>2010-07-30T00:29:22Z</created>
<summary type="text/plain">Anytime I need a good, solid recipe, I turn to Serious Eats. Their recipes are always carefully chosen, nitpicked over, and written with a serious love for food. They&amp;#8217;re never afraid to experiment, whether they&amp;#8217;re making something they&amp;#8217;ve invented themselves...</summary>
<author>
<name>paula</name>

<email>paula@muledesign.com</email>
</author>
<dc:subject>Web Work</dc:subject>
<content type="text/html" mode="escaped" xml:lang="en" xml:base="http://weblog.muledesign.com/">
<![CDATA[<p>Anytime I need a good, solid recipe, I turn to <a href="http://www.seriouseats.com/" target="_blank">Serious Eats</a>. Their recipes are always carefully chosen, nitpicked over, and written with a serious love for food. They&#8217;re never afraid to experiment, whether they&#8217;re making <a href="http://www.seriouseats.com/recipes/2010/03/peeps-recipes-how-to-make-peepshi-sushi-rice-krispies-treats-easter.html" target="_blank">something they&#8217;ve invented</a> themselves or a dish that we&#8217;ve all made at home a hundred times before. The important thing is that they test, and retest—<a href="http://en.wikipedia.org/wiki/Alton_Brown" target="_blank">Alton Brown</a> and <a href="http://en.wikipedia.org/wiki/Cook%27s_Illustrated" target="_blank">Cook&#8217;s Illustrated</a> style—to make sure their readers get the best possible recipe.</p>

<p>But the best thing about Serious Eats is that they <em>keep it real</em>. Their style of writing makes recipes, even ones that take hours slaving in the kitchen, approachable to cooks of all levels. Their articles, all accompanied by photos taken outside of a studio, show glorious result at the end, but only after going through the same failure after failure that we&#8217;ve all experienced at home. Their directions are honest, and unlike most food bloggers that only harp about the joys of cooking with ramps and organic eggs, they&#8217;re totally OK testing <a href="http://www.seriouseats.com/2010/07/what-are-the-best-kettle-cooked-potato-chips-brands.html" target="_blank">supermarket kettle chip brands</a> or recreating the <a href="http://www.seriouseats.com/recipes/2010/07/in-n-outs-double-double-animal-style-burger-recipe.html" target="_blank">In-N-Out Double Double burger, Animal Style</a>. Needless to say, Serious Eats rocks my world. </p>

<p>Serious Eats started out with a strong focus on food writing, and occasionally added on recipes to their articles. As time went on, more and more readers turned to Serious Eats as a resource for recipes, but had a difficult time finding them. So, they called us up to help them build a recipes section from the ground up, as well as redesign their individual recipe pages.</p>

<div class="caption-image">
<img alt="1.jpg" src="http://weblog.muledesign.com/1.jpg" width="650" height="433" />

<p>As a big Serious Eats fan, I couldn&#8217;t be more excited about the new Recipes section that launched this week.</p>
</div>
]]>
<![CDATA[<div class="caption-image">
<img alt="2.jpg" src="http://weblog.muledesign.com/2.jpg" width="650" height="433" />

<p>You can now browse recipes by type and ingredient, but unlike traditional recipe sites, you can also browse by column, which is essential for Serious Eats readers.</p>
</div>

<div class="caption-image">
<img alt="3.jpg" src="http://weblog.muledesign.com/3.jpg" width="650" height="433" />

<p>There&#8217;s nothing that gets people to cook more than seeing a nice big picture of a juicy meal, so we put a big rotating image section right up there at the top of the page.</p>
</div>

<div class="caption-image">
<img alt="4.jpg" src="http://weblog.muledesign.com/4.jpg" width="650" height="433" />

<p>There&#8217;s even a How-To section for cooking. (Told you - they keep it real. Want to know how to <a href="http://www.seriouseats.com/talk/2010/07/boiled-water-recipe.html" target="_blank">boil water</a>? They have that too.)</p>
</div>

<div class="caption-image">
<img alt="5.jpg" src="http://weblog.muledesign.com/5.jpg" width="650" height="433" />

<p>Reminiscent of mom&#8217;s old recipe file, clicking on &#8220;Browse by Category&#8221; pulls down an index card where you can check off the types of recipes you&#8217;re looking for. </p>
</div>

<div class="caption-image">
<img alt="6.jpg" src="http://weblog.muledesign.com/6.jpg" width="650" height="433" />

<p>Anyone who likes cooking loves sharing it even more. So we made sharing really, really easy. You can share any recipe that you&#8217;re reading, or post your own in the <a href="http://www.seriouseats.com/talk/" target="_blank">Talk section</a>.</p>
</div>

<div class="caption-image">
<img alt="7.jpg" src="http://weblog.muledesign.com/7.jpg" width="650" height="433" />

<p>Then there&#8217;s the brand new recipe page. The old recipe pages took on the same format as the articles, but now they get their own, specially styled pages. </p>
</div>

<div class="caption-image">
<img alt="8.jpg" src="http://weblog.muledesign.com/8.jpg" width="650" height="433" />

<p>We took in consideration that <a href="http://www.thekitchn.com/thekitchn/tips-techniques/laptops-in-the-kitchen-what-do-you-think-078881" target="_blank">laptops, phones, and iPads are commonplace in kitchens </a>nowadays, so we made sure that each section is clearly marked, easy to read, and easy to follow on any device. If you get lost, there&#8217;s bookmarks to help keep your place—just like what you do with post-its in a cookbook. </p>
</div>

<div class="caption-image">
<img alt="9.jpg" src="http://weblog.muledesign.com/9.jpg" width="650" height="433" />

<p>There&#8217;s also the ability to select and print out comments, which is useful if other readers added in extra ingredients or tips to the recipe.</p>
</div>

<p><a href="http://www.seriouseats.com/recipes/" target="_blank">Check out the new recipes section &raquo;</a></p>
]]>
</content>
</entry>
<entry>
<title>A Peek Inside The Stable</title>
<link rel="alternate" type="text/html" href="http://weblog.muledesign.com/2010/07/the_stable.php" />
<modified>2010-08-26T20:31:11Z</modified>
<issued>2010-07-14T23:36:36Z</issued>
<id>tag:weblog.muledesign.com,2010://2.331</id>
<created>2010-07-14T23:36:36Z</created>
<summary type="text/plain">One of the best things about coming into the studio every morning is walking into a place where the last thing it feels like is a workplace. The walls are covered in vibrant artwork, and every inch of surface area...</summary>
<author>
<name>paula</name>

<email>paula@muledesign.com</email>
</author>
<dc:subject>Off-Line Life</dc:subject>
<content type="text/html" mode="escaped" xml:lang="en" xml:base="http://weblog.muledesign.com/">
<![CDATA[<p>One of the best things about coming into the studio every morning is walking into a place where the last thing it feels like is a workplace. The walls are covered in vibrant artwork, and every inch of surface area is taken up by a quirky, plastic action figure. The first time I stepped into the office, I thought, &#8220;With all of these toys, how does anyone get work done around here?&#8221;</p>

<p>As a newcomer at Mule, I learned that despite all of the colorful distractions, great work gets done by the hardworking, passionate mules that call this place home. Our small but colorful studio is an inspiring place to be, and a warm welcome to people who haven&#8217;t been here before. The studio never gets old either; there&#8217;s always a new story to tell, an interesting toy that comes in the mail, or another odd knickknack I haven&#8217;t noticed before. Oh, and there&#8217;s usually a hungry office puppy following you around, waiting for that slight chance that you might drop a morsel from your morning bagel.</p>

<p>Ever wonder what our offline world looks like? Here&#8217;s your chance.</p>

<p><img alt="front-area.jpg" src="http://weblog.muledesign.com/front-area.jpg" width="650" height="433" /></p>

<p>Our main conference room.</p>

<p><img alt="diptych3.jpg" src="http://weblog.muledesign.com/diptych3.jpg" width="650" height="433" /></p>

<p>We have a cardboard table.</p>

<p><img alt="entrance2.jpg" src="http://www.muledesign.com/entrance2.jpg" width="650" height="433" /></p>

<p>Eating lunch.</p>
]]>
<![CDATA[<p><img alt="diptych1.jpg" src="http://weblog.muledesign.com/diptych1.jpg" width="650" height="433" /> </p>

<p><img alt="diptych2.jpg" src="http://weblog.muledesign.com/diptych2.jpg" width="650" height="433" /></p>

<p>Our bathroom key is attached to a ridiculously large plastic pig.</p>

<p><img alt="front-table.jpg" src="http://weblog.muledesign.com/front-table.jpg" width="650" height="434" /></p>

<p><img alt="nila-writing.jpg" src="http://weblog.muledesign.com/nila-writing.jpg" width="650" height="433" /></p>

<p>Nila Salinas</p>

<p><img alt="diptych5.jpg" src="http://weblog.muledesign.com/diptych5.jpg" width="650" height="432" /></p>

<p>The bank safe, where our out-of-print <a href="http://feedstore.muledesign.com/">t-shirts</a> are kept. </p>

<p><img alt="diptych6.jpg" src="http://weblog.muledesign.com/diptych6.jpg" width="650" height="433" /> </p>

<p><img alt="bookcase-top.jpg" src="http://weblog.muledesign.com/bookcase-top.jpg" width="650" height="433" /></p>

<p><img alt="bookshelf-perspective.jpg" src="http://weblog.muledesign.com/bookshelf-perspective.jpg" width="650" height="433" /></p>

<p><img alt="bookshelf-cereal.jpg" src="http://weblog.muledesign.com/bookshelf-cereal.jpg" width="650" height="433" /></p>

<p>That&#8217;s Henry, Mike Monterio&#8217;s son, on the cereal box.</p>

<p><img alt="diptych7.jpg" src="http://weblog.muledesign.com/diptych7.jpg" width="650" height="433" /> </p>

<p>Rupert, the office puppy, is sleeping in his room.</p>

<p><img alt="desks-horizontal.jpg" src="http://weblog.muledesign.com/desks-horizontal.jpg" width="650" height="433" /></p>

<p>The front room.</p>

<p><img alt="diptych8.jpg" src="http://weblog.muledesign.com/diptych8.jpg" width="650" height="433" /></p>

<p>One of the several pieces from <a href="http://www.orkposters.com/" target="_blank">Ork Posters</a>.</p>

<p><img alt="desks-chair.jpg" src="http://weblog.muledesign.com/desks-chair.jpg" width="650" height="433" /></p>

<p>Therapeutic ball chair.</p>

<p><img alt="desks-erika.jpg" src="http://weblog.muledesign.com/desks-erika.jpg" width="650" height="433" /></p>

<p>Erika Hall</p>

<p><img alt="backroom.jpg" src="http://weblog.muledesign.com/backroom.jpg" width="650" height="434" /></p>

<p>The back room.</p>

<p><img alt="diptych92.jpg" src="http://www.muledesign.com/diptych92.jpg" width="650" height="433" /></p>

<p>Left: one of Mike&#8217;s pieces.</p>

<p><img alt="mike-toys2.jpg" src="http://weblog.muledesign.com/mike-toys2.jpg" width="650" height="432" /></p>

<p>Mike&#8217;s toys</p>

<p><img alt="diptych10.jpg" src="http://weblog.muledesign.com/diptych10.jpg" width="650" height="433" /></p>

<p>Bike storage</p>

<p><img alt="nicole-desk.jpg" src="http://weblog.muledesign.com/nicole-desk.jpg" width="650" height="433" /></p>

<p>Nicole Jones</p>

<p><img alt="nicole-mike2.jpg" src="http://www.muledesign.com/nicole-mike2.jpg" width="650" height="433" /></p>

<p>Nicole Jones and Mike Monteiro </p>

<p><img alt="diptych11.jpg" src="http://weblog.muledesign.com/diptych11.jpg" width="650" height="433" /> </p>

<p><img alt="ozone-thai.jpg" src="http://weblog.muledesign.com/ozone-thai.jpg" width="650" height="433" /></p>

<p>Checking out what O-zone Thai is serving for lunch downstairs. </p>

<p><img alt="rupert-lookup.jpg" src="http://weblog.muledesign.com/rupert-lookup.jpg" width="650" height="433" /></p>

<p>Rupert, is the office puppy&#8230;</p>

<p><img alt="desk-rupert.jpg" src="http://weblog.muledesign.com/desk-rupert.jpg" width="650" height="433" /></p>

<p>&#8230; and the head of HR.</p>

<p><img alt="diptych4.jpg" src="http://weblog.muledesign.com/diptych4.jpg" width="650" height="433" /> </p>

<p><img alt="table-cup.jpg" src="http://weblog.muledesign.com/table-cup.jpg" width="650" height="433" /></p>

<p>Want to see more? <a href="http://www.quitecurious.com/photos/?album=1&amp;gallery=124" target="_blank">Head over here.</a></p>
]]>
</content>
</entry>
<entry>
<title>Content Strategy, Animal-style</title>
<link rel="alternate" type="text/html" href="http://weblog.muledesign.com/2010/07/content_strategy_animal-style.php" />
<modified>2010-08-26T20:32:50Z</modified>
<issued>2010-07-02T17:41:21Z</issued>
<id>tag:weblog.muledesign.com,2010://2.336</id>
<created>2010-07-02T17:41:21Z</created>
<summary type="text/plain"> I finally watched Fantastic Mr. Fox. I love Wes Anderson like any other liberal arts kid from Texas, but I missed this soft epic in theaters. The delightful George Clooney needs no elaboration. Everything is executed perfectly. Anderson has...</summary>
<author>
<name>nicole</name>

<email>nicole@muledesign.com</email>
</author>
<dc:subject>Web Work</dc:subject>
<content type="text/html" mode="escaped" xml:lang="en" xml:base="http://weblog.muledesign.com/">
<![CDATA[<p><img alt="Mr_Fox.jpg" src="http://weblog.muledesign.com/Mr_Fox.jpg" /></p>

<p>I finally watched <em>Fantastic Mr. Fox</em>. I love Wes Anderson like any other liberal arts kid from Texas, but I missed this soft epic in theaters. The delightful George Clooney needs no elaboration.</p>

<p>Everything is executed perfectly. Anderson has a plan, but edits himself. The film is dreamy and imaginative without being forced. It is relatable, engaging, and satisfying.</p>

<p>Since watching the film, I’ve been focusing on work. Some of that work includes reading and attending events about content strategy.</p>

<p>The most popular question this week was, “How does a content strategist fit on a Web team?”</p>

<p>People are really asking:</p>

<ul>
<li>“Why do we need a content strategist?” </li>
<li>“How am I supposed to do my job with another person involved?”</li>
</ul>

<p>When you get a bunch of different animals in a room, there will be confusion and conflict. But, with a mission and flexibility, great things can happen.</p>

<p>Wes Anderson gets this, and is optimistic. When Mr. Fox looks at his misfit gang of colleagues and friends, he says he sees them in their roles. He adds:</p>

<blockquote>
<p>I also see a room full of wild animals. Wild animals with true natures and pure talents.</p>

<p>Wild animals with scientific sounding Latin names&#8230; that mean something
about our DNA.</p>
<p>Wild animals, each with his or her own strengths and weaknesses due to his or her species.</p>

<p>Anyway, I think it may very well be all the beautiful differences among us that just might give us the tiniest glimmer of a chance&#8230;</p>
</blockquote>

<p>It’s like content strategy, animal-style. Well, more like how an optimistic content strategist envisions Web teams working. We do it here at Mule. (I’ll talk more about our process in a later post.)</p>

<p>Everyone has their own strengths and weaknesses; our differences make it possible for us to collaborate, disagree, contribute, create, and do good work for our clients.</p>

<p>We’re all designers; we’re all different. But there’s something kind of fantastic about that, isn’t there?</p>

<p>As Mr. Fox says, “It’s just a thought.”</p>
]]>


</content>
</entry>
<entry>
<title>Running with the Watchdogs: Redesigning ProPublica</title>
<link rel="alternate" type="text/html" href="http://weblog.muledesign.com/2010/07/redesigning_propublica.php" />
<modified>2010-07-02T18:30:45Z</modified>
<issued>2010-07-01T22:27:24Z</issued>
<id>tag:weblog.muledesign.com,2010://2.335</id>
<created>2010-07-01T22:27:24Z</created>
<summary type="text/plain">We love good journalism and hate unchecked abuses of power, so we were excited and honored to collaborate with ProPublica on their website redesign. Click to see the old ProPublica In the absence of accountability, the powerful can exploit the...</summary>
<author>
<name>erika</name>

<email>erika@muledesign.com</email>
</author>

<content type="text/html" mode="escaped" xml:lang="en" xml:base="http://weblog.muledesign.com/">
<![CDATA[<p>We love good journalism and hate unchecked abuses of power, so we were excited and honored to collaborate with <a href="http://www.ProPublica.org">ProPublica</a> on their website redesign.</p>

<div id="propublica-screens" style="height:480px;position:relative;margin-bottom:15px;width:680px;">
    <a href="#" style="display:block;position:absolute;top:0;left:0;height:480px;width:680px;">
    <img id="propublica-new" style="display:block;position:absolute;top:0;left:0;" alt="The New ProPublica Site" src="http://weblog.muledesign.com/propublicahome.jpg" width="680" height="455" />
    <img id="propublica-old" style="display:none;position:absolute;top:0;left:0;" alt="The Old ProPublica Site" src="http://weblog.muledesign.com/propublica-before.jpg" width="680" height="455" />
    <span style="font-style:italic;font-family:Georgia,serif;font-size:12px;color:#666;display:block;text-align:center;position:absolute;bottom:0;width:680px;">Click to see the old ProPublica</span>
    </a>
</div>

<p>In the absence of accountability, the powerful can exploit the weak, betray the public trust, and cause great harm that never comes to light. Although many people catch Bieber Fever sooner than they seek out investigative reporting, we live in a better world because reporters dig through heaps of data and pursue stories to their end, bringing wrongdoing to light.</p>

<p>The traditional newspaper business is in decline, all forms of publishing are in transition, so journalism needs new models and new forms.</p>

<p>ProPublica is one of those new forms—an independent, non-profit newsroom that produces investigative journalism in the public interest. They started in just 2008, and earlier this year they won a Pulitzer Prize, the first online-only source to do so.</p>

<p>The stated goals of the redesign were common to many of our projects: improve the overall experience, guide a diverse group of readers through the information, create a flexible structure for all of the different types of content, engage visitors in the mission. </p>

<p>The site had grown organically over its two year history, driven by <a href="http://www.propublica.org/series/buried-secrets-gas-drillings-environmental-threat">traditional investigations</a> and the development of <a href="http://projects.propublica.org/unemployment/">innovative news applications</a>. New visitors might come from anywhere and land on any page with no context and no knowledge of ProPublica. Our challenge lay in comprehending the operations of the organization, their vision for the future, and all of the myriad interwoven forms accountability journalism could take online. Establishing credibility and creating contextual paths were paramount.</p>

<h3>The Process</h3>

<p>We began our work in New York City on the coldest, shortest days of the year.  We interviewed the leadership, the reporters, and many of the staff. We attended their holiday pizza party. We sat down with the core redesign team and analyzed every aspect of ProPublica&#8217;s website and workings. We took a deep look at other organizations tackling traditional and new models of publishing and reporting. We spoke with representative readers, including policy advisors and community journalists. </p>

<p>We tried to extract everything ProPublica had learned through their work and we interrogated every decision they&#8217;d made, certain they would return the favor during later phases of the work.</p>

<p>Designers don&#8217;t talk about this much—possibly because we like to take all the credit when things go well—but we&#8217;ve found again and again that the level of commitment and focus a client team brings to a project has a defining impact on the quality of the design work.</p>

<p>Everyone likes to talk about the iterative, collaborative process, producing ever better artifacts. To achieve this we need thoughtful input and feedback at every step. This is a lot of work, especially when you also have a day job. The ProPublica team was fully committed in this regard. We were privileged to have the highest level of engagement throughout the project, from people who also had a top-notch, totally innovative news organization to run.</p>

<p>Working closely with the ProPublica team, we identified the key story types and their constituent parts.  In doing so, we unearthed a lot of complexity. Content types were defined as much by their relationship to one another as by their core elements. We defined a set of navigation systems based on context rather than hierarchy to orient readers in the stories, create the right expectations, and present opportunities for exploration.</p>

<p>Over the course of the project, we had a lot of the best sorts of arguments—the arguments that arise when everyone wants to make sure we are moving towards the very best balance of business goals, audience needs, and aesthetic choices.</p>

<p>We looked at how investigations evolved, whether they started with an assertion or a dataset, so that we could create containers and paths that maintained contextual relationships for readers no matter at what point they first encountered the story. We moved away from broad topics that failed to reflect the true publishing priorities of the organization, despite their naive appeal as an organizing principle. We worked towards a more data-driven future, creating a home for <a href="http://www.propublica.org/tools/">interactive tools and infographics</a>. This offers another way for concerned citizens and policy makers to explore evolving stories and a starting point for journalists and community members researching their own.</p>

<p>From a visual branding perspective, we knew that ProPublica wanted to stay with some key identity elements, the magnifying glass and the color blue. Working from these, we created a more sophisticated visual system that reflected the quality of the journalism, and that the ProPublica team could continue to apply and extend given their anticipated resources.</p>

<p>Typography is perhaps no more critical anywhere than in the publication of news, so we were very pleased that <a href="http://www.TypeKit.com">TypeKit</a> had come along. The ProPublica site features Meta Serif.</p>

<p>Finally, we got down into the details, looking at every possible case, to ensure we were truly defining a system that would serve ProPublica long after our daily involvement concluded, rather than a series of appealing one-offs. Our work continued through the implementation, working with ProPublica&#8217;s immensely talented internal technical team, and the excellent developers at <a href="http://www.solspace.com/">Solspace</a>.</p>

<p>In sum, the project was a complete pleasure and we are excited to see where ProPublica takes it from here.</p>

<p><strong>Further reading:</strong></p>

<ul>
<li><a href="http://www.propublica.org/article/take-a-look-at-the-new-propublicaorg">Take a Look at the New ProPublica.org</a>&#151;ProPublica</li>
<li><a href="http://www.niemanlab.org/2010/06/propublicas-website-redesign-puts-future-of-context-ideas-to-work/">ProPublica&#8217;s Website puts &#8220;future of context&#8221; ideas to work</a>&#151;The Nieman Journalism Lab</li>
<li><a href="http://ecocentric.blogs.time.com/2010/06/30/an-investigative-news-site-gets-a-web-facelift/">An Investigative News Site Gets a Web Facelift</a>&#151;TIME</li>
</ul>
]]>


</content>
</entry>
<entry>
<title>Content Strategy is Part of a Holistic Design Process</title>
<link rel="alternate" type="text/html" href="http://weblog.muledesign.com/2010/06/content_strategy_is_part_of_a.php" />
<modified>2010-06-28T20:51:26Z</modified>
<issued>2010-06-28T20:42:46Z</issued>
<id>tag:weblog.muledesign.com,2010://2.330</id>
<created>2010-06-28T20:42:46Z</created>
<summary type="text/plain">If you talk about content as something separate from design, you separate content from design. Content strategy is part of a holistic design process. Your design process should account for every part of the design system, including: Story Structure Behavior...</summary>
<author>
<name>nicole</name>

<email>nicole@muledesign.com</email>
</author>
<dc:subject>Design</dc:subject>
<content type="text/html" mode="escaped" xml:lang="en" xml:base="http://weblog.muledesign.com/">
<![CDATA[<p>If you talk about content as something separate from design, you separate content from design. Content strategy is part of a holistic design process.</p>

<p>Your design process should account for every part of the design system, including:</p>

<ul>
<li>Story</li>
<li>Structure</li>
<li>Behavior</li>
</ul>

<p>I wrote about this in <a href="http://weblog.muledesign.com/2010/06/writing_is_design.php" target="_blank">Writing is Design</a>. Let me back up and tell you why I’m bringing this up again.</p>

<p><a href="http://uxmag.com/design/fusing-content-strategy-with-design" target="_blank">This article</a> disappoints me. I’ll focus on the conclusion:</p>

<blockquote><em>Content strategy needs to develop its own brand of design thinking and action in order to truly come into its own as an essential part of a holistic UX design process.</em></blockquote>

<p>This illustrates that people see content as something separate from design—because content strategists often talk about it that way.</p>

<p>It goes against our principles to describe content strategy as something apart from design. Defining a practice separately doesn&#8217;t make it more essential. Clearly communicating and demonstrating value does.</p>

<p>As people who care about words and stories, we have to be able to verbalize what we do, how we do it, and why it matters.</p>

<p>Content strategists have to call what they do design to integrate themselves. Working together, we can achieve the kind of quality our products, services, and clients deserve.</p>
]]>


</content>
</entry>
<entry>
<title>Apple’s Apostrophe Bait and Switch</title>
<link rel="alternate" type="text/html" href="http://weblog.muledesign.com/2010/06/apples_apostrophe_bait_and_swi.php" />
<modified>2010-07-01T16:02:28Z</modified>
<issued>2010-06-22T19:04:29Z</issued>
<id>tag:weblog.muledesign.com,2010://2.328</id>
<created>2010-06-22T19:04:29Z</created>
<summary type="text/plain"> Sadly, yesterday’s iOS 4 update did nothing to address a typographic nitpick (of utmost importance) that I’ve had with the iPhone since day one. As you can see from fig. 1 above, the typographic mark available to you on...</summary>
<author>
<name>Mike Monteiro</name>

<email>mike@muledesign.com</email>
</author>
<dc:subject>Design</dc:subject>
<content type="text/html" mode="escaped" xml:lang="en" xml:base="http://weblog.muledesign.com/">
<![CDATA[<p><img alt="ios4apostrophe.png" src="http://weblog.muledesign.com/ios4apostrophe.png" width="680" height="300" /></p>

<p>Sadly, yesterday’s iOS 4 update did nothing to address a typographic nitpick (of utmost importance) that I’ve had with the iPhone since day one.</p>

<p>As you can see from fig. 1 above, the typographic mark available to you on the keyboard is an apostrophe. However, tapping that key doesn’t give you an apostrophe at all; it gives you a prime symbol, otherwise known as the foot mark, or as some have come to call it—the dumb apostrophe.</p>

<p>In fig. 2, you can see that if you tap and hold the apostrophe the prime symbol is indeed the default mark, and the apostrophe that was previously promised you to sits to its left. </p>

<p>For a company that pays so much attention to detail, this strikes me as a huge oversight. </p>
]]>


</content>
</entry>
<entry>
<title>A Fetching New Home for Dogster</title>
<link rel="alternate" type="text/html" href="http://weblog.muledesign.com/2010/06/a_fetching_new_home_for_dogste.php" />
<modified>2010-06-22T18:40:02Z</modified>
<issued>2010-06-22T18:02:05Z</issued>
<id>tag:weblog.muledesign.com,2010://2.327</id>
<created>2010-06-22T18:02:05Z</created>
<summary type="text/plain">As animal lovers and long-standing fans, we were delighted when Dogster approached us about working on the major repositioning of both the Dogster and Catster sites. After six years growing and serving a passionate pet-enthusiast community, the team had exciting...</summary>
<author>
<name>erika</name>

<email>erika@muledesign.com</email>
</author>

<content type="text/html" mode="escaped" xml:lang="en" xml:base="http://weblog.muledesign.com/">
<![CDATA[<p>As animal lovers and long-standing fans, we were delighted when Dogster approached us about working on the major repositioning of both the <a href="http://www.dogster.com">Dogster</a> and <a href="http://www.catster.com">Catster</a> sites. After six years growing and serving a passionate pet-enthusiast community, the team had exciting and ambitious plans to reach a wider range of people. We had a terrific time helping them go for best in show.</p>

<p>And, as Top Dog &amp; CEO Ted Rheingold told <a href="http://techcrunch.com/2010/06/11/dogster-catster-reboot/">Techcrunch</a>, &#8220;Community services are great for adding tons of content, but not for organizing it.&#8221; The sites had grown organically over the years, creating a very comfortable environment for experienced members to interact, but potentially daunting to casual visitors. New people arriving through search engines daily will respond to clear, engaging information even if they aren&#8217;t ready to dig in and create an online profile for their dog or cat.</p>

<p><img alt="dogsterhome.png" src="http://weblog.muledesign.com/dogsterhome.png" width="650" height="405" /></p>

<p>We worked with the Dogster team to develop a strategy and a structure to re-organize their content around major topic areas, while retaining a special place for the vibrant community. Each new area, covering a specific subject such as health or training, features a mix of expert information from professionals and the best stuff from the community, curated by staff editors.</p>

<p>While creating clear, task-oriented paths through credible information, we didn&#8217;t want to lose the whimsy and, well, the humanity that made these sites so appealing and popular in the first place. So, we looked for places to add touches of fun to the interface and include a lot more photography overall. It&#8217;s safe to say that people love looking at pictures of dogs and cats on the Internet, especially on a site that is actually about dogs or cats.</p>

<p><img alt="DogsterFooter.png" src="http://weblog.muledesign.com/DogsterFooter.png" width="650" /></p>

<p>We also made room for Dogster&#8217;s growing roster of partnerships, including Petfinder adoptions and <a href="http://www.dogster.com/dog-life/">Hunch&#8217;s personalized decision-making widgets</a>.</p>

<p>Integrating such huge changes into an established community-oriented website is a technical and communication challenge. We were incredibly impressed by the speed with which the Dogster team was able to roll out the initial set of design changes, as well as their timely and open communication with the existing members. We look forward to seeing both sites continue to evolve with ongoing development and user feedback.</p>
]]>


</content>
</entry>
<entry>
<title>Writing is Design</title>
<link rel="alternate" type="text/html" href="http://weblog.muledesign.com/2010/06/writing_is_design.php" />
<modified>2010-06-17T18:10:35Z</modified>
<issued>2010-06-17T18:07:39Z</issued>
<id>tag:weblog.muledesign.com,2010://2.326</id>
<created>2010-06-17T18:07:39Z</created>
<summary type="text/plain">Writing is design. Writers design stories and communication with words. You need a story to connect people with your site or application. Clear, effective copy involves and informs. Jason Fried recently posted this to Twitter: Writing is design. Design your...</summary>
<author>
<name>nicole</name>

<email>nicole@muledesign.com</email>
</author>
<dc:subject>Design</dc:subject>
<content type="text/html" mode="escaped" xml:lang="en" xml:base="http://weblog.muledesign.com/">
<![CDATA[<p>Writing is design. Writers design stories and communication with words.</p>

<p>You need a story to connect people with your site or application.</p>

<p><img alt="designelements.png" src="http://weblog.muledesign.com/designelements.png" /></p>

<p>Clear, effective copy involves and informs.</p>

<p>Jason Fried recently <a href="https://twitter.com/jasonfried/status/16166639940" target="_blank">posted this to Twitter</a>:</p>

<blockquote><em>Writing is design. Design your sentences with the right words like you design your interfaces with the right pixels.</em></blockquote>

<p>Along with defining the tone of your site and mood of your audience, word choice affects customer satisfaction and profitability (e.g., search, clicks, conversions, and customer loyalty).</p>

<p>Erika talked about this in 2007 at the Future of Web Apps Conference. In her session (<a href="http://www.slideshare.net/mulegirl/copy-is-interface" target="_blank">Copy is Interface</a>), she said: “Language is itself an interface.” </p>

<p>She outlined simple guidelines for getting the words right:</p>

<ul>
<li>Be authentic.</li>
<li>Be engaging.</li>
<li>Be specific.</li>
<li>Be appropriate.</li>
<li>Be polite.</li>
</ul>

<p>I would add:</p>

<ul>
<li>Be concise.</li>
<li>Be consistent.</li>
<li>Be careful.</li>
</ul>

<p>Writers inform people about companies and products with language, structure, imagery, ideas, and craft.</p>

<p>Jason Fried mentioned this before in <u>Getting Real</u>:</p>

<blockquote><em>Good writing is good design. It&#8217;s a rare exception where words don&#8217;t accompany design. Icons with names, form fields with examples, buttons with labels, step by step instructions in a process, a clear explanation of your refund policy. These are all <strong>interface design</strong>.</em></blockquote>

<p>When I write a refund policy, hover message, error message, FAQ, or tagline, I design the story. Writing, like interface design, is decision-driven. It shows what a company chooses to say (and chooses not to say) to their customers.</p>

<p>Writing influences perception and understanding. Writing shapes the experience.</p>

<p>Good writing takes strategic-thinking, research, focus, testing, and editing. We plan, pattern, create, and compose; all of these acts are part of the design process.</p>
]]>


</content>
</entry>

</feed>