As every major news media organization grapples with how to best present their content online, most experts know it can be a complex design challenge. But redesigning The Onion was a special challenge because of its prominent place as the premier source of satirical news reporting. Or, as The Onion ironically puts it, "America's Finest News Source."
This challenge hit home for Ralph Lucci, partner and Creative Director at Behavior Design, the firm selected to redesign theonion.com to better accommodate and capitalize on the magazine's rapid growth. The Onion's mischievous editors published a front-page feature article (both online and in the print edition) under the byline "by Ralph Lucci" in order to emphasize the project's essential design strategy: the more The Onion looks like a real news source, the funnier the jokes. Of the experience of seeing his name in print, Ralph said "There I was, on the front page of The Onion, but somehow I'd been promoted to 'Executive VP of Marketing, PepsiCo'. The power of fake news really hit home!"
Ralph and his Behavior Design colleague (and fellow founding partner) Chris Fahey quickly got the point - the more "real" and trustworthy-looking the design, the funnier the fake news will be. Chris said "It's not enough to look real - The Onion needed to look like a trustworthy and leading news outlet on par with the New York Times or ABC News". Furthermore, The Onion is such a well-known and strong brand that Behavior had to get things just right or The Onion's dedicated and tech-savvy fan base would blog the paper into oblivion.
So instead of simply re-working the page layout, Behavior redesigned the digital version of The Onion from scratch as if they were launching a real newspaper. This meant cataloging all of The Onion's past, present, and future content needs, understanding and defining their business objectives and then redesigning the user interface for a more dynamic and content-rich experience. The core of this challenge was reorganizing hundreds of archived articles into an intuitive, highly scalable navigational hierarchy that would keep millions of digital readers happy in any number of formats, from cell phone to iPod.
The Onion's incredibly popular Archives, from which classic stories have been emailed from friend to friend for years, is a core piece of The Onion's overall value proposition. But they were closed off in a members-only area of the site when Behavior was first engaged. Behavior helped create a visual design and business justification for "liberating" these articles and making them free to the public, but incorporating a more aggressive yet balanced advertising integration approach. The "long-tail" effect - where historic content can have a long but lucrative lifespan - is a phenomenon that is almost perfectly exemplified by The Onion's hilarious and well-loved archive of classic humor.
Behavior's interface design solution included over 40 unique templates based on a tight but flexible grid structure, influenced by the columns of classic newspaper design. This allowed for a clear and logical basis for the layout of new pages, and gave The Onion's staff a sustainable solution to meet the paper's future needs.
The Onion's grid system permits a balance between primary and peripheral content, advertising, links and value-added functionality and clarity. The grid has 16 equal-sized columns plus an additional, outsized column for the left-hand navigation. Because The Onion's pages are sufficiently complex, this format allows for lots of guidance and flexibility in laying out the paper's elements.
Behavior also extended and refined this design system into a full redesign of The Onion's popular AV Club, their "non-fiction" magazine of media and cultural reviews.
On the tech side, Behavior worked closely with The Onion's tech team to deliver a powerful content platform. Behavior recommended and helped The Onion's team integrate a new open-source Content Management System for the site. And, importantly, the final product features extensive use of XHTML and CSS for a modular, semantically-correct separation of form and content that capitalizes on the power of the modern Web browser.
About Behavior Design
Behavior creates compelling user experiences to help our clients strengthen online brands, improve website usability, increase online revenues, and decrease operating costs. Since 2001, Behavior has directed successful web development initiatives for the nation's top brands and companies, including JPMorgan Chase, ResortQuest International, IAC/InterActiveCorp, HBO, Unilever, XM Satellite Radio, The Museum of Modern Art, Smithsonian Institution and The Onion.
Behavior Design: https://www.dexigner.com/directory/detail/7956