If These Wheels Could Talk book; 34 x 6.5in. (spread), 116ppg. / 2004

Soon after the dot-com and 9/11 crashes, my design job also crashed. I set about looking for another, through other firms, recruiters, friends, friends of friends, and so on. All unable to take on the frivolous weight of an underdeveloped type and image manipulator, I broadened my search criteria: assistant… receptionist… data enterer… Anything that would have me back in the office environs to which I had grown so entitled. But there was nothing to be had. Facing the loss of everything, the idealization of pre-crash innocence struck me. I printed out a few standard government forms, borrowed a friend’s car and found myself driving southward to the King County Metro headquarters. I was on my way to becoming a bus driver.

Public transportation is one of the great noble causes of our time, and the bus embodies the struggle most colossally: angling through bourgeois car traffic to transport the proletariat affordably to their destination. Having grown up without a car, I had developed a keen appreciation for the bus’s role, and, as the false hopes of cubicle walls crumbled, to give my hands to one of their great helms all of a sudden seemed right. But, for all my idealization, I also knew the motley reality of what goes on above the turning wheels: The bus riding masses are an odd bunch, particularly in a city where almost everyone who can drives a car instead…

If These Wheels Could Talk title page; 34 x 6.5in. (spread), 116ppg. / 2004

Even before my career epiphany, the bus, and particularly those who rode it, had been so fascinating to me that I often ruminated that someone could (and should) write a book about it. Some years after my drive downtown, nearing the end of the Visual Communication Design (VCD) program at the University of Washington, I decided I would write that book. This was to be a documentary exploration into extra-ordinary human behavior, captured from a series of bus rides.

Of all the routes in Metro’s quiver, route 7 is one of the most eccentric, and, at the time of this project, I knew it quite well. It starts in the University district, with its preppy students and punkish homeless, then ambles up to Capitol Hill’s prideful exhibitionists and holy hipsters, turns around the plucky community college and then hurdles downtown, where business gets serious and youth goes to die. I lived in the middle and commuted to both ends. In homage to this moving cross-section, the book is composed as a series of seven rides.

Interaction with the book is meant to invoke the bus riding experience. The vehicle, itself, is large and unwieldy in every dimension. The book is 34″ across when straightened out, almost six inches thick, and quite heavy. Though over 100 pages, there are no page numbers; rather, it is based on time to get from one end of a story to the other. The table of contents shows the journey you will take through the read, a legend of symbols (such as character descriptions and ambient noises like laughing or stop-bell ringing), and a timetable, so you know when your story is coming.

If These Wheels Could Talk table of contents; 34 x 6.5in. (spread), 116ppg. / 2004

Readers are invited into new stories by a new set of doors rolling up. For those who really want to immerse themselves in the bus ride experience while careening through the book, a CD of ambient bus noise sits on the hub of the first wheel.

If These Wheels Could Talk spread (story coming); 34 x 6.5in., 116ppg. / 2004

If These Wheels Could Talk spread (story arrival); 34 x 6.5in., 116ppg. / 2004

A true connoisseur of the bus understands the implications of everything from the machine to the madness within. Express routes traversing the city and then ending in the bus tunnel downtown had been taken in beautiful Italian Bredas that would convert from diesel to electric “trolley” mode via long, raisable contact rods that would slide power from a dense network of live overhead wires. Sadly, these were being overtaken by the criminally ugly, though presumably more practical Canadian New Flyers, which were truer hybrids in that they no longer needed the trolley wires to sustain electric power. Before even the Bredas were the German M.A.N. machines of equivalent industrial elegance but, by this point had only kept presence with aging, 100% electric trolleys on local urban routes; their sophisticated gestalt belied an obstreperous tendency to toss their electric contact rods (and thus, all power) if corners weren’t taken with surgical accuracy. Filling in the gaps were useful, if unremarkable, American Gillig Diesels. Depending on the day and time, the number 7 may have employed any of these buses.

Once inside one of the great battlewagons, the real psychological war begins. Within each bus is a series of micro neighborhoods: Elderly, lonely and confused up front, huddled masses in the low front-facing rows, superior types high over the wheel wells, focused readers and motion-starved toddlers in the windowless, articulating mid-section and conniving youth slammed as rearward as possible. To mismatch your persona with the expectations of the community could be uncomfortable at best. However, increased rider density of any given route will dissipate these presumptions.

As you enter a story, a page lets you know where you are in the route, what kind of bus is taking you, how full it was, who the primary characters were and where they sat.

If These Wheels Could Talk spread (chapter head); 34 x 6.5in., 116ppg. / 2004

Technically, of course, I didn’t write this book. I could have, I suppose, but I thought it would be a hell of a lot more interesting if the people on the bus wrote it, themselves. In order to make this happen, I recorded conversations going on around me on my everyday commutes, then merely transcribed them upon returning home every night. The final seven stories were culled from about 25 ride recordings.

If These Wheels Could Talk spread (story text); 34 x 6.5in., 116ppg. / 2004

The text of the conversation is set temporally. Gaps in conversation correspond to gaps in typography. Similarly, when more than one person speaks at a time, type overlaps. Though the book is over 100 pages, there are no page numbers. Rather, a small clock ticks by at the right side of each spread. Each character is given a color, icon and a typeface that correspond to their gender, age, and personality as I could glean them from my brief overhearings. New entrants to the story are cued with their icons as they become audible, as they so often do.

Concurrently with, and helping to deflect from, my overhearing, I shot abstract photography of the great machines and their surroundings for abstract visual context. Marbled rubber flooring, cracked vinyl seats and polished steel railings met with glimpses of light and corners as I rolled through the streets.

If These Wheels Could Talk spread (story / imagery); 34 x 6.5in., 116ppg. / 2004

Most of the text is actually quite small. It is the equivalent of the din of public chatter. It’s temporal setting and iconic cues offer a sense of volume and pace. But you don’t have to overhear very hard before someone says something that jumps clearly above white noise. Such gems were treated as pull quotes, set emotively within the photographic glimpses.

If These Wheels Could Talk spread (story / imagery / pull quote); 34 x 6.5in., 116ppg. / 2004

If These Wheels Could Talk spread (story / imagery / pull quote); 34 x 6.5in., 116ppg. / 2004

If you’re lucky, your point A and point B are driven between, directly, by one Metro bus. However, this is by no means guaranteed, particularly if those points are separated by some distance and/or are not represented as a stop within the downtown bus tunnel. For all other trips, you must transfer. As with most tax-starved public programs, I had learned early in my life to temper expectations of service, but the bus would almost always find a way to let me down, and never so low as when I was forced to wait to transfer to another bus. In order to bring this element into the frame, the book is not set up as a continuous ride with seven stops but, rather, seven consecutive rides with six transfers in-between, forcing you to wait between stories. Often for much longer than seems necessary.

It can take forever.

If These Wheels Could Talk spread (waiting); 34 x 6.5in., 116ppg. / 2004

Sometimes, just looking around can be interesting, though.

If These Wheels Could Talk spread (waiting); 34 x 6.5in., 116ppg. / 2004

…while you’re waiting.

If These Wheels Could Talk spread (waiting); 34 x 6.5in., 116ppg. / 2004

…and waiting.

Printed Metro schedules were useless because buses could never, ever stick to them. I always thought that buses should have tracking devices that would show, on a route map at every stop, where it actually was (a simple LED on the line would suffice). That way, you could make an informed decision about whether to wait, walk, cry, or go back home. But they still print schedules, anyway.

If These Wheels Could Talk spread (waiting); 34 x 6.5in., 116ppg. / 2004

If daytime ridership seems odd, then take a trip at night and prepare to redefine normal. Take away the people on their way to something productive and you’re left with a rare breed of incoherent vagabonds, charged up ramblers and the completely deranged. In other words, these words are gold. Two of the book rides take place at night, cued by a black backdrop. As well, the information graphics and text are reversed out of the nocturnal darkness.

If These Wheels Could Talk spread (bus arriving at night); 34 x 6.5in., 116ppg. / 2004

If These Wheels Could Talk spread (bus arriving at night); 34 x 6.5in., 116ppg. / 2004

Day breaks one more time to shine a light on the last story, which is primarily about getting off the bus, picking up on someone who meant to be picked up by another number. The ride stops before it starts and so the story goes away.

If These Wheels Could Talk spread (story leaving); 34 x 6.5in., 116ppg. / 2004

After all these years, and so many projects before and since, many for some of the most interesting organizations in the world, this book still holds a place very close to my heart. It was the bus that took me from one formative experience to another for much of my life, and it was the bus that drove me back to my life’s design.

I realized halfway into that drive down south that, for all the good that the bus embodied, I wasn’t meant to be its driver. For better or worse, I was always supposed to be a designer, and so I turned the car around and went back home. Shortly thereafter, I filled out some other government forms and reapplied to the University of Washington, where I went on to go through the VCD program. In the rite of passage from school to re-entry into career, it felt right to pay due respect to the wheels that got me there.

Is all this really necessary? For everyone? All the time? Microsoft Word 2003 window, new document; shown approx. 50% actual size

For something with such a simple purpose, and an even simpler name, Microsoft Word sure does seem complicated. From the moment a user opens a new document until they finish—a three-word note or a three-thousand page novel—they are surrounded by an acerbic cadre of mismatched toolbars, icons and menu options. The vast majority of these are never used. Many of these never should be used. Most people using Word don’t need to do complex math equations or manage mail-merge settings, they don’t need hundreds of oddly-colored warped lettering options and they don’t need to create a web page; they need to write a paper.

As part of a cooperative workshop one of the Visual Communication Design professors at the University of Washington set up with one of Microsoft’s design leaders, the few of us who chose to participate were asked, “What should Word be like?”

DPJ Word interface mockup, new document; 1024 x 768px + / 2004

Writing often requires intense focus. The primary goal of my prototype was to provide the least distracting, most intuitive and flexible interface for paper writing, editing and reading, while integrating simpler navigation of documents large and small…

In this prototype, every element has been made to recede from the page. There are is no complex application background. Rather, the page, itself, rests on the user’s desktop, which has been unfocused behind a dark screen. From the top menu, The user can select type style and size and page margins and tabs from the top menu when they start their draft, and that’s pretty much it.

One obnoxious aspect of typing in Word (or virtually any other computer program) is its awkward page scrolling in response to adding content: You have to follow your type all the way to the bottom of the page, then the page jumps to reveal the very last line at the bottom of the page from there on out. To further enhance the writer’s focus in this prototype, a translucent screen could be set to the height at which the line being written or read is always positioned and the pages would scroll smoothly behind this line as one types (similar to how one would interact with a typewriter). As one types well into their first page, it scrolls up and over the top font and type size menu (since that is probably no longer needed) and the next page comes up below it.

DPJ Word interface mockup, page 1 of 2 in document, focus screen set to reveal one line of type in the middle of the page; 1024 x 768px + / 2004

As multiple pages of content are written, they would be added behind the focus page in virtual space, so the user would always have a general idea of how long their work is.

DPJ Word interface mockup, multiple-page document, focus screen set to reveal one line of type in the middle of the page; 1024 x 768px + / 2004

Now, just because there are very few options at the top of the page, that doesn’t mean the added functionality of Word would be eliminated. In fact, there could be more—or at least more useful—tools available. These more advanced functions have just been moved into vertical tool “drawers” to the right of the screen to maximize vertical real estate for the page. These drawers could be pulled out independently to view the full list of related capability.

DPJ Word interface mockup, multiple-page document, focus screen set to reveal one line of type in the middle of the page, “Library” tool drawer pulled out; 1024 x 768px + / 2004

One or more tool sets could be clicked open to be viewable at all times, or drawers could be pulled out completely and positioned organically in the work area.

DPJ Word interface mockup, multiple-page document, focus screen set to reveal one line of type in the middle of the page, “Library” tool drawer detached and placed in work area; 1024 x 768px + / 2004

If a user wanted to reference another source of content for their document, they could click on the option from the “Library” tool set and the page and menus would slide off and the background screen would dissolve, so the source could be searched for in the actual desktop environment, instead of by an abstracted dialogue menu (if desired—the standard menu placement interface could also be used).

DPJ Word interface mockup, desktop Library search mode; 1024 x 768px + / 2004

As a user went through a larger document, they would be able to tag words, passages or pages with notes to themself, their editor, vice-verse, and so on, so they could call attention to a particular point, further research a topic or at least avoid repeating themselves.

DPJ Word interface mockup, page 30 of 100, note flags visible with one clicked open
; 1024 x 768px + / 2004

Though much of my efforts were trained on removing unnecessary tools, I did make one very notable addition: the magnification slider. At the top of the screen is a track with a positioner that aligns to the right edge of the page. Sliding the positioner right or left—either manually or by keying in the desired percentage—would increase or decrease the magnification of the document, making the interface is equally ideal for writing, editing or reading a one-page report…

DPJ Word interface mockup, one page document, focus screen set to reveal one line of type in the middle of the page, magnification positioner slid all the way to the right for maximum magnification; 1024 x 768px + / 2004

… or a 500 page novel. Sliding the left would allow quick jumps between pages or even chapters. Tapping a page would bring that up to the default magnification for writing or editing.

DPJ Word interface mockup, multi-page document, focus screen set to reveal all lines of type below the middle of the page, magnification positioner slid all the way to the left to view long document in “chapter” sets for quick navigation across hundreds of pages; 1024 x 768px + / 2004

Side note:

It is interesting to see that MS Word (and PowerPoint) now feature magnification sliders that will allow you to see multiple pages in your document when you zoom out (this feature did not exist in 2004 when I designed my prototype):

Microsoft Word 2011:mac interface, multi-page document, magnification positioner slid out to “84%” / 2011

Microsoft Word 2011:mac interface, multi-page document, magnification positioner slid in to “10%” / 2011

However, since Microsoft’s slider’s correlation to the page display is so abstracted (it’s a short track in a separate toolbar, not aligned to the page in any way), its use is clumsy and unintuitive. And, without clear labeling or grouping of pages, or the ability to zoom back in on a page in the zoomed out view by just clicking on it, the potential for faster broad-jump navigation is all-but-lost.

Now, back to my story…

The essential idea of a much more simple interface drove my design from the beginning. But there were a few variations on the theme I explored along the way that would make for an experience more familiar in the context of physical reality or further abstracted and function-focused.

DPJ Word interface mockup, new document, cherry wood desktop / metal work area setup; 1024 x 768px + / 2004

Originally, I envisioned the most intuitive interface known for writing or editing a paper: actual paper, on a desk. A cherry wood desk would be nice. I imagine that this sort of background could be one in a library of preferences.

DPJ Word interface mockup, new document, colored interface tool work area setup; 1024 x 768px + / 2004

On the other end of the spectrum of preferences could be a version almost completely detached from reality. In this setup, tools are highlighted for maximum contrast between the document and the interface.

DPJ Word interface mockup, new document, color-coded interface tool work area setup; 1024 x 768px + / 2004

Or, the user could choose to differentiate between different types of tools through color-coding. So, interface elements that related to Format would all be coded in green, view options in green, and so on.

As of 2011, Microsoft’s default Word interface is still a clunky, overbearing mess, even if the general aesthetic is slightly less caustic and the organization of toolbars has begun to become… organized.

More interesting to me are features Microsoft has added to Word that happen to swing dangerously close to the experience I proposed in 2004, if not quite landing a serious punch as yet.

Aside from the new page magnification slider, there is now a “full screen” mode that hides all but the most basic formatting options, allows for notes on the side and takes into account both writing and reading. Sound familiar? But, like the slider issue, this, too, seems disconnected: You enter into a claustrophobic other-world, shut out from the rest of your computer, in which only those few tools are available. The pages are immobile and isolated; there’s no simple visual cue as to how many one has written, past two.

Microsoft Word 2011:mac interface, full-screen mode, 137 page document / 2011

In some way, Microsoft’s new features seem to signal change for the better. On the other hand, it’s really just more of the same “more is more” approach that has plagued user experience since the beginning of time, and in many of Microsoft’s efforts. By just adding yet more, mutually exclusive options and not committing to a single, seamless user experience, the new view modes just seem like novelties. People who have to write a paper don’t need to think how to use novelties. They need to think about what they’re going to write.

Election 2000 introductory screen; Flash interactive interface; 1024 x 768px. / 2004

All U.S. citizens are deeply affected—for better or worse—by the president in office. However, very few people know the intricacies of the presidential election process. This is not surprising, as it is super freakin’ complicated. The problem is that most are too jaded to care, even when their country is on the line.

For Interaction Design, one of the Senior year courses in the University of Washington Visual Communication Design program, we were given the task to explain the unexplainable to your average ignorant know-it-all who doesn’t want to be explained to. The aim of this project was to create an interactive interface to help inform the average high-school or university student about the United States presidential election process. As with several classes before, the project was divided into two distinct phases: In the first, we worked in groups to research the process and the various forces involved and brainstormed different interpretations thereof. In the second phase, we set off individually to define and create interactive Flash-based demonstrations of our particular concepts.

I had the good fortune of having three brilliant brains with whom to storm in phase one: Stephanie Cooper, Luke Jung and Tim Turner. As part of our comprehensive research process, we developed various interpretations of how the presidential election could be understood. We first set out to describe the components, both legal and otherwise influential…
[roll over images to enlarge]

U.S. presidential election variables, influential and legal; digital output; 11 x 8.5in. / 2004

We then divided the country (as elections do so well) to figure out how the importance of different factors were distributed geographically…

U.S. presidential election influence by geography; digital output; 17 x 11in. / 2004

We thought about how different issues become important and unimportant to constituents as days months and years turn into eras…

the evolution of important issues in U.S. presidential politics; digital output; 17 x 11in. / 2004

And how dramatically the face of a candidacy can change through just a few months of an intense campaign season, and thought about how shifts in different variables or combinations thereof could affect the big picture…

influential factors of the U.S. election process over time; digital output; 17 x 11in. / 2004

But we also noted that the face of the winning candidate hadn’t really changed at all in decades (as of 2004)…

physical appearance trends among recent presidents; digital output; 8.5 x 8.5in. / 2004

We thought about the thing in the back of people’s minds as they cast their votes (consciously or not)…

government ideology, between “I” and “we”; digital output; 11 x 3.5in. / 2004

And we analogized candidates’ tendancy toward ideological extremes in the beginning—to establish that they are “different” and true—followed inevitably by significantly tempering their platform as the process goes on in efforts—to broaden their support base. Once they get in, there is often another shift that many don’t anticipate.

comparing the U.S. presidential election process to grocery shopping; digital output; 17 x 11in. / 2004

With all this drama, we wondered what would motivate a registered voter to actually vote.

what motivates people to act; digital output; 11 x 11in. / 2004

All the while, we had been digging into the real, legal parameters of the U.S. election process to try to make sense of it all. After distilling, simplifying and paring down as much as possible, then using the smallest type sizes that would still be legible, we were able to fit it all onto a page. A page that is about four feet long and two feet high…

Presidential Politics poster; digital plot output; 45 x 26.5in. / 2004

From here, it was off to the races, so to speak. We each took our foundation and built our own concepts. My idea was to focus on the 2000 election as a case study. My thought was that, by focusing on such a recent election (at the time), users would be able to learn more about certain events that should still be fresh in their minds, and correlate them to the legal aspects of a standard election process. Moreover, by focusing on such an odd, controversial election, users would have the opportunity to learn about the most obscure of contingencies and contemplate just how valuable their individual contribution to the process can be, even if it is just in a single vote.

The first task was to design a concept map of our intended experience. I thought the relative power of different categories of the population as different factors came into play through the campaign and election process would be an interesting construct on which to build my user path, so I first set out the parties and the variables…

2000 election interactive educational experience concept map (key); digital printout; 8.5 x 8.5in. / 2004

…and then laid out their interactions over the course of the process. The one who got the farthest, won.

2000 election interactive educational experience concept map; digital printout; 17 x 8.5in. / 2004

As an entry point into the design phase, we were tasked with “wireframing” intended user paths through a few pages. Wireframes are almost always done as black and white schematics, roughly in the proportion of the screen being designed to, with just plain text and boxes arranged in a manner intended to convey relative hierarchy rather than prescribe composition.

In this phase, I figured the main artery of the experience would be through the sequence of campaign events leading up to the inauguration, but that one could jump to any significant day in the process (be it noted for an official event, a press release or scandal emergence or other happening). Once users clicked into one of these events there would be a comparison of What it is, the official explanation of what is legally prescribed for such an event and What happened, a description of the way the event actually transpired in 2000. Additionally, users could learn more about and compare the candidates who ran in another realm of the experience.

My original title for this interactive experience was What Happened??!!, which spoke both to the nature of discovery inherent in learning about such a fundamental rite of citizenship, as well as to the sheer outrage that people should have—but mostly didn’t—feel about how incredibly poorly the 2000 presidential election was handled.

This was all well and good, but I ended up roadblocking myself soon thereafter. Wireframing can be a handy transitional exercise, but, if you’re not careful, those black and white boxes just get filled in with color and nice looking typography and, before you know it, you have a very schematic looking design. This is exactly what happened to me.

I wasn’t concerned initially, as I thought my case study/comparison idea (and that funny title) was enough to buy me a willing audience, and that I just needed to build an interface around it that was intuitive to navigate. I started off with a sort of a Mac-OSX-columns-plus-transit-map-ish design that was fine in terms of navigating different types of information but just wasn’t that interesting, visually. Moreover, it did nothing to help express any sort of idea or editorial perspective that might interest and engage someone enough to actually spend time with and, hopefully, learn from the experience.

What Happened?!! sequence/events/legal-political screen; Flash interactive interface; 1024 x 768px. / 2004

What Happened?!! event detail; 1024 x 768px. / 2004

Luckily, I was fortunate enough to have a professor that wasn’t going to let me get away with this. To put it more accurately, he called bullshit on my simplistic pseudo-Modernist UX mashup. He urged me to think about how the public engaged with the 2000 election, and how I could translate this graphically and interactively.

I personally counted the 2000 election as a criminal act, and it still makes me mad. Perhaps the most serious decision that would be made in shaping our country for the following four years turned into farce. Fraught with deceit, scandal-mongering, secret handshakes and incompetence, all hidden in plain sight, the whole process was a fraud, but the most annoying thing to me was that nobody seemed to get how ridiculous it was, let alone care.

So, I came back to class with three new concepts that highlighted this perspective in one way or another…

The first, an interface based on the vernacular of the drugstore tabloid, was the most visceral and perhaps the least sophisticated in terms of taking advantage of the medium (though I never explored much further than the cover screen). The greatest value in this was its dramatic counterpoint to the clinical wireframe-y stuff I had been doing, and it was an effective lighting rod for putting more of myself on the line. In this, the primary navigation would be through the scandalous final throes of the 2000 election and the process and candidates would have their features on the back pages of the experience.

The 2000 National Election interactive educational experience interface; 1024 x 768px. / 2004

The next concept was based on the infamous butterfly ballot, a 35+ year-old relic whose grossly unintuitive layout had untold scads of voters accidentally casting for right wing conservative extremist Pat Buchannan instead of mainstream Democrat Al Gore. This standard tally-taker in Palm Beach then had the re-counters steaming over dimpled and/or hanging chads until the Supreme Court told them to go home before they even finished. In this meta-experience, users would be forced to use this exceedingly poor design to navigate through the site. It is likely that they would end up quite irritated by frequent unexpected results (and at least some point would be made in that).

Election 2000, Exploring Exactly How Your Vote Counted interactive educational experience interface; 1024 x 768px. / 2004

The third concept went beyond vernacular reference to physical artifacts and abstracted the experience to evocative communication. This was least obvious but perhaps the most sophisticated interpretation of the idea, in that the interaction itself was expressive of my editorial perspective without unduly satirizing or hindering access to the information.

The premise was simple. The entire election process is there for anyone to learn more about, but its shown how most Americans viewed it: kind of blurry, veiled in an acidic haze that was difficult to understand but superficially unobtrusive.

However, if the user puts a modicum of effort into investigation of the events, information becomes perfectly sharp in a big gray area.

Election 2000 interactive educational experience; introductory screen (default and rollover state); Flash interface / 2004

Once a user clicks in, the default screen shows a sequence of legal/political requirements, from primaries and caususes through conventions, debates, the general election, the particular legal contingencies that arose thereafter in 2000, the electoral college and, finally, inauguration. Users can navigate the events by name as they are listed vertically in the main area, timeline—a segmented bar graph that shows the relative length of each event, or by specific date in the calendar blocks at the bottom, and all are correlated.

Election 2000 interactive educational experience; default sequence of events screen; Flash interface; 1024 x 768px. / 2004

Again, rolling over any of these entry-points (e.g., the time bar for National Conventions) breaks a clear, sharp edged path through the different entry points.

Click to enlarge

Election 2000 interactive educational experience; default sequence of events screen (national convention time bar rolled over); Flash interface; 1024 x 768px. / 2004

Clicking an event further breaks through the screen and presents two frames of reference: What it is and What Happened. Within each event, there are four sub-navigation options: Overview, Involvement, Location, and Duration of the event. The viewer can then learn about the official process (what was supposed to happen) and the 2000 election (what actually happened) by noting their similarities and differences.

Election 2000 interactive educational experience; national conventions – involvement – what it it vs. what happened screen state; Flash interface; 1024 x 768px. / 2004

When viewing the timeline by event, the dates are keyed on the relative timeline with pink (Republican), baby blue (Democrat) or purple (others). Clicking into one of these breaks open a detailed look, like this transcript of Gore’s email to Bush Jr. upon their respective party nominations, in which he encourages the Republican to join him in changing the way campaigns are run (done!) and restore voters’ faith in the electoral process (hm… not quite).

Election 2000 interactive educational experience; event detail screen; Flash interface; 1024 x 768px. / 2004

If users wanted to learn more about these crazy characters, they could check out the Candidate Profiles section, which presents them with three columns of runners, again color-coded by party. The default setting would show a Democratic column on the left, a Republican column in the center (perhaps it should have been on the right) and an Other Parties column after that. Clicking a blurry name cuts gray information into the soft veneer.

Election 2000 interactive educational experience; Candidate Profiles default column set (Al Gore clicked into); Flash interface; 1024 x 768px. / 2004

But buttons at the bottom of each column allow users to toggle column party assignments, so the user could potentially compare any two candidates (e.g., two Democrats and a Republican, or three Independents, etc.), Like here, where we can see Gore compared to Harry Browne (who??) and the ever-too-present party-crasher, Ralph Nader.

Election 2000 interactive educational experience; Candidate Profiles Democrat / Independent / Independent column set comparing Al Gore, Harry Browne and Ralph Nader; Flash interface; 1024 x 768px. / 2004

I don’t know if widespread implementation of this interactive experience would have gotten the American population to care enough to learn from the disastrous mistakes of 2000, but they certainly didn’t learn much on their own. Voter turnout did increase in 2004, but the dirtiest politics in decades again won out over clear thinking. Four years after that, and people finally decided for change, but not really, as it turns out. If only there was a way to vote on the average American…

lives being lost to Cardiovascular Disease (shown in real time; multiply by 25,000 for annual number) animated illustration for presentation; source: 2000 U.S. Census; originally 10 x 7ft. (projected) / 2004

Data is boring. It’s just facts and figures; numbers on a page. There’s no life in it: No blood, sweat or tears, not to mention sex. But actually, there almost always is. Nearly all data is merely classified results of the choices people make. If someone didn’t make enough money to pay their phone bill. If someone trained hard enough to win an Olympic bronze medal. If someone was found 30 stories below a penthouse balcony. There is data that can tell us all about these things. Unfortunately, it’s too often left flat, or worse, twisted up in knots, suffocated and sputtering in it’s own purple ink. It is in the mindful extrication, marrying and expression of data that its ones and zeroes may come to life, breathe in our faces and tell us to pay attention for a minute because it’s going to help us understand the beautiful and the terrifying things we’ve done. This is information design.

Nothing should teach us more about ourselves than adversity, and that’s what we were faced with in Information Design, one of the most sweat-worthy courses in the decidedly rigorous Visual Communication Design program at the University of Washington. Indeed, the subjects of our designs were nothing short of catastrophic: groups were assigned strains of natural disasters or epidemics to seek out, research and present based on their potential merit to inform through design. After this, we were to design at least three magazine spreads of narrated information graphics individually.

Our research team, comprised of Jesse Graupmann, Jim Nesbitt and myself came upon Cardiovascular Disease (CVD), by far the United States’ most prolific killer. In terms of deaths and monetary expenditures, raw data makes it clear that CVD, which encompasses Heart Attack, Stroke, and various other arterial conditions, is a significantly larger problem than any other known phenomenon.

comparison of annual deaths between Cardiovascular Disease, and other notable causes of death, as well as the total deaths accrued in all significant U.S. wars; (roll over to enlarge) [sources: American Heart Association, 2003; Centers for Disease Control 2003; U.S. Pentagon, 2000]; originally 10 x 7ft. (projected) / 2004

Currently, on average, CVD kills about 1.5 million people per year in the U.S. or one every 33 seconds, accounting for 39.4% or one of every 2.5 deaths in the year 2000. Even all forms of cancer combined don’t kill as many people as does Coronary Heart Disease alone, just one of several types of Cardiovascular Disease. This is not to mention non-disease related deaths such as murders or accidents, which also pale in comparison to CVD. Perhaps most shocking is that more people die of Cardiovascular Disease each year than were killed in every major U.S. war, combined.

comparison of annual costs between Cardiovascular Disease, Cancer, Alzheimer’s Disease and AIDS, as well the combined annual budget for the U.S. military (roll over to enlarge) [sources: American Heart Association, 2003; Centers for Disease Control 2003; U.S. Pentagon, 2000]; originally 10 x 7ft. (projected) / 2004

In our presentation to the class, we introduced these and other such daunting facts with the animated chart at the top of this post projected behind us, illustrating deaths occurring due to the disease even as we were making the presentation. We made a pretty good case, and we were off on our own to dive in and make those facts dance their deadly dance in the pages of our own magazine articles.

But having the undisputed king of killers wasn’t enough for me. I was thirsty for more blood. I suppose I wanted more sex in it, too. Based the numbers above, Cardiovascular Disease sounds pretty bad, but how could it be worse than HIV and AIDS? I set out to answer this question by comparing the two based on five critical factors…

Both Cardiovascular Disease (coded in yellow, in relation to the arterial plaque that makes the condition) and HIV/AIDS (coded in green, in relation to the general notion of debilitating illness that sooner or later plagues its carriers) are national epidemics. But, in terms of probability of affliction, deaths and monetary expenditures, raw data makes it clear that Cardiovascular Disease, which encompasses Heart Attack, Stroke, and various other arterial conditions, is a significantly larger problem than HIV/AIDS. However, the latter receives far more media draw, and, though spending on CVD exceeds HIV and AIDS by quite a wide margin, spending in proportion to death rate is actually much lower.

Roll over any of the spreads below to see them much larger

National Epidemics magazine article segment comparing monetary and mortality statistics of Cardiovascular Disease vs. HIV/AIDS; 20 x 12in. (spread) / 2004

Looking closer at those affected by Cardiovascular Disease or HIV and AIDS reveals a more compelling statement regarding public perception. It is without question that Cardiovascular Disease affects and kills far more people overall than does HIV and AIDS; this transcends racial, gender, and geographic borders. However, HIV is actually slightly more prevalent in young adults aged 25 – 34. While the death rate of AIDS is still less in this group than that of CVD, being infected by a life-threatening, terminal disease in the prime of one’s life is obviously a crushing blow and likely plays a key role in the cultural awareness and fear of AIDS not present in regard to Cardiovascular Disease.

Geographically, prevalence of Cardiovascular Disease is strongly correlated to broad regions of the U.S., while HIV and AIDS cases tend to be concentrated in major metropolitan areas. Generally speaking, CVD affects those in the South significantly more than other regions. Several Southern states have even been grouped and labeled as the “Stroke Belt.” Speculation as to the cause of this geographic bias points to the prevalence of two major risk factors: poor diet and inactivity. Specifically, the common practice of deep-frying many foods contributes significantly to elevated cholesterol levels. High temperatures in this region are also thought to contribute to the population’s high rate of inactivity.

Victim Profiles magazine article segment comparing demographics of those affected by Cardiovascular Disease vs. HIV/AIDS; 20 x 12in. (spread) / 2004

Though HIV and AIDS are much younger conditions than Cardiovascular Disease (indeed, Stroke was first recognized by Hypocrites over 2,400 years ago), both have seen a steady rise in prevalence in recent times. This progression has not occurred randomly. Various risk factors and behaviors contribute to the probability of being afflicted by either illness.

In the case of Cardiovascular Disease, there are a few risk factors, such as hereditary predisposition, for which there is little recourse. However, the bulk of risk factors stem from modifiable lifestyle choices. Chief among these are adequate exercise and proper diet. Americans have become steadily less active over the last fifty years, which has led to massive obesity. Without regular moderate exercise, the heart grows weaker and obesity forces it to work harder than it is prepared. Though some diet choices have improved over the years, others have worsened, canceling out most positive changes.

HIV, too, has risky behavior as its primary champion. Unsafe sexual contact with infected persons and sharing “dirty” needles are the two most prominent and most avoidable modes of transmission. Safer sex practices, such as condom usage, have increased slightly and needle-exchange programs have worked hard to curb infected needle usage, but overall behavior patterns have not changed significantly since initial public recognition of the disease.

How They Begin magazine article segment comparing risk factors of Cardiovascular Disease vs. HIV/AIDS; 20 x 12in. (spread) / 2004

The physiological processes by which Cardiovascular Disease (CVD) and HIV/AIDS progress are significantly different. CVD is actually a very simple, localized mechanical process whose effect can be easily seen by the naked eye (once revealed in surgery), while HIV/AIDS is much more complicated and widespread, and operates entirely on a microscopic level.

How They Kill magazine article segment comparing how Cardiovascular Disease and HIV/AIDS affect the body; 20 x 12in. (spread) / 2004

Once affected by either Cardiovascular Disease or HIV/AIDS, appropriate management is crucial. In this realm, Cardiovascular Disease patients have a number of options at their disposal. If a severe cardiovascular event such as a Heart Attack or Stroke occurs, surgical action is necessary and must be performed immediately for any chance of survival or recovery. However, warning signs such as throbbing pain in the area affected often precede these events by minutes, hours or even years. If caught early enough, Cardiovascular Disease is quite treatable and its progression can actually be reversed. This can be accomplished by way of lifestyle changes, various cholesterol or blood pressure-lowering medication or, if particularly severe, surgery.

Unfortunately, the same cannot be said for those with HIV/AIDS. Tragically, there is still no cure for HIV or AIDS, but, after close to twenty-five years of intense research and development, pharmaceuticals have come a long way toward managing the conditions. AZT was the first anti-HIV drug approved by the FDA in 1986 and is still used today. The now famous “AIDS Cocktail” (which often includes AZT) is the currently the treatment of choice, but this regimen is neither cheap nor simple. A handful of harsh drugs must be taken on a precise schedule several times a day, every day, for the rest of one’s life. The course demands very specific diet and eating habits to work properly. It is so important that this schedule not be deviated from that many patients are advised to ‘practice’ with different kinds of candy for weeks before actually beginning cocktail treatment. Once committed to the regime, the drugs can make the patient very nauseated and may even be rejected outright by the body. If this occurs, then various alternative drugs must be experimented in hopes that a suitable treatment can be reached.

Managing Their Presence magazine article segment comparing treatment options for Cardiovascular Disease vs. HIV/AIDS; 20 x 12in. (spread) / 2004

Since this was just an academic exercise never published in the public realm or even read by anyone other than possibly classmates—who were facing their own disasters—and a few competition judges I don’t know, I can’t say how this translation of data might be able to affect others. But, speaking for myself, I can tell you that processing this information, expressing it graphically and digesting it once came together was deeply affecting. Indeed, this was probably the most depressing project I’ve ever designed. I don’t think I actually shed tears, but it certainly made me sad.

Multiple Choice, Alternatives to the Worn Out Model of U.S. Transportation booklet; front cover; 4.5 x 4.5in.; 28ppg. / 2003

Teen angst is a powerful force not often harnessed for forward progress. At the same time, many of today’s most overwhelming transportation problems are fueled by inertia. There is one predominantly accepted model that most people of driving age accept as given and therefore perpetuate. If there’s one thing kids hate, it’s being told that they have to do something a certain way. Multiple Choice plays between both of these phenomena.

This book, one of a few projects undertaken for the Publications course in the UW Visual Communication Design program, was designed as a thought leadership piece that might be put out by a major car maker to mark an openness to new ideas, sparking productive discourse on the future of transportation…

Content is related to the youth in abstracted vernacular of the age-old standardized test. But the point that’s being driven throughout is that, unlike such tests, these issues have more than one right answer, and the answer most commonly accepted is not necessarily right at all. This isn’t a test after all; it’s a challenge.

At the beginning of each section, two questions are posed: concerning the current situation: Why?, with the prevailing, claustrophobic choice as the only choice, and, considering several alternatives in an open context, Why not?.

The book is divided into four sections. The first, Dinosaur Technology, focuses on fuels, asking Why only fossil fuels? (as illustrated by oil derrick bubbles) and Why not hydrogen/fuel-cell, electric, solar, biodiesel or even wind-power?

Multiple Choice, Alternatives to the Worn Out Model of U.S. Transportation booklet; front cover; 4.5 x 4.5in.; 28ppg. / 2003

The sections then cite a quote about the detrimental effects of the current “right answer”—here an excerpt from The Nation decrying the inefficiency and inscrutable political backing of fossil fuel—while sharing brief descriptions of the alternatives.

Multiple Choice, Alternatives to the Worn Out Model of U.S. Transportation booklet; Dinosaur Technology chapter head; 9 x 4.5in. (spread); 28ppg. / 2003

In the spirit of test-taking, each description begins with a simple question. The writing is kept brief and light, but informative. At the end of each section, simple information graphics compare relevant statistics between all of the choices, such as mile per dollar, contrasted with contrary government subsidy.

Multiple Choice, Alternatives to the Worn Out Model of U.S. Transportation booklet; Dinosaur Technology chapter head; 9 x 4.5in. (spread); 28ppg. / 2003

The next section, Vehicular Suicide, focuses on efficient uses of vehicles, asking Why single-occupancy in large vehicles like SUVs, and Why not carpooling, public transportation, motorcycling, cycling, or even the curious Segway?

Multiple Choice, Alternatives to the Worn Out Model of U.S. Transportation booklet; Vehicular Suicide chapter head; 9 x 4.5in. (spread); 28ppg. / 2003

Multiple Choice, Alternatives to the Worn Out Model of U.S. Transportation booklet; Vehicular Suicide alternative descriptions; 9 x 4.5in. (spread); 28ppg. / 2003

Information graphics compare emissions per person per day with cost per day.

Multiple Choice, Alternatives to the Worn Out Model of U.S. Transportation booklet; Vehicular Suicide information graphics; 9 x 4.5in. (spread); 28ppg. / 2003

The third section, Going Nowhere Fast, focuses on how those vehicles get from point-A to point-B, and asks Why just the static highway tangles currently in place? and Why not some more efficient, safe and/or easy alternatives, such as splitting highway systems into levels for different uses, automatically-linked vehicle caravans, hyper-efficient magnetic track systems or even more futuristic bubble technology?

Multiple Choice, Alternatives to the Worn Out Model of U.S. Transportation booklet; Going Nowhere Fast chapter head; 9 x 4.5in. (spread); 28ppg. / 2003

Multiple Choice, Alternatives to the Worn Out Model of U.S. Transportation booklet; Going Nowhere Fast chapter head; 9 x 4.5in. (spread); 28ppg. / 2003

This section is summed up with comparisons of time wasted in traffic in different U.S. cities currently, ranging anywhere from about 50 to 80 hours per year.

Multiple Choice, Alternatives to the Worn Out Model of U.S. Transportation booklet; Going Nowhere Fast chapter head; 9 x 4.5in. (spread); 28ppg. / 2003

Lastly, What Now? asks readers to contemplate what to do with all these choices and offers an interactive CD-ROM with tunes for the next commute, as well as information on how the youths’ can use their informed chutzpah to challenge friends, family, and political representatives whose standstill status quo is so rarely challenged otherwise.

Multiple Choice, Alternatives to the Worn Out Model of U.S. Transportation booklet; What Now? information/CD; 9 x 4.5in. (spread); 28ppg. / 2003

National Park Service Research Opportunities promotional brochure; front cover; 5 x 8.5in.; accordion fold / 2003

Because I am into competitive cycling and ride outside all the time, many people assume that I am one with nature, which is actually pretty far from the truth. It’s not that I dislike the great outdoors, but the thought of being in the woods doesn’t give me any kind of rush. However, there’s a big difference between knowing nature is there and being on a mountain. There are some points of our environment that are undeniably awesome, and I got to experience many firsthand in a project for the National Park Service.

Our design team at the Design + Innovation Lab, including myself, Jim Nesbitt and Jason Tselentis, and directed by Doug Wadden, worked with The National Park Service to create an informational brochure and comprehensive web reference for their collaborative research program, dubbed simply “Research Opportunities.” This program invites public, private and academic researchers to conduct their studies in seven Pacific Northwest parks. This symbiotic relationship allows researchers access to some of the greatest ecological resources in the Northwest, while the Park Service gains additional relevance by being linked to significant scientific research and discovery in prominent publication…

National Park Service Research Opportunities promotional brochure; opening letter and fields of study overview (that’s my ex-girlfriend serving as research model in the field); 10 x 8.5in. (double-panel spread); accordion fold; photography by Doug Wadden and other sources / 2003

At the outset of the project, the client actually had in mind a ring-binder system of materials that they could share with potential research candidates, but we felt this solution would not serve their needs best: On a functional level, a large, heavy binder system would not travel well; only a few could be mailed out before postage costs would put paid to further such distribution, which leaves in-person meetings for everyone else, requiring even more expense in human time and travel commitment. Additionally, if all the material was captured only in press-printed sheets (even if they were removable from the binder), any changes to programs, application procedures, contacts, or other information would be very expensive and logistically challenging to update properly. On a more ethereal level, we wanted to create a more organic presentation system that was reflective of a dynamic, collaborative program, as opposed to something more monolithic and institutional.

We suggested a two-pronged approach: create a slim brochure, top-lining the program benefits, potential areas of research and applicable parks. This piece could be easily and inexpensively mailed out to thousands of recipients. The goal of this piece would be to attract interest and drive readers to a web site where more comprehensive information and application material could be found and updated easily as necessary.

Appropriately, once we had the general parameters of the project worked out with the client, we took the opportunity to do our own research in the parks. We loaded up a car with camera equipment, a proper picnic of charcuterie and cheese, the most convincing mountain man (or woman) attire we could don for our modeling cameos (some were more convincing than others) and my girlfriend at the time (to serve as a female model). We hiked through the mountains, took in historical landmarks, scoured fields, braved cliffs and surveyed the wetlands. Professor Wadden shot the adventure on Kodachrome and we came back with great imagery and our own great experiences in hand.

National Park Service Research Opportunities promotional brochure; program details and map of locations; 10 x 8.5in. (double-panel spread); accordion fold / 2003

The brochure was a simple accordion-folded piece, including a letter of introduction, descriptions of the potential fields of study, a hand-drawn map of locations, and highlighted case studies of previous fieldwork, leading to a call to learn more via mail, phone, or, preferably, the dedicated web site.

The National Park Service identity system was actually created by one of those design “legends,” so we didn’t want to mess with the general gestalt too much, but we take a few liberties to bring a bit more dynamism to the “universal style Modern” band and column system, stepping grid alignments and adding vibrant color overlays to photography.

National Park Service Research Opportunities promotional brochure; highlighted case studies (that’s Jim as mountain man researcher); 10 x 8.5in. (double-panel spread); accordion fold; photography by Doug Wadden and other sources / 2003

National Park Service Research Opportunities promotional brochure; back cover; 5 x 8.5in.; photography by Doug Wadden and other sources / 2003

Concurrently, the complimentary web site took form. This comprehensive reference serves as the permanent hub where researchers can dig into detailed information on the parks and applicable fields of study, read up on case studies and apply to take their own research project(s) to the parks. Topics is cross-linked to the others for complete context and encouragement of participation.

National Park Service Research Opportunities web site, Flash intro screens with fields of study and parks; 800 x 600px.+ / 2003

National Park Service Research Opportunities web site home page; 800 x 600px.+ / 2003

National Park Service Research Opportunities web site, Mount Rainier page in The Parks section (rolling over Olympic National Park nav link); 800 x 600px.+ / 2003

As it was before the widespread of contemporary content management systems (CMSs)—even those as simple as WordPress (on which this blog runs)—we implemented the site to work with since defunct software producer Macromedia’s “Contribute” program so that even park officials without any web programming skills could update content based on a simple, login-enabled text editor that simply overlaid the site.

Of course, it was still a bit of a challenge for those who would rather be in the woods to sort through even this editing tool, so, even though I probably would have rather been riding my bike, I ended up consulting with Park Service representatives for months after the site launched to ensure they were comfortable taking over the content. But in the end, they had a robust system in their hands with which to connect with researchers for years to come.

The printed piece was mailed out and otherwise distributed to thousands of potential program participants, and, as far as I know, both it and the site continue to work together to serve as primary reference points for the program. Naturally, I hope those that have participated discovered as much in their experiences as I did.

Manufacturing Consent, A Propaganda Model book in acetate slipcase; 9.5 x 9.5in., 28ppg. / 2003

What is the role of American mainstream media? This book visualizes Noam Chomsky’s and Edward S. Herman’s message that a few powerful individuals and corporations mask their own deceit and corruption through their control of the mass media. As the writers urge, the reader must take an active role in looking beneath the messages “filtered” by these entities in order to understand the real content.

In this piece—a project undertaken for the Publications course in the University of Washington Visual Communication Design program, in which we were to interpret an excerpt of this seminal work—expressions of manufactured mass media content are printed in light cyan blue while the Chomsky / Herman text is printed in red on white paper. Red acetate “filters” sharpen contrast of the cyan while obscuring the copy.

The first action the reader must take is to remove the book from its masking slipcase. Once removed, the subject’s title becomes immediately visible, while the mass production of American perception recedes.

Manufacturing Consent, A Propaganda Model book drawn from acetate slipcase; 9.5 x 9.5in., 28ppg. / 2003

Each section begins with an automated assembly line, from which mainstream news stories emanate in cyan…

Manufacturing Consent, A Propaganda Model chapter head, filtered; 9.5 x 9.5in., 25ppg. / 2003

However, if the reader looks beneath the filter, the true content of the the Chomsky / Herman becomes clear:

Manufacturing Consent, A Propaganda Model chapter head, acetate filter lifted to reveal body copy; 9.5 x 9.5in., 25ppg. / 2003

The reader is constantly offered the filtered information first. They must be vigilant in their search for the hidden truth. The voice of Chomsky / Herman is set flush-left and originates from the left of the page or spread, in reference to their political viewpoint. As well, their text comes from beneath the surface of the suppressive mainstream media.

But even the mass media presents bits of the truth. It just needs to be analyzed, re-contextualized and put back together in the correct order. To punctuate this idea, pull quotes of the Chomsky / Herman text are embedded within the mass media stream.

Manufacturing Consent, A Propaganda Model book, pull quote embedded in mainstream media text: “THESE… TWENTY-FOUR COMPANIES… ARE LARGE… PROFIT-SEEKING CORPORATIONS… OWNED AND CONTROLLED BY… QUITE WEALTHY PEOPLE”; 9.5 x 9.5in., 25ppg. / 2003

Sections end with the mainstream content running ragged, abstractly referencing a U.S. flag torn apart.



As with almost every project on which I have ever worked, this concept and execution came as the result of significant idea exploration and experimentation. Shown below are several initial directions for the piece. These include more literal references to the U.S. flag and interpretations of mass media and the vehicles by which they are delivered, as well as more comical ideas based on overt mind control by way of fanciful machinery.

Manufacturing Consent, A Propaganda Model book excerpt concept sketched; pencil on paper 11 x 8.5in. (each) / 2003

Comping this book was no mean feat, requiring a lot of trial and error with size, coloration and density of typography and imagery and acetate in order to achieve the desired interaction between the two media, not to mention the actual printing, mounting trimming and construction of the book and slip case. But in the end, I was quite pleased with the realization of the concept, and the comp turned out to be durable enough that I was proud to show it on several interviews years back.

Unfortunately (funnily enough, now), by the time those interviews happened, several months after the class, design darling Stefan Sagmeister’s “Made You Look,” one of several of his monographs, had just hit that stands with a nearly identical execution concept. Nobody accused me of anything, but a few interviewer’s did mention it, which was most annoying to me because I wasn’t really a fan, so didn’t even know that he had designed yet another thing about himself. I’ve since come to appreciate Sagmeister’s self-described self-indulgency, but, at the time, it was just an obnoxious lens through which the true meaning of my work was being filtered.

No matter how long it lasts and what happens along the way, the most fascinating aspect of any relationship is almost always the beginning. When was the last time you met someone new? When was the last time you met someone that made you feel new? How did it go down? Can you believe it happened? A proper introduction isn’t just an exchange of information; it’s a chemically transformative event that forever changes the course of your life. In 2003, the heads of state at the University of Washington engaged our team at the Design+Innovation Lab to help them properly introduce the school to the world wide web.

As a great ad man (or woman—I’m not sure) once warned on behalf of a deodorant: “You never get a second chance to make a first impression.” Well, leading up to our project, more and more people were getting their first impression of the University of Washington from its web site and, frankly, it stank. The UW is an expansive, influential institution of over 50,000 students, faculty and staff that has been an established leader in many academic and athletic programs for well over a century, and it’s Seattle setting is one of the most beautiful cities in the world. It had the brains, the brawn, the experience and a pretty sweet place. But then was a transitional era in the understanding of communication and media, and web site design was oft-still an afterthought doled out to reluctant comp-sci geeks. As such, the UW’s site betrayed a persona that was uncharacteristically inscrutable, unsightly and unwelcoming; you probably would want to steer clear of interacting with this one.

By the end of this summer-long project, our team—comprising myself, then fellow Visual Communication Design (VCD) undergrad student Jim Nesbitt and then VCD grad student Jason Tselentis, and directed by Doug Wadden, then Chair of the UW Division of Design and now Executive Vice Provost of the entire University—had redesigned the UW web site; a not-inconsiderable feat. However, we initially were not charged with doing anything with the actual site; we were only supposed to design an introduction to it…

Flash intros may be terribly passé now, but the project seemed perfectly viable at the time. More importantly, it was a great exercise for us to think about what it was about the school that made it interesting, and how to articulate that compellingly.

Was it in the volumes of prestigious opportunities, accomplishments and awards of this “public ivy” weaving together a dynamic equation that resulted in one amazing experience?

University of Washington web site Flash intro sketch (animated storyboard) / 2003

Maybe, but nobody wants to get stuck with a braggart. It’s always best to keep some levity in an introduction, even if the recipient is deep as the Pacific. In another approach, the school is referred to in a dry, almost self-deprecatory manner, but just enough is revealed to let you know it’s serious—and it has the student body to back it up. The yellow square slides left and right to reveal a selection of word-image juxtapositions that hinted at some of the more compelling aspects of the University: A top-ranked medical school, connections to study-abroad programs in some of the world’s most exotic locations, a critically-acclaimed performing arts program, and, of course, a location that no comparable university could match.

University of Washington Flash intro mockup; 800 x 600px.+ / 2003

But some thought this tact too passive and preferred to show and tell. In a variation on the above introduction, the following uses more conventional but all-too-generic language to describe the institution. With no twist of tongue, the introduction became little more than a simplistic shell game. (Below is an actual Flash movie variation of the above pulled out of the background and shrunk to fit here.)

University of Washington Flash intro mockup; 800 x 600px.+ / 2003

Of course, if you haven’t much original to say, you should at least have some nice moves.

University of Washington Flash intro mockup; 800 x 700px.+ / 2003

(There were other interesting options, as well, but I didn’t work on them directly and I unfortunately don’t have files.)

But it really didn’t matter. Even in the early 2000s, the UW site got thousands of unique hits every day and could not support the server load of any sort of Flash intro. Not to mention the contingencies that would have been necessary for those who couldn’t support, had disabled, or just could not stand any sort of Flashiness.

The important outcome of this was that our introductions had made quite the impression and our clients wanted to get to know our work a little better. We got to skip to the home page. Once we got there, it was easy to understand the want for an endearing intro, as the site, itself, was basically hiding itself in a corner.

before: The University of Washington web site before our project began / 2001-2003

In terms of logical hierarchy, established usability conventions and pleasing aesthetic composition, almost everything on the old site was in the wrong place. The most prominent element was a spatially and contextually degaged photograph of the campus. The primary navigation—pushed over to the right for some reason—had too many nonequivalent items, listed in order of monetary potential instead of by actual usage (e.g., students, faculty and staff needed the site most but were last on the list because they were already on the books). Secondary elements included a tiny non-sequitur news story, a seemingly random litany of “quick links,” and an unexplained image from one of the museums that resided on campus. Hidden in there somewhere were links to “Search,” “Directories” and “Reference Tools” (such as a dictionary). Elements were literally scattered up, down, left, right and center with nary a single alignment among them, type treatment varied unnecessarily and link cues were inconsistent. For what seemed at first blush to be pretty simple, the UW home page interface was actually a bit of a mess. We took no choice but to strip the existing site down to it’s tags and redress it completely.

The first order of business was to fix the scurvy architecture, beginning with the primary navigation. We debated huge sheets of paper on a wall with markers until we had culled the seven existing links down to just four real and equivalent areas of interest: “About the UW,” “Academic Programs,” “Students, Faculty and Staff” and “News and Events.” (We were later implored to add “UW Medicine” to the list, which is not exactly equivalent to the others, but, as one of the foremost such programs/hospitals in the world, it was a great source of funding and prestige). We then devised a list of just four relevant quick links in “Admissions,” “Directories,” “Libraries” and “Employment,” as well anticipating a single additional rotating link that could capture a temporary item of interest about the University (such as their search for a new president at the time). From here, we just needed to stand the site up straight and dress it appropriately.

We started very simply and, though we went through a few iterations, the layout actually didn’t change much from the first sketches.

draft: an early coded mockup of the UW home page, featuring an introductory statement of the site in the central “hero” space; 800 x 600px.+ / 2004

Putting the page on white enlightened and visually broadened its presence, while a receding image of the campus’s iconic Suzallo Library lent visual depth and academic gravitas. (The original plan was for this background image to be drawn randomly from a bank of similarly iconic campus highlights on refresh, though this was never realized. Looking back on it now, some color could have been added into this element, as well.) The University logo (featuring “the Tooth” as we liked to call it, which had recently been done by an outside design firm and has since been dismissed) was put in the upper left, where logos generally should go on web sites. In this initial sketch/mockup, a small strip for quick links and search were put into a footer band. Directly below the logo were the five primary navigation bands. In the above sketch, a brief introductory note was put in directly to the right of these, giving visitors an idea of what the UW was about, with a small photo of George, himself (an iconic campus sculpture); Rolling over a primary nav item exposed a related list of sub-links and image over these.

The best sites in the web offer an experience that modulates seamlessly from the home page on in; interior pages should not only look related to the home page and each other, they should support the overall identity of the entity. But this was an especially difficult task for the this project, as the University had literally hundreds if not thousands of pages that spanned an incredible array of different types of content and represented any of hundreds of sub-entities within the university. Despite their incredible variety, pages were all created with a single aging template that was nothing more than header and footer bands and white space in between. Sometimes, they didn’t even use the template. Compounding this was the fact that most of the pages were created by professors and students that didn’t necessarily know anything about web design or care about consistency with other areas of the site.

before: old interior page / 2003

We had neither the time nor resources to audit the entire landscape of washington.edu and figure out a template system that was streamlined in variations, comprehensive in ability to show different types of content and still was easy to create and edit by the technology-lay scholar. Aside from the aforementioned extensive research to determine what types of content would need to be accommodated, doing this properly would involve creating a flexible skin options based on a consistent gridded structure, an extended color palette, style specifications around type at different points of hierarchy, imagery and charts and graphs, an automated page generation tool and guidelines that made the implementation of all of these things simple. So, we did the next best thing: We updated the header and footer bands so they at least had some relationship to the new home page. A space In the header allowed sub-entities to be identified consistency. We also created a very rudimentary grid and type specifications to at least hint at consistency in the open space betwixt.

after: University of Washington web site basic interior page design; 800 x 600px.+ / 2004

Even this compromise was unfortunately but understandably never implemented. (Since this transition could not be automated, doing just this would have taken a monumental collective effort from the myriad professor and student authors of the original pages—who were afforded neither time nor money to do so.)

At the same time, though, the home page had progressed nicely, and was soon launched. In the actual site, the quick links and search were brought up from a footer into a dynamic header band and the space initially given to a short description of the school was given over to an image that linked to a rotating feature in “DiscoverUW,” an online magazine covering some of the more interesting happenings of the University.

after: the actual launched site, featuring “discoverUW” article links; 800 x 600px.+ / 2004

Though never completely resolved or fully implemented, this site design was a huge icebreaker for the University. The new home page served as the digital face of the UW for quite some time before being struck by a rather unfortunate jaundice rash, which thankfully has broken to reveal the current, much more palatable—if still not completely put together—site experience.

I would like to think that, at the very least, we helped the UW come out of a dim corner and gave it the strength to join the conversation befitting its stature. Of course, it would be uncouth to brag about numbers, but I’m pretty sure some we helped the UW get a lot of interesting people to come over.

Seattle Monorail Online web site / Welcome page; 1020 x 440px. / 2002

Every time I visit Seattle (my hometown), which tends to happen more than once a year, I find it surprisingly different than I left it last. Startups become stalwarts, old favorites become new failures and areas of complete desolation become constructed destinations. But, until very recently, the ways to get to and from any of them had hardly changed a bit. Despite its squeaky-green image, Seattle has always been a car town, with a public transit system whose progress comes and goes in fits and starts but never seems to get anywhere useful by any reasonable timetable. As someone who grew up without a car and as a recalcitrant fan of progress (perhaps even Futurism, to some extent), one of the most personally frustrating examples of this city planning torpor is the Seattle Monorail.

As of 2002, when I decided to use it as it as my muse for a web site design class in the Visual Communication Design program at the University of Washington, the Seattle Monorail had been the beginning of something great for about forty years. Originally built in 1962 to shuttle visitors between downtown and the Seattle World’s Fair, the Monorail had since served as little more than an icon of the city’s once future-driven spirit, though there was a resurgent and concerted effort to evolve the system into something much more impressive. In fact, the wheels had been in motion, so to speak, for several years and, despite the work of some determinately opposed political factions, it looked as if the Monorail might actually realize its potential in the foreseeable future.

Even considering its terribly stunted scope of service at the time (it ran just over one mile, end-to-end—only about .1 mile longer than it had run in 1962), the Seattle Monorail was a fascinating entity, in that it was at once an historical landmark, a thriving attraction and the major source of inspiration for what possibly could have been the future of Seattle’s public transportation system. This web site was to celebrate the Monorail system’s rich heritage, facilitate its everyday usage and promote its promising future. As such, I architected the site accordingly, creating sections related to the system’s past, present and future, and built relevant content into each section…

Seattle Monorail Online basic site map / 2002

Before getting too far into the design process, I extended the knowledge I had of the Monorail from prior personal experience with more in-depth research. I tracked down various reference material about Monorails around the world for context. I navigated the fascinating lifeline of Alweg, the German company that designed, built and actually paid for the system in 1961-1962. I sat with curators at Seattle’s Museum of History and Industry (MOHAI) and the University of Washington’s Special Collections Library, who graciously provided me with a wealth of firsthand anecdotes and gripping archival reference material, including everything from original construction drawings and renderings to World’s Fair promotional material and memorabilia to photographs of Elvis Presley, John Glen and Richard Nixon, among others, enjoying rides.

various archival photos (from the University of Washington Special Collections and MOHAI)
- – – – – – – – – – – – – -
top: Dr. Axel Lennart Wenner-Gren (ALWEG), Swedish financier and visionary of the German monorail company and a prototype train on a test track in 1952 | a pylon being erected in 1961 in Seattle to support the new Seattle Monorail dual track system | one of the two trains arriving in Seattle on a flatbed truck after being built in, and shipped from, Germany
- – – – – – – – – – – – – -
middle: the train cars were simply lifted onto the erected tracks with a crane | the Red Train speeds between Downtown and the World’s Fair grounds
- – – – – – – – – – – – – -
bottom: NASA astronaut John Glen checks out the cockpit of a Seattle Monorail train | 1963 tickets and driver | the Seattle Monorail on the cover of Life magazine

I went downtown and just rode the thing, myself, many, many times, camera in hand. I shot photography from dynamic, often low angles to evoke a sense of speed and stature and emphasize the intrinsic, sculptural beauty of the system.

various photographs taken of the Monorail system and the attractions it served, including the Westlake Mall and other Downtown shops, as well as the Seattle Center (another icon of the ’62 World’s Fair), and Frank Gehry’s Experience Music Project; 35mm film, shot with a 1940s Leica 3G / 2002

And I learned about how civic and non-profit NGOs were planning its progress, with a far-sighted, systematic approach and new technology.

top: schematic of shadow casting of elevated light rail vs. monorail track systems | community support of the Monorail project
- – – – – – – – – – – – – -
middle/bottom: renderings and architectural models of an expanded monorail network and new cars

As I gathered research, original and source imagery, I began to develop the visual and interactive design system. The overall design of the site employs the same dynamic, future-looking spirit that built the original Monorail and which drove the project’s progress at the time. A forward-leaning 20º angle is employed throughout the site to frame navigation and content sections. Textural headline typography is letter-spaced exponentially to emote a sense of acceleration and lateral velocity. The body copy is set over a smooth gradient for spacial depth and energy. On pages with several topics or subjects, subsequent angled rule and gradient backgrounds delineate new points of interest.

design elements annotated on the Welcome page for quick reference online style guide; 1024 x 768px / 2002

Each section was color-coded with rich, warm color fields against textural blue monotone track photography backgrounds and framed by gridded white linear tracks. Futura Bold, a Bauhaus-era Modern typeface, was used in display settings to help express the quality of optimism in precise, innovative and timeless design the Monorail concept embodied. (All body copy is system text for usability.)

color and type elements for quick reference online style guide; 1024 x 768px / 2002

All content is built on a flexible underlying grid system. The most obvious usage of the grid in the actual site experience is in the feature imagery, generally grouped together in unique clusters. Looking back on this now, I enjoy the structured collages on their own, but the site design probably would have benefited from more restraint here; the resolution of the imagery at this size and the impact of the site design are sometimes overwhelmed by the complexity of the isolated compositions.

grid system for main site and popup window frames for quick reference online style guide; 1024 x 768px / 2002

Sadly, the most powerful moments of the Seattle Monorail Online experience are, fittingly, in the Past section. It is hard to believe that one of the most futuristic urban transportation systems in the world was built nearly a half-century ago. In this span of time, the Seattle Monorail has enjoyed great highs and endured degrading lows. Though often taken for granted by Seattle residents, the same Monorail system had performed nearly flawlessly for over forty years, surviving two major earthquakes, several attempts of manual demolition and two popular votes (as of 2002). For those interested in the Monorail story, this section provided an interactive timeline, information on the World’s Fair and compelling statistics that charted the impact the Monorail had had since 1962 all the way up to 2002.

Most of the more prominent points in the history of not only the Seattle Monorail, but also of the monorail concept in general, are touched on in the comprehensive Timeline section. One could scroll through the caption boxes and/or click on a date to launch a new window with more extensive information and imagery. One could then navigate through the detailed information of all of the events from this sub-window.

Seattle Monorail Online / Past / Timeline + Timeline detail window; 1020 x 440px. and 760 x 290px., respectively / 2002

But the Monorail was more than just a relic. It was genuinely useful, even in 2002, shuttling thousands of riders per day—including tourists, residents out for entertainment and regular commuters—between downtown’s financial/retail center and attractions such as the Seattle Center and Experience Music Project (EMP). (An interesting development was that Frank Gehry’s EMP, built in the late ’90s of cutting-edge, wildly expensive and complex materials and fabrication, was literally built around the Monorail, and only made the then-30-odd-year-old train system seem even more futuristic.)

For existing and prospective riders, the site offered general information such as timetables, maps, and ticket rates, and even provided information on how to charter one of the two trains for private parties.

Seattle Monorail Online / Present / Attractions; 1020 x 440px. / 2002

Much like the actual Monorail, I coded the site to launch in a long, narrow window, and content moves laterally in the main frame, while primary navigation information stays stationery in the top frame for easy access at all times. Relevant sub-navigation appears in a secondary navigation track as the Past, Present or Future tabs are moused over. Ironically, I decided to code the site to work best with the then-dominant Internet Explorer browser for Mac. (Annoyingly, this means the actual coded site of over 100 pages still works but is noticeably flawed in any contemporary browser. Oh how times change…)

demonstration of user rolling over primary and secondary menus, clicking into the “Attractions” page in the “Present” section and scrolling through the body frame of the page / 2002

But there’s so much more to Seattle than the high-pressure retail sales, a giant, crumpled tribute to Jimi Hendrix and the Space Needle, and the Monorail had the potential to bring people anywhere in the city and surrounding areas, quickly, efficiently, and profitably. In fact, the original Monorail was built in under two years and took less than six months to recover all initial building costs. It also costs virtually nothing to maintain. That means that it was not only the only public transportation system in the country that was actually profitable in 2002 (and to this day, I believe), it had been running almost purely on profit (and a significant one, at that) for nearly forty years. And, with no traffic to compete with and voracious acceleration from its energy-efficient electric motors to a top speed of nearly 70MpH, an expanded system could have made connections (and money) very quickly, indeed.

As of the time of this project, the plan was to have expanded the system from 1.1 to over 13 miles of track throughout the city by 2007. For those who wanted to be involved in realizing the Monorail’s potential, features such as news updates, a community forum, route plans and information on the new trains and stations were available in the Future section.

Seattle Monorail Online / Future / Updates + update thread detail window; 1020 x 440px. and 760 x 290px., respectively / 2002

Alas, all of this potential, progress, excitement and community action were for naught. Despite a public vote passed to begin building the system into possibly the greatest public transportation system in the world and several subsequent, ever-more slyly-written referendums by opposing factions that also met votes favorable to Monorail progress, the car-town Luddites who pulled the strings somehow still managed to pull the plug on the Monorail project with a fifth rewritten referendum that sufficiently tired the voters a couple years after I completed this project.

Last I was in Seattle, over the holidays, I found vastly increased evidence and talk about a new, and, by all evidence, poorly planned light-rail system that currently only goes only to and from the airport and a relatively unpopular area of South Seattle (that is pretty close to the airport, already). Being primarily ground-based, it is more complex to build, takes up much more valuable real estate, cannot connect with existing buildings without significant demolition, and does not provide the invigorating velocity or stunning views of the Monorail experience. It also competes directly with car traffic, blocking sight lines and even dangerously crossing traffic intersections at some points. The flawed ticketing system is likely letting considerable revenue slip through the tracks. It is, of course, behind schedule and over budget, and will take decades to get anywhere near useful as a viable transportation alternative to driving (if it doesn’t get driven off track beforehand).

Meanwhile, the 40+ year-old Seattle Monorail humbly cruises into history, 1.1 miles at a time.

I suppose building the Monorail into its potential is a lost cause. At this point, I can only hope that someone figures out how to build a time machine. Because, next time I go back to Seattle, I want it to be 1962. It seems like that was the last time people could look up from their windsheilds and see the future.

Prosophobia promotional poster; 24 x 36in. / 2002

The most celebrated role of the designer has always been that of creator of positive change through innovation, but battling the public’s inclination to treasure the old and suspect the new has historically been tough going. The current of ominous world events (especially at the time of this project’s conception, painfully close to 9/11) only serves to shore up such public reservation. For many people, the comfort of the familiar is too valuable to risk on new ideas. This promotes a homogeneous, retro-centric design market in which the new is often merely another iteration of the old.

Prosophobia (“fear of progress”) was a concept for an international design conference that would explore why many of these constructs exist and how we as designers can continue to champion progress in this environment. Featured presentations were to be given by historians, behaviorists and economists, as well as a diverse range of design leaders successfully implementing progressive work, despite this prosophobic culture.

Being a design event (and a design school project, no less), a promotional / informational poster was a critical application, and set the visual theme for the balance of the comprehensive identification and communication suite. After several dramatic, antagonistic early concepts, including a God-like hand pushing down the sunrise, a Volkswagen “New Beetle” reversing into the viewer and even a revolver loaded with antiquities and ready to fire, an approach more considerate of both sides of the matter prevailed. The front presents the issue in a re-contextualized image reminiscent of the silent film era, showing a figure literally hanging onto the past for dear life, while the flip-side speaks to the present (signified by digital visual language) offering information on the voices on offer in the conference, and an invitation to participate in the future…

Prosophobia promotional poster (back); 24 x 36in. / 2002

When discussing professional issues of the times, designers love trading between roles of preacher and choir, probably more than any other group of people in the world. Such is the nature of a profession that practitioners find unequivocally noble but cannot hope to defend quantitatively, and thus can only be explained to those who “get it,” thus, ensuring that those who don’t get it never will. While there is no denying that Prosophobia would primarily be an event by and for designers, the issue at hand is societal, so a widespread awareness campaign was designed to stimulate dialogue in the greater human community about the conference, its premise and what it means to them.

Prosophobia subway poster; 22 x 22in. / 2002

Prosophobia magazine sidebar ad; 3.25 x 9.5in. / 2002

Of course, the best way to reach someone is to talk to them directly, which this contact card was designed to help facilitate.

Prosophobia contact card (front and back); 2 x 3.5in. (each) / 2002

In order to reach specific audiences, it’s crucial to influence the influencers in prominent media of such respects. That’s where the letterhead and media release come in, as vehicles for formal correspondence and PR. With proper information and prodding, people would have been compelled to bring their influence and the rest of their bodies to the actual event, which is made simple with a sharp registration form.

Prosophobia letterhead, media release and registration form; 8.5 x 11in., 8.5 x 14in. and 8.5 x 11in., respectively / 2002

Envelopes make such correspondence much easier to mail.

Prosophobia No.10 commercial envelope (back / flap and front) and No.10 catalog envelope (back / flap and front with die-cut, crack-and-peel address label) / 2002

Once the audiences’ attention has been captured for a minute, they are directed to a promotional / informational web site, where the minute quickly disappears (and then so does more and more time). This flash of loss animates into the the primary content, where visitors could gain knowledge of the event, such as speaker bios, accommodations, and features, as well as register for the conference.

Prosophobia web site; 1024 x 768px.+; interactive Flash interface (shown here in an animated storyboard) / 2002

As a symbolic celebration of Modernity’s rare but powerful triumphs, the conference was to be held in conjunction with the grand re-opening of the MoMA in New York after Yoshio Taniguchi’s architectural expansion / remodel in 2005. (Taniguchi was also to give the keynote address.) Seen here is a detail of way-finding signage in-situ.

Prosophobia directional signage; vinyl on Plexiglas; 10 x 10 x .25in. (each) / 2002

Once at the conference, attendees would be provided a number of things to help them kick the Prosophobia: A time table of all of the events they could plug into…

Prosophobia program schedule tri-fold brochure (outside spread / inside spread); 3 x 6in. (finished), 9 x 6in. (flat) / 2002

A DVD documenting the feature presentations, breakout sessions and round-table discussions…

Prosophobia documentary DVD; standard dimensions / 2002

And, of course, a commemorative watch, so attendees could always have the public interest at hand (it runs backwards).

Prosophobia commemorative wrist watch; reverse movement / 2002

Don’t be late!

Takenobu Igarashi magazine spread retrospective; 24 x 18in. (spread) / 2002

A staple project of many university design programs is to create a poster or magazine spread or flyer or whatever that somehow highlights the work of a “famous” designer, and, for extra measure, to design it as they might have designed it. That is, to design the piece in said famous designer’s “style.” That we had this sort of a project in the VCD program at the University of Washington always struck me as very strange, as “style” was nearly as derided a word as “Hobo” in the UW VCD lexicon. After all, a good designer (let alone a “famous” one) shouldn’t have a style.

A good designer analyzes, digests and synthesizes various aspects of a particular project and distills from this process the most compelling way to communicate the intended message for that project. There is a not-so-subtle line to be drawn here, as using a particular vernacular can be very useful in communicating particular subject matter. For example, if designing a poster about how inner-city youth express their identity, using some element of graffiti might be a felicitous way to help illustrate this. However, if a designer used graffiti in every project, whether it be about inner-city youth or organic produce, then his approach no longer can be seen as appropriating a relevant style to communicate a message; he has now created his own “style” that is irrespective of the individual needs of particular projects. He is one-dimensional.

Though I only know what I know about Takenobu Igarashi, a “famous” designer in the 1980s and my assigned muse for this project, from books and magazines and perhaps an article or two posted on the Internet, it did seem fairly easy to pick up on his “style.” But the issue wasn’t that his projects were one-dimensional. The issue was that his projects were all three-dimensional. Igarashi, in fact, transitioned his focus toward product design and then architectural sculpture as his career progressed, and, one could imagine, this was really where he wanted to be the whole time…

Indeed, Igarashi’s sculpture is quite fetching, and, more interestingly, quite varied. Aside from an early, sharp bent toward the geometric, his three dimensional portfolio has moved the air and light around it in immeasurably varied currents. Monolithic, provincial, heavy, grounded, sharp, useful, clever, whimsical, delicate, charming, airy, diaphanous, breathtaking; it’s all there, in as many materials as you can imagine.

Redwood Forest: a relief of various kinds of layered woods carved and partly colored with acrylic paint / 2005; and Komorebi: a sculpture with 1800 images cut out on a hollow, steel column / 2007; both designed by Takenobu Igarashi

Between Igarashi’s graphic design and his more abstract sculpture lies what may be his most sagacious work: that of product design. Included in this portfolio is everything from traditional designer favorites such as clocks and lamps to more pedestrian subjects like notebooks and gardening kits. Every one of these pieces is designed with a specific purpose and inventive spirit, and all represent the striking clarity and modern austerity that Igarashi has espoused throughout his career.

cutlery set; designed by Takenobu Igarashi / early 1990s

In his graphic design material, however, he was famous for an interesting but quickly dimming shtick of hyper-complex, axonometrically drawn type constructions, grounded in International-Style content structure.

Design, Igarashi Space Graphics book; designed by Takenobu Igarashi / late 1980s

For our project, there were a number of things we had to design off the list: the designer’s name, a timeline of their career, a written biography, images of the designer’s work with captions, and, of course, a picture of the man (or Paula Scher, if you got her). To seal the deal, we had to find a quote from the designer that epitomized their approach, their personality, their work. I could hardly believe I found this one; I just had to use it:

Takenobu Igarashi magazine spread retrospective; 24 x 18in. spread (detail) / 2002

That is a charming statement, but is he really serious? He couldn’t even keep his own portrait simple (the digital slash is all him, not me). More to the point, can anyone even read those words he made? They are stunning feats of geometry—really quite impressive, even beautiful at times—but completely incomprehensible. And, how is this shtick appropriate for an international Expo, a calendar, a shoe store and jazz and dance performances?

UCLA Asian Performing Arts Institute 1981; designed by Takenobu Igarashi; 40.5 x 28.7in. (103 x 73 cm) / 1981. I find this poster quite interesting, but I only know what it says because of the title set in Helvetica in the upper left corner, and I still have no idea what it means.

Despite his sometimes confoundingly intricate axonometric typography and abstract sculpture, Takenobu Igarashi was and is today a professed Modernist, perhaps even minimalist. Igarashi has made a concerted effort to lead a simple life even after attaining great status and success. He has often spoken out against rampant consumerism and information pollution of cities like Tokyo. He even had a small house in the country (designed for him by an architect friend of his) just to get away from it all. He selects every item for his personal consumption just as he selects clients: very carefully and sparingly.

Igarashi’s current web site actually seems to harmonize with his professed philosophy. I find the synthesis impressive and satisfying. He shows a gorgeous variety of sculpture, set in a calm, austere gallery. And, there’s not a hint of his graphic design work anywhere.

Takenobu Igarashi’s current web site; note his self-proclaimed title (in red italics)

one of two entrances to room 247—the Visual Communication Design major studio in the University of Washington School of Art—both are locked at all times / photo taken 2008

A terrible economy. Personal pride. Do or die time. A real studio environment. Some brilliant competition. Real work experience. Real failure experience. Real life experience. An utterly unforgiving professor. A strong sense of potential. Total commitment.

I’m not sure exactly what the most motivating factor was for me as I went through “206,” the second of two screening classes the University of Washington Visual Communication Design program, used to select who could complete the next two-and-a-half years of the VCD program in 2001/2002. Whatever it was, that class marked a tectonic shift in my approach to design work. It was the second time I had made it into 206, and, likely, my last chance to make the final cut into the VCD major. In contrast to the first attempt, I felt no self-satisfaction in the step—just an unflinching focus on the next…

The first project was quite familiar: Design a postage stamp to celebrate something about one of the United States. I was assigned Florida. I’ve never been to Florida. Of course, I know a thing or two about it, but I wasn’t satisfied with just my anecdotal perceptions; I read books on the state and tangential topics to ensure total confidence in whatever direction I chose to pursue.

While I think that NASCAR has grown into a fat, ugly, dumb, deceitful and thoroughly boring scourge on the culture of motor sports, I watched the Daytona 500 quite faithfully as a youngster and used this as inspiration for one concept:

Florida postage stamp sketch: Daytona 500 / 2002

Can’t you just hear the big block V-8 revs roaring through the state?

Another concept, which I ended up moving forward with, was that of the splendidly-restored and preserved historic Art Deco hotel district in Miami. For this concept, I studied a plethora of tourism and architecture books for reference, but my approach wasn’t just to recreate the X hotel on Y street; I painstakingly created my own architectural amalgams that would capture the essence of the area:

Florida postage stamp sketches: Art Deco Historic Distric / 2002

These studies allowed me to delve into some of the different iconic elements of the period: streamlined façades, bright pastels, rounded corners, chrome runners, large clocks, glass block, heavy eyebrows, neon back-lighting, stepped levels.

From this foundation, I built my final solution: A heroic destination with hand-drawn Deco type stacked on a railed sign tower:

Florida Art Deco District postage stamp; 1 x 1.125in. / 2002

The second project was to create a package for a first aid kit. There are thousands of different kinds of first aid kits in the world. I did not want to just make one more. I knew a lot about bike riding by this point, having worked at a shop for four years and having ridden endless miles with hundreds of different people for fun and/or training, and I knew well the two worst things that could happen on a ride: a “mechanical” (something bad happens to your bike), or a crash (something bad happens to you). So, I designed a first aid kit for bike rides, comprising a roadside repair kit for your bike and an injury kit for you, taking the shape of a bifurcated water bottle that would fit in any standard water bottle cage on almost any kind of bike.

I explored approximately one million different ways to synthesize and separate the two components visually with the exterior graphic design (here are a few):

First Aid kit package graphics sketches / 2002

But before I could apply any kind of graphics to the package, I had to actually make the package. I ordered about a dozen bottles that I figured would serve as the best platform for my mockup. I cut them apart and glued different pieces together to make two halves that would screw into each other. I chopped the cap to get rid of the nozzle and made a flat top from sheet vinyl. I filled beveled insets with putty and sanded off any external textural elements for a good base. I then glued ultra-thin sheet vinyl around the forms for a perfectly smooth exterior.

After final sanding and priming, I painted the two halves and applied the exterior type and graphic elements. I had eventually decided on a simple solution that cleverly speaks to both purposes of the tool, dynamically formated for the cylindrical surface: a red cross is created optically by the composition of the title, the brand name (Cannondale, fictitiously), the components and two yellow road stripes that angle up and around the kit, all of which I had had custom made as dry-transfer rub-downs:

First Aid injury kit / roadside repair kit / 2002

I was terrified that this thing would come flying apart before I could even submit it for class, but I must have done something right because I still have this eight years on and it’s still perfectly intact.

The final project was a poster-mailer for Seattle’s Museum of Flight. After some initial research, I packed the family heirloom WWII-era Leica and journeyed down to the museum with two concepts already in mind for this informative self-mailer/poster.

The first idea was based on the vast range of exhibits in the the Museum’s collection, from an centuries-old Asian hang glider to a NASA lunar module, and quite a bit in-between. The concept was The Evolution of Aviation:

The Evolution of Aviation Seattle Museum of Flight poster-mailer sketch; 30 x 20in. / 2002

I think the idea is valid and compelling (if the initial design concept rather clunky), but it didn’t capture the essential attraction of the Seattle Museum of Flight.

Perhaps the most striking aspect of this Seattle mainstay is that the majority of the aircraft are set not out on some abandoned airfield, but in a constellation of smartly appropriate structures, from the Red Barn, housing vintage prop planes from the early twentieth century, to the control tower, where kids young and old can practice pushing tin, to the pinnacle of the Museum: The Great Gallery, a giant hangar of glass and steel in which some of the most remarkable feats of modern aviation are showcased. These spaces are powerful attractions, in themselves. I worked on a concept that would speak to both the fascinating details one could learn at the museum and the structures in which they were showcased. I titled these pieces Aviation from the Inside. I developed two executions within this theme:

Aviation from the Inside Seattle Museum of Flight poster-mailer sketch; 30 x 20in. / 2002

The first idea offered a view from inside the American Airlines 737 section one can enter from the second floor, which serves as a theater for films, and a window seat to the Gallery where real jets hang like rubber-band-prop toys from the ceiling.

But the way to get the real inside story at the Museum is by just walking the ramps, pathways and landings that meander (very) closely around, over, under (and, in some cases, into) some of the world’s most exotic marvels of aeronautical design. Like the M-21 (a variant of the SR-71) Blackbird spy plane, which has a huge, breathtakingly sculptural fuselage, a cramped, angular cockpit, and gaping titanium ramjet exhaust cowlings that could swallow you whole:

Aviation from the Inside poster-mailer (front); 20 x 30in. / 2002 (original photograph also from 2002)

I was quite pleased with this photograph, and was so satisfied to let it be the hero of composition, bled full and even stealing part of the title. Caution stripes that complement the Museum type complete the tantalization.

The flip-side spoke to the different experiences one could get inside: the gallery, the machinery, the cockpit and the control tower, and, of course, it also offered inside information for visiting the Museum. The front and back complement each other through the cautionary visual language, the typographic system, conceptual messaging and a shared sense of visual play between foreground and background:

Aviation from the Inside poster-mailer (back); 20 x 30in. (open), 10 x 6in. (folded for mailing) / 2002 (original photography also from 2002)

This remains one of my all-time favorite design projects.

As the quarter’s end drew near, I had a distinctly new feeling. After three years of absence, I was again engaged. I was interested to see what I could do next. Though I would never admit it to myself, I was certain that I would not only make it into the VCD major, but that I could more than make up for lost time. So did the faculty. I was finally in.

UBC monogram mark for Union Bay Cycling / 2001

A competitive cycling team, like all other kinds of teams, is a of a group of people with a similar interest; in this case, the team’s chief objective is to win bike races. The primary vehicle of a cycling team’s identity is the uniform that team members wear out racing and training. This identity is complicated, however, by the fact that competitive cycling is one of the very few sports in the world based on a sponsorship model, whereby commercial interests pay for some aspect of team operations in return for visible recognition on these uniforms. Almost invariably, this leads to a team’s identity being inextricably intertwined with the identity of their lead sponsors, which can change relatively frequently.

For example, most people would say that Lance Armstrong raced the last season of his career with the Discovery Channel team, and that, before that, he was on the U.S. Postal Service team for six years or so, even though these were, for all intents and purposes, the exact same team, managed by Tailwind Sports.

Union Bay Cycling (UBC) is a large Northwest cycling organization built around an elite-level team that races in local, regional, and national events at the pro/am level. UBC has been around, with the same leadership and core group of riders, for over a decade, but major sponsorship changes had made it seem like three or four disparate and relatively short-lived teams. For UBC, I worked with the team director to develop a long-term solution: a core identity system that accommodates prominent and unique recognition for lead sponsors, but embodies the unique heritage and dynamism of the team riders and stays consistent even with major sponsor changes.

I began with the UBC monogram mark (above) that would immediately identify all communication touchpoints of the team: stationery for proposals, press releases and other correspondence, the web site, T-shirts, gear bags, and so on, and, of course, the all-important team kit, including jerseys, shorts, socks, water bottles, gloves, helmet graphics, and several other tertiary clothing articles.

Union Bay Cycling jerseys (long-sleeve front | short-sleeve back) / 2003; I also happened to have designed the Holcam logo on the jersey shoulders (but not their web site) / 2001

The blue grid, an established device of the team, was reworked and became the foundation of this flexible system. The title sponsor was rewarded not only with the most prominent logo presence, but also with an expressive element emerging from the grid (in this case, the hands of Ashmead College, School of Massage), and other sponsors fit into pre-established hierarchical slots based on their respective levels of contribution…

Just behind the team uniforms, the next most critical touchpoint of the organization’s identity was the team web site, which I also designed and coded. As it was my first major foray into Flash, the concept of the site probably outshone the rather clunky execution. I know enough about Flash to elucidate an idea, but not enough to “optimize” the experience as specialist programmers can. The layout is a bit dodgy in some regards as well. Nevertheless, the site brought the dynamism and personality of the team to the Internet within the context of the sponsored team identity concept.

Union Bay Cycling web site / 2002

Here, too, the hands of Ashmead College emerged from the grid. The dynamic visual hook here was that the hands would actually move across the screen to “massage” the site from one page to the next.

the Ashmead hands in action, transitioning from the home page to the “Meet the Riders” landing page

In addition to the layout and interactive execution, I also developed and wrote most of the content, including pithy, spirited interviews of team members that brought the individual personalities out of the uniforms.

Over the years, the team identity concept was indeed tested, as other lead sponsors were considered—everything from wineries to gyms to car dealerships—and we illustrated these possibilities in various mockup sketches as part of the proposals. I won’t show these online, as I wouldn’t want to jeopardize these professional relationships. Imagine, though, for instance, in the case of the winery, vines of grapes or a hand toasting a goblet emerging from the grid; web pages being poured into the site. The possibilities, as they say, are endless.

But, as long as I was involved with the team, the Ashmead massage school (and their hands) remained committed to the team, which was great, as they were more than just a name on the jersey; they were highly engaged in realizing the mutual promotional and educational potential of the partnership. As a case in point, one element of the relationship provided for the racers to be worked on weekly by the massage trainees, which, in itself, proved to be valuable experience for both groups. Moreover, the Ashmead jersey is probably the only racing uniform that allows racers to raise more than just two hands after a well-deserved victory.

team rider Ingy taking one of many team victories (photographer unknown) / 2001