Redesigning Boxes and Arrows

Written by: Christina Wodtke

“If the devil is in the details, it was very clear that angels live there also.”

For a while we at B&A have been feeling unsatisfied with our software and website. It was perfect when we were young turks, but now that we have a larger body of articles, increasingly richer material, and a growing audience, we realized we need something different, something that will tell the world we are a magazine on the rise. We could have redesigned ourselves, but we felt our community is one of our biggest assets, so we turned to them to help us envision our next generation of the website.

We got many entrants, often fascinating, sometimes surprising, sometimes strange, all intriguing. Some folks ignored our request to not design in the blog mode. We can only assume that this design is so prevalent that it has embedded itself in people’s minds. Others think of us as a blog, because we are on Movable Type’s excellent software. But we are not a blog: we embrace multiple points of view from multiple authors, we are edited, and topical. All we share with blogs, other than software, is chronological organization. And that has led us to the desire to really stand tall with other magazines who put the same editorial love into their bodies of content as we do. And by re-designing we wanted to strongly message “we are a magazine.”

One thing we were deeply surprised by, was how often a design might be overall excellent (or sometimes mediocre), and then would have a tiny corner of extraordinariness. Sometimes it was something as small as the treatment of the swag, or an approach to a navigation scheme, or the text resizing tools. If the devil is in the details, it was very clear that angels live there also. Often we found ourselves wishing we could Chinese menu across multiple designers, because there were so many different lovely moments.

Our judges lent a fascinating insight into the designs as well—an expert on usability would opine on the IA, or an IA remark on beauty. We may specialize, but the gestalt of a design is what we all respond to. We also asked our staff to add their two cents, because the folks who use their precious spare time to make this magazine great, could not be ignored.

So what’s next, now that we’ve got our winners?

Well, none of the designs are perfect in the first shot for our needs. This can’t be surprising to anyone; a great design always comes from conversations between the client and the designer. So we’ll move forward, and ask our winner to work with us to get to the right instantiation of the design, as we continue to evaluate our content management system and publishing engine.

Don’t expect this slow caterpillar to be a butterfly overnight, but do expect a new look in 2005…

So here they are, our winners!

The Winning Entry

The winner! And champion of battle Boxes and Arrows!
by Alex Chang and Matt Titchener from April3rd.com.

| |

The judges said “This is a clean, light design that works well. Color and type are used to reinforce visual hierarchy in a meaningful way. Screen real estate is allocated in a way to support hierarchy as well.”

“This one uses the structure of the grid and palette to its advantage. It is not very efficient with its use of space. I like the effort at leaving some breathing room on the page”

The first prize winner will receive a set of professional books from the fine publishers at PeachPit Press and software from Adobe!

   

We’ll be contacting the winner to begin work on refining the design to give you a new and exciting Boxes and Arrows!

Runners Up

The silver goes to Sarah Doody

| |

Judges say “The colors are nice and unique. It’s very differentiable and, at the same time, feels very professional without feeling too academic.”

And finally, the bronze goes to the design team at Behavior Design

| |

This winner was not in the original final running, because of its blog-based design. However, it was so lovely and well executed, it caught the judges eye and pulled ahead to grab the bronze medal!

And special mentions go to Brandon Satanek
Not only did he submit two entries, but they both were in our top 5 favorites.

| |

| |

A final honorary “best alternative to lorem ipsum” which had us giggling everytime we reviewed the comps, goes to William Lamson.

| | |

We give this design a special mention because of the clever titles and lead-ins used in the layouts. We felt the judges would enjoy them as much as we did.

Overall Thanks

Most of all we want to thank all the folks who took the time to design a new look for Boxes and Arrows, and who waited patiently while we made our decisions. This was an extremely difficult task. I think we were all surprised at how hard it would be to make a final call.

All were wonderful—check the full set of entries out for yourself!

We especially want to give a special thanks to our judges, who took time out of their busy schedules to help us choose our winner.

Thanks all!

Redesign Submissions Closed

Written by: Erin Malone

REDESIGN UPDATE Submissions are closed and we are no longer accepting entries.
Thanks to all the folks who worked hard to submit a new visual vision for Boxes and Arrows and for all the great questions and discussion about the redesign.

Our final confirmed judges panel: Hillman Curtis, Katherine Jones, Andrei Herasimchuk, John Rhodes, Lou Rosenfeld, Nathan Shedroff, and Jared Spool.

We received over thirty entries from more than five countries. Christina Wodtke and Erin Malone will be spending the next two and half weeks reviewing each entry individually and prepping the entries for our judges.

Judging will begin the first week or so of September (specific date to be determined based on various travel schedules) and we will announce the winner and post the top 5 runner-ups on the site the end of September / beginning of October.

The first prize winner will receive a set of professional books from the fine publishers at PeachPit Press and (this just in) software from Adobe (exact titles and platform tbd)!
   

Boxes and Arrows Redesign

Written by: B&A Staff

UPDATED This just in: Hillman Curtis joins the panel of judges. The entry deadline has been extended until August 15th, 2004. We compiling put together a crack judging team and have currently confirmed: Andrei Herasimchuk, John Rhodes, Lou Rosenfeld, Nathan Shedroff, and Jared Spool.

When Boxes and Arrows first launched in 2001, we were blessed with the design from the talented Gabe Zentall. B&A has been growing and changing and evolving since then, and it’s time to freshen up a bit. But because we love the vibrant community that has made us—from the articles to the amazing discussion in the comments, we’d like to go one step further. We’d like to ask you to redesign us.

Erin Malone, Chief Editor and sometime IA has sketched out a site map and a few wireframes [56k PDF] to get you started. But from here the sky is the limit. Do you think the IA needs stretching? Or has she got it nailed? Should our design get sassier? Or is cool and restrained right where we need to be?

We’ll take submissions until August 1st. Then our panel of celebrity judges (list coming soon!) will ponder over each design’s usability, stylishness, and clarity to pick the future design of B&A. As well as being the designer of B&A, your first prize will be a set of professional books from the fine publishers at PeachPit Press (the parents to New Riders)!

Please take a second to read through the rules and background materials. Then get our your pencils and start sketching!

Rules:
Submission consist of three flat files (preferably png, but gif and jpg will be accepted) of a front page, a search results page and an article page. Please zip these three files and email to: prettyface [at] boxesandarrows.com. No code required. Supporting materials such as adjusted sitemaps, or other supporting pages are acceptable.

The logo is not up for redesign.

All submissions must be completed by August 1st, 2004.

All work must be your original design. Group submissions accepted.

Final design will be implemented on B&A. However, changes as required by technological or usability needs may be made. All entrants will be published for the general edification and pleasure of the community.

Supporting material
Some stats

Top 10 domains pie chart
Listing the top 10 domains by the number of requests, sorted by the amount of traffic.

Browser breakdown pie chart
Listing the top 5 browsers by the number of requests, sorted by the number of requests for pages.

Operating systems pie chart
Listing operating systems, sorted by the number of requests for pages.

Some requirements:
Our users tend to be designers or usability professionals. They print heavily, and complain bitterly about bad print set-ups, low contrast fonts or tiny fonts.

The site must:

  • Be easy to maintain
  • Load quickly
  • Be easy to read online as well as printed
  • Must appeal to everyone from Clement Mok to Jared Spool (both regular readers!)
  • Support advertising, yet not get in the way of reader’s pleasure
  • Have a distinct magazine feel—this is NOT a blog.
  • Must clearly message design but not alienate via arrogance.

The support staff is all volunteer, and Boxes and Arrows currently doesn’t make a dime. Therefore all design solutions must consider a low free maintenance strategy.

The future site will feature advertising. It is not yet determined if this will be text-only, a la Google Adsense, or include image ads as well. The designer may consider this in his/her realm of recommendations.

Feel free to use the comments section for further requirements gathering! We, the staff, will answer publicly for all to learn!

  • Site map and a few wireframes [56k PDF]
    http://www.boxesandarrows.com/archives/images/062104_redesign/Boxes_Arrows_IA.pdf
  • EPS logo [190k]
    http://www.boxesandarrows.com/archives/images/062104_redesign/logoSpecs.eps
  • PDF logo [68k]
    http://www.boxesandarrows.com/archives/images/062104_redesign/logoSpecs.pdf

Terrible Twos

Written by: Christina Wodtke

Little Boxia has just turned two! Look how proud she stands, barely wobbling at all! See how she toddles around, smearing food on the walls! So independent, so curious and wait… did she just say “no!”? No, no, no! Here they come… the terrible twos.

As we celebrate Boxes and Arrows’ second birthday with pride, I find myself looking at our profession as well. As a manager of designers and as a member of the community, I am struck time and time again at how timid and uncertain so many designers are. It doesn’t matter if they are information architects, graphic designers, or interaction designers; a pervasive feeling of fraud floats through the air. “What if they don’t believe me,” “I need data,” “What have I got to offer?” Around dear Boxia’s birth, Jesse James Garrett accused the community of dressing up in lab coats to try to pass for a professional. To this day I see designers reaching for data like a thug reaches for a baseball bat before entering a street fight. The research they want to do is not to learn, but to win arguments. This is, of course, bad for design and bad for research.

How do you become confident? How do you stand up in a room with senior vice presidents, directors of marketing and …shudder… engineers and explain why you didn’t color in the napkin-wireframe they drew over lunch, but rather, that you decided to design? You have to make sure you are as professional as the professional you are.

  • Know your shit. Make sure you have the education you need. This is a combination of school learning, keeping up-to-date with periodicals and books on your subject of expertise, and real-world experience. This is probably the toughest for young designers. The solution though, is to read like a crazy person, talk to every senior designer you know about the work you are doing and learn from their experience, and work as much as you can, through freelancing and volunteering.
  • Think it through. If you haven’t thought through every bit of your design, you’ll get a kick-in-the-rear when you present your ideas. It doesn’t mean you have to be hyper-analytical while you design, but it does mean you set aside an hour or two before you present and do a heuristic analysis of your own work (or get a peer to do it). Walk through the entire solution and look for flaws. Categorize them into:
    • “I will fix”
    • “I won’t fix because…”
    • “It could be a bad solution, but I don’t think so because…”
    • “I don’t know”

    Now when these issues are brought up in the presentation, you won’t trip up, you won’t lose your confidence. You’ll calmly explain that “Yes, very perceptive, I have so and so working on it,” “I’d like to, but this is the phase one solution, it’s all we have time for,” “I do see your point, but have you considered this?” and your secret weapon, “You know, I’ve been pondering over that—what do you think?” Why is this the secret weapon? Nothing shows confidence more than the willingness to admit you don’t have all the answers. Admitting you don’t have an answer always trumps bullshit.

    By treating the folks you are presenting to as members of your team—equals with unique insights that match your own—you reach two goals: ending conflict while shoring up your own sense of place in the project and your value therein. You also message that to the other members of the team.

This is my final bit of advice:

  • Psych yourself up. I’m really not an affirmations type of gal, I’m more of a “Let’s go get beer and a pizza and see if there is some brilliant insight that comes from sausage and mushrooms.” Maybe it’s my years in California, but before a really tough meeting, I’ll sit quietly at my desk for five minutes and say to myself “You know your sht, you’ve done your homework, you’ve been doing this long enough, you are a smart cookie, you won’t say anything dumb, you will listen closely, everyone in there is on your side, we all want the same thing, you will be great. You will be great. You will be great.”

Sounds goofy, I know. I hope my family back in Iowa never reads this. But it works. You have to believe in yourself before you can get anyone else to.

At the IA summit I stated in the five-minute madness, “You win more arguments with will than with data” and it’s true. It’s all about giving up the lab coats and showing off our own design raiment.

So what has this got to do with our little Boxia’s birthday?

As a human, you enter your second year of life becoming more confident. Less obedient. More freethinking (as well as freestanding) and you often tell people “no.”

“No” takes some courage to say. It means you have realized your world view is as valid as your parents. And it’s a critically important moment in anyone’s life, be it B&A, the design profession or your own life.

Boxes and Arrows will continue standing tall, fleshing out ideas, not talking down to folks, exploring new approaches—even if unpopular, and saying “no” when saying “no” is the right thing to do.

We recommend you do so too.

*At the summit each year, the conference closes by letting anyone walk up to the microphone speak their mind. It’s called “five minute madness” and this year it included a woman singing “You Light Up My Life”, a man praising his Treo as an example of a future without limits, and another who lambasted the SIGIA list as a blight on the firmament. Madness indeed.

Planning your future

Written by: Erin Malone

“It’s not the plan that is important, it’s the planning.”

—Graeme Edwards

I have been thinking a lot about career growth lately, and as a manager, have been generally concerned with making sure there are growth opportunities for my staff, regardless of their level or the point they are at in their career.

This often means rearranging teams so that a staff member might be stretched to grow in a new skill—as a designer, as a mentor and leader, or just in a new domain (i.e., moving from a music product to a mail product). In addition, I am always looking for networking, conference, and classroom opportunities that would benefit not only me, but my staff as well.

But not everyone has a manager that is concerned about her career growth, and there are even times when day-to-day work concerns are a priority and career growth needs are far in the back of my mind. As a matter of fact, for most of my career, I never had anyone watching out for me. For the first part of my career, I don’t even think I thought much about my long-term career. I just seemed to happen into new opportunities that taught me new skills and kept me growing and challenged. But there was no plan, no goal other than to stay challenged.

The point is, in the big picture, no one is going to look after your career for you, but you.

A few years ago, a manager of mine gave me the assignment to work on a five-year career plan. I had never created a career plan before (not even to plot out goals for the coming year), so I was completely unprepared for how and why I should do this. Luckily, she shared her own plan as a guide, but I still agonized through the exercise. Over time I have become aware of how important this was for me to do. Looking and assessing where I was at the time, really thinking about what I wanted to be doing in the future, gave me the tools to make the right decisions to make things happen.

After I was done, I realized that most of what I put down for a five-year plan could be done in a year. But it took writing it down to see that and to make it happen. This also was a good tool for working with my boss to craft training and work opportunities for me to meet my goals. I also made sure that these goals included life and personal goals as well as career goals. The older I get the more I realize that these are intertwined and success in one space brings success to others. Work/Life balance matters.

In an effort to make this anecdote meaningful to you, I’d like to share the steps and some resources I used to help me prepare my five-year goals.

The Template:

  1. Your Name
  2. Today’s Date
    This is important as you reflect back on this document. This will become a touchstone for your growth and a reminder of who you were as you look back at what was important to you in this point in time.
  3. 3–6 Months
    • Start small.
    • Think about short-term goals that are easily achieved but will also help move you towards the longer-term goals.
    • Include some tangible goals (i.e., ship a product that I acted as lead designer for).
  4. 6–12 Months
    • Start thinking bigger here—this is planning for a year out.
    • What new skills do you want to learn?
    • What new ideas do you want to share with others?
    • What changes do you want to make? Put them down here along with the steps needed to take to make them happen.
  5. Beyond 12 Months
    • Capture specific plans that you know may take more than a year to get to or accomplish. For me, it was to work on my Dr. Leslie book. I discussed the idea with a writing partner 3 years ago, but it is only now coming to fruition with an actual proposal in hand and a potential publisher.
    • Be realistic but not afraid to reach. Visualize success in areas you may have little control over. Don’t be afraid to write down a desired goal that may be a stretch.
  6. Longer-term Goals
    • This is the area to think out for the next 3–5 years, including life beyond the company or situation you are currently in. For me, I listed “teaching again” as a goal. This reminds me that I want to do this and I need to make certain decisions and changes in order to make it happen.

      If I decide at a later time, that I don’t really want to do this, I should remove it off the plan.

  7. Opportunities to Explore at Your Company
    • List all the training and coaching opportunities relevant and currently available at your company.
    • Note relationships that need to be cultivated at your company in order to meet success.

      Note: This obviously may not apply if you are an independent consultant. Think about other opportunities that might be available through professional associations and networking instead.

  8. Skills to Develop
    • Project what skills you need to develop to reach the goals you listed in the first part of this exercise.
    • What other skills do you need, besides the ones you have now, to attain your goal?

      Since I am a manager and this is the area in which I have been growing, I listed things such as Confidence and Effectiveness—along with ideas on how to master these more intangible skills.

      Over the last couple of years, I have purposely put myself into situations to gain confidence—especially when giving presentations. Think about starting slow and building on your successes.

      In addition, I also listed skills of associated/allied roles that I would like to learn in order to make myself a more well-rounded and effective manager in my company.

  9. What I Care About in a Work Environment
    • This may seem frivolous or not important to the task at hand, but it serves to remind you of the values you need to share with the company you work for. As you grow or the company changes this can help guide you when you need to make a change.
  10. Personal Goals
    • Don’t forget the personal goals that you need to weave into your life. It never hurts to write these down as a reminder of work/life balance and of the things that are really important to you as a person.

You can use the finished plan as a tool when working on performance goals with your boss. Letting her know what you want out of the job is as important as your manager being clear on what is expected of you. Reminding her regularly of your goals is also important, as we tend to fall into patterns of behavior that may not be best for our long-term career plans.

I pull my career plan out periodically to check off what I have accomplished, and have begun adding to the long-term section. I see how I have grown and what areas I still need to work on in order to reach the goals I have set. I can also see that some things that were important to me three years ago are no longer important, and that there are new areas of growth I am cultivating.

The point of this exercise is to come up with a realistic plan within the framework of your interests and career path. The list should be visited regularly and modified as you reach goals or when goals are no longer important to you. The plan should help you shape a vision towards reaching a future destination and remind you that success does not happen by chance.

  • Creating a Career Plan
    http://www.lmabayarea.org/pdf/LMA Career Planning.pdf
    Sugarcrest.com. This PDF from a career training firm offers some good exercise questions to answer about your values, strengths and current situation. A nice companion to the template detailed in this article.



Erin Malone is currently a Product Design Director at AOL (America Online). She has been a practicing interaction, interface and information designer since 1993. She is editor in chief of Boxes and Arrows.