Tag: website design

Notes from livecoding the ONA11 website

This is a quick post I’ve been meaning to do about the work we did this year on the ONA11 conference website.

Background: last year, I was late on getting a conference pass and ended up volunteering for an entire day in the student newsroom. ONA’s student newsroom produces stories, video, and other coverage related to the conference. I had so much fun that I volunteered to do it again this year. I planned to work on it over the summer, but 90% of the work ended up being done in the last week.

The goals for the website varied depending on the context:

  • Before the conference, the focus was convincing journalists to purchase tickets and attend.
  • During the conference, there are two audiences: those who are physically at the sessions and those who want to participate virtually. The former probably want a backchannel for conversation and capturing the highlights, whereas the latter probably want to participate in realtime as much as they can.
  • After the conference, everyone wants to access a historical archive of the content presented in sessions, either to catch those they missed or find the link they heard referenced.

With this in mind, we worked on making the website dynamically reflect these needs. It was helpful, although somewhat distracting from the experience, that I was working on the website during the entire conference.

What worked this time:

  • Session pages as a custom post type. This gave us a structured database of all sessions and allowed us to easily build a session listing, etc.
  • Using Posts 2 Posts to associate posts and presenters with session pages. Our realtime curation crew could easily publish content from the WordPress admin, associate it with a session, and have it automatically pulled into the session page. Furthermore, every presenter had a dedicated profile page and their information could automatically be pulled into other contexts on the website.
  • Auto-showing the livestream player on an individual session page based on timestamp. Every session was associated with a track and I had a bit of logic to pull in the correct livestream based on current time, session start, and session end.
  • Showing the session updates in reverse chronological order during the event (because the user is most likely refreshing the page and wants the most recent updates at the top) and then flipping to chronological order 15 minutes after the event.
  • Leveraging the Zoninator on the homepage for featured stories and events. Editorial loved that they could have full control over which stories were highlighted. WordPress normally lists headlines in reverse chronological order, and developers hack this with “featured” categories, etc.
  • Post formats presented content exactly as it was intended to be presented. I was particularly proud of my gallery implementation, even if there weren’t the visuals to go with it.

Next time I’d like to:

  • Get started earlier so these features are actually fleshed out before the day of.
  • Build an interface for posting updates from the session page so it’s brain dead simple to update (no associating with session post, choosing post type, writing a title if you don’t need to, etc.)
  • Allow for “featured” session updates a la NY Times Editors’ Picks for commenting.
  • Guest session update submissions with a moderation queue.
  • Live update the session page so it’s essentially liveblogging with rich media.
  • Show the bylines/avatars for people covering the event, so you know how well it’s going to be covered (e.g. one person versus five people participating)
  • On the all sessions page, show the number of updates an event has, whether it’s currently live/being livestreamed, etc.
  • Order content on the single session page based when it was published (e.g. you can assume everything 30 minutes after the session is coverage of it, whereas during the event is realtime updates on it).

Lastly, I have one more idea I’d like to pitch: a way of indicating who you want to meet at the conference. Every attendee that registers get access to a page on the website listing every other attendee. Then, they can go through and indicate whom they want to meet at the conference. It’s a double win; you get to notify who you want to meet that you want to meet them, and you get to see in advance who wants to meet you.

For archival purposes, I’ve captured a gallery of screengrabs from the website too.

New navigation for the NY City News Service

Inspired by the Spokesman Review, I rolled out taxonomy-based navigation for the NY City News Service last night. Readers can navigate by topics, places, and media. Special projects are also more accessible. One neat thing about WordPress’ custom taxonomies is that I can design different landing pages for each taxonomy, and then even go as far as create unique pages for each term. The navigation is just the beginning.

Entrepreneurial Journalism landing page redesign

Redesigned the landing page for the Entrepreneurial Journalism program at CUNY on Monday afternoon. Previously, it was a straight page with about 2,000 words of text. My goal was to convey much of the same information in a much more concise and approachable manner. We’re also starting to think about different calls to action we need to include on the page with the flows associated with each.

Overall, I’m happy with it’s functional utility. The program courses will eventually link to landing pages for each, and the blue links will help add more balance to the page.

For archival purposes, I’ve also taken a screengrab of the entire page.

Campus directories done right

Not to throw too many tomatoes, but the Daily Emerald made a very “newspaper” mistake today with their website. I’d like start a discussion about “the better way to do it.”

Case in point: The Daily Emerald, I believe as a part of their magazine edition for IntroDUCKtion, created a campus directory. The directory includes dozens upon dozens of email addresses, URLs, and phone numbers for student organizations and sports at the University of Oregon. In the print magazine, which I don’t have access to because I’m in Portland, I’m sure this list of contact information is beautifully presented in an approachable, useful format. Unfortunately, this same list made its way into the website as a long, ugly, flat text file:

Daily Emerald Campus Directory - July 13, 2009

In my humble opinion, there’s a lot of room for improvement.

What if, instead, we approached this directory as the database that it really should be? This web-native directory would have profiles for every student organization much like students can have profiles on Facebook. I’d be able to search for organizations based on the name, the location on campus, people currently involved, the mission of the organization, tags, etc. If I found a organization I was interested in, I’d click through to their profile. The profile would then give me access to all of the contact information I might need in addition to the most recent or popular articles, images, videos, updates from the campus’ microblog, etc. There’d be a small wiki section for the organization or sport where I could read up on its history and know that the information I was getting was true because it had been curated by the beat reporter.

I see at least two advantages to this approach, in addition to making all of the information much more accessible (versus the flat text file). One, you’d only have to build this once. Two, you’d save the reporter or designer a lot of time having to search for the most up to date contact information because they could just pull the information from the database as they’re creating the print product.

Think of role of the student news organization less as a newspaper and more as a platform for impartial, accurate community information to be shared.

Display as navigation

Spokesman.com | Tags | environment

Doing some inspiration harvesting this afternoon, I discovered that The Spokesman Review has really slick topical pages. I’m impressed with the incorporation of a navigation element into the display of the text. The image above is from the tag page for “environment”; the tag itself, however, is within an input box that the reader can manipulate. Deleting the word and then typing a new one generates a live-updating menu of all the available tags with that text. In my opinion, this design approach makes more of the page useful to and malleable by the reader. Being able to filter results by content type is also a progressive feature, although I think it would be more useful if the default were “All content.”

When navigation functionality like this becomes a part of the design, a website can become exponentially more useful to the reader.

More ideas for “unsucking” commenting

A post on Xark! today discusses why newspaper website comments suck and what might be done to “unsuck” them. The synthesis of why they suck is that newspapers don’t allocate enough time or staff resources to participating in the conversation and, when they do, newspapers take the wrong approach to community management. In short, there is generally a lot of room for improvement.

Upgrading newsroom culture is one part of it, I believe, but the right tools have to be in place first so that participants in this new culture shift doesn’t run into barriers of frustration. I think strides can be made on both the frontend and backend of a news organization website. As a part of the user experience, comments shouldn’t require user registration but rather should be able to “sign in” with Facebook Connect or OpenID, or leave a comment with an email address to be verified once. If someone wants to add information to the discussion anonymously, I think that should be a submission form separate from the comment thread. The web is a global commons where news organizations should be facilitating intelligent conversations.

Continue reading More ideas for “unsucking” commenting