I'm a developer, and I want to help OpenStreetMap

Intro

This is a follow up to a talk given at SotM US in June by Saman. Like me he works at MapBox and we've both worked on the website and on iD.

Ground up redesign

What Saman proposed in his talk was a ground up redesign of OSM.org.

No constraints

What would OSM.org look like if we started from scratch, and designed without constraints -- without worring about how many servers we have, or how many people to run them, or who would implement the vision. And also without any constraints around what already exists, with the fact that people are invested in the way things currently work, and changing a feature they depend on can have a real impact. With this freedom from constraint, Saman outlined three areas of improvement:

#1: information architecture

How do we organize and label the features and functionality that OSM.org provides. The website has grown organically over the years, and we would do well to step back and think at a high level about why users come to the website, why they come back, and what they want to accomplish when they do.

#2: onboarding experience

We could do a better job of informing new visitors what OpenStreetMap is and why they might want to contribute, guiding them through the sign up process, welcoming them to the community after they've signed up, and holding their hand as they make their first edits.

#3: strengthen the community

OpenStreetMap is built by a community, yet the social features of the website are in fact fairly weak. In his talk Saman proposed social features in the style of Facebook or Strava, and he used the word 'gamification' which for some people is a four letter word. But those are far from the only way to use technology to strengthen the community -- for example, there's been much discussion around groups and commenting features as a way of bringing together contributors with common interests.

#4: It's not 2004 anymore

Let's give the website a more modern look and feel. OpenStreetMap has grown up. It's a serious project, it's alive, it's current. It should look like the future of mapping, not a turn-of-the century website.

Incremental, organic change

And what we came up with, after talking about it, was that we should work on incremental improvents that stood on their own, but built toward a larger vision. In other words -- grow the site as it's always grown: gradually, organically, with plenty of feedback from the community -- but guided by this vision, focusing on particular areas of improvement. And so we started working.

In the open

And we work in the open, with the community. Uh, everyone can read this right? These are some of the pull requests we submitted. Yeah, there's been a lot of discussion. Thank you to everyone who gave us thoughtful, constructive feedback -- it improved the work immensely. So I want to recap what we have accomplished so far -- and I mean we, not just Saman and I, but everyone who's given feedback and especially Tom Hughes, who maintains the website, and reviews every change to make sure nothing blows up -- apart from the mailing lists.

Map Controls
Sharing
#hash permalinks
User Menu
Onboarding experience

iD
Continuing Incremental Change

We're going to continue to work in the open, with feedback from the community, on incremental changes that advance the goals that we've set out. To make that concrete, I'm going to share with you some mock ups of specific changes we'll be putting forward as pull requests in the months ahead. What's important to note about these mockups is that they are much closer to the existing form and functionality of the website than what was proposed before. These are very real and actionable proposals.

Help & About pages

We'd like to create a consolidated About page that both explains the project in an accessible way and details the Copyright and License terms. We'd also like to create a dedicated page for linking to help resources like the new welcome page, the wiki, and the Q&A site. Having these dedicated jumping off pages means we can provide a clean, uncluttered design for other pages on the site.

User profiles
Header

Left tab nav is for changed the left drawer. Right nav items are all full-page, take you away from the map. All of the navigational items that are currently in the sidebar have either a place here, or a place in the help and about jumping off pages.

Front-page design

Here's what a redesigned main page, incorporating the new header might look like. The sidebar here is slightly larger, the text slightly bigger, and most importantly, it no longer needs to serve a mixed purpose, combining both branding and search functionality, and navigation. Because we've created these jumping off pages and moved other navigation to the header, we can focus on tailoring the sidebar to specific tasks, specific use cases. Here we see the sidebar as it would appear to an unregistered user visiting the site for the first time. In this situation, the most important purpose of the sidebar is to provide a basic, easily digestible explanation of the project. Users can explore the map, and if they're interested, begin the sign up process.

This isn't necessary. We can show search results directly in the main sidebar, leaving more room for the map. And we anticipate that the other bits of functionality can be incorporated into the sidebar in the same way -- the data browser, the export control, even the history of recent changesets. This is it -- this is our vision, refined. And unlike what Saman presented in June, we think this design is actionable, fits within the constraints we have, and is something that can be realized in relatively short order. I look forward to discussing it with you here at Birmingham, at the hack day on Monday, and online.

Let's do it. Thanks!