wrkng

Category Archives: Design

Introducing OpenPlans, and the evolution of a brand

After many moons of plotting and scheming, yesterday we announced our organizational rebranding: The organization formerly known as The Open Planning Project (or TOPP) is now OpenPlans. I am excited, and I think this is a welcome development.

For years, there has been mass confusion (chaos! pandemonium!) around our name. Our emails were @openplans.org, our website was topp.openplans.org (until 2009), and our name was the Open Planning Project. To top it off, for several years, we ran a separate web service called OpenPlans (now under new management as CoActivate). As I’ve mentioned before, I’ve never been comfortable with these conflicting brands and identities, and I’m psyched that we’ve finally made the leap.

Here’s a quick look into where we ended up, and how we got there.

First, we’ve updated our logo. Designed by the spectacularly fabulous Andy Cochran, it’s similar to our old logo, but with cleaner lines and more meaning. It probably goes without saying, but we’ve got the “O” and the “P” in there, and the shape is a broken circle, evoking open processes:

For comparison, here’s the logo that we’d been using for the past year or so. In order to minimize confusion between OpenPlans (the service) and The Open Planning Project the organization, we spent most of 2009 using our organizational nickname, TOPP, more prominently in our identity. While “TOPP” is easy to say and remember, as with most acronyms, it’s pretty meaningless on its own. I’m sure it will take us a while to erase TOPP from our vocabularies, but I think it’s the right move.

To round out the logo history, here’s the one that was in service through 2008. I like it, however for the twenty- and thirty-somethings in the room, “OPP” means something a bit different (can you say “harm me with harmony”?).

Of course, to go along with the rebrand, we’ve updated the OpenPlans website, attempting to streamline our messaging along with our logo & brand.

We’ve been struggling with a meaningful, succinct tagline for quite some time, and for now have settled on “We make cities work better.” A while back, I wrote about the idea of “making cities easier to use” — since then, we’ve taken that idea and adapted it a bit. Making cities work better is a better representation of our intentions, as it’s multi-directional (i.e., we’re not just “using” cities), and it hints at the digital infrastructure that we’re building.

Also, for the first time, I think we’ve successfully articulated how our software development, technology strategy and journalism activities are connected, as part of what we’re calling “the new civic infrastructure.”

Lastly, a major goal of the redesign was to make it more clear what we do and how people can work with us. I guess now we just sit back and wait for the contracts to roll in…

Here’s what the website looks like today:

And for another trip on the Wayback Machine, here’s a look at 2009:

2008:

and 2007:

That’s it. Hello, OpenPlans. Nice to meet you.

April 21st, 2010

View Comments

Design

jPlayer sprites SVG

For a little side project, I’m using jPlayer, a nice jQuery-based audio player. I wanted to skin the buttons a to suit my project, and while jPlayer does support jQuery ThemeRoller skins, I liked the basic look and feel of the standard jPlayer controls. So, I just traced the default sprites in Illustrator in order to recolor them. For other jPlayer developers, you can download the source SVG here, and tweak away.

December 12th, 2009

View Comments

Design, Javascript

Is _____ for you?

I get way too much spam in my inbox, even just counting things I’ve signed up for myself. Most of it I delete, but today’s email from CoTweet stood out, and is worth mentioning.

A while back I signed up for CoTweet, just to check it out — nutshell: CoTweet lets you collaboratively monitor and manage multiple Twitter accounts — but after my initial exploration I didn’t go back to it. There may have been a reason, there may not have been.

So, CoTweet, noticing my cold start, sent me an email, as any customer-aware and responsive web service should:

Subject: Is CoTweet for you?

Hi Nick,

We’ve noticed that no one has logged in to the @nickgrossman Twitter account through CoTweet lately.

CoTweet is not for everyone. It’s designed for teams who are managing the front-line of the real-time web for their organizations.

….

No other tool allows you to engage customers one-on-one like CoTweet does.

….

They seem to have struck a nice balance between being self-promoting (“No other tool allows…”), while being self-aware and honest (“CoTweet is not for everyone”). In particular, I found the ordering of the argument to be effective. Here was my thought process:

Cotweet: “We’ve noticed that no one has logged in…”

Me: “Yeah, yeah, I’m busy” (reaches to delete)

CoTweet: “CoTweet is not for everyone”

Me: “Ah nice, they’re not trying to just straight up sell me. I appreciate that”

CoTweet: “It’s designed for teams who are managing the front-line of the real-time web for their organizations”

Me: “Oh wait, that’s me” (clicks sign in link)

So, thinking about my own work, there are two takeaways here: 1) make sure you follow up on cold starts (lord knows we don’t do enough of this with some of our projects), and 2) when you do, phrase it in a way that’s disarming, honest, and helpful.

(looking forward to the email I get after I don’t use it for another 3 weeks)

December 9th, 2009

View Comments

Copywriting, Design

Melkjug Fluid Icon

If you use Melkjug as a Fluid app, like I do, then you’ll love this:

(Melkjug fluid icon)

October 15th, 2009

View Comments

Design

Map drawing UX is still too hard

picture-2

At work today, we are exploring the process of drawing routes on a map, thinking ahead to a few upcoming projects involving bike planning. So Sonali set up a Google MyMap and asked a few of us to mark our routes to work. In a nutshell, it was basically a flop, with two out of three people giving up before finishing. Paul Winkler summed up the process beautifully:

My internal dialog went something like: “okay, now my route is merging with Nick’s … oops, now i’m editing Nick’s line by mistake, how do I
undo that? (random clicking around) … ok now i’m back to editing my line … argh, it’s going down the wrong street… let’s try this way… whoa, why is there a random line floating around in the water? can’t seem to get rid of that one… oops, didn’t want to put a point there, let’s see if i can delete it… click… oops, i apparently deleted all the work i just did on my line, and there doesn’t seem to be an undo for that. F**k it.”

It’s tough UI to get right — basically you’re trying to replicate the vector drawing capabilities of tools like Illustrator, but in a simple way that provides just the right amount of control. Not easy. Safe to say that collaborative route drawing has not crossed over into the mainstream yet.

June 15th, 2009

View Comments

Design

Too much structure makes for useless data

Over at TOPP, we’ve been talking recently about the “spectrum of engagement” — in other words, providing a variety of ways that people can engage with a website, ranging from quick & easy (e.g., thumbs-up-ing something) to slow and involved (e.g., writing a blog post or signing up for an account). It’s obviously important to give people opportunities to engage at whatever effort/thought level works for them at a given time.

Along these lines, we’ve been talking about the role of “structured inputs” in facilitating various types of interactions. Interactions that are quick & easy are often (but don’t necessarily have to be) more structured — for example, signing a petition, filling out a multiple choice survey, or marking yourself as a “fan” of something. Of course, there is a tradeoff here — when you impose structure, you make things easy at the expense of flexibility and power. More open systems offer often limitless possibilities (think of all the ways you could use a wiki), but usually take a more invested set of power users to explore these and set cultural conventions (think twitter hashtags).

Another downside of too much structure, that I encountered today, is that it can often result in an abundance of meaningless data. Let me give an example:

An example: In what will likely prove a fit of hopeless optimism, I’m going to buy a pull-up bar for our bedroom door. As it turns out, there are a lot of options — bars that screw in to walls, bars that use horizontal tension (like a curtain rod), and big multipurpose bars for pushups, situps, and pullups. I think I want the kind that doesn’t screw in, and I know I don’t want a big piece of equipment. So, the question is, which is the best one? Where to go but to the customer reviews. And finally, to my point.

First stop: Dick’s Sporting Goods. As I flipped through the reviews I noticed that they all used many of the same words, and that none of them really said very much.

Lo and behold, they provide a structured form for feedback, complete with checkbox suggestions for “pros” and “cons”.

So, instead of actually writing anything meaningful, they just check a few boxes and are done with it. There is a general comments field, but apparently no one takes the time to fill it out once they’ve checked those boxes off. In the end, this approach attempts to make things easy for the reporter, but the end result for the next shopper is a set of reviews that really don’t say much.

Second stop: Overstock. Similar product here, but when I get to the reviews, I see several pages of thoughtful and helpful reviews. People dealing with the exact same questions I was facing. Sweet! So helpful.

Looking at the overstock review form, you see a different story. Rather than pre-thinking for the reviewers, they ask for ratings on general quality and then a detailed description.

In addition, they provide instructions on how to write a great review. These instructions also imply that bad reviews won’t be featured on the site, introducing another mechanism of motivation — getting your review published.

February 7th, 2009

View Comments

Data, Design

TOPP @ Green Desk

This week, TOPP moved into additional, (maybe) temporary office space, to alleviate some of the crowding at our office in the West Village. We were looking for a place that was convenient, comfortable, and most of all, available immediately (backstory is that we’ve been basically sitting on top of each other at our W. 12th Street offices for the last few months, while our new space at 148 Lafayette is being renovated — it’s ridiculous, I know…)

Anyway, we found a GREAT space at a new-ish office incubator in DUMBO called Green Desk. It’s a renovated 6-story warehouse building right at the foot of the Manhattan Bridge. Each floor consists of a bunch of glassed-in offices which are home to various companies. Gothamist is on the floor right below us. Most of the folks from the Livable Streets Initiative and GothamSchools, and some of the OpenGeo team will be working from here now.

I’ve been reading and thinking a lot about office space lately, mainly spurred by our own impending move as well as Fog Creek Software’s recent move to new digs. Having read Joel Spolsky’s writing about the importance of private & quiet office space, I’ve been getting a little concerned about the open plan of the office we’re about to move into. I visited the Fog Creek offices last Friday for their new office open house, and was impressed by the combination of highly social space (kitchen, lunch tables, couches) and super-quiet workspace (private, glassed-in office for every single developer). As a result, we at TOPP have been trying to subtly improve the layout (within reason, since construction is about to start and our concerns aren’t the only ones — the space will also be the future home of Tower Research Capital) of the new office to increase the amount of available private/quiet space, even if the floor plan is fundamentally open.

Anyway, I digress. So, I’m sitting here at Green Desk for the first time today, and it’s really quite nice. We can hear the sound of the subway rolling over our heads as it crosses the Manhattan Bridge, but it’s kind of like waves crashing and isn’t really disturbing. We have four separate glassed-in rooms, each with about 4 desks, and there’s a shared conference room, kitchen, and sitting area. Apparently there’s also a proper cafeteria and exercise room on the way. It’s also nice to be in a space with other companies, although I haven’t met anyone just yet.

Here are some photos. Even though I will continue to work primarily from the Manhattan office, I think I’ll plan to spend a day or so per week down here for a change of pace, and for the joy of walking to work and not leaving Brooklyn