Design Thinking: Data and Life Stories

What on Earth is THIS??

(Seriously, don't try to read it. Just appreciate the gobs of teeny tiny text and the colors.)

A periodic table? An eye test?

No, it's actually a bunch of intertwined life stories.

This is a diagram of the seats inside a theatre that has been in operation since the 1950s. The building itself was built in 1914.

All those tiny words are the names of people who, at one point or another, gave a donation to the theatre and had their name put on a little brass plaque on a seat.

Many of the plaques are gone. This is a reconstruction, showing which plaques are on ARMS of chairs (pink), BACKS of chairs (red), gone (black), or not done yet because they are new donors (blue).

That in itself isn't particularly amazing... what is amazing is when you put this seemingly dry bunch of text in front of someone who has history with the theatre.

The stories just start pouring out. One name reminds them of another, relationships, incidents, shows, performances, all sorts of things. I spoke with a gentleman whose 94- and 92-year-old in-laws are two of the people whose plaques I am restoring. He could tell me about romances that started on the stage (leading to a wedding that he later photographed), people who got their starts there, people who got along, didn't get along, it just went on.

All from this spreadsheet with color-coded names.

So now, I'm putting plaques on seats, but I'm also going to make a big printout of all the names once we're done, so people can stand in the lobby and share their stories.

My point in showing this? All information has people behind it. The key is to connect with those people. Everything of value comes from relationships. A graph only depicts things that have been done by human beings. If you remember this, you can use graphs and charts to give your information a soul.

10 Web Design Pointers for Nonprofits

I've written here before about Web strategy for a small nonprofit, and how to use a blog structure to create a free, easily-updated Web presence for your organization.

The design of your site is equally important. For a nonprofit, it is more important to clearly communicate what you do, show benefits, and make it easy to support you than to have lots of animated graphics or slick visuals.

Here are a few design pointers to keep in mind:

1. Tell your visitors exactly how to support you, right up at the top. Many potential supporters just want to know how to help. Don't make them look for it or figure it out. If you've got a Donate button, put it up there. If you are looking for volunteers, put that up there too. Keep all of that in the same place all the time.

2. Have a very clean, professional-looking header. In it, put your organization's name, location and tagline or mission if you have one.

3. Show your organization at work, show pictures of people learning or benefitting from your activities. This literally puts a "face" on your group. That said, be sure that you get a release from anyone whose image may appear on your site. Don't put someone's picture up without his or her permission.

4. Keep your type size pretty big, don't make people squint at your site. Also, put some blank space between items.

5. Use color to reinforce your brand. If you have a signature color, use it in your header as well as in the text titles for all of your posts.

6. Don't use low-resolution, blurry or cut-off logos or graphics. Also, don't stretch or squash graphics so that they look distorted. Get the high-quality graphic and use it. You can always size a graphic down, but if you make it bigger, it will fall apart. So always keep a big, high-resolution copy of your logo file handy to shrink down and use. If you partner with other organizations or sponsors, get high-quality copies of their logos as well.

7. If you are using a blog, take the extra stuff like date stamps, comment buttons, and other detritus out of the bottoms of the posts (you can generally do this under Customization or Options). This makes the page look cleaner. Also, if you refer back to an older post, if it has no date on it you don't look old and moldy.

8. Keep your writing brief and to the point, and use lots of juicy words like "education" or "children" or "schools" or "creative" or "housing" or whatever applies to what you do. This will help your posts get higher in search engines, and will also make your site much more interesting to read. I generally write a post, then go back in and take about half of it out.

9. Get a Twitter account, and use Twitterfeed to send all of your blog postings over to Twitter. This way you don't have to write twice, and your Twitter followers can get a link to your post and come see you when you announce something.

10. If you have a Facebook fan page, link your blog to this as well so that whenever you post it will show up on Facebook as well. You might be reaching one group of people on Twitter and a whole other crowd on Facebook.

And a bonus 11th tip:

11. Look at lots of sites for other nonprofits, especially those in your area of expertise. Notice how they write about what they do, what words they use, catch any good ideas. Looking at other people's work is the best way to make your own better.

Visualising Complicated Decisions

Visualising Complicated Decisions
Originally uploaded by betsystreeter

Nonprofits are always hungry for ways to generate interest and funds. This often results in many well-intentioned ideas that may not pan out to actually be profitable. This drawing helps me clarify how we at our theatre company should think about whether or not to throw an event. We are unique in that we have this really cool old theatre building to work out of, so there are no end of ideas. But here I've shown that there is a water line that we must stay above for an event to be worth it.

A nonprofit generally wants two things: to reach people, and to bring in money. So I put those above the water line, and then put the things that erode those two things below the water as if they are pulling down. The objective of the game is never to end up underwater.

There are many many factors at work here, and for a particular event different ones will come to the fore. But it's all about the difference between the pluses and minuses - do you end up above water or not? Are there flotation devices that will help you, like getting volunteers or partnering with another organization? Are you sinking yourself by not allowing enough lead time or putting all the responsibility on only one or two people and burning them out?

This came out of a discussion at a board meeting - I knew there were a lot of things flying around the room, and we were bouncing from a time discussion to a technical discussion to a money discussion - this helped me to really get it all down in one place and have a tool to evaluate events with going forward.

Web Strategy for a Small Nonprofit - Lighten the Load

As a member of the board for a small nonprofit theatre company, one of my challenges is to help the organization connect with - and win support from - its surrounding community.

We operate out of a 96-year-old building, known as Town Hall, which has a rich history in the area. Tons of people drive by it every day. It's even by a stoplight.

That said, it can be a challenge, even in a relatively small town, to really reach people. Sure, there's the cross-section of folks who are always involved, who bring their kids to classes, and who attend shows, but to many many people, there's this historic building on the corner and some stuff happens there but we're not sure what that is.

So what we need is a way of communicating that opens that building up for all to see, and makes them feel welcome. That's where the Web comes in.

There is really nothing more sad than a website for a nonprofit that clearly hasn't been updated for months or even years. I always feel bad when I see that - I figure there's no one to do the updates, or maybe the organization has gone dormant for some reason. Needless to say, this does not help to win supporters, donors or sponsors.

So, we knew we needed to make the Town Hall Web presence vibrant, to show an active company with lots to offer. And when you are a theatre, there is always some upcoming event, something to announce, tickets going up for sale, shows ending and needing to be taken down. It's a really fast cycle.

Sometimes I will hear people say, "We just don't have anyone to build us a site, and we can't afford to hire someone to do it." There's this barrier, which is getting the site built and edited, that stands in the way.

So here's what we did, and maybe it can work for you too: We converted our whole site to a blog.

What did that do for us? Well first, it removed the "website development" process. Our staff can now edit the site on a dime, and all we need to do is make sure that it stays tidy and is written well. There is no middle step between needing to publish something and publishing it, and there are no technical skills involved in getting content up there.

This has had the effect of letting us not only be much more current, but it has also enabled the staff to work together to make the face that the theatre puts out into the community. That ownership is priceless.

One neat tip: In order to maintain the latest and greatest news on our home page, we have one post that always has the most recent date on it. That one has all the "Today at Town Hall" news on it, and it's the first thing you see. So if we make a new post, that has a more recent date/time, we just go back in when we're done and set that "Today at" post to the most recent date and time. That way it pops back onto the home page. So just because it's a blog does not mean you have to lose control of your home page.

We then put all of our information about our staff, board, how to donate, tickets, map, etc. down the side so it's always there.

In this day and age, with all the tools out there, if you've got something you want to say on the Web, and you aren't saying it, it's because you're not using the right tools. In our case, as a small nonprofit, we decided it was much more important to be active and up to date than it was to have some big Flash site or other technically-complex solution. Especially since now, when the phone rings, the staff can point people to up-to-date information on the site and mean it.

If you're operating on low-to-no budget, and you want those who are creating the content to have control of what gets published, a blog-based site might be right for you too. I'm now thrilled when I see new things going up there, and it happens almost daily. If you'd like, you can see it here.

Do the Old Rules Still Apply in Design?

The Internets have been around long enough you can now go back and look at "old" website designs and see what's changed. It's really fascinating to look at an interface design book from a while ago and see what people were dealing with.

For example, the time it took for a page to load used to be of paramount importance. We were in the land of dial-up connections. People carefully constructed Web pages so that they wouldn't have to load too many graphics. Making people stare at a spinning clock or hourglass - and half a graphic - was death.

Well, these days we've got YouTube videos all over everything, animated popup ads that slap themselves over the top of whatever you are looking at, weird little dancing people in banners at the side of the page -- is this good?

One thing that hasn't changed is how much people like to control the display of information. Listing things according to what people care about is still extremely important. I remember working on the info architecture for the Xerox website years ago, and we came up with a way to compare various printers and copiers by letting people re-sort the list of products according to things like paper size, whether it could fax, resolution, etc. This was pretty new, and some of the architecture got into Jakob Nielsen's book Designing Web Usability (page 215, yes I'm still proud darnit).

These days, people sort things all the time. You can sort your email, sort your files on your desktop, and shopping sites are one big sorting festival.

So, yes, the old rules still apply - the ones that say the user wants control. It's just that now, we can give people control of the information along with a nifty video of the latest celebrity meltdown or an animated person gaining and losing weight over and over. Isn't that great?

HyperCard and Night Driver

There's something terrific about being my age, which is that your life spans a period of time from when it was normal to get an electric typewriter to take with you to college, up to now. And, it's not actually that long, so it's not like I'm 150 or something.

I remember when my friends first got their little Macs in their dorm rooms. This was a whole new way to create a term paper! Of course, you still had to plan your time to allow for the printing process, in which the tractor-feed printer would sit there and make awful noises in its strain to output all of your pages. But shoot, that was nothing next to re-typing or white-out.

And boy, I got excited about HyperCard. Here was something that let you come up with your own interface! I would make little stacks of cards and click through them over and over.

My age also means that as a kid I played on an Atari. We had Pong, and Night Driver. And Asteroids. And, we had Space Invaders. I had a system whereby I NEVER LOST at Space Invaders. I could play it infinitely. The only thing that controlled the length of play was basic human needs like eating and going to the bathroom. I had a choreographed set of moves that I could replicate over and over and score 100,000 points. Ask anyone who knows Space Invaders - that's a lot of points.

And get this - at my husbands childhood home, in the drawer in the coffee table, there's one of those original electronic Football games. You know, the one that goes "BDEEEE! BDEEEE!" when you score a touchdown. It still works. We still play it.

I think that knowing about these things keeps you humble. I feel grounded in a world that doesn't just include rectangular screens, because I used to dial rotary phones. And this helps me to remember that when designing or illustrating, all you're doing is thinking visually and that the screen isn't the point. The human experience is the point.

We dig the Internets not because they happen on a screen, but because they enable people to actually meet and date and get married. And find rare comic books. And get tickets to the monster truck rally.

These days as I look over the landscape of people slouched over their rectangular devices, I know that the world they are relating to is still lumpy and human and messy. The device isn't going to change that. You can get a rude email just like you can get a rude phone call or talk to a rude person. So when we draw or design it's all still just people. Mostly people who think rotary phones are hilariously sad, but people nonetheless.

Humor-Centered Design

I think it's really weird to try and analyze why things are funny.

But getting funny things down in a form that other people can enjoy - that requires some thought.

When I go to create a cartoon, often I have some fragment of an idea in my mind - like, "that's stupid," or "Huh," or something really articulate like that.

These get put on shreds of paper all over my house and car.

Then I have to get from that shred to something that's actually able to be seen and read and understood.

Single-panel cartooning presents special challenges. I think of my panels as one-frame movies. They've got a plot, and characters, and a setting, and dialogue.

There's a past, a present and a future, and you have to decide in which of these the cartoon takes place. Did something just happen? Or is it about to happen? Or is it happening right now?

Something stupid that is about to happen is funny because the reader can anticipate it. Something stupid that just happened is funny because of the reaction to it. Something stupid that is happening right now is funny because it's an observation of life.

Here's something stupid that is about to happen:

And, here's one where something stupid already happened:

And here's one where something stupid is happening, also known as "observational humor:"

See? Humor being designed. Telling a story, one frame at a time. Someday maybe I'll string all the little panels together and that will be my life story. There are over 2,200 of them at this point, after all.

Unintentional Messages in UI Design

Have you ever had this conversation:

"I can't get this to work."

"Well, maybe they don't want you to do it that way."

Who are these "they" people anyway? Well, as we move through the world, often we are faced with things that we know were made by someone else. Ticket machines, electronics, websites, even doors. If they don't work as we expected, we often assume that the "they" behind that thing didn't intend for use to use them in that way. They didn't put that option in there.

Websites and interfaces are especially susceptible to this. I was watching a friend try to navigate a website the other day - he was evaluating a company that he might work for. He could not look at the company's employees by function, which meant that he couldn't determine who was in what department. "I guess they don't want you to know that," he said.

Hmm.

Was that message intentional, or unintentional? When you leave things out of your interface that users are going to want, are you doing that on purpose? Is it like the velvet rope outside a nightclub?

Or, did you just leave it off because you didn't think of it, and now people are taking away a message that you did not intend?

The things that are not there send a message, that says "That's not the intent here." So make sure you send that message on purpose. If you bury your "careers" link, maybe it's because you aren't hiring right now. But if you do want to be hiring, don't bury it. Put it right where someone new would see it right away.

UI Design: Selecting a Halloween Costume

I love to think about everyday problems and then design user interfaces to address them.

Many parents have had this conversation, usually while driving or doing something not even remotely related:

"Mom, know what I want to be for Halloween?"

"Honey, Halloween was last week."

"I know. For NEXT Halloween."

"That's a while from now."

"I wanna be a space robot. Or a Transformer. Or a rock star."

"Okay, we'll see when it gets closer, okay?"

"Actually, I wanna be Hannah Montana..."

I would love to have a little widget that can generate tons of great costume ideas, based on what my kid likes. They could play with it all year, changing their minds hundreds of times, and have fun pretending to be different creatures and characters (since that's what this process is all about, after all). Then, as Halloween becomes more relevant (i.e. it's actually, say, September) we could figure out how to either or make or buy a costume.

The first thing I did while thinking about this was to sketch a little mind map of the various issues that come up when considering a Halloween costume:

I began to notice the types of things kids would want to control, such as overall scariness or cuteness. Then, there are things like the actual age and size of the kid. And, there's the great decision of whether to Make or to Buy a costume.... and a few other things that seemed most relevant.

Then, I set about sketching some actual interface ideas, so as to get an idea of real estate. I feel that if an interface is going in the right direction, there are really not that many things needed in front of the user at once. So I sketched around a bit and did a fair amount of erasing and re-drawing:

What I got to right away was the notion of a simple set of controls at the top, that would generate a really nice, visual list of ideas at the bottom. Rather like a parent saying, "How about a mummy? Or an astronaut? Or the Tooth Fairy? Or..."

In addition to that suggestion-generator, which I think would be what kids would use a whole lot throughout the year without really needing to get any details, I felt that the next level would be to try and settle on a real costume by understanding what it would take to either make or buy it. So the details on a costume might look like this:

Here, I noticed that this would present a great opportunity for sponsored links, either to shopping sites or to sites that have how-to's on making costumes. Again, the listings would need to have lots of pictures so users could quickly sift through tons of options and go, "Nah, nah, nah.... yeah! Yeah! Nah..."

Finally, I added some other notes about things I think this Costume o Matic would need to do:

So, the entire sketch ended up looking like this:

At this point in the process, I like to put the thing down for a while and let it sit. Sometimes a big new issue will present itself, like the idea of kids wanting to dress up with their friends, which would mean either group or collaborative costumes.

Now, I just wish someone would go out and build something like this for me - and all those other parents out there having the aforementioned conversation. Maybe that way, once we'd kicked around some ideas, the kids could generate and print a list of costumes, keep it awhile, make another, and pretend all year until it was time to get the actual job done. And then on November first, we could start it all over again.

Concept Mapping: Getting it All on One Page

Mind Map: Planning for Summer
Originally uploaded by betsystreeter

Recently we were working on the plan and schedule for summer classes at the local community theatre. Obviously you're going to get a lot more students if you schedule things at a time people can get there, and offer the types of classes people want. To figure that out, it helps to get a picture of what the parents are dealing with when they go to figure out what their kids are doing in the summer.
I knew it would be a lot of things, but I was still surprised at how quickly the whole page filled up. This is why making things super simple for parents is so important. Their heads are already filled up with all of this stuff.
This really helped me as we created our plan, maybe it's useful to you too. Or, you can just contemplate it and say, "Wow." I did that too.