Our static tools and linear workflows aren’t the right fit for the flexible, diverse reality of today’s Web. Making prototyping a central element of your workflows will radically change how you approach problem solution and save you a lot of headaches – and money. But most importantly, you will be creating the right products and features in a way that resonates with the true nature of the Web. A discourse on processes, flexibility, the Web as a material, and how we build things.Saving Your Web Workflows with Prototyping – Matthias Ott
My father used to tell this story to his project management students.
The executives of a dog food company were holding a meeting.
“The new label design tested through the roof!” said the VP of Marketing. “In double blind tests, it outperformed our B and C designs across all demos.”
“Unprompted recall has doubled since our last campaign,” the VP of Advertising chimed in. “Our ‘Share the Love’ theme line has gone viral.”
“‘Dog Mommies’ in key ethnic demos responded favorably to the new, ‘organic’ ingredients,” added the VP of Research. “The ‘fresh chunk of love’ concept is going over like gangbusters.”
“Our new ‘green’ delivery chain efficiencies look like a winner,” said the Director of PR and the Chief Scientist in unison. “We’re a cinch to win Green Co of the Month in Green Business Magazine.”
“So why,” asked the CEO, “are sales trending down?”
The executives looked blankly at one another. Finally the youngest of them spoke up.
“The dogs won’t eat it,” she explained.
No amount of marketing can save a bad product.
WordPress.com is holding its first virtual conference, I’m speaking there, and you’re invited. The WordPress.com Growth Summit is a two-day live event where you can learn to build and grow your site, “from start to scale.” To make it as inclusive as possible, the event will take place twice, with live sessions accessible to all Earth’s time zones:
- In the Americas, Europe, Middle East, and Africa, the conference is August 11-12 from 11:00am–4:00pm EDT (15:00–20:00 UTC).
- For attendees in the Asia Pacific region, the event is August 12-13 from 11:00am–4:00pm JST (02:00–07:00 UTC).
- Can’t attend all of the sessions you’re interested in? No problem. The WordPress.com events team will record them all and make them available to you after the event.
A diverse group of speakers will share tips on creating your site, aligning it to your business goals, finding an audience, building and nurturing an organic fan community, and more.
As for me, I’ll co-host “Blogging and Podcasting: Defining Success” with the amazing Jason Snell. Here’s how we describe our panel:
There are almost as many ways to succeed at blogging and podcasting as there are bloggers and podcasters. In a lively discussion full of plentiful tips and takeaways, industry veterans Jason Snell (The Incomparable, Six Colors) and Jeffrey Zeldman (A List Apart, WordPress.com) will teach you how to:
- Define your mission;
- Craft and govern content;
- Understand and cultivate your audience;
- Maintain authenticity;
- React to change.
You’ll also learn when and how to diversify, and how to make money with paywalls, stores, advertising, and more.
It’s only $79 to attend if you order your ticket by Friday, July 31. On top of which, zeldman.com fans get an additional 20% discount with code Jeffrey20.
After July 31, the ticket price will be $99. So register today.
In my earliest 20s, I wrote a novel. Make that three. The first two were garbage—a kind of literary throat clearing. I shelved the manuscripts and moved on. But my third draft novel, “Sugar and Snow,” seemed to have something.
My Uncle George connected me to his friend, a famous writer. She read my manuscript and shared it with her daughter, who also thought there was something to it.
The famous writer asked if she could share my manuscript with her publisher. I, of course, said yes. Then I phoned all my friends to tell them I would soon be a published author.
After three months of silence, the publishing company returned my manuscript, untouched. No word of explanation. Not even the courtesy of a boilerplate rejection letter.
Unless you count a few fibs on the resumes I submitted to potential employers, I never wrote another line of fiction.
I drank my way through the next decade, and did not exercise my writing ability for nearly ten years.
The power to help… or hurt
I should not have been so sensitive at age 20, I suppose. Older writers had told me that rejection was part of the life. John Casey, an early writing mentor, survived the Korean War, wrote a novel about his experiences, and submitted it to two dozen publishers who weren’t interested. Eventually he siphoned a short story out of one of the chapters of his rejected novel, and found a little magazine to publish it.
John Casey became an award-winning novelist, but first he slogged through years of rejection, as all writers must. He’d told me that was the game, but my heart wasn’t ready for it. At 20, I wasn’t strong enough.
Perhaps as a partial consequence of how badly a single rejection spun me out of control, when I sometimes have to deliver tough news to a creative colleague, I’ve always striven to be kind about it. Maybe I’m excessively careful about not hurting people. But is that a bad thing? After all, I don’t know which people whose work I need to criticize or even reject are strong enough to take it, and which aren’t.
And neither do you.
Being kind as well as clear becomes a moral mandate when you realize the power your feedback has to encourage another person to do their best work … or to shut them down creatively, possibly forever.
In “Wild Strawberries,” Professor Isak Borg is told in a dream, “A doctor’s first duty is to ask forgiveness.” We never know whom we may harm, or how deeply.
I told you a sad story, now here’s a happy one. I’m part of a small publishing company. Evaluating book proposals is where our process starts. Being clear compassionately is our mandate—we recognize the tremendous emotional risks folks take when they submit their ideas for review.
Last year an author approached us with a proposal that wasn’t quite right for us. We responded with detailed feedback about what would have made it the right fit for us … and we chose our words carefully to avoid inadvertently causing harm.
This year that author returned with a spectacular proposal that we’ve accepted gratefully and with real joy.
I thanked the author for having had the courage to come back—after all, I’d lacked that courage myself after my brush with rejection. The author thanked us for the feedback and the way we’d presented it, saying they would never have had the willingness to come back if not for the quality of our feedback.
As a result of an author’s determination and our compassionate clarity, our readers and this industry will benefit from an author’s brilliance.
Creators, never give up.
Gatekeepers, first be kind.
This story is a bit long, but I promise it will be worth it, because it contains the two most important principles every designer must know and take to heart if you intend to do great work anywhere, under almost any circumstances, over the long, long haul of your career.Sticking To It – fresh from JZ in Automattic.Design
Yesenia Perez-Cruz started her career as a designer at Happy Cog Philadelphia. From the first day, her design gifts were unmistakable. As her career progressed, she moved from one challenging role to another. At companies like Vox Media and Shopify, and at conferences around the world, she has been a design team leader, a popular speaker, an advocate for design systems, and a voice of our industry. Today that voice took book form.
Expressive Design Systems, the first book by Yesenia Perez-Cruz, is now available from A Book Apart.
“IN AN INDUSTRY that extols innovation over customer satisfaction, and prefers algorithm to human judgement (forgetting that every algorithm has human bias in its DNA), perhaps it should not surprise us that toolchains have replaced know-how.”
Our addiction to complicated toolchains and overbuilt frameworks is out of control. Web-making has lately become something of a dick-measuring competition. It needn’t stay that way.
If we wish to get back to the business of quietly improving people’s lives one thoughtful interaction at a time, we must rid ourselves of the cult of the complex. For more about why and how, see my new article, “The Cult of the Complex,” in A List Apart, for people who make websites.
Illustration by Kevin Cornell
Over the decades I’ve used computers, my drawing skill has all but vanished—along with my ability to do calligraphy or even write legibly. Which is why I’ve started forcing myself to sketch again every day. Practice is the best form of hope.
Recently, Josh Clark, Gerry McGovern and I have been questioning our industry’s pursuit of “engagement.” Engagement is what all our clients want all the time. It’s the ? 1 goal cited in kickoff meetings, the data point that determines if a project succeeded or sucked wind. When our clients muse over their Analytics, they’re almost always eyeing engagement, charting its tiny variances with the jittery, obsessive focus of overanxious parents taking a sick child’s temperature.
Engagement is our cri de coeur. Our products, websites, and applications live and die by it. But should they?
For many of our products, websites, and applications, duration of page visit, number of our pages clicked through, and similar signs of engagement as it is traditionally understood may actually be marks of failure. If a customer spends 30 minutes on her insurance company’s site, was she engaged … or frustrated by bad information architecture?
For these products, websites, and applications, we need a new metric, a new and different ? 1 goal. Think of it as speed of usefulness; and call it content performance quotient—or CPQ if acronyms make you feel all business-y and tingly inside.
The content performance quotient is an index of how quickly you get the right answer to the individual customer, allowing her to act on it or depart and get on with her day. It is a measurement of your value to the customer. For many apps, sites, and products, the content performance quotient offers a new goal to iterate against, a new way to deliver value, and a new way to evaluate success.
For many sites, engagement is still a valid goal
To be fair as well as explicit, spending extra seconds on a web page, and browsing from one page to another and another, remains a desirable thing on deep content sites like A List Apart and The Washington Post?—?sites that encourage slow, thoughtful reading.
A List Apart isn’t a place to grab code and get back to your web development project; it’s a place to ponder new and better ways of designing, developing, and strategizing web content. And pondering means slowly digesting what you have read. The Washington Post isn’t a purveyor of ten-second talking points and memorable but shallow headlines—it’s a place for detailed news and news analysis. That kind of reading takes time, so it makes sense if the owners and managers of those publications peruse their Analytics seeking signs of engagement. For everyone else, there’s the CPQ. Or will be, once someone reading this figures out how to measure it.
There’s also a new design paradigm that goes hand-in-hand with this new goal: shrinking your architecture and relentlessly slashing your content. It’s an approach we’ve begun practicing in my design studio.
But first things first. What exactly is the CPQ?
The content performance quotient (CPQ) is the time it takes your customer to get the information she sought, and here, less is more—or better. From the organization’s point of view, CPQ can be the time it takes to for a specific customer to find, receive, and absorb your most important content.
Come to where the messaging is
Consider the Marlboro Man (kids, check the Wikipedia entry), a silent visual spokesman for Marlboro cigarettes, created by the Leo Burnett agency for an era when Americans expressed their optimism by driving two-ton be-finned convertibles along the new highways that bypassed the old cities and the old urban way of life.
It was a time when Americans looked back on their historical westward expansion un-ironically and without shame. Cowboys were heroes on TV. Cowboys were freedom, the car and the highway were freedom, smoking the right cigarette was freedom.
On TV back then, when commercials had a full 60 seconds to convey their messaging, and nearly all were heavy on dialog and narration, Marlboro TV commercials were practically wordless. They showed a cowboy riding a horse. You saw him in closeup. You saw him in long shot. There were slow dissolves. There was music. There were no words at all, until the very end, when a suitably gravel-voiced announcer advised you to “Come to where the flavor is. Come to Marlboro Country.”
But it was in billboards along the highway and at urban entrance points where the campaign really lived. There was a beautiful shot of the cowboy doing cowboy stuff in the distance. There were four words: “Come to Marlboro Country.” One of them barely counts as a word, and you didn’t have to read any of them to get the message.
The billboards had one or two seconds to tell you everything, and they worked. At a glance, and from repeated glances over time, you knew that Marlboro was the filtered tobacco cigarette of the independent man who loved liberty. It was not the smoke of the neurotic urban dwelling subway rider (even if, in reality, that was the customer). Marlboro was for the libertarian in chaps. For the macho individualist with no crushing mortgage to pay off, no wife and kids to infringe on his horse-loving freedom. You got it all, without even knowing you got it. That’s performance.
Targeting convertibles on the information superhighway
In hindsight, it sounds ridiculous, but the super-fast storytelling worked: when I was growing up, Marlboro was what every child in my middle school smoked.
Remove the cancer and the other ethical problems from this story and hold fast to the idea of conveying information as close to instantaneously as possible. The geniuses behind the Marlboro Man achieved it by reducing their messaging to only what was needed—only what could be conveyed to a person passing a billboard at 60 MPH.
Your customer is not speeding past your messaging in a 1954 convertible, but she is speeding past it, and if you don’t optimize, she will miss it. For her to get your message, you have to work as hard as those evil ad wizards did. You must focus relentlessly on messaging (as well as design and site performance—but we’ll get into all that soon enough). Just as Leo Burnett cut their TV messaging to ten words, and their billboard to four, you must be willing to think twice about every word, every page. Mobile First taught us to focus above all else on the content the customer actually seeks. A better CPQ is what you get when you do that—particularly when you combine it with good design and optimal technical performance.
Most business websites contain dozens of pages that were made to satisfy some long-ago stakeholder. They are pages that nobody visits. Pages that do nothing to help the customer or advance the business’s agenda. Putting all that junk online may have made for smooth meetings ten years ago, but it isn’t helping your business or your customer. Our sites, apps, and products must do both.
Content performance quotient: the secret sauce
Lately in my design practice I’ve been persuading clients to create sites that might superficially appear less effective if you’re going by engagement metrics alone, but which are actually far more successful because they are more instantly persuasive. At my urging, our clients have allowed us to relentlessly cut copy and chop sections nobody looks at, replacing them with a few pages that are there to do a job. We are lucky to have smart clients who are willing to jettison hundreds of hours worth of old work in favor of a streamlined experience that delivers value. Not every client has the courage to do so. But more will as this idea catches on.
(By the way, don’t look for these projects on our studio’s website just yet; they are still in development.)
Serving only the content the customers actually need; streamlining and testing and fine-tuning the interaction to get the right customer to the right content precisely when they want it; wrapping the experience in an engagingly readable but also quickly scannable user interface; and doing everything in our power to ensure that the underlying web experience is as performant as possible—this, I believe, is the secret to increasing CPQ.
CPQ: the story so far
The idea of delivering much less (but much better) first occurred to me while I was looking over a fellow designer’s shoulder. My friend Fred Gates of Fred Gates Design is working on a project for a client in the nonprofit education space. The client’s initial budget was not large, so, to be fair, they suggested Fred only update their homepage. But Fred being Fred, if he was only going to design a single page, he was determined to deliver tremendous value on it.
By focusing relentlessly on the objectives of the entire site, he was able to bring all the principal interactions and messages into a single performant homepage, essentially reducing a big site to a lean, fast, and more effective one.
Far from getting less, his client (and their customers) got much more than they expected.
Inspired by what my friend had achieved, I then proposed exactly the same approach to a client of ours. Not because their budget was a problem, but because streamlining was clearly the right approach … and a redesign is the perfect opportunity to rethink. When you repaint your living room, it gives you a chance to rethink your couch and divan. You’re most likely to consider changing your diet when you’ve begun a new exercise program. Clients are people, and people are most receptive to one form of change when they are already engaged in another.
Positioning CPQ as an aspect of technical performance is another way to overcome stakeholder skepticism. Lara Hogan has more on persuading peers and stakeholders to care about technical performance optimization.
We are a few weeks away from launching what we and the client are calling Phase I, a lean, performant, relentlessly message-focused web experience. But if we’ve done this right, we won’t have much to do in Phase II—because the “mini-site” we’re delivering in Phase I will do more for the company and its customers than a big site ever did.
I’ll be back with updates when we launch, and (more importantly) when we have data to share. Follow @DesignCPQ to stay on top of CPQ thinking.
Living in New York and working in media, I talk to nonprofit organizations a lot. Big or small, they all say the same. No matter how much work they put into their apps and websites, they just don’t get enough new members. No matter how many expensive redesigns they undertake, they still don’t convert. Why is this?
Generally, it’s the same reason any site with a great product doesn’t convert: the organization spends too much time and effort on the pages and sections that matter to the organization, and too little on the interactions that matter to the member. (“Member” is NGOese for customer.)
Of course there are sites that don’t convert because they have a crappy product. Or an inappropriately priced product. Or because their content attracts people who are never going to be their customers, and gets missed by people who might want what they’re selling. Or because their content attracts nobody. Failure has a thousand fathers, and most businesses fail, so the fact that a website doesn’t convert could mean almost anything. (To know what it actually means, you need data, and you need to watch users interact with it.)
But with nonprofit sites, the product is almost always great, and the person visiting is almost always interested. So what goes wrong?
Never mind the user, here’s the About page
What goes wrong is that nonprofit stakeholders are so passionate about their mission—a passion that only deepens, the longer they work there—that they design an experience which reflects their passion for the mission, instead of one which maps to a member’s mental model.
NGOs lavish attention on their About page and mission statement and forget to work on their members’ immediate, transactional needs. And this is true even for those members who are as passionate about the cause, in their own way, as the stakeholders are in theirs. In the wake of a hurricane, a passionate member thinks of your site in hopes of donating food or giving blood. But nothing on the site calls out to that member and addresses her needs. All she sees are menus, headlines, and buttons trying to lead her to what matters to the organization—namely, the things it says about itself.
How to satisfy the user and convert at the same time
First, decide what one single action you, as the organization, want the user to perform. Should they sign up for your mailing list? Make a donation? Keep it singular, and make it simple. One form field to fill out is better than two; two is better than four.
Next, put yourself in the member’s shoes. What does that member wish to achieve on your website? Have you created transactions and content that allow her to do what she came to do? Have you designed and written menus, links, and headlines that help her find the content that matters to her? Forget the organization, for now. Pretend the only thing that matters is what the user wants. (Because, ultimately, it is.)
Do these things, and weave your singular, simple conversion opportunity into each screen sequence with which your user interacts. To optimize your chance of success, place the conversion opportunity at the very point where the user successfully finishes transacting the business that mattered to her. Not before (where it is only a distraction). Not in another part of the site (which she has no interest in visiting). She’s a lot likelier to sign up for your mailing list after you’ve helped her donate food to her neighbors than she is to sign up in an unsolicited popup window.
Thank you, Captain Obvious
All the above suggestions are obvious common sense, and have been known since transactional web design was in its infancy in the 1990s. And yet, because of organizational dynamics, internal politics, and our getting so close to our own material that our eyes go out of focus, we forget these simple ideas more often than we use them—and fail when success is so easy, and so close to hand.
I’ll be leading a panel discussion, Dispatches from the Future: Nonprofits and Tech, on Wednesday, 20 September, in Brooklyn.
NICK Disabato (@nickd) and I discuss heat maps, conversion rates, design specialization, writing for the web, Jakob Nielsen, and the early days of blogging in Episode ? 159 of The Big Web Show – “everything web that matters.” Listen and enjoy.
THIS year’s Poynter Digital Newspaper Design Challenge was an attempt by several designers and pundits, working and thinking in parallel, to save real news via design. In Part 1 of my report from Poynter, I discussed the questions driving the challenge, and talked about the design work done in response to it by my colleagues Kat Downs Mulder, Mike Swartz, Lucie Lacava, and Jared Cocken. Here in Part 2, I’ll discuss my own work and the approach we took at my studio. But we begin with a quick look back at the past designs that brought us to this point:
Experiment 1: The Deck
During the past decade and a half, as both a publication designer and a publisher, I watched in horror as our publications became reader-hostile minefields of intrusive ads, overlays, and popups. The first thing I tried to do about this (besides removing the web equivalent of chart junk from my magazine) was to offer an alternative approach to advertising via The Deck, an ad network I cofounded with Jim Coudal of coudal.com and Jason Fried of Basecamp (formerly 37signals). The Deck permitted only one appropriately targeted ad per each page of content viewed. As primary instigator Jim Coudal put it:
A buy in The Deck reaches the creative community on the web in an uncluttered, controlled environment, far more valuable than a standard banner or a single text ad among dozens of others.
Jim, Jason, and I hoped that our cost-per-influence model would replace the CPM race to the bottom, and that our quasi-religious use of whitespace would be widely imitated by the smartest publications online.
But that didn’t happen. Advertising just got more intrusive. The Deck succeeded as a small business supporting a network of interesting small publications, but not at all as a primary influencer on the direction taken by advertising that supports web content.
Experiment 2: Readability
Then about seven years ago, my friend Rich Ziade and his engineers created Readability, an app that sat between you and the ugly site you were trying to read, the way screen readers sit between visual websites and blind web users. Readability grabbed an article page’s primary content, removed the junk, and replaced the cluttered and illegible layout with a clean, readable page inspired by the clarity of iBooks and Kindle, which were just taking off at the time.
Rich released Readability 1.0 as open source; Apple immediately absorbed it into the Safari browser, where it continues to provide Safari’s built-in “reader” mode. (Safari’s “reader” mode was Apple’s first step in decluttering the web and returning it to the people who use it; “content blocking” would be the second step.)
Moreover, Readability 2.0, released by Rich’s then-company Arc90 the following year, added automatic payment for content creators slash publishers, as I explained at the time to anyone who would listen. Had Readability been allowed to continue the experiment, content monetization might have been less of a problem than it is today, and publication brands (the notion that it matters who publishes what we read) would be in exactly the same pickle they’re in anyway—except that readers would get their news in Readability’s attractive and customizable format, instead of from Apple News, Facebook, and the like.
I used to go around the world on lecture tours, warning my fellow designers that if we didn’t figure out how to declutter and compellingly brand sites, apps like Readability would do it for us. I still go around on lecture tours, but I’ve moved on to other issues. As for Readability, it was killed by a digital lynch mob after one powerful blogger, misunderstanding the motivation behind it, issued the digerati equivalent of a fatw?. But that’s another story.
Experiment 3: Big Type Revolution
In 2012, inspired by Readability and frustrated by the industry’s determination to make ever less legible, ever more cluttered sites full of tracking and popups and everything except what readers need, I bet big on large type:
This redesign is a response to ebooks, to web type, to mobile, and to wonderful applications like Instapaper and Readability that address the problem of most websites’ pointlessly cluttered interfaces and content-hostile text layouts by actually removing the designer from the equation. (That’s not all these apps do, but it’s one benefit of using them, and it indicates how pathetic much of our web design is when our visitors increasingly turn to third party applications simply to read our sites’ content. It also suggests that those who don’t design for readers might soon not be designing for anyone.)
Writing in Forbes, Anthony Wing Kosner saw the future in my initially crude experiment:
If you want to know where the web is going, one clue is to look at the personal sites of top-tier web designers. And one trend that just bubbled to the surface is large body type—the kind you don’t have to command-plus to read.
Jeffrey Zeldman…made a particularly strong point about it in his “Web Design Manifesto 2012,” that he published yesterday.
Not to brag (okay, too late), but he wasn’t wrong. It was the future.
(Also, I’m fairly sure I wasn’t the only designer at the time who reacted against tiny type and cluttered anti-user layouts by stripping pages down to only their most necessary elements, and boosting the type size to enforce a more relaxed reading posture. The idea was in the air.)
The experiment becomes the norm
In any case, soon enough, readable (big type and plenty of whitespace) layouts starting popping up everywhere. At medium.com. In Mike Pick’s redesign of A List Apart. In article pages for The New York Times, Washington Post, Vox, Newsweek, The New Yorker, and, eventually, many other publications.
An uncluttered page focused on the reading experience (reminder: big type and plenty of whitespace) is now the default at several leading news publications. But many smaller publications, struggling just to survive, have not kept up. And so we have a perfect crisis:
Publications that do not encourage reading, loyalty, or repeat visits are struggling to survive at the very moment real news is under attack from an authoritarian president. What to do?
My response to the Poynter Design Challenge
There are many ways to respond to an existential crisis like the one facing most news publications. You can rethink the relationship between reader and publication. Rethink the job of the publication. Make news work more like a lifestyle app. Make it more immersive. My colleagues followed those paths out brilliantly (as described in Part 1).
But I went for the low-hanging fruit. The thing any publisher, no matter how cash-strapped, could do. The thing I had seen working since I started yelling about big type in 2012. I went for a clean, uncluttered, authoritative, branded page. Authoritative because this isn’t fake news. Branded because the source matters.
The easiest, fastest, most readily attainable path to clean, uncluttered, authoritative, branded design is through typography.
Any publication can be readable
Any newspaper, however poor, can afford better typography. Any newspaper with a designer on staff can attain it, if the paper stops treating design as a lackey of marketing or editorial or advertising, and sets designers free to create great reading experiences.
In my work, which is still underway (and will continue for some time), I focused on creating what I call “reader” layouts (and probably other designers call them that too; but I just don’t know). Layouts that are branded, authoritative, clean, uncluttered, and easy to read.
I played with type hierarchies and created simple style guides. Most of my little pages began as Typecast templates that I customized. And then Noël Jackson from my studio cleaned up the HTML and CSS to make it more portable. We put the stuff up on GitHub for whoever wants to play with it.
These are only starting points. Any designer can create these kinds of layouts. There’s nothing special about what I did. You can do the same for your paper. (And if you can’t, you can hire us.)
The work I share here is the start of a project that will continue at our studio for a long time. #realnews for the win!
- To Save Real News
- The Year in Design
- Digital Newspaper Design Challenge: A Report from Poynter – Part 1
- Ad Blocking and the Future of the Web
- In Defense of Font Size Widgets
- Publishing Versus Performance: Our Struggle for the Soul of the Web
- The Nation, America’s oldest weekly news magazine, launches responsive, large-type redesign
- “Design doesn’t matter”
- Understanding Web Design
- A List Apart 4.0
CAN design create a better user experience that engages readers and drives revenue? Can it fight fake news and help save real journalism at a time when news organizations large and small are underfinanced and under attack?
These questions drove the Poynter Design Challenge, “a project to create new visual models for digital news publications” sponsored by William R. Hearst III, hosted by the Poynter Institute, and directed by publication designer Roger Black.
The challenge began October 17–18 in New York, with five pundits and five designers, of whom I was honored to be one, workshopping a project brief during a two-day conference event at the Columbia Journalism School. (You can watch videos of all these sessions courtesy of Fora.tv.)
The next phase took place yesterday in St. Petersburg, Florida, as the four other designers and I presented our work to a live audience. In this short piece, I’ll talk about the designs my colleagues presented; in the next, I’ll discuss my own.
Reconnecting with the people: the challenge for digital news
Roger Black described the difficulties facing digital news publications:
The challenge is serious. Fake news crowds real news. Numbers no longer add up for publishers. Readers jump from site to site without knowing where they are, or staying for long. You can see the brief for this project here.
Can design help? Well, as a I designer, I think it can. I mean, the design of most news pages is not what you’d call attractive. But the solutions proposed at Poynter will be much more strategic than cosmetic. And they’re strategies that can be combined.
—Five design answers that add up, Roger Black, January 20, 2017
“A news publication might think a bit more like Fitbit”
Between us, we designers had about a century of experience designing digital publications—internally, as consultants, or both. This means that, even though an open “design challenge” brief necessarily omits an unknown number of the specific requirements any actual publication design assignment would include, all of us were aware of, and to some degree addressed, typical news publication requirements not included in our brief.
Kat Downs Mulder, Graphics Director at The Washington Post, shared a prototype for a big-brand news site. Kat had just given birth to a healthy baby boy (congratulations!), so her work was presented by two of her colleagues from The Post. Kat did not design with the avid, committed news reader in mind (since those folks are not the problem for most publications). Instead, she pondered how to engage the typically fragmented attention of today’s distracted and passive news reader:
“A big-brand news site [should be] aware that people have a lot more to do in their lives than read the news,” Kat posited. Thus, “A news publication might think a bit more like Fitbit. That is, it should make you feel like it’s working for you. A reader should say, ‘I’m reading everything I need to know.’”
Keep that dopamine pumping
Kat presented a multi-paned prototype. The wider pane on the right contained news content; the narrower pane at left was navigation. As I’ve just described it, this isn’t much different from the current Post website, but Kat’s prototype was very different, because it prized reader control over editorial director control; kept track of what you read; encouraged extra reading the way Fitbit encourages extra steps, and rewarded it the same way Fitbit does, with an accumulation of points that give the reader dopamine hits and create the perception that the “news app” is working for her—as a rewarding part of her busy lifestyle.
An Operating System for your city
Mike Swartz, Partner at Upstatement, a design and engineering studio in Boston, took on the challenge to smaller publications (such as his original hometown paper, the Pittsburgh Post-Gazette) which lack the resources of a Washington Post or New York Times.
Mike’s presentation, “information OS for a city: redefining the opportunity for local media,” turned the journalistic prowess of a good local paper into a superpower, connecting readers to their city the way the “terrible towel” stunt concocted in desperation by radio announcer Myron Cope in 1975 reconnected Pittsburghers to their hometown football team, and helped the Steelers win Super Bowl X over the Dallas Cowboys.
There’s a potential for an operation like the [Post Gazette] to rebrand itself as more of an “informational operating system” for its city. With different types of products that are focused and useful and not necessarily bundled into a traditional news format, we can create more enjoyable experiences and more useful products readers will love.
Building reader interest and finding a way to pay for it all
Where the rest of us avoided the elephant in the room, in her design Lucie Lacava, president of Lacava Design Inc., boldly confronted the challenges of advertising and monetization. Algorithm-driven advertising frustrates users, who, in desperation, block it. Choked for income as a result, publications and advertisers create more and more intrusive forms of unwanted advertising. Nobody wins.
And while subscription models have worked, at least partly, for some of the very top news publications, such models are not likely to help most news publications in the near term.
Digital publication as digital application
Lucie’s design addressed these challenges by recasting the news as a hyper-customized application targeted at younger users, who get to choose news streams and ads that are relevant to them. “The elusive millennial” was Lucie’s target. I cannot do her idea justice with a couple of paragraphs and a single screen shot.
Affordable, immersive VR is here
Jared Cocken, brand and product designer for hire and co-founder of STYLSH.co., approached the “attention war” by showing how any size publication could create “video or VR driven stories that enrich a user’s understanding of the world around them.”
Because VR video is immersive, it holds viewer attention. Because it is reality-based, it fights fake news. (It’s hard to call bullshit on a scene you can explore from any angle.) VR also, potentially, builds compassion. It’s one thing to read about conditions in a Syrian refugee camp, another to visually experience them in VR.
Until now VR and video have been cost-prohibitive, but, working (and co-presenting) with VR startup founder Anna Rose and Hollywood producer/actor Banks Boutté, Jared showed how even woefully under-financed newsrooms can use newly designed, super-affordable tools to create “video or VR-driven stories that enrich a user’s understanding of the world around them.”
Parting thought for now
Blogging about a conference is like tweeting about a sexual experience. You had to be there. I wanted to record and share the outlines of what my fellow designers presented, but these few paragraphs should in no way be considered authentically representative of the deep thinking and work that went into every presentation.
You may see holes in some of the arguments presented here. In some cases, I might agree with you—some ideas, while dazzlingly creative, did not seem to me like the right way to save news. But in most cases, if an idea seems wrong, blame my telling. If you had been there and heard and seen everything, the value of the proposal would have far more apparent than it can be here.
I love that each of us took on a quite different aspect of the problem, and addressed it using very different tools. I’ll be back soon with a short write-up of the design approach I took. Meanwhile, I want to thank all the pundits, designers, and attendees in New York and St. Petersburg—and the Poynter Institute, Roger Black, and William R. Hearst III for making it all possible.
So reads the headline of a January 15 news story in The Washington Post. Saying that she’d been sexually abused by a family member, 12-year-old Katelyn Nicole Davis, of Polk County, Georgia, hanged herself, broadcasting the suicide via a 40-minute live stream seen worldwide.
While YouTube immediately removed the video, it “lingered on Facebook for nearly two weeks,” according to the Post’s reporting of Buzzfeed and other unspecified “media reports.”
First, it just hurts
I keep rereading the short article and its headline as if it will make sense or stop hurting on the next scan-through. As a human being, I can’t fully process the horror and sadness of this tragedy.
I was initially going to write “as a human being and the father of a 12-year-old girl,” but that last part shouldn’t matter. You don’t need to be the parent of a child Katelyn’s age and sex to feel the feelings.
Nor does there need to be someone in your life who was raped or molested—although, whether they’ve told you about it or not, there almost surely is. Statistically there are likely multiple someones in your life who have suffered unspeakably, too frequently at the hands of people whose main job in life was to protect them. I’m sorry to have to write these words, and I hope reading them doesn’t rip open wounds.
But the point is, even if you and everyone in your circle has lived a magical life untouched by too-common crimes and horrors, it is still unbearable to contemplate too closely what Katelyn must have felt, and what she did about it, and what watching what she did must have done to those who watched the video—both the empathetic majority, and the hopefully small minority of viewers who, because of their own damage, may have gotten off on it, edging just that much closer to some future sociopathic acting-out.
A designer’s job
On a personal level, I’m good citing horror and sadness as a reaction to this ugly story. But as a web and product designer, I can’t help but see it as another instance of what Eric Meyer and Sara Wachter-Boettcher warn about in their book, Design For Real Life. Namely:
For every wonderfully fresh use of the internet’s social power we conceive, we must always ask ourselves, how might this be used to make our world more hurtful, less loving, less kind? What unforeseen dangers might our well intentioned innovation unleash?
I published Design For Real Life, but I don’t cite Katelyn’s story or repeat Sara and Eric’s moral here to sell copies. I do it to remind us all that what we make matters. Our design decisions matter. The little qualms that might float through our minds while working on a project need to be examined, not suppressed in the interest of continued employment. And the diversity of our workforce matters, because it takes many different minds to foresee potential abuses of our products.
Streaming suicide, monitoring content
Live.me isn’t the first live streaming app, and, as a category, live streaming likely does more good than harm. The existence of a live streaming app didn’t drive a girl to kill herself, although, in despair at not being listened to, she might have found solace and an appeal in the idea that her suicide, witnessed globally, could lead to an investigation and eventual justice.
Similarly, when Facebook began allowing its customers to perform live streaming (or, in Nicole’s case) to post video streams from third parties, use cases like pre-teen suicide or the torture of a mentally disabled teenager most likely did not factor into those business decisions. But here we are.
And, as much content as Facebook produces in a day, you can’t really fault them for not always being johnny-on-the-spot when some of that content violates their guidelines. But surely they can do better.
Invention is a mother
There’s no closing Pandora’s box, nor would we wish to. But we who create websites and applications must remain mindful, honest, and vigilant. We must strive to work in diverse teams that are better than homogenous groups at glimpsing and preparing for the unforeseen. More than ever, we must develop design practices that anticipate the horrible and tragic—not to mention the illegal and authoritarian.
And in life, as well as design, we must do a better job of asking ourselves what we are not seeing—what struggles the people we meet may be hiding from us, and how we can help them before it is too late.
SORRY. I disagree. Nonsemantic classnames that refer to visual styles will always be a bad idea.
I’m sure you’re a good coder. Probably much better than I am these days. I know most of you weren’t around for the standards wars and don’t know how much damage non-semantic HTML and CSS did to the web.
I’ve worked on big sites and I understand how bloated and non-reusable code can get when a dozen people who don’t talk to each other work on it over a period of years. I don’t believe the problem is the principle of semantic markup or the cascade in CSS. I believe the problem is a dozen people working on something without talking to each other.
Slapping a visually named class on every item in your markup may indeed make your HTML easier to understand for a future developer who takes over without talking to you, especially if you don’t document your work and create a style guide. But making things easier for yourself and other developers is not your job. And if you want to make things easier for yourself and other developers, talk to them, and create a style guide or pattern library.
The codebase on big sites isn’t impenetrable because developers slavishly followed arbitrary best practices. The codebase is broken because developers don’t talk to each other and don’t make style guides or pattern libraries. And they don’t do those things because the people who hire them force them to work faster instead of better. It starts at the top.
Employers who value quality in CSS and markup will insist that their employees communicate, think through long-term implications, and document their work. Employers who see developers and designers as interchangable commodities will hurry their workers along, resulting in bloated codebases that lead intelligent people to blame best practices instead of work processes.
The present is always compromised, always rushed. We muddle through with half the information we need, praised for our speed and faulted when we stop to contemplate or even breathe. Frameworks built on newish worst practices seem like the way out, but they end up teaching and permanently ingraining bad habits in a generation of web makers. Semantics, accessibility, and clarity matter. Reusability is not out of reach. All it takes is clarity and communication.