This talk by Stone LeBrande, Creative Director at EA/Maxis, was the single most inspiring session I attended on Thursday. His thesis centered around the application of information visualization techniques like those described by Edward Tufte to encapsulate complex design specifications in a single, predominantly visual page.
LeBrande opened the talk by asking how many designers in the audience had worked on a traditional "design bible". Many hands went up. Then he asked how many had actually read a design bible cover-to-cover: virtually no hands, followed by nervous laughter. The point was implicit: design bibles are a waste of time.
Then he moved on to wikis, noting their recent popularity (he didn't say it, but I personally attribute that to the rise of Agile/Scrum development approaches, for which a wiki is a much better match). He talked about some of the advantages of wikis: that they are easy to access, quick to update, allow anyone to contribute, and integrate history and change tracking (and by extension, accountability). But, he said, they also require constant maintenance -- a difficult thing to fit into a busy production schedule -- and perhaps most importantly, wikis tend to hide design relationships by virtue of "chunking up" all the elements of the design onto their own pages.
LeBrande called out a problem common to both design bibles and wikis: most people don't read past the first page. The solution, then, is to* use only one page*!
He showed several examples that inspired his approach: architectural drawings and blueprints, Lego instructions, an exploded engineering diagram of what appeared to be a jet engine, childrens' placemats (like you see at some family restaraunts, with some highly-illustrated educational material). The feature common to all these examples was their clear communication of information, fit to a single page, and tailored for a specific audience.
Next, he showed a long list of examples of actual one-page designs he produced. Regrettably I don't have any images to post, but he did indicate that the slides from this talk will go up on his website, http://www.stonetronix.com, sometime in the next couple of weeks. I highly recommend keeping an eye on that; the slides throughout this presentation were frankly magical.
He showed a one-page UI design for Diablo 3 (LeBrande worked at Blizzard for a while before joining EA/Maxis), and related the story of discovering that a Blizzard programmer had hung that design on his office wall because he "thought it looked cool". LeBrande quipped: "As a designer, your goal is to communicate information to your audience. If they're hanging it up on the wall then, gee, you're getting through to them!"
He showed several iterations of a one-page design for the entirety of Diablo 2's first act. It was elegant, clear, and frankly shocking to discover that all the relevant information was present and easily locatable at a glance. A highly visual, isometric representation of a world layout dominated the center of the page. Obviously, Diablo 2's world layouts were randomly-generated: this representation was abstract, indicating general relationships between key elements like the town, dungeon entrances, and underground levels. Around the edge of the page were boxed callouts for each type of creature the player might encounter: the callouts contained a simple iconic representation of the creature, aiding at-a-glance location of information, as well as a brief caption and a few key stats such as creature level and any unique special abilities. At the edge of each callout were expected player level, play time to date, and play duration for that section.
The most immediately unique thing about this approach is how visual it is. None of LeBrande's one-page examples contained a paragraph; most didn't even contain a sentence. Each was dominated by a large, central visual: a world map, a flow chart, or the surprising "football document" describing a number of meaningful variations on spatial relationships between players and monsters in Diablo 2's combat system, with respect to specific abilities and spells.
LeBrande moved on to describing his work on The Simpsons, starting with a simple map of Springfield. This was straightforward. The next several slides were similar one-page maps for the interiors of various buildings, including callouts for specific gameplay interactions, presence of key items, and so forth. Again, straightforward. Then he put them all together by simply placing every interior map around the outer edge of the main Springfield map, and demonstrated that, because he created all this content as vector art in Adobe Illustrator, one can zoom from a high-level overview of the entire game world all the way down to micro-details like a single scratch-off ticket on a table inside a building. He indicated that while he had to zoom a lot to display these details on the computer screen, they are all easily legible in print.
Which leads me to a key theme of LeBrande's talk: hard copies. He prints out his designs and hangs them up in high-traffic areas of the studio. Because they're visually interesting, people check them out as they walk by. Because they present information in well-organized layers, they compel people to "explore" the document. And just like that, his design documents are being widely absorbed into the studio conciousness with an effectiveness no intimidating design bible could ever achieve. He noted that designers shouldn't be afraid to use larger paper: the Springfield map example was much, much larger than a single 8.5" x 11", and most of the other examples he showed were at least legal-size.
LeBrande also impressed upon the audience the importance of printing out your design, walking over to your programmer (for instance) and physically handing him a copy. There are a few advantages here. Obviously this process compels face-to-face interaction, which is clearer and more personal than email, IM, etc. But in addition to that, giving an implementer a hard copy of this kind of design tends to lead to that implementer marking up his copy with all kinds of personal notes. LeBrande showed a slide of a one-page mission spec from Spore: Galactic Adventures, followed by a scan of the same from the relevant level designer's desk from a few days later. The scan was *covered *with annotations, notes, and extra details and information the level designer had integrated into the design. This showed two things: the effectiveness of a well-presented one-page design as an anchor for iteration on that design, and the degree to which the level designer was interacting with and attentive to that design.
LeBrande concluded the talk with a summary of the benefits of one-page designs. He noted that this is a much easier way to share designs throughout the team, because people are less likely to be intimidated and more likely to explore and realize the design. He also indicated that one-page designs force the designer to develop a very complete understanding of the problem, as a prerequisite to being able to distill the solution down to a single page in the first place. His approach also highlights relationships in design systems, unlike wikis and design bibles which tend to hide those relationships.
This talk was, for me, electrifying. I've been trying to distill design documentation at the studio into a more concise, focused form for a while now, being well-aware of the downfalls of design bibles on account of having written and worked with them in the past. I thought I was making strides, but after I met Stone LeBrande I realized I was only taking baby steps. I will definitely explore applying his methods to my own work in the future.Posted In: