_ pause _

by:   |  Posted on

In the spring of 2002, Christina Wodtke and David Bloxom had a three-buck-chuck infused afternoon and came up with Boxes and Arrows.

That kid is now 17 and, like a teenager heading off to college, Boxes and Arrows — and, more importantly, its staff of three — is going to take a little time to think about things to come. This means migrating our hosting, adopting a new look, and optimizing our content, along with solving any technical issues of the past.

We’ll be back in January 2020, ready for adulting and ready to make everyone proud.

Not Dead Yet

by:   |  Posted on

When Boxes and Arrows was founded a little over ten years ago, there was nothing quite like it online. There were peer-reviewed journals, and basic how-to articles. A List Apart was much more concerned with the CSS behind the interface back then, and UX Matters, Johnny Holland and Smashing Magazine were not even a twinkle in their creators’ eyes. So a bunch of scrappy volunteers gathered together and pushed to get the stories we wanted to read online. We were struggling to figure things out in our day jobs, and we created a place where we could learn from each other. Boxes and Arrows did much better than we could ever have imagined, surviving transitions over four chief editors, thirty-nine editors, and today it holds four-hundred-and-forty-one articles written by three-hundred-and-nine members of the community at large.

But it was always a volunteer organization. It lost money for the first five years of its life, and for the next five barely paid for hosting and conference coverage. This allowed us to podcast the IA Summit for the first time, and paid to have those podcasts transcribed. Jesse James Garrett’s incendiary talk on User Experience is captured because of the passion of those volunteers, and the kind sponsors who made it possible. Our history is written because of the amazing volunteers of Boxes and Arrows. Wireframes were defined and debunked here, Design Patterns explained and complained about, career advice given out and career transitions documented. Boxes and Arrows was the best of us, and we like to think it inspired our many peers who now make it so easy to share inspiration and knowledge.

But as often happens with volunteer efforts, the volunteers’ lives changed. Some people left the field, some people took on jobs that required long hours, and some people made babies. Some people did all three. The people who used to have spare time, didn’t.  They didn’t even have time to notice what was happening. And through spam and neglect, the magazine started to wither. And the torch didn’t get passed. And lacking oxygen, it started to flicker. And now, some say, the light is gone.

But rather than dead, let’s say it is sleeping. Boxes and Arrows is old for an online magazine, and with age comes some advantages. One is SEO: with no new article published, it still gets 5-7K pageviews a day. A bad day for Boxes and Arrows is ten times most blogs’ best day. Which means Boxes and Arrows is still a site with reach. It means it is still a place where a voice, having something important to say, can be amplified. That voice could be yours.

And so, facing retirement or resurrection, we’d like to ask you, reader, what should be the fate of Boxes and Arrows? Is there a new generation of designers out there who wants to take the power of this magazine’s reach and use it to talk about the next generation of user experience design? Will you define it? Will you defend it? Will you debunk it?

If you would like to take over Boxes and Arrows, speak up. We have moved it to a new platform. We have reached out to new writers. We have breathed a little oxygen on to that torch, and the flame begins to catch. We’d like to pass it to you.

If you would like to to volunteer to create the next Boxes and Arrows, please leave a note below. Say what you would like to do, and this magazine is yours.


As it always was.

As it should be.

Addendum: So grateful for the outpouring of support!  Please join this mailing list where the next generation of B&A begins to plan for the future…


When Life Intervenes

by:   |  Posted on

iTunes     Download    Del.icio.us     IA Summit theme music created and provided by BumperTunes™

2009 IA Summit logo

IA Summit 2009 Podcasts

The IA Summit was held in Memphis, TN from March 20-22. Boxes and Arrows captured many of the main conference sessions (“see schedule”:http://iasummit.org/2009/program/schedule/).

| Preview | “Keynote”:http://boxesandarrows.wpengine.com/view/ia-summit-09-keynote | “Day 1”:http://boxesandarrows.wpengine.com/view/ia-summit-09-day-1 | “Day 2”:http://www.boxesandarrows.com/view/ia-summit-09-day-2 | “Day 3”:http://www.boxesandarrows.com/view/ia-summit-09-day-3 | “Closing Plenary”:http://boxesandarrows.wpengine.com/view/ia-summit-09-plenary |

When Life Intervenes

Mom and babySamantha Bailey missed the 2008 IA Summit in Miami due to an illness. Still, she could look forward to 2009 as the Summit’s Chairperson. A few months later, she was excited to find out she would be having a baby, due several weeks after the Summit. With Fate relishing its spoiler role, Niles arrived six weeks early – ensuring that Samantha would miss the ’09 Summit, her Summit.

I spoke with Samantha the week before this year’s Summit about how she approached creating this year’s IA Summit program, the how the Summit community has morphed over time, and what it means to be a part of this community of practice.

This is a first in a series of IA Summit podcast posts.

Creating the Program

Samantha talks about how she started forming the 10th Summit by creating a big committee around her, then looking both backward and forward to ensure that the program reflected at the same time it set a new course. She points out that patterns are forming around the choosing of the opening keynote and closing plenary speakers.

The keynote speaker shapes the theme, how people perceive event. At the Summit, this tends to be someone that’s not an “insider.” When Peter Merholz suggested Michael Wesch, Kansas State Professor and producer of the powerful “The Machine is Us/ing Us.”:http://www.youtube.com/watch?v=6gmP4nk0EOE YouTube video, Samantha and her team knew it was right because their reaction was, “How did we not think of that before?”
(Download Michael Wesch’s Opening Keynote later this week.)

For the closing plenary, organizers look for an insider, someone who is a highly respected, deep thinker. Jesse James Garrett has, for several years, participated in 5-minute Madness, always offering wisdom in that narrow slice of time, making him a perfect choice to sunset the ’09 Summit.
(Download Jesse James Garrett’s Closing Plenary later this week.)

Summit History and the Communities of Practice

We talk about the 20th anniv of the World Wide Web, and how we continue to use some of the same tools for a completely different Web.Happy family

Further, Samantha goes into detail about how summit has changed in respect to different communities and their involvement in the Summit. She describes how, from 2001 to 2003, the discussion was around whether IA as a practice would survive the Tech bubble bursting. In recent years, the practice has started to broaden its horizons and interact with other practices more openly.

Boxes and Arrows welcomes Niles. Congratulations, Samantha and Karl! Thanks to Samantha for taking the time to speak with us.

These podcasts are sponsored by:

ASIS&T logo
The “American Society of Information Science & Technology”:http://asist.org/: Since 1937, ASIS&T has been THE society for information professionals leading the search for new and better theories, techniques, and technologies to improve access to information.

IA Summit 2009 logo
The “IA Summit”:http://www.iasummit.org: the premier gathering place for information architects and other user experience professionals.

The theme of the event this year, Expanding Our Horizons, inspired peers and industry experts to come together to speak about a wide range of topics. This included information as wide ranging as practical techniques & tools to evolving practices to create better user experiences.

The design behind the design
“Boxes & Arrows”:http://www.boxesandarrows.com: Since 2001, Boxes & Arrows has been a peer-written journal promoting contributors who want to provoke thinking, push limits, and teach a few things along the way.

Contribute as an editor or author, and get your ideas out there. “boxesandarrows.com/about/participate”:http://www.boxesandarrows.com/about/participate

Our Way: The Ingenuity of Unintended Uses

by:   |  Posted on

No matter how hard we try to create designs for certain uses, people will always utilize them in their own way. These unintended uses can be strange, even brilliant. In the end, you have to tip your hat to the ingenuity.
To welcome 2008, the B&A Staff digs into our collective experience to tell a few stories of misappropriation of both the real (things you can buy) and ephemeral (ideas and thoughts) that we misuse for our own devices.
We hope you find some inspiration and add stories of your own ingeniousness to the comments.
Happy New Year,

Unintended Uses and Innovation
Very often, people use things in ways never imagined by their inventors. The makers of Excel probably never envisioned IAs one day using their application to create wireframes for web site, for instance. (Some IAs do use Excel for wireframes, you know).
Just consider the trash can propping open a door or that stack of books holding up the end of a broken shelf or the refrigerator door used as a bulletin board for the family. Examples of unintended use are all around us. I’ve even heard of double bass players using their large, soft-shell instrument cases to nap in between rehearsals like sleeping bag. Odd!
Here’s one thing I do: I use my browser bookmarks to manage passwords. After bookmarking a site that requires a password, I go into the properties of the bookmark and append the password to the title of it. (Not the most secure thing, I know, but there are worse things you could do, like having passwords on sticky notes all around your desk, which many people do). Did the makers of IE or FF intend that? Probably not.
Improvising and re-purposing the objects around us is common. In the ethnographic research for my company, we try to focus on is unintended use. Where do people find work-arounds to the tools and software they normally use? Where do people find hacks? The answers to these questions often point to places where a system breaks down, where people need a better mouse trap. And this is where there is potential opportunity for innovation and where product developers can bring real value to their users.
But unintended uses are also something that usually don’t come out in things like questionnaires or even usability tests. Instead, you have to go out and observe people in the natural setting to get this type of insight. Observing unintended uses first hand is an important source of inspiration and ideas for innovative design, I believe.
Take a quick look around your home. What things are doing that fall under “unintended use”? You probably don’t even realize that you are using many things in an unintended way. Most people don’t.
James Kalbach

Real: Paper Airplanes
My grandfather was an aviator as a young man, and a printer in later life. A considerable part of my childhood was spent making paper airplanes in his print shop. I was obsessed with making and flying them; there was something fascinating about transforming an inert object—an incredibly simple one, at that—into something that could soar.
My brother and I created hundreds of paper airplane designs. The first were very simple: one folded sheet of paper. Later ones incorporated other materials: glue, tape, balsa wood, metal clips, electric motors, even small Hot Wheels cars. We learned basic principles of aeronautical engineering: how to balance the plane’s weight around the wing, how to shape wings for optimal lift (or speed, as need be), the functioning of the diverse control surfaces, etc. We challenged ourselves to make planes that could fly smoother, faster, higher, or just look (or fly) unusual. Our paper airplanes were more than mere toys: they were a basic design education.
Fast-forward thirty years. I hadn’t made a paper airplane in a long time… until my nephews came along. They seem fascinated by paper planes! And their uncle knows how to make lots of them. So what was originally my plaything and obsession has become a bridge that helps me connect with a new generation in my family.
You can’t buy paper airplanes, but you can make them easily enough. Here’s a basic plane for you to try out…


Ephemeral: Bachelor of Arts, Architecture
When I entered architecture school, I expected to spend the rest of my life making buildings. However, I wasn’t too clear on what this actually meant. I’d known a few architects, but only had a very vague notion of what they did day-to-day. I was in for a shock.
The first couple of months in architecture school were among the most important in my life: I now had to think about and through design. My colleagues and I worked hard; the educaton of an architect is primarily a studio-based affair that entails long hours (“all-nighters” were common) and brutal group critiques. The objective seemed to be to understand (and exploit) the relationship between meaning/purpose, technology, and “human factors”. In the process I acquired many practical skills, ranging from arc welding to Photoshop. I was also exposed to concepts that changed my outlook on life: “Design Thinking”, Modernism, Derrida and those other nutty French post-structuralists.
Then something happened that would derail my plans: during my last semester, a friend from the Computer Science department showed me the internet. I was intrigued. Later—a year into my professional practice as an architect—I got on the web for the first time. It was clear to me that it was going to change the world, and that creating stuff on this medium would require an understanding of the relationsip between meaning/purpose, technology, and “human factors”—exactly what I’d been trained for. I dropped the drafting pencil and bought a book about HTML.
—Jorge Arango

Real: Here’s Thinking of You, Kid

forlorn bowlMy sister and I get on incredibly well, belying the fact that our experiences have been so different. Starting early on the family track, she still lives in myhometown with her two kids and will probably be there for a long while. On the other hand, I have traveled the world, lived in San Francisco, and now reside in Montreal with me, myself, and I.

She gave me some nice black earthenware bowls last year for Christmas. Being somewhat a minimalist, it can be difficult to find gifts for me. I receive a lot of small art and kitchen gifts. I appreciate them immensely, but my entertainents rarely feature multiple courses (or sorbet), include 15 people, or require serving vessels. As a result, I didn’t use the bowls for about six months. They sat in forlorn neglect on my kitchen shelf, poking little pins of guilt into me on regular occasions. Sigh.

One thing I do like is small rituals. One day while burning stick incense messily on a totally inappropriate incense burner, it dawned on me that the bowls would work amazingly well with some sand I had on-hand. The white sand stood inlovely contrast to the bowl and proved a perfect resting place for ash incense remnants.
Having expanded the use somehwat, I now enjoy the bowls quite often, thinking of my sister all the while.

cb bowls
Ephemeral: Do As I Do

I always have a mentor, sometimes several, as I like to ask people about how they got to be so great at x or y, try out his or her method myself, and come back for a bit of discussion.
My first mentor found me* way back when I was fresh out of college, thinking I would go immediately become an uber-consultant at Andersen (now Accenture) or Deloitte. Instead, I ended up as a temp on the phones at a mortgage servicing company. Talk about a reality check. The trainer at that job was amazing. He made the class fun even among some of the most boring raw material ever conceived. A few days outside of class, he pulled me aside and asked me, "What are you doing here? You can do more than this." Well, now it’s obvious that I was there to meet him.
Starting at that moment, he mentored my career for years, even helping me slough off some social awkwardness as I shifted from a suburban to a city resident. During this process, he helped tune my observational skills in ways that still benefits me every single day. One of his big themes was "play the game better than anyone else." I always had a hard time with this idea, as I was constantly amazed (and still am) at how organizations communicated in one direction (from top to bottom). It wasn’t until I ended up in San Francisco that I finally found a game that I wanted to play – to change the game!
I feel like my work is to find ways to help people listen to each other. It turns out that one-way communication is just a symptom of people not understanding context. Most of the time my suggestions manifest themselves as an interface, but others end up as changes to business plans, communication policies, and relationships between people inside and outside the organization.
To this day, he still makes fun of me on occasion, grousing that I never listen to him. But I did, really! I just had to apply his advice in the exact opposite way of how he intended. I can never thank him enough for sticking with me.
*Yes, I realize that this, too, is the opposite of how it normally works. Welcome to my world.
—Chris Baum

Real: Contact Lens Holder
As someone prone to headaches, I learned the hard way that having some remedy with me at all times is crucial to my personal and professional sanity.
The problem is that most packaging for headache medicine is either too bulky (and loud, carries in a purse) or hard to open (and struggling with super-hard plastic packaging is definitely not an option when faced with a headache), so using a contact lens holder is just perfect.
A free lens case is included with online lens orders, so it’s nice to find a perfectly good use for one of those seemingly useless extra cases that would otherwise end up in the trash. Besides, a contact lens case has two compartments—one for a simple headache remedy and the other for a major disaster. And that makes for a great, though unintended use of a real everyday thing.
—Natalia Minibayeva

Real: Skills Transfer
My first job after university was at a forensic psychiatric centre. We assessed the whole range of mentally disordered offenders: crime. mental disorder, and myriad combinations. Working there required patience and compassion as these people were not, um, at their best considering their mental state or legal situation. One time the only thing that kept me from getting a severe beating was my refusal to break eye contact with a six-foot-four screaming, angry patient. I did this kind of thing for 14 years as my wife and I raised our kids and I went through graduate school.
Time went on and I finished graduate school and began teaching. One of my first thoughts was "that’s 14 years of experience successfully binned". Was I wrong! The very skills of compassion and patience that I learned in the mental hospital (loony bin, nut factory, pick your euphemism) were precisely those needed with my students and (from time to time) my colleagues. While they have never threatened me and rarely yelled at me: they still have required a similar understanding as they pick their way through new territory. While the reasons for being there are different (pick a crime and I have worked with someone charged with it) the anxiety and fear are all too similar. This has also encouraged me to not dismiss any experience and try and fit it into my bag of tricks.
—Bernie Monette


Ephemeral: Holiday Potty
As a Chicago suburbanite, it is inevitable that my family will visit the German Christmas Market at Daley Plaza in downtown Chicago. There’s also a pretty good chance that I’ll be walking around that little village-like setting drinking from a mini-boot mug of hot spiced wine or Dinkle’s hot chocolate, momentarily transported to that tiny village.
As the father of a four-year-old, it is also inevitable that my daughter will find the least opportune moment to have to go to the restroom. Since my wife is 30-odd weeks pregnant, that generally means that there isn’t even a chance to roshambo to see who the fortunate one is that gets to accompany the mostly-adorable child to the facilities to take care of this business.
Don’t get me wrong–I can handle Daddy-duty just fine and can deftly change a diaper or wipe a nose with my sleeve on a moment’s notice, but sometimes it can be fun make a sport out of it.
After perusing the various overseas goodies from a variety of the shops, getting our pictures taken with the giant tree and with Mr. Clause, my daughter determines that it was time. THE time.
I feel a brief moment of pure, unadulterated terror as I consider my options until I feel a tug on my gloved hand and hear, “Daddy, I’ve really got to goooooo!” My focus returns and we head out in the direction of the restrooms that people within earshot kindly point out to me with knowing smiles.
The dread sets in as I realize that the “restroom” at Daley Plaza is nothing more than a plastic teal Port-A-Potty. The last time I checked, Port-A-Potties aren’t exactly made for more than one person, yet alone 1.5 people in full-on winter garb. The terror returns as I have visions of shuffling around clothing while trying to get my daughter into position.
We round the corner and are met with the surprisingly pleasant view of a couple of tents, each surrounding its own Port-A-Potty on one side and a table on the other. A very sturdy glass door provided entrances, and we quickly placed the coats, etc. on the table and got down to business. The rest is pretty uninteresting, and I am sure you’re thankful for that.
However, somewhere out there in a planning committee is a person who, when placing squares on a layout plan for Daley Plaza, considered that the freezing cold was not the ideal place to use a Port-A-Potty. That UX genius on a committee somewhere may a small–but very significant–change that kept our pre-holiday festivies… Festive!
—Russ Unger

Real: Alarm Clock Muffler
The oldest everyday-use thing I have in my home is my alarm clock, it’s a small digital green Casio clock that I’ve had since I was in primary school, think the size of half an ipod, or a small cell phone.
I have a sensitive ear, and a rather light sleep. Regular alarms are too loud for me and when they ring I wake up in shock, clinging from the ceiling and with an over-revved heart: not a good way of starting your day. So, since my alarm clock is so small, I place it under my pillow every night, with the speaker facing the mattress. This dims the beeping alarm substantially and wakes me up in a much less traumatic fashion.
Ephemeral: Communication Architecture
Darrin Stevens (of Bewitched) was one of my childhood heroes; he introduced me to the world of advertising, which fascinated me. Later on, I would copy corporate logos on my notebooks at school and take notes on my history class in a medieval font.
Upon leaving high school I went directly to a school of communication that had great reputation in the local advertising industry. I deeply enjoyed my years at the communication school. We were taught the basics of visual design and worked hard on copywriting. We had creativity and non verbal communication workshops, and, of course, theory on communication, advertising, and social sciences research methods. We worked on practical campaigns, always with tight deadlines. At that time I did not have strong presentation skills, yet I was always the intellectual author behind the scenes.
One day during our communication theory class we came up to McLuhan; the teacher explained how he said that all media are extensions of our senses, like cameras being extensions of our eyes, but I was mesmerized by his statement that electronic media are direct extensions of our nervous system. At this point – the early nineties – the Internet was becoming popular. As the son of an IBM employee, I’d long been an early adopter of technology, and I had a strong interest in the Internet. If McLuhan was right, going online meant having your nervous system directly connected to the whole world: to potentially anyone anywhere, or maybe to everyone at once. I was intrigued and decided to focus the rest of my career on the Internet.
Leaving school, I taught myself web design, as there were no schools ready for it yet here, and later I would become my country’s first information architect. During my years of IA practice, I’ve found the skill set provided by the communication school to be very useful for an IA, and I’ve always looked at the Web as a communication media: where computers are just the canvas and the key is allowing people to interact with each other. The recent expansion of the web to the masses, with millions of people forming online conversations, is proving me right.
—Javier Velasco

Real: Necklace art
necklaces.JPG About 12 years ago I got a job in an antique store that sold jewelry. Up until then, I usually found a necklace I liked and wore it constantly, even in the shower, for months until I got bored with it. But my boss wanted me to wear the jewelry so that the customers could see what it looked like on someone and be more likely to buy it. The more I wore it, the more I wanted it. And she gave me a good discount.
Years later I found myself with massive amounts of jewelry. The earrings and rings were easy enough to store but the necklaces got tangled and I never knew what I had when I put them in drawers.
One day at Ikea, I saw three packs of cheap wood and glass 3×5 photo frames for $1.99. I bought a couple of packs then got myself some tempera paint, brushes, and a bunch of little nails. I went through all my magazines and picked out great photos of pearls and red paint and shoes. I painted the frames, put the magazine photos in the frames, and hammered the little nails into the top of the frames. Then I stuck the frames to the wall over my bureau and hung my necklaces from the nails. My necklaces were both organized and very lovely art on my wall.

Ephemeral: Book of love
I was hired to write a book about online dating. I’ve been a writer since I was 12 and it was my dream to be published. I didn’t care what the subject was. I knew I could write about it and I hoped that it would finally be my big break into the writing world. I hadn’t actually dated for four years. But that seemed like a moot point. I never actually intended to date; I just figured I’d post my profile on a bunch of sites to see how each worked and what kind of responses I got and that would be enough research.
Then, I got a response from an interesting guy. I gave in and went out. Suddenly I was dating. I was also writing my second book about online dating while working full-time at an office job. I never intended to date anyone seriously—who had the time? But once the second book was done, I found myself still surfing the online dating sites. And after several duds, I found myself out on a date with someone cute, funny, and really interesting. And he liked me, too.
Two years later we’re engaged to be married. The books did nothing for my career, but they found me him. And my life is infinitely better for writing them.
—Alyssa Wodtke

Real: Alumninum teapot
I am slowly, reluctantly accepting that toothbrushes available on the market today will never, ever fit in the built-in toothbrush and cup holder of my 1929 bungalow.
When the thing I’d been using to contain brushes and paste finally rusted out, I went looking for a replacement. I wanted something funky and vaguely retro, but also something that could survive the inevitable fall onto the tile floor. I found a sweet, two-people-for-tea-sized brushed aluminum teapot, sans lid, at a junk shop.
The handle still sticks straight up in the air and is a neat divider between brushes and toothpaste tubes.
Ephemeral: Landscape design
In the fall of 2001, I had a service come to my house to see what could be done about my wacko yard. She talked, showed me pictures, asked me questions, and did a sketch. Only after the guys stopped digging, tidied up the mulch, and left did I realize: That sketch she’d done was a wireframe, and I though I’d thought I knew what she had said, it wasn’t until I saw the finished project and the consultants had all vanished that I realized I didn’t know how to read the wireframe or the specs.
Two epiphanies came from that experience:
One, that I need to be much more gracious and careful with my own commercial consulting clients, because my own fluency in wireframes is really an esoteric skill, and it’s not fair to expect them to understand me. I have to take time to teach.
Two, once I went back and reviewed my conversation with the designer and looked at the plants she’d chosen to put where, I knew I could do a better job than she’d done.
So, I started the landscape design professional development/certificate program at George Washington University. Twenty-some courses later, I’m doing landscape design as an occasional freelance gig. I thoroughly enjoy the pace and educating clients about native plants—but mostly I enjoy a living, tangible outcome from my efforts that smells nice, too.
—Cinnamon Melchor


Real: Office Supplies

small paperclip ornamentI love office supplies. When I’m on my own, I miss them, when I’m in a big company I hoard them. Many make their way into my life.


A paperclip can be twisted into an ornament holder for a office tree.

binderclip-sm.jpg A binderclip holds recipes in place (and out of the line of fire) while cooking. You see another reuse—a simple S-hook bought at the hardware store. These are used all over our house; our pans hand from them, belts in the closet, plants from the ceiling… the S-hook is a miracle of design elegance.

postit-sm.jpg Finally, post-its provide the volume of paper a two-year-old needs to express herself, and the stickiness needed for momma to display it.

Ephermeral: Waiting Tables

For a long time I’ve joked that everything I learned about people, I learned waiting tables. There are many lessons you get seeing people interact with one of their three primal needs. You are all that stands between them and food; in fine dining you are what stands in the way—or stands behind—a good night out. In fine dining, the price is even more tangible. A fifty-year-old in a tuxedo can become a two-year-old in a second, and if you don’t feed him while stroking his ego, the de-evolution can go much farther.

For example, I know now that no matter how busy you are, the customer must feel like they are the only people in the world. That means looking them in the eye and explaining slowly and patiently truffle risotto is not made with chocolate, even when your perepheral vision tells you one table doesn’t have water, another is waving at you desperately, and hot food is on the line with a rabid chef giving you the evil eye. The illustion of complete attention must not be broken! In the office, this translates to really listening to people when they talk to you, and not answering the phone or reading email. Humans don’t like to think they are the least interesting thing in the room. If you consider it, you probably wouldn’t like that either. Have you waited while your boss IM’s, or a coworker takes a call in the middle of you explaining a complex problem? Have you done this?

I also learned that no matter what happens, you can save or ruin the entire effort in the last few things you do. Give perfect service and then bring the check slowly, and the tip goes down the drain. I swear you can lose a percentage point for every minute past when the diner wants the check they have to wait. The same goes for everything else in life. You can do a perfect IA but have sloppy design or poor writing, and the IA doesn’t matter much to the overall usability. You can design a great shopping experience but a lousy cart, and there they go! Off to buy at Amazon! You can do a perfect spec for a brilliant product, but deliver late out of disorganization and no kudos for you … or worse, someone else beats you to market. An experience isn’t a good one unless it’s good from start to finish, and finish is the lasting impression.

Finally I know from experience, "I’m sorry " can change everything. If you’ve messed up, forgotten an order, you gotta own up and apologize. Even if the kitchen overcooked the steak, it doens’t do to explain or or excuse: say you are sorry. You are the face of the restaraunt. Giving away a free dessert doesn’t hurt either … after all it’s the last thing they’ll remember. And in the office, no matter how tempting it is to blame it on the other guy, apologize. If your team messes up and you are design lead, you must take responsibility as well.

Of course, a free dessert doesn’t hurt either.
—Christina Wodtke

Two Designers, Two Years, One Facelift…

by:   |  Posted on

I can’t recall how or when I first learned of the Boxes and Arrows redesign contest. On July 5, 2004, I sent an email to a good friend, Matt Titchener, proposing that we enter the contest together. I got to know Matt while working with him at a nonprofit organization developing intranet web applications. We discovered that we shared the same appreciation and views toward usability, accessibility, web standards, and visual design. Matt is also one of those rare talents that possess great design ability as well as a keen technical understanding in web development/design. After confirming Matt’s interest in the contest, we embarked on what would become more than a two-year journey to redesign Boxes and Arrows.

The contest

From the start, Matt and I agreed to take this contest seriously, approaching it as if we were revamping a website for an actual client. We spent much time studying the existing site hierarchy and brainstorming for ways to produce better user experience. We knew that we didn’t have to convince Boxes and Arrows’ audience of all the invaluable and insightful articles and discussions on the site. It was only a matter of how to get readers to the content more effectively. We were looking to accomplish a very intuitive navigation and site structure/flow to allow the readers to reach their desired content with the fewest clicks possible. It took us roughly a month to create our initial design concept (see Figure 1 & 2), which we are still quite pleased with even to this day. Then with about four days remaining to the deadline, I revisited the contest guidelines and comments posted by the Boxes and Arrows staff. I realized that the B&A folks were looking for a fresh and entirely different look, but the design that we created still too closely resembled the existing site (with its color scheme and layout).

I became convinced that in order for us to have a better chance at winning the contest, we would have to rethink our concept. So painfully, we decided to put aside the design that we had worked so hard on, and started from scratch with a different visual approach. After a few sleepless nights, with heavy bags under our eyes, we submitted our new design concept less than two hours before the contest closing time (see Figure 3 & 4).

Then we waited…

Three months later, I received an email with the subject line “Congratulations!! You have the winning Boxes and Arrows Site Redesign Submission.” I habitually ignore and delete all email that has subject lines beginning with “Congratulations!! You have won…”, assuming spam, so I nearly missed this one! Not until I read through my inbox more carefully later that day and recognized it was from Erin Malone, did I realize that we had actually won the contest. I immediately rang up Matt in London to share the good news with him. I stopped everyone that passed my desk that day to tell them all about the contest. The announcement of our win put a fixed grin on my face for days to come.

front page
Figure 1: First iteration of the front page design

author page
Figure 2: First iteration of the author’s page design

front page contest
Figure 3: Final front page design submitted to the contest

category page contest
Figure 4: Final category page design submitted to the contest

Redesigning the redesign

In January of 2004, we began working with Christina Wodtke and Erin Malone on the implementation of the design. During one of our initial conference calls, we asked for permission to create another design concept different from the one we submitted. Since we only had a very short timeframe to put together the contest entry after our decision to start from scratch, we felt that we did not have adequate time to create a design that fully represented our capability or design vision. Christina and Erin kindly agreed to our request.

For the next nine months, we went through many rounds of brainstorming sessions, looking at ways to improve the visual presentation, the functionality, and the structural flow of the site (see Figures 5-7).

site structure proposal
Figure 5: Site structure proposal submitted with the design

issue transition
Figure 6: Idea for how articles should flow/transition through the front page from issue to issue

site map
Figure 7: Proposed sitemap

The folks at Boxes and Arrows made it clear from the onset that they would like to see B&A take on more of a magazine look instead of the blog-centric feel that it had previously. We began looking at various print magazines like Time, Wired, Newsweek, and National Geographic, trying to figure out what elements in periodical cover designs make people quickly recognize a magazine when they see one. We identified strong typography, compelling imagery, and the concept of weekly or monthly issues as the elements that we would like to bring into our site design. (“Transcending CSS”:http://www.transcendingcss.com, a book recently written by Andy Clarke, includes chapters entitled “Marking Up the World” and “Looking for Grids Outside the Web” touching upon the approach of bringing visual elements from different media to the web.) A few weeks later, we created a mockup of the front page. This mockup became the foundation of the design that you see today.

second redesign
Figure 8: First iteration of second redesign

Design ideas and solutions

Instead of a traditional navigation menu, we incorporated a tag cloud into the site’s left navigation design. Because of the variety of categories listed in the left navigation, we initially took this approach not only to highlight the categories with the higher number of articles, but we felt that different font weight distributions in the navigation menu would also draw the users’ attention to the category list. We invested much time in creating the best algorithm and rendering method to make this work effectively. At the end, B&A decided to leave this piece out after the site launch due to the arrangement of the current taxonomy on the B&A site and the evenly distributed number of articles across the categories (which negates the reason for having a tag cloud to highlight the variance between categories). Nevertheless, we still considered it a clever design approach and hope to see it implemented on the site again one day.

Two other areas that we put much thought into were the layout of the new articles on the front page and the transition/flow of the articles from issue to issue. We wanted to accommodate the different number of articles being published and at the same time create a dynamic layout that provides a fresh look to the front page in every issue, much like a print magazine. We proposed a template system that will allow the editors to easily choose the layout with the best fit each time they publish new articles (see Figure 9 and 10). I believe as the PublicSquare CMS continues to mature, a future plug-in can make this workflow even more automated.

Regarding the transition of articles on the front page, as you can see in Figure 6, we created a flow that will smoothly bring the articles from the new article spots at the top of the front page down to the “Previously” section whenever new articles are published. Eventually, the older articles will be moved out of the front page and will be found in the archived story section of the site. This helps to provide our readers a good sense of continuity each time when they visit the site and enables them to quickly locate the most recent issues.

Anther finer touch was the use of the font-embedding feature in Internet Explorer to apply a more attractive type (Helvetica Neue Medium 67) to the article titles and the issue header, while making sure it degrades gracefully with a similar core web font in other browsers with the help of CSS.

page layout creation process
Figure 9: Proposed process for creating different front page layouts for publication

article transition
Figure 10: Examples of different front page layouts based on the number of new articles

After several iterations of changes and refinement of this magazine site concept in collaboration with Liz Danzico and Christina Wodtke over a period of two months, we arrived at a polished design concept that was ready to be implemented (see Figure 11 & 12).

final front page design
Figure 11: Final front page redesign

final article page design
Figure 12: Final article page design

A bump in the road

While we were conceiving Boxes and Arrows’ new site design, “PublicSquare”:http://publicsquarehq.com/, a new content management system (which now drives the B&A site) created by Christina and Lars Pind was in the works. We soon shared the growing pains of PublicSquare as we were met with challenges in implementing our design into this developing CMS. After failing to launch the new design prior to the 2006 IA Summit, we went back to the drawing board and the implementation phase of the design was put on hold as Lars worked hard to integrate a new theme engine/templating language (“Liquid”:http://home.leetsoft.com/liquid) into PublicSquare. You can read more about this in “Christina’s article”:http://www.boxesandarrows.com/view/are_we_there_ye.

Towards the later half of 2006, the maturing PublicSquare was ready for us to begin the implementation phase again. It took another few months for us to port over our design into the Liquid theme language with the PublicSquare API. Because of some intricacies in the design, the amount of effort and time required for this phase far exceeded our expectation. It also happened to be the busiest time of the year for our day jobs so we had a bit of a difficult time juggling the work. Nevertheless, slowly but eventually, on the evening of January 15, 2007, we raised the curtain on the new Boxes and Arrows site. I can’t begin to describe the overwhelming sense of joy and relief that we had seeing our design live on the web.

The tortoise crosses the finish line

It has been a long ride. From the day that we received Erin Malone’s email to the day that our design finally launched was almost exactly two years. On this road of redesign, there were many IM chats and Skype calls made, numerous late nights and working weekends spent, and countless cups of tea and coffee consumed. It took awhile, but we got there. Working with these folks at the forefront of the IA community has been a great learning experience. The positive responses from industry leaders in the field of web design have also been a real reward to us.

We hope to continue to contribute to Boxes and Arrows as well as the community it serves. But for now, I am going to get some much-needed sleep, so good night!

See also: Are We There Yet for more tales of the redesign.