#Hacktoberfest: In pictures

These past two weeks have been insanely awesome. Between #ONA11 in Boston and #Hacktoberfest in Berlin (and you know, school), I really haven’t had much time to digest and reflect on the experiences.

I continued hacking on Roundtable at Betahaus (where the hackfest was held) — and had the pleasure of working with two awesome guys, Andy and Stijn, to refine the idea and code. So far it’s still running locally, TBD (to be deployed) within a week, I hope. Code is up on GitHub.

I promise a longer, more well-crafted narrative review at a later date. But I am über jet-lagged. Plus. Pictures are worth a thousand words. Right?

Note: All these fotos stolen from around teh interwebz. Thanks to Neil Dawson, Phillip Smith and Tathagata Dasgupta.

Presenting at #Hacktoberfest to news partners from Al Jazeera English, BBC, Boston Globe, The Guardian and Zeit Online.

Roundtable | Final Project Proposal

PDFs: Full Proposal | Written Pitch | Design Document | Business Brief
Media: Wireframes | Video Pitch | Time-lapse Prototype

Roundtable is a web platform connecting people, news and ideas.

Readers, journalists and experts are all invited to the table to share their opinions, exchange ideas and resolve issues. Together at the Roundtable, news becomes debate, conversation, an experience. 

→ Download the written pitch as a PDF.

Use case and target audience:

Every morning, Nicole wakes up to an inbox full of news alerts.

  • Federal Reserve to keep interest rates unchanged.
  • Stocks suffer sharpest drop since 2008. 
  • Apple surpasses Exxon to become the world’s most valuable company.

She’ll glance over the headlines. Maybe skim a few articles in the five minutes she has before class. She’ll sigh when she reads about the London riots, nod in approval as she glosses over an opinion piece advocating a “digital upgrade” for education.

But then, Nicole closes the tab.

After all, she’s a busy college student — juggling classes, work and friends. She reads the news. Loves interactive graphics. Tweets links to WIRED articles. Skims comment threads, but never posts.

And that’s it.

There should be more interaction available to the 21st century news consumer.

Video pitch:

Time-lapse prototype:

The state of comments:

Comments are broken. The system does not foster coherent discussion. Trolls are everywhere. 

We must re-imagine how news is consumed on the Web. There’s no medium that fosters elevated discussion between reporters and their audience — commenting implies the reader’s point of view is only supplementary to the reporter’s story.

But news should be bi-directional.

Despite the rise of digital media and growth of interactive journalism, the average reader’s news consumption experience has remained relatively static. In an informal survey about reader engagement with news, sixty-five percent of respondents said they simply “close the tab” after reading an article. Twenty-nine percent will share the article through social media. Only three percent said they would comment on the article. And zero respondents said they would email the article’s author for further discussion.

Clearly, there’s something wrong with this picture.

Changing culture:

Information and technology are converging. News has traditionally been an information product, but how can it adapt and scale effectively to its technology dimension?

The New York Times’ Room for Debate and the Economist Debates are two examples of successful interfaces that leverage Web 2.0 to encourage an exchange of ideas between content producers and consumers.

It comes down to a shift in the underlying cultures of reader engagement and reporter participation.

The concept:

Roundtable is a platform to spark this shift. It’s a tool designed for newsrooms to crowd-source news analysis through online discussion. Roundtable facilitates reader interaction with journalists and experts on relevant issues. Readers can use reporters’ expertise to get answers to their questions and context for relevant issues. Reporters can engage in positive intellectual discourse and get new story ideas, sources and tips.

The Roundtable project provides a framework for discussion that can be implemented by any news organization on their existing website.

Anatomy of a Roundtable:

The outcome of any Roundtable is a resolution to the issue being discussed. Attending the table will be a host (or team of hosts), journalists, experts and readers.

Anyone can host a Roundtable. The newsroom using the platform may organize one, but readers can also apply to host a table with sponsorship from the participating news organization. This process will depend on the organization, though a substantial amount of preparation and background work on the proposed issue will be required.

Roundtable adapts its namesake’s format of discussion to an online setting. Each Roundtable will have five phases:

  • 1/ Discover: Pre-table materials. Presents the Roundtable’s issue, background materials, context and any relevant links.

  • 2/ Impress: The first phase of the Roundtable. Casual forum-like atmosphere, introductions, general thoughts and opinions. Participants get an unlimited number of posts. Interface: posts are displayed in a single linear thread.

  • 3/ Discuss: Response-driven conversation to the issue at hand. One post per participant (which ideally will be their preliminary resolution to the table’s issue) with an unlimited number of replies. Interface: posts are displayed with nested replies.

  • 5/ Vote: Everyone attending the Roundtable gets to vote — there are no restrictions. Participants pick the best resolution which will serve as the table’s consensus on the issue. And because Roundtables are always open, participants can take back their vote and switch to another resolution at any time. This preserves the integrity of the voting system. If a given issue has changed, and public opinion has changed, the resolution should also change.

Site-wide integration:

Roundtable will effectively serve as another “category” or “section” page on news websites. Each table’s “discover” phase will link to relevant articles on the publication’s site, promoting the news organization’s content. 

Similarly, after a table has concluded, articles pertaining to the Roundtable’s issue will link to the end resolution in the page’s footer.

Technology:

Roundtable will live and breathe in the Web, using HTML5, CSS3 and jQuery to construct a lightweight, customizable interface — making it easy to integrate into news organizations’ existing websites.

Challenges:

What’s in it for journalists?

Reporters have limited time and resources. Why should they join the table? The opportunity to feature their articles as part of the Roundtable interface could be a motivator. Journalists who are passionate about engaging with readers can be rewarded with a link to their article in the “discover” phase of a table addressing a similar issue.

Who will participate?

Everyone is busy. In today’s digital age of news consumption, appointment television is dead. Everything is on demand. Roundtable compensates for these trends in its implementation — a table is real-time, but with asynchronous qualities. The discussion window is framed wider than an hour, allowing people to come and go, participating at their convenience.

Roundtable users will also have a profile, displaying a brief bio, topics of interest and relevant statistics about their participation in tables:

Newsroom and audience culture:

The traditional “article plus comment thread” model is almost an industry standard — why buck the trend? Shifting the newsroom’s focus from producing content to connecting people requires a cultural shift, but the only way to start the dialogue is to build tools that promote this momentum. On the reader side, not everyone wants to participate. There will always be those who simply close the tab. Roundtable’s mission is to steadily lessen this number, one reader at a time.

Cost of maintenance:

The sunk cost of building the project’s interface and technology is not the biggest point of concern — it’s curating the community that comes afterwards. Roundtable is a platform, inherently diverse and applicable to a wide range of topics. Maintenance costs, such as hiring discussion moderators or manually cleaning up content, have been considered in Roundtable’s user interface design. The structured discussion format and posting limits will work to create a self-selecting participant pool, minimizing the potential for spammers and trollers by maximizing the amount of effort required to post.

Design Document: View wireframes AND check out the “resolve” prototype.

Roundtable counteracts the effects of the “filter bubble,” pushing readers away from consuming media that simply affirms one’s pre-existing notions. It allows interested parties from both sides of the news production/consumption continuum to come together in a roundtable discussion, sharing ideas and exchanging points of view.

The Roundtable project is open-source, open-process. It will be built in the most transparent way possible, incorporating all stakeholders in the newsroom ecosystem — managers, reporters, developers, designers — in a process of agile development. There will be multiple project iterations to learn what works and what doesn’t in the context of a newsroom.

Business Brief:

Roundtable allows newsrooms to build on their existing resources — reporters, readership and content — to generate resolution-focused discussions on a variety of issues and build a collaborative community around their news product.

At its very core, journalism informs the citizenry. Newsrooms serve this goal. The process of “informing” has grown increasingly two-directional, with the rise of social media and the Web. Readers can and should be engaged in the news whole process — not just see the end product.

Industry leaders have built platforms similar in idea to Roundtable — New York Times’ Room for Debate and Economist Debates —  exemplifying their forward thinking about changes in news consumption habits. Roundtable is an opportunity to set newsrooms apart, to exercise the power of crowd-sourcing in news analysis to build a community.

Once you have engaged and interested readers, what do you do with them? Readers should be heard. Newsrooms can use Roundtable to build a platform for them to come together and geek out over specific issues. To make reporters more accessible. To build community. To create conversation.

Download the full proposal as a PDF.

Wireframes for my Roundtable project.

[Flash 10 is required to watch video]

Readers, journalists and experts are all invited to the table to share their opinions, exchange ideas and resolve issues. Together at the Roundtable, news becomes debate, conversation, an experience. / Project pitch for Knight-Mozilla’s Learning Lab.

#roundtablelive: After Value

Thank you, #MozNewsLab and #ONA11, for testing out Roundtable.

It was a great conversation on G+ for journos. And really interesting to see how my theory of “discussion phases” played out. 

In a preliminary attempt of cultivating Roundtable’s after value, I’ve used Storify to craft a summary of the hour-long Twitter chat.

Definitely need to play around with making the table content more accessible after the fact.

Roundtable: It’s about response | Project Pitch + Wireframes

Roundtable: Project Pitch (v1)

Today, I pitched Roundtable to some fellow Learning Lab participants.

It was only slightly nerve-wrecking — because I think I’m a little too attached to this project (or my ideas in general) — but I got some great feedback from bright minds. It was an awesome opportunity.

Read More

Breaking down silos | MozNewsLab

Y’all should JOIN THE TABLE.

(This will make sense by the end of this post. Bear with me.)

The newsroom is an ecosystem.

It’s diverse and complex. Around the clock.

And there can be pressure, like breaking news pressure.

This week, MozNewsLab took a peek inside two high-caliber modern newsrooms with lectures from Shazna Nessa (AP Interactive) and Mohamed Nanabhay (Al Jazeera English).

We also heard from Oliver Reichenstein (iA), who aptly summarized the problem for design in the newsroom:

News design is not about shaping surfaces but complex processes. It comes down to shaping processes on the user side and backend, all the way down to processes in company.

That really resonated with me.

It goes back to this idea of changing culture. Because we’re not just building software or designing it, as Nessa reminded us. We have to change news culture.

Michelle Minkoff (AP’s new interactive producer!) clearly articulated the problem in her awesome feedback on Roundtable:

Recognize that implementation of such a project would require significant cultural change. It’s the sort of change I work toward every day, and it can’t be solved with an article or a Python (or Ruby) function.

But if we’re building tools to change culture, then do we first build the tools or first change the culture?

Every idea has the opportunity to affect cultural adoption. The current “social” landscape of the Web is the result of a cultural shift, but we can point to tools like Facebook and Twitter that helped get us here. 

I hope Roundtable can be a step towards shifting the cultures of reader engagement and reporter participation.

But no change comes without collaboration.

 In the newsroom, everyone has a role to play. Be it an editor, reporter, developer, designer or any “-er,” we all have different skill sets.

Yes, I’m a jaded student who probably doesn’t know the first thing about the complexity of an actual newsroom. This is merely my interpretation of the newsroom dynamic stereotype.

All the arms of a newsroom can’t afford to step on each other’s toes, and to do that, we have to understand just a little something about what others do. Reporters may complain about the CMS, but after doing backend work this summer — someone put their blood, sweat and tears into building that system.

Technology and journalism must collaborate, there should exist a process of iteration — among managers, developers, reporters — to learn what works and what doesn’t and thus refine product and process.

Just like AP Interactive broke down the silos of graphics and multimedia…

From Nessa’s presentation.

… Roundtable can help break down the “silos” within a newsroom, bringing developers and reporters together to refine the platform iteratively. But more importantly, Roundtable aims to break down the silos of readers (content consumers) and reporters (content producers).

Roundtable: Casus Belli | MozNewsLab

Reader engagement.  

  

It’s an issue.

The above chart is an excerpt from my “How do you engage with news?” survey sent out last week. 

Sixty-five percent of respondents (a whopping 31 people, granted) said they will “close the tab and continue with their work” after reading a news article.

Probably not the most active response. Although it does require two keys or a mouse click.

This past week, I’ve been toying with and refining ROUNDTABLE, my project idea for Knight-Mozilla’s Learning Lab — fleshing out the details, working on a simulated and interactive prototype and, most importantly, justifying the project’s casus belli.

Roundtable is a platform for reader engagement. Through a meticulously-crafted discussion interface, Roundtable allows readers to actively engage in news commentary and analysis — with journalists and experts — by participating in debates on salient news topics (i.e. the future of news / the debt-ceiling crisis / Amy Winehouse’s death).

Okay, it’s not really a justification for any acts of war.

Except for maybe the war against the notion that “journalism is dying.” Journalism is not dying. It is transforming.

The transformation boils down to information technology. Information products are becoming tech products. And news is an information product, so how does it adapt and scale effectively to this tech dimension?

The way I see it, the news industry is an ecosystem. There’s a community. A development process. User experience. The two “sides” of news — production and consumption — are increasingly overlapping. Which makes for an exciting transition, no?

The barrier between journalists and readers is moving away from this “information-gatekeeper” point of view, and Roundtable underscores that transition.

News + Web.

 

These two elements must work together. News used to be static, but the Web is dynamic.

The Web is open. 

So why not journalism?

Journalism is not like brain surgery. It becomes better when more people do it.

Hence the value of crowd-sourcing. Gone are the days when society perceived journalists as the “gatekeepers of information.” Let’s be real — people are now using the technological tools at their disposal to inform each another. They’re not waiting around for journos to tell them what’s up.

This behavior brings us to a pretty critical juncture. The journalism industry needs to find new ways of engaging readers with content. A one-way medium like print or radio isn’t going to fly on the Web. It’s a Brave Open World, ladies and gents. We can’t just build a website with a comment system and call it quits.

We need to re-imagine what news engagement from a reader perspective looks like.

And that’s where Roundtable comes in.

For the newsroom — Roundtable gives you content and helps build a community.
For the readership — Roundtable gives you context and the opportunity of active engagement.

Getting real people engaged in real things.

(Thanks Chris!)

We cannot ignore the work done by journalists. That much is fact. When we talk about news innovation, we need to build on top of traditional journo tenets — news and editorial judgment, timeliness, impact — we have to augment the content, not combat it.

Debates lay contextual foundations for a given topic while engaging a community on a newsworthy event or pertinent issue. You can have your readers interacting with your journalists — and clearly I am speaking as a publication — in a personal, real-time manner.

A pre-first iteration mock-up of Roundtable. Don’t you want to join the table?

Bottom line: opinions and viewpoints are very basic human intellectual functions. And the best way to nurture this intellect is through active engagement — around material, within a community.

LEGOs versus clay | MozNewsLab

<Learning Lab Week 2>

I’m loving the continuity in this course.

Last week it was boxes. This week, it’s LEGOs.

I’ll elaborate.

When asked about designing user preferences (i.e. customization), Jesse James Garrett equated the parameters of a system to the difference between a lump of clay and a set of LEGOs.

LEGOs have a set of embedded rules by which the pieces connect, rules that serve as a scaffolding for the user simplifying the process of creation.

Clay, on the other hand, has no set of inherent rules. As such, creation with clay can be more complex.

The connectors on LEGO pieces epitomize the delight in constraints, exemplifying how they can be properly leveraged to allow a simple, enjoyable creative process for the user.

And this, really, is the human experience outcome I hope to achieve with my final project idea: NewsDebate. Rebutter. Roundtable. Name TK. 

Distilled down to 223 characters:

Roundtable is a platform for engaging readers, journalists and experts around salient news topics. Inspired by Oxford-style debate, the app allows newsrooms to crowd-source news analysis and engage readers by inviting them to table to participate in the debate.

Simple wireframe mockup of Roundtable’s basic structure:

Week Two’s lecture material really helped me conceive and refine this project idea. We heard from Chris Heilmann (Yahoo, Mozilla) on the open Web / John Resig (jQuery) on open-source projects / Jesse James Garrett (Adaptive Path) on UX design.

An apt summary title — “Developing your project’s ecosystem.”

Assuming Wikipedia’s definition of the term, this includes:

… all the organisms in a given area, along with nonliving factor and the physical environment.

Maybe not so literal an interpretation. Heilmann, Resig and Garrett spoke to the creation and maintenance of a product ecosystem, comprising a project’s community, process of development and elements of UX design, all of which work collaboratively within the open Web environment.

  • Community: There should be very low barriers to entry. Minimize attrition and user frustration.

—> Add “background reading” to each debate. Much like the New York Times’ Room for Debate series does with their “Introduction” landing page, this will provide readers with an easy point of entry to a potentially new topic.

  • Process of development: Be transparent. Get your users involved in the decision-making process.

—> Adapting debate style arguments to an online medium in a news context is a complex product. I’m not going to get it right the first time, and both end users and newsroom developers, editors and reporters should be involved in the dialogue of what works — and what doesn’t.

Oh hay! Be a part of the dialogue and fill out this quick survey.

  • UX: Information products are now becoming technology products. (Think WIRED’s magazine to iPad app). Design with an explicit end goal of human engagement.

—> News content needs to adapt to its tech dimension. The core idea of NewsDebate is facilitating reader interaction with the news, getting them involved in the commentary and analysis facets of journalism.

It’s a Brave Open World | MozNewsLab

Wow, MozNewsLab is flying by. Already halfway done? My goodness.

This week, we heard from International Developer Evangelist Chris Heilmann, jQuery creator John Resig and UX designer Jesse James Garrett. The focus was on the open Web platform, open-source projects and user experience design in the context of both information and technology products.

Some takeaways from this week’s lectures: 

  • The open Web should be OS-independent. Even browser-independent. The Web’s UI should actually be just like Iron Man’s.

  • We’ve witnessed a shift in technology — towards HTML5 and native browser functionality — but this needs to be mirrored by a shift in people’s habits. Down with all plugins!

  • jQuery makes the complex simple. It’s a simple API for manipulating webpages cross-browser. Find an element (by CSS selector), then do something with it. Boom. Action.
  • Any open-source project boils down to creating a community of users: lower barriers to entry, get them hooked and give them room to grow.
  • UX: design with human experience as an explicit outcome; design with human engagement as an explicit goal. Simple enough, right? Oh, and don’t forget the Elements.

  • Design tells a story, but you have to switch between the lens of information products and technology products.
  • Designed correctly, products create a conceptual space for the user, facilitating engagement.
  • There exists a social relationship between a user and a complex product that exhibits behavior. Product personalities engage with user emotions and psychology (i.e. Playing with my iPad makes me feel all hip and cool and Apple). Srsly. Look how happy these guys are: