You’re a street designer
(you just don’t know it yet)

The design principles behind Streetmix

Marcin Wichary
8 min readMar 29, 2014

“Cities have the capability of providing something for everybody only because, and only when, they are created by everybody.” — Jane Jacobs

The Times Square in New York received a huge makeover in 2009, when the traffic lanes surrounding it were closed to car traffic and turned into pedestrian plazas. In San Francisco, two elevated freeways damaged by the 1989 earthquake were eventually torn down — one demolition opening up the waterfront, the other one allowing a desolate neighborhood to thrive. Copenhagen famously reinvented itself as a bike-friendly city in the last few decades.

Those are a few most famous examples of street redesigns. Chances are, however, that smaller streets around you are changing, too — as is our way of thinking about them. While streets were originally built with people in mind (a century ago, it wasn’t uncommon for parents to just feel safe to tell their kids to go play in the street, even in a big city center), throughout the last century we largely surrendered them to car traffic. However, many city planners and urban designers are revisiting that approach and re-imagining streets as once again more pedestrian-, bike-, and public transit-friendly.

A typical way to communicate new ideas is via a “street section” — a slice of the road illustrating all of its parts side by side, from the building on one end, to the building on the other.

As one can imagine, redesigning a street is an expensive, practically un-undoable, difficult process, filled with many compromises. On top of that, the tools used to create street sections (CAD utilities, Adobe Illustrator, paper cutouts) are complicated and uninviting, making participation in the process that much harder for those who ultimately matter the most — people living or working on a given street.

A different approach

Last year, we tried to improve that with Streetmix. This web-based street section editor was built as a side project by a small team of fellows at Code for America, a non-profit dedicated to finding ways to apply modern technology practices to city governments. Code for America believes in open source, open data, and citizen engagement through web applications, and Streetmix is a direct extension of that way of thinking.

Streetmix on an iPad

One can, of course, imagine many different approaches to building a browser-based street editor. As the lead user experience designer on Streetmix, I’d like to talk about some of the design choices we made in order not to just make it easy for people to use our app to imagine their dream streets, but to make them feel welcome to partake in the urban design process in the first place.

We envisioned Streetmix experience as consisting of four separate, equally important parts:

  1. Opinionated visuals
  2. Neither forgiveness nor permission
  3. The power of the default
  4. Save without saving, share without sharing

1. Opinionated visuals

Original (left) and eventual (right) Streetmix visuals

Take a look at a few typical street sections, and then visit Streetmix. The former tend to be monochromatic and neutral. After starting with something more traditional we decided, however, that Streetmix should have a different, more distinctive visual style.

Like every design decision, this one comes with a price. One way to look at it would be to go back to Scott McCloud’s excellent book Understanding comics and his mention of the universality of cartoon imagery — the more specific a drawn face will be, the harder it’ll be for readers to identify with it and imprint themselves on it.

In the same vein, it might indeed be hard for people to imagine some grittier streets in our cheerfully geometric universe. On the other hand, if our visuals seem fun, friendly, inviting, and hopeful, there’s a much better chance people will feel interested in using Streetmix, and proud of their creations.

2. Neither forgiveness nor permission

Redesigning a street in Streetmix is as easy as we could think of making it: just drag the elements around with your mouse or your finger. There’s no way to screw up. You can create a one-foot sidewalk (possibly forcing people to walk like crabs in a file), put a bench flanked by cars whooshing by, or a bus shelter waiting for bus that can never arrive. You can, in other words, have a lot of fun. Streetmix won’t ever judge you.

An example of a segment warning in Streetmix.

As you drag things around, we will try to pick good defaults — automatically choosing the lane direction, proper bus shelter orientation, and so on — but you can always adjust them. And while we might also give you a small hint what you’re doing is not exactly realistic, the ultimate decision will still be yours to make.

The options in Streetmix are deliberately kept limited: there are no fine-tuned height controls, no underground elements, no way to import your own graphics. However, within the universe of the carefully curated options we provide, you are free to do whatever suits your fancy. We know that learning works best when you’re enjoying what you do (and get a chance to break a few rules), and it’s fun for us to see the many hilarious streets our users create.

An example of a fun/unrealistic street created in Streetmix. http://streetmix.net/ActivateBC/2/super-bike-lane

3. The power of the default

Knowing the power of defaults, we spent a lot of time discussing the first street you will ever see on Streetmix.

That default street has many segments that reflect how urban planners are thinking about streets today: not just as thoroughfares for cars, flanked by dangerous, narrow sidewalks, but varied, healthy, multi-modal entities. So, your first street will feature some cars, but also a bus (with a matching shelter) for those using public transit, street furniture for pedestrians, and a protected bike lane for cyclists.

The default street on Streetmix.

You might also notice a truck — however, without a corresponding truck in the toolbox at the bottom of the screen. This is meant to quietly indicate that the elements at the bottom can be further customized. (The buildings are of different types and mismatched heights, which too is intended to tell the visitor that those are malleable — and make them want to try to figure out how to do it in the UI.)

A few of the more “exotic” elements are meant to provoke questions (why is this bike lane green? what is this gray slab of infographics on the sidewalk?) that can be immediately answered by our detailed descriptions as you hover over them or tap them.

We also wanted everyone to feel welcome in using Streetmix regardless of where they’re from. The default street will use the metric or imperial measures, and it’ll be configured for right- or left-hand driving depending on what country we think the user is visiting from. (Streetmix detects the location via the visitor’s Internet address, even though we could do it more precisely using HTML5 geolocation — however, the precise geolocation pulls up a browser warning asking the visitor to agree to be located, and we don’t think we deserved enough of the user’s trust at this early moment to ask for that.)

4. Save without saving, share without sharing

“Toys are not really as innocent as they look.
They are the preludes to serious ideas.” — Charles Eames

Consider:

  1. From the second you open Streetmix, your street gets its own shareable, unique, friendly-looking, public URL. That URL will never cease working.
  2. From the second you edit your street, the changes are immediately saved to the server (a many-level undo system helps you out).
  3. We will never require you to sign in. There will be encouragements along the way — signing in means much more handsome URLs (with your name on them), and a gallery view of all of your streets — but it’s never enforced.
  4. If someone sends you a link to their street, you can start messing with it as if it were yours — we will just quietly make a copy of the original street and put in your gallery. (Try to remix my street!)

None of these requires confirmations, toggling checkboxes, asking for permission. Alongside friendly visuals, a fun UI, and a welcoming default street, we felt this approach was the fourth pillar of Streetmix necessary to make it easy for anyone to pick it up and start designing a street — and discovering that they’re much more of an urban planner than they previously thought.

Inspired by SimCity, Streetmix’s design aspires to make it a gateway drug to getting people interested in urban design or advocacy, and many of our choices are meant to be Trojan horses. Drag in a bike lane onto your street, and see it no longer fitting inside the immovable buildings as a result — you just learned a lesson that every street redesign project is an exercise in compromise. Enjoy streetmixing on an iPad, and perhaps it’ll give you an idea to carry that iPad — and your street proposal — to the next community gathering. Discover how easy it is to remix someone else’s street? Maybe it’ll inspire a conversation and mutual collaboration on that design.

Did it all work?

We launched Streetmix at the beginning of August last year, and even in just the few weeks since, we’ve seen it used by many more people than expected.

None of our choices escaped scrutiny. However, for every criticism of Streetmix’s limited set of elements and for every request to add more functionality (both of which we worried about, fearing the second-system syndrome), we’re seeing many more people never before interested in street design learning something new, and having fun doing it. Yes, there was a lot of quirky or unfinished streets in the 50,000 or so created in just one month since we launched — but we also saw a very healthy fraction addressing real-life issues: bike advocacy enthusiasts all over the world proposing changes to their streets, and professional city planners using Streetmix instead of their pro tools to quickly sketch some ideas. We’ve even heard that someone in the audience of a major corridor transportation presentation in Wisconsin brought her own Streetmix design and presented it.

It is exactly what we wanted to achieve when we embarked on this project at a hackathon at Code for America. We’re hoping to hear many more stories of our app helping to simplify and democratize urban design. Even this far, though, we already feel that our approach was the right one, that fun doesn’t have to preclude seriousness, that unrealistic can lead to impactful, and that accessibility is so much more than just text labels on image elements.

Now, why don’t you go play in your street?

Thank you to Lou Huang for starting/guiding the project and his many lessons about urban design, Katie Lewis and Shaunak Kashyap for their excellent collaboration, and others who helped with the project.

--

--