UI redesign

Ourmedia has both short-term and long-term design/UI needs. This page will help spell out those goals.

Short-term redesign

Goal: We don't want Ourmedia to be just another walled-garden destination website. We want to enable all facets of the personal media revolution. By fostering community across multiple sites, we can engender goodwill for Ourmedia and draw in participants from the open source community. Ourmedia becomes, then, not just a repository and website, but a glue or bonding agent that interconnects dozens of open media repositories. This will take immediate tangible form through both Channels and Playlists on the site.

Redesign: We want to start from zero and get away from everything that's currently on our front page. Our design team will work up mockups/wire frames that replace the Ourmedia logo with a new, simpler look (without the DNA chain) and new motto. Leading candidates for our new tagline (instead of The global home for grassroots media):

The open gallery for grassroots creativity<br>
The community for social media<br>
The community for grassroots media makers<br>
You are the media<br>

• We'll remove the two navigational strips from the left and right and use one instead (we need to discuss which modules to retain and whether users can control whether to display them when they're logged in).

• We're losing the Guest Editor selections approach.

• Images and text are not our strengths, so let's lose those.

• We'll lose the Ourmedia group blog at the bottom center of the page, moving it elsewhere.

• The main elements of the front page will consist of:

• Rolling works<br>
• Playlists<br>
• Channels<br>
• Navigation & introduction (we'll no longer feature the Internet Archive so prominently, but still need to let people know at a glance what ourmedia is all about; replace the current green box with a new intro or put it atop the nav gutter)

Also, a screencast, or visual how-to guide, a bit like the cc site http://creativecommons.org/ does it only with more graphics/images to convey how Ourmedia works.

We also need to reorganize links to faq, help, rules, guidelines, tools etc., simplifying it.

Look and feel

This would take some deep programming power in Flash, but optimally we'd like to see an interface similar to what you see here in Dashboard, a feature of open-source Laszlo Systems. (Click: Enter as guest.) Move stuff around ... pretty cool, no?

Ideally, Ourmedia should be a place where you play and experience and interact with media, not just watch it.

Mockups to date

Here are the mockups the design team has been working on.

Seamus draft of a (one of several).

- - - - - - - - - -

Here are mockups from Todd:

http://www.newmediamusings.com/photos/uncategorized/main_page_thumb.jpg<br>
(See full-size version at newmediamusings.com/photos/uncategorized/main_page.jpg)<br>
home page view - member not logged in

http://www.newmediamusings.com/photos/uncategorized/home_page_annotations_thumb.jpg<br>
(See full-size version at newmediamusings.com/photos/uncategorized/home_page_annotations.jpg)<br>
home page annotations

"<br>
(See full-size version at newmediamusings.com/photos/uncategorized/home_page_members_view.jpg)<br>
home page view - member logged in

- - - - - - - - - -

Here are mockups from Gokce:

http://www.newmediamusings.com/photos/uncategorized/thumbnail1.jpg<br>
(See full-size version at newmediamusings.com/photos/uncategorized/gokce1.jpg)

http://www.newmediamusings.com/photos/uncategorized/thumbnail2.jpg<br>
(See full-size version at newmediamusings.com/photos/uncategorized/gokce2.jpg)

http://www.newmediamusings.com/photos/uncategorized/thumbnail3.jpg<br>
(See full-size version at newmediamusings.com/photos/uncategorized/gokce3.jpg)

Main area: rolling videos & podcasts

We'd like to adopt a Digg-like interface for the top of the front page (without doing a Netscape like ripoff). We can do this better than Videobomb.

This would be much better than our current approach, where the front page changes only once a week. Even once a day isn't enough. So how about this?:

New videos & podcasts. Whenever a member uploads a new video or podcast that he/she thinks is worthy of displaying on the front page, they click a button that says Promote to front page, or something. Then, those go into a queue for us to approve. (The moderators or guest editors can access this queue.) The look would be less like Digg or VideoBomb than Blip TV. I'm thinking of a WordPress-style blog-like rolling display. This would refresh the page constantly throughout the day. We need to see whether Drupal 4.7.2 enables any of this.

Further out, we could let the community rate and rank the top-ranked videos & podcasts and showcase those on the front page. This requires more programming power than we have at the moment. Also longer term we'd like to shoot for a personalized front page that changes (once a member logs in) and highlights videos ranked highly by your friends and peers, based on the groups you belong to. Optimally, it would be great to give each member the ability to display or hide each of the boxes (Recent Comments, Recent uploads, etc.).

Left nav: Recommendations/Playlists

We may try to partner with Loomia to provide recommendation technology. Need to have a conversation with them about their capabilities and what we can offer each other.

Todd suggests that when members log in, they get personalized recommendations in the left nav.

Perhaps we could showcase recommendations as playlists, with 4-5 playlists by our members, by our moderator team, or through Loomia's algorithm, that recommends cool videos, podcasts, music, mashups and images that appear on Ourmedia and elsewhere. It should look cool graphically, so it's not just a text list, but:

Title of playlist
Author of playlist
thumbnails of an auto-generated video image (or graphic icon if it's music)
the name and author of the work, and possibly tags.

There's a new playlists module in Drupal, right? I haven't see it. It needs to be very easy to do. So, let's look at:

• Webjay, recently bought by Yahoo
• H2O, a playlist service from the Berkman Center
• others?

See also Sites to study (includes suggestion for a 24/7 stream of media...).

And look at Stylefeeder for a nice way to display images and text in a clean, modular format.

Channels: Tags and Partners

We need to give people easier ways to find media on ourmedia as well as on our partner sites. Since we don't have the bandwidth to redo our taxonomy for channels like Politics or Entertainment, we'll rely on tags. We could do Flickr-like tag clouds, but there's an interesting new tag company that organizes data much better:
Rawsugar. Let's use this as a key navigational element.

Partner sites

As part of our site redesign, we want to display content on ourmedia's front page from Witness.org, Prx.org. NowPublic.com, the Conversation Network, BlogHer, NPR, KQED's Digital Storytelling Initiative, possibly Robert Kaye's Music Brainz and other partners or content sources. For example, if Witness.org features a moving video of a Darfur refugee, we want to provide a thumbnail image, title, short descriptor, link to the originating site and link to the media file on Witness's server.

We need a title for this. Around the Net. Grassroots media feeds. Nah, something snappier ...

This could be presented in the same way as the scrolling WordPress items in the main Rolling videos and podcasts area. We can probably get participating sites to agree to send us their best stuff, since we're sending them more traffic. Need to figure out how to do this technologically. Can we pull in content partner through RSS? Or do content partners need to submit items to us? (Get Chris Ritke into this discussion re how he pulls in feeds with 49media.com.)

Further down the road, we'd like to do organized channels like these: Politics, News & Events, International, Sports, Friends & Family, Tech, Entertainment, Commentary, Environment, Activism

Blog of the day

Idea: Perhaps a little area where an Ourmedia blog of the day could be spotlighted.

Navigation

Valentin has been after us to simplify our navigation links, and Todd has organized them into a simpler display. So we're off to a great start here.

The elements our new site navigation should include:

• Member log-in
• My controls (once member logs in)
• prominent search button
• Sponsors (above fold)
• Learning Center area
• tags (could go elsewhere on page)
• Donations Center
• other modules (we need to decide which ones to display)

Hosts

Down the road: I like the idea of a daily 30-second video short by a female and male host (rotated), pointing out features of the site or new additions. Sexy, hip and informative.

Sites to study

Here are sites to study (but not necessarily emulate) as we consider our UI choices:

• Digg - a monster success and epitome of community editing

• Flickr - Flickr rules!

• YouTube - they're successful for a reason

• DailyMotion - for video hosting, plus nice tags

• Blip tv - good video blogging platform

• Grouper - for video hosting

• Revver - for video hosting

• Vsocial - for video hosting

add other urls above

Design resources

Gokce Kasikci of Sunnyvale, Calif., is sketching out a series of mockups.

Seamus Byrne of Hayward, Calif., is working on a new logotype for the ourmedia masthead and will work with others here on the redesign.

Todd Siegel of San Francisco is a UI expert who will work up some mockups for us.

Pablo Perez, a designer and moderator in Mexico City, has done nice work with us (see the Learning Center page).

Stephen Downes in Canada has helped us with the look of the site through our CSS stylesheets (for eg, fixed vs. adjustable width for pages).

Damien Newman, our former art director, has left for a full-time job, though is available for occasional brief consults. Damien did this early mockup, which I still kind of like.

We also have an Ourmedia design mailing list, though it's been quiet for months:
http://groups.yahoo.com/group/ourmedia-design/

Members were:
Damien
me
Brian Behnke (brian_behnke@yahoo.com)
David Nunez (david@davidnunez.com)
Dylan Hasman (dylan@machinamortis.com)
Travis Smith (nep@hopstudios.com)
Susannah Gardner (susie@hopstudios.com)
Doktorp (doktorp@mac.com)
Brenda Warnes (brenda.warnes5258@wowweqh.com)