We’re very excited about the new version of the Orton Family Foundation’s Community Almanac that we’ve been working on at TOPP Labs. In this post I’ll share some of the design decisions that went into that project and some of the reasons why things have changed.

The Opening Line

In order to make it easier for users to contribute to the site, we decided to ditch the previous workflow—an impeding multi-step wizard that walked you through registering and adding your story—and we replaced it with a more unobtrusive workflow. Now users can jump right in and start adding whatever content they want in any order they like, even before they’ve registered or signed in.

Below are some of the wireframe mockups outlining this new just-in-time workflow:

Note: There are a few great ideas in these mockups that didn’t make it into this iteration: namely user profiles and an achievement rewards system. Maybe they’ll make it into a future release?

The Well-Worn Page

In addition to improving the workflow, we wanted to push a new book/page metaphor throughout the site. What was previously referred to as a story is now a page. Users add pages to their community’s almanac, or book, with the site as a whole is presented more as a collection of almanacs or library of books.

Not only was the term “story” inaccurate, as users can publish whatever type of content they like—text, images, maps, audio, video, or PDFs, none of which are necessarily narrative—but the term “page” is also more straightforward and familiar. Users are accustomed to viewing and adding “pages” on a website. Additionally, extending the “page” metaphor to include books and a library provided a more cohesive aesthetic direction and was also just more fun.

The Carefully Considered Cover

Once our ideas for the new user workflow and bibliophilic metaphors were established, I kicked off the visual design with a mood board in order to set the general tone for the look & feel:

The mood board sought to create a warm, inviting, and familiar vibe based that reflects the “heart & soul” sentiments of the Orton Foundation by referencing traditional, tactile imagery.

With this mood board and the book page metaphor in mind, I began sketching ideas for the basic structure and layout. The final sketch depicts an off-centered book where the recto page contains the primary content and the verso page acts as a sidebar for secondary content.  The charm of this layout resides in its flexible width. Although it behaves as a fixed-width layout, it’s not. In larger windows the sidebar items float beside each other, forming columns across the left-hand page. If your monitor is ridiculously large you can even see the whole book!

This fluid layout inspired quite a few bells and whistles, not to mention a couple of fun Easter eggs. The informational tour has been moved to home page as a little slideshow-style presentation that directs users to the map or signup. There’s also a cool slide-down login area and shuffling stack of almanacs on the home page. Check out the parallax scrolling that happens in the header illustration while you resize the width of the browser window. And we didn’t stop there! Who knows what else you’ll find… But hopefully you’ll never see these witty error pages in action: 400 (Client Error), 500 (Server Error).

Finding Your Community: The Map Workflow

While we were really excited to launch all these new features,we knew that the current map workflow wasn’t quite right and needed to be changed. In order to solicit user feedback on the other new features, we decided to launch in iterative stages.

In order to find a community in the current map workflow we perform two geocode requests. First, we geocode based on what the user types. Then, if there’s a valid result, we find the latitude and longitude given back by the first result and reverse geocode it. With this method, we only get cities or towns as the result of searching for neighborhoods or smaller communities and can thus limit the fragmenting of communities by creating a canonical, publicly-owned almanac for each location.

Now almanacs are now publicly owned, rather than moderated by a particular user. On the old Community Almanac site the user that starts an almanac would personally own that almanac. If, for example, the user “Hatfield” started a Tug Fork River almanac he could moderate out the user “McCoy”. Then “McCoy” could in turn start another warring Tug Fork River almanac. While this new map workflow is great for creating canonical almanacs, it does expose another problem…

Finding Your Community: Neighborhoods

Sometimes prominent communities are geographically contained within the cities/towns that a map search would return. For instance, a community such as Third Ward, Texas—a neighborhood within Houston, Texas—will geocode simply as “Houston.”

So, in our first iteration, we’ve included a help link under the map for users having trouble finding their community. As a temporary solution, if a user cannot find their community on the map, they can contact us and have their almanac created for them manually. This method isn’t really optimal. What’s needed is a search method that will return canonical results within varied levels of specificity. In our next iteration, we plan to make the map workflow more robust and limit manual intervention.

Finding Your Community: Polishing the User Experience

We had to step back and take a look at our options, and among the miscellaneous fields returned by Google are four gems:

1. Locality (city/town)
2. State
3. AddressLine
4. Accuracy

We’re currently only using the first two, Locality and State but what is potentially useful is AddressLine combined with Accuracy. An AddressLine is what google recognizes as a feature of a specific point. This can be very specific (like “Columbus Circle”), a little more general (like “Central Park”), on up to the city, state, or country that the point is contained in. Accuracy is an approximation of the size of a feature, and helps us clue in to what neighborhoods the point is referring to. It’s not perfect, but it gives us some choices we can present to the user to let them decide.

To use a search for “third ward houston texas” as an example, if we discard any AddressLine results with an Accuracy greater than 5 or less than 3 (to pick limits based on this one search), we can offer up the following choices to the user:

• Greater Third Ward (with an accuracy of 4)
• South Central (with an accuracy of 4)
• Houston (with an accuracy of 4)
• Greater Houston (with an accuracy of 3)

Almanac moderation may still be needed since AddressLine is far less predictable than current city/town results. But if we check them against existing almanac titles, we can hopefully remove any manual intervention for all users, offering neighborhood-level specificity to almanac search and creation.

So, Where’s Your Community?

Dig in. Find your community on the map and start adding to its almanac. Share your heart & soul! We think this redesign turned out great and we’d love to get your feedback. Let us know what you think.

Some CapitolCamp inspired wiki-thoughts:

My first session was facilitated by Karen A., who works in Senate Tech Services. Karen came with a kernel of an idea for a ‘New York State Senatepedia’…a wiki where people could explain Senate jargon, document the histories of different legal actions, and connect items with related information.

A Senatepedia has a ton of merit. It would facilitate peer-to-peer learning between private citizens. It would put in plain view the machinery of the NY Senate. It would be a living document, with articles updated over time by interested citizens (wikis that follow twists and turns can get really active). And it would be a large-scale shared archaeology project that could make visible what are today largely invisible topics, histories, and relationships. Ultimately, it would help the public follow and assess the legislature.

For those who pick up a new app every day, wikis are as basic as water, but when integrated into public processes they can have real transformative power. At the federal level, OpenCongress.org (don’t miss their wiki) offers a lot of great information. Senatepedia would be a similar – though surely not identical – venture at the New York State level. There is a lot to be said for a state legislature that would embrace such a concept and treat it as a serious resource by integrating it with the other information on NYSenate.gov.

The alternative – an edited dictionary about the Senate, produced by Senate staffers – would require a comparatively large investment, and it could become stale fast. Remember the last time you landed on a ‘More Info’ page and found a list of broken links? Yuck.

Karen’s Senatepedia idea encountered a fire-hose of input. We talked a lot about risks. I don’t know about Karen, but after all that feedback I might not have felt empowered to actually begin the project. The experience was instructive. Roadblocks and responses:

1. Moderation was a big concern. If you let the public edit your site, they will go crazy! They might lie! They might link to porn! We would need a full-time moderator!

Whoa, there. There is no incentive to contribute to a community (and a wiki is a community) if the site sponsor doesn’t value that contribution. You don’t encourage contribution by controlling the content in a top-down way, and re-editing every article is a bit silly anyway.

There are probably, say, a couple of thousand people across New York State who really care about the intricacies of the Senate’s legislative machinery. This group is a nascent community of interest. A set of people scattered across the state who may or may not know one another. These folks come across awkwardly at cocktail parties. “Well starred bills have been around since 1974, when they came about as a way to…” Total snooze at the party, but for someone, somewhere, this knowledge is powerful. The better citizens understand their government, the more they can do to help it work.

Imagine if this distributed cabal of citizen experts were set loose upon a Senatepedia, to explain and edit and debate. These are the stewards of quality and community, the people who make peace by setting the basic rules of the road (stay on topic, cite your sources, be respectful).

Wikipedia started with simple rules, and over time the site has evolved along with the community (see, for example, warning notes on controversial articles and rules on handling disputes). Those who contribute a lot gain the authority to moderate. A lively Senatepedia community would function similarly. A few passionate people can prune a large garden, making it ever easier for casual users to contribute. Ian pointed out that the smallness of the initial community is part of the point: the purpose of the wiki is to distribute knowledge more widely.

2. False legitimacy also came up. Some were concerned that visitors to the site would think of the information on the wiki as immutable, each word ‘vetted by the New York State Senate.’

This point is valid. The ‘discuss and consense’ areas of wikis are too often hidden. Most Wikipedia readers never realize that many articles are the result of an ongoing discussion that is happening elsewhere.

As a timely example, the article on the New York State Senate saw some action today due to drama, and updates to the article were not without controversy. But few people visiting the article would ever notice, unless of course they happened to click on the tiny Discussion tab.

Making the Discussion portion of a wiki more visible would reinforce the notion of the website as a living, community-created document, and it could create new incentives to contribute (both to the discussion and to the article itself). Including recent discussion or information about recent contributors in the sidebar might go a long way. Streetswiki literally ‘puts a face’ on contributors, a reminder that ‘people just like you’ wrote the articles.

Good page layout, in particular clarity about which content is wiki content, also helps avoid ‘false legitimacy.’ Clear design can remind people that the wiki is community-created and distinct from vetted Senate resources.

3. Incentives. Would people really contribute? If you frame Senatepedia the right way get #1 and #2 right, you have a pretty good shot. There are plenty of incentives to contribute to a wiki: sharing new information, correcting someone else’s infuriating mistake, seeing your name in lights, gaining virtual street cred. Latour laid out similar incentives years ago when studying publishing scientists (research funds aside), and plenty of sites reward superstar community members.

Senatepedia is a great idea, and straightforward best practices from other successful wikis could really give it legs. I hope the NY State Senate considers setting it up.

Short(er than this post, I promise) thoughts about CapitolCamp.

Aquifers Feed Community Development Beyond the Garden

Healthy civic engagement is often based around an emergent collective influence, a momentum from the coalescence of many individuals’ activity. As developers of civic software this is a concept we think of often and try to embrace, especially within the context of a dense urban environment. Such environments are made up of complex systems of networked activity, multitudes of input and output. Like the internet, these systems are really networks of networks. In fact, one might view a city as a macrocosm of its own biological systems – the nested ecologies and individuals that comprise it.  Viewed from such a framework, a biological system as advanced as the human body provides an excellent example of emergence in the way our senses are brought together into consciousness and perception of the world. Bringing the metaphor full circle, one might ask: What if we could bring consciousness to a city?

Now I don’t mean to suggest collective consciousness, but instead by analogy I’m alluding to a pragmatic unification of information about the activity within a community. This of course has been the aspiration of many for quite some time and it’s approached in various contexts at different scales: Everyblock/Outside.in, The Facebook Platform, The Open Stack for the Web, The Semantic web, the Noosphere, Kurzweilian Singularity, Lolcats, and so on. So how exactly does one go about collecting all the data of activity in a city and turn it into a cohesive and meaningful stream of intelligence? Get all of the data and filter it. Trivial? Not quite, but bear with me: What turns consciousness and human perception into intelligence is the careful filtering of an overwhelming abundance of sensory input and cognitive activity, finding meaning in the data. With the amount of information noise that’s been introduced in the world today, robust filtering must be a fundamental function of the social web and wired communities in general. Otherwise we will be mired in the fog of infoglut, salad sentences of schizophasia, silty streams of consciousness, mixed metaphors, overwhelming alliteration, annoying hyperbole, and the list goes on. This, I believe, is where a friendly little app called Melkjug has potential to change the world.

Melkjug is a news feed reader like Google Reader, but focused on filters. Plus, it’s open source! Melkjug lets you tune your reading experience with a wide array of filters, avoiding Google Reader’s inbox model so you don’t have to stress about those 2493 unread articles. It also lets you collaborate with the Melkjug community by using the filters and filtered content produced by others. In the near future Melkjug will also employ true collaborative filtering where the preferences of others in the community can seamlessly act as a filter for you.

Since Melkjug is built around the Atom and RSS standards it can be used with anything publishing a feed, not just the feeds that we typically think of as news feeds. Another type of feed is an activity stream, a feed of a person’s online activity, as you would see aggregated by applications like the Facebook News Feed or FriendFeed. As you can see in the sidebar, this model has already been employed on this Wordpress-powered blog by simply using a Wordpress plugin that imports a Melkjug feed which is filtering and aggregating a variety of relevant activity sources – Twitter, Delicious, MediaWiki, SVN, Trac, etc. Activity streams (examples) are currently undergoing a standardization process where the grammar of each action is clearly defined. In addition to increased interoperability across the web, a standard with articulate grammar will make it even easier to filter activity streams with high fidelity.

What’s exciting about using Melkjug with activity streams is that it functions as both a muxer and a demuxer, it both combines and separates. This property and the way that Melkjug allows one to tweak their signals and EQ to get some cool feedback effects made me realize that the technology could be even more useful if used for both pre-processing and post-processing of feeds. For example, instead of advertising just the feed Flickr provides of your photos,  you could provide some custom preset feeds, then when you import those into Facebook you could further hone in, filtering further as needed. I see several advantages to distributed filters: they could simplify the user interfaces for filtering by keeping the appropriate UI in the most relevant context, they might help load balancing or caching on servers, and they might even help develop standard UI conventions for content filtering throughout the web. I don’t mean to suggest feeds should always be pre-filtered, after privacy has been taken into account raw data feeds should be available, but often it’s nice to have some well tuned presets to choose from.  A distributed input/output filtering model might also help us to consider the nebulous relevance issues and the sensitive privacy issues within the same framework. Bring on the OAuth.

At this point in time, any discussion about activity streams is incomplete without referring to Facebook, as it is perhaps most responsible for creating and disseminating the concept of activity streams as we know them today. Activity streams are also an important part of Facebook’s success. The Facebook News Feed has significantly evolved in a short period of time and it’s been through several inspiration-innovation feedback loops with services like Friendfeed, Twitter, Tumblr, etc.. But the most recent Facebook “redesign” fundamentally re-engineered many of the activity stream concepts Facebook had pioneered. These concepts include publishing more ambient/implicit activity, using a relevance algorithm filter (with an equalizer fader UI for filtering similar to Melkjug) and some might argue – a well defined layout and visual hierarchy that made seeing a lot of information reasonably easy to digest. Since the default News Feed now contains every item from every contact, it can be somewhat difficult to get a grasp of what has happened in the past day – a single screen of the feed might only shows a few hours of activity whereas before the relevance algorithm typically filtered it down to about a day. The filtering options that we are now left with are somewhat subtle, fragmented throughout the interface, and overall provide few options. There are also a number of options that Facebook entirely removed with their redesign. These include the feed source equalizer UI which gave more flexible control than the current linear ordering of feed sources. I’m really not sure why this was so hidden before and why it’s now been entirely removed, it came across as a compelling feature. Also gone is the ability to edit the prominence of certain items in your feed – there used to be a summary versus detail option. Until recently Facebook had even taken out some of the implicit activity such as people tagged in photos. The filtering options that remain can be summarized as 1) creating groups of (whitelisted) contacts 2) filtering by a particular app/feed source 3) ordering these groups/sources and 4) creating a blacklist of contacts. For anyone who is subscribed to multiple mailing lists and manages a high volume of email traffic, it’s easy to understand the potential frustration of being limited by such a small set of filtering options. After all, filtering, whether by some well tuned algorithm like PageRank, personalized settings, recommendations, or editorial control, is the only way we’ve ever been able to make meaningful sense of the nearly infinite information available on the web.

After critiquing the current Facebook News Feed, I should acknowledge an important non-tech point regarding its development. Initially, the feed was perceived as being forced upon a community that really wasn’t asking for it, including many who vehemently opposed it’s introduction claiming that it was akin to a tool for stalkers. Yet quickly the complaints fizzled out and the News Feed ended up creating a dramatically broader culture of engagement and openness on the site. Society as seen through Facebook has stepped up to a new level of transparency and open dialogue. Yet even while many technologists and early adopters attempt to share absolutely everything online, it must be acknowledged that Facebook has largely been allowed to succeed because of its rigorous privacy settings. Some people have no qualms with radical transparency, but many more live within multiple communites that don’t always mix well (eg family/friends/colleagues). So again, the importance of balancing the privacy/relevant-openness spectrum speaks to the need for a unifying framework to filter both the input and output of our social data.

What’s also compelling about all the filtering metaphors (equalizers, faders, feedback loops, signal-to-noise ratios, etc) in regard to society is that they allude to the sounds of many mixed down into one and the rip-and-remix ethos of free culture. It could be argued that activity streams demonstrate an increasing openness of ideas in our culture throughout multiple mediums.

Similarly, with the advent of organizations like the Sunlight Foundation and people like President Obama, Aneesh Chopra, and Vivek Kundra in the White House the open flow of civic information will be quick to fill the airwaves, if not flood the activity streams.  New fire hoses such as these again present a challenge:  I’m really only interested in participating in the most  relevant interactions with our civic system – citing problems and suggesting solutions for my place in this democratic society.  Without fine tuning the filters on my neighborhood activity streams with a tool like Melkjug I don’t think even hyperlocal sources like Everyblock or Outside.in will be very relevant to me. In fact, without smart tools like Melkjug I’ll likely filter everything out.

Note: Neither Melkjug nor the activity streams standard have reached their 1.0 release, both are still in development. Melkjug does not currently provide any features that specifically target activity streams as that was not its original intent, but that didn’t stop us from creating a jug of our feeds from other sites for the activity stream you see on this site.