Off the Hoof

Presenting Design Like You Get Paid For It

Mon, 30 Aug 2010 09:29:21 -0800

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 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). 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. 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.

Why We Don’t Deliver Photoshop Files

Thu, 26 Aug 2010 12:34:50 -0800

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't do that. Here's why. A website is code. Sure, it's images and copy, too, and those images and copy are placed in the code only after careful consideration of the client'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. 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'll either create all of those pages in Photoshop or do a few in Photoshop and build out the rest in code. But *all* the comps are delivered as code. That code is two things: 1. It is the final culmination and proof of all the work that we've done with and on behalf of the client. 2. It is the basis of a design system that will be used by the implementation team to build the rest of of the site. When we take a website'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's in the PSDs. Finally, it ensures that the code that forms the basis of the entire design system and website is clean, conformant, and tested. We don'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. As Mike is fond of saying, "A PSD is a painting of a website." We don't spend weeks or months understanding a client's complex needs and issues to make them paintings. We spend all that time to solve problems, and paintings don't solve problems. They may illustrate potential solutions, but there'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't do it.

“Working Hours” Unsucked

Thu, 26 Aug 2010 10:44:25 -0800

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 resource war rages in our office. At stake is our precious, finite time. We each have our own responsibilities and deadlines. It is also essential that we collaborate and communicate with each other throughout the day. Let's call these opposing claimants "work" and "meetings". 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: At first I was confused, then super annoyed. My "working hours" are the times it'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. 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, "events." Events are what I attend outside of work. My working time should belong to me. Please Google, don't strip me of that illusion. A simple change in nomenclature to "Available to meet" would feel way more respectful and accurate, and this is the direction we entreat business communication to go.

Strong Voice, Engaged Newsmaking

Wed, 18 Aug 2010 15:05:12 -0800

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 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. 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. 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. 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. 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. 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.

Breaking News: Douche is Down 300%

Fri, 13 Aug 2010 15:18:35 -0800

It'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 two days! Within the last 48 hours, we'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're thrilled to know you like the site, you're using it, and you want to contribute to our war on suck. Please enjoy this fan art from Fernando Espinoza at Slide about the Social Media Guru entry. Wow. Thank you, Internet! Especially these folks: * LifeHacker * Daring Fireball * Laughing Squid * New York Times - DealBook Blog * BBC News - Tech Brief Blog * BoingBoing * Mashable

Unsuck It

Thu, 12 Aug 2010 13:19:04 -0800

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 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. So we built it ourselves. Here it is, ready for you to play with: unsuck-it.com. 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.

Tips On Buying Design

Thu, 12 Aug 2010 09:11:07 -0800

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.) 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). 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. Let’s start at the top:

Serious Eats Recipes

Thu, 29 Jul 2010 17:29:22 -0800

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're never afraid to experiment, whether they're making something they've invented themselves or a dish that we've all made at home a hundred times before. The important thing is that they test, and retest—Alton Brown and Cook's Illustrated style—to make sure their readers get the best possible recipe. But the best thing about Serious Eats is that they keep it real. 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'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're totally OK testing supermarket kettle chip brands or recreating the In-N-Out Double Double burger, Animal Style. Needless to say, Serious Eats rocks my world. 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.

As a big Serious Eats fan, I couldn't be more excited about the new Recipes section that launched this week.

A Peek Inside The Stable

Wed, 14 Jul 2010 16:36:36 -0800

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, "With all of these toys, how does anyone get work done around here?" 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't been here before. The studio never gets old either; there's always a new story to tell, an interesting toy that comes in the mail, or another odd knickknack I haven't noticed before. Oh, and there's usually a hungry office puppy following you around, waiting for that slight chance that you might drop a morsel from your morning bagel. Ever wonder what our offline world looks like? Here's your chance. Our main conference room. We have a cardboard table. Eating lunch.

Content Strategy, Animal-style

Fri, 02 Jul 2010 10:41:21 -0800

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 a plan, but edits himself. The film is dreamy and imaginative without being forced. It is relatable, engaging, and satisfying. Since watching the film, I’ve been focusing on work. Some of that work includes reading and attending events about content strategy. The most popular question this week was, “How does a content strategist fit on a Web team?” People are really asking: * “Why do we need a content strategist?” * “How am I supposed to do my job with another person involved?” 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. 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:

I also see a room full of wild animals. Wild animals with true natures and pure talents.

Wild animals with scientific sounding Latin names. . . that mean something about our DNA.

Wild animals, each with his or her own strengths and weaknesses due to his or her species.

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. . .

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.) 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. We’re all designers; we’re all different. But there’s something kind of fantastic about that, isn’t there? As Mr. Fox says, “It’s just a thought.”

Running with the Watchdogs: Redesigning ProPublica

Thu, 01 Jul 2010 15:27:24 -0800

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 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. The traditional newspaper business is in decline, all forms of publishing are in transition, so journalism needs new models and new forms. 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. 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. The site had grown organically over its two year history, driven by traditional investigations and the development of innovative news applications. 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.

The Process

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'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. We tried to extract everything ProPublica had learned through their work and we interrogated every decision they'd made, certain they would return the favor during later phases of the work. Designers don't talk about this much—possibly because we like to take all the credit when things go well—but we'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. 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. 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. 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. 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 interactive tools and infographics. 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. 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. Typography is perhaps no more critical anywhere than in the publication of news, so we were very pleased that TypeKit had come along. The ProPublica site features Meta Serif. 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's immensely talented internal technical team, and the excellent developers at Solspace. In sum, the project was a complete pleasure and we are excited to see where ProPublica takes it from here. Further reading:

Take a Look at the New ProPublica.org—ProPublica
ProPublica's Website puts "future of context" ideas to work—The Nieman Journalism Lab
An Investigative News Site Gets a Web Facelift—TIME

Content Strategy is Part of a Holistic Design Process

Mon, 28 Jun 2010 13:42:46 -0800

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 I wrote about this in Writing is Design. Let me back up and tell you why I’m bringing this up again. This article disappoints me. I’ll focus on the conclusion:

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.

This illustrates that people see content as something separate from design—because content strategists often talk about it that way. It goes against our principles to describe content strategy as something apart from design. Defining a practice separately doesn't make it more essential. Clearly communicating and demonstrating value does. 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. 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.

Apple’s Apostrophe Bait and Switch

Tue, 22 Jun 2010 12:04:29 -0800

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 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. 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. For a company that pays so much attention to detail, this strikes me as a huge oversight.

A Fetching New Home for Dogster

Tue, 22 Jun 2010 11:02:05 -0800

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 and ambitious plans to reach a wider range of people. We had a terrific time helping them go for best in show. And, as Top Dog & CEO Ted Rheingold told Techcrunch, "Community services are great for adding tons of content, but not for organizing it." 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't ready to dig in and create an online profile for their dog or cat. 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. While creating clear, task-oriented paths through credible information, we didn'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'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. We also made room for Dogster's growing roster of partnerships, including Petfinder adoptions and Hunch's personalized decision-making widgets. 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.

Writing is Design

Thu, 17 Jun 2010 11:07:39 -0800

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 sentences with the right words like you design your interfaces with the right pixels.

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). Erika talked about this in 2007 at the Future of Web Apps Conference. In her session (Copy is Interface), she said: “Language is itself an interface.” She outlined simple guidelines for getting the words right: * Be authentic. * Be engaging. * Be specific. * Be appropriate. * Be polite. I would add: * Be concise. * Be consistent. * Be careful. Writers inform people about companies and products with language, structure, imagery, ideas, and craft. Jason Fried mentioned this before in Getting Real:

Good writing is good design. It's a rare exception where words don'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 interface design.

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. Writing influences perception and understanding. Writing shapes the experience. 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.