WordPress.tv – Information Architecture

Following last week’s #wptv chat on slack, I took on the task of mapping the current Information Architecture of the WordPress.tv wesbite for it’s upcoming redesign. I’ll start by showing what is currently there (including screenshots for visual records), leave some personal notes as I go through each screenshot, and at the end I’ll leave some actionable items for whomever wants to get involved with this.

Overview

wptv-ia-overview

I tried to keep my notes high-level, focusing on repeating patterns on the site, instead of literal structures. This tree represents what are basically three levels of content: main navigation items (some are categories, some pages), archives, and singles (video pages, posts on the blog, or pages under the top level).

“WordCamps”, “Related Events”, and “How To”, are basically the main categories of content on the site. These three hold all the videos on the site. The videos have a series of taxonomies that can be viewed through their archives: “Event”, “Speaker”, “Language”, “TagTag Tag is one of the pre-defined taxonomies in WordPress. Users can add tags to their WordPress posts along with categories. However, while a category may cover a broad range of topics, tags are smaller in scope and focused to specific topics. Think of them as keywords used for topics discussed in a particular post.”, and “Date”.

The “Get Involved” page is a simple page with a series of links for submission guidelines and instructions on how to add captions or subtitles.

The Blog section is a separate site made to look the same. It’s a simple WordPress blog, with standard taxonomies. From the Blog main navigation there’s a “Contact” item (not present in the main site navigation, only in its footer).

I think overall this structure is pretty good for the site. I’d probably remove the “Contacts” from the top navigation entirely (currently only shows when you are in the blog), and maybe reconsider having “Blog” up there, mostly because its posts are referenced in many places (tho that could change), and it isn’t updated often (last post is over a year old).

EDIT: There’s at least a couple of hidden main categories of content: “Announcements” and “Interviews”. Maybe there’s more, but these are the two I stumbled upon while writing this post. Not sure what to make of these, I only found them out on the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. of an Event Archive page… Any thoughts? I don’t see a need for “Announcements” to be a top-level item, but maybe “Interviews” should.

Flow & Screenshots

Homepage

wptv-home

The homepage is pretty much what one would expect. It includes:

  • Featured content
  • Latest Videos
  • Popular Videos
  • Recent posts from the blog (sidebar)
  • Resources links (sidebar)

I think the homepage could be much more than it currently is. This will likely be achieved through a more engaging visual design – one that preferably makes the home more unique and less like the other archives. I find the Watch section of vimeo (if you’re logged in, or the logged out homepage, after the signup info) quite interesting: They focus their featured section on one solid video, reduce the text information to a minimum there, and then proceed to go through sections of content that don’t feel overwhelming or repetitive. Would be interesting to see if we could leverage the video tags on the homepage somehow, and take the “popular” concept further (maybe with popular speakers too).


WordCamps

wptv-wordcamps

In this page:

  • Featured content
  • Latest WordCamps
  • Latest Videos (sidebar)
  • Browse by Year (sidebar)
  • Browse by Language (sidebar)
  • Subtitles (sidebar)

Like the homepage, I’m sure we can come up with a better solution for the featured content, preferably coming up with a pattern we can reuse here and whenever we need to display featured content.

The main section of this page shows a list of the most recent WordCamps in reverse chronological order, with 4 video thumbnails per row. This seems like a good place to maybe use each WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. branding, and display the logo instead. Focus more on the WordCamps and less on the videos… just an idea, maybe there’s more solutions here but the current one feels a bit boring and repetitive.

The sidebar seems confusing to me: The Latest Videos are a mix of what we already see on the featured and most recent WordCamps; The Browse by widgets (Year, Language, Subtitles) seem like filters to the content. Should they be there necessarily? Would love to see stats regarding the usage of these. Also to note that the “Browse by Year” takes us to a “Year” categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. archive and feels like a somewhat disjointed experience here, since those archives are not only for WordCamp videos.

Also, this page is named “WordCamps” on the navigation, but referred to as “WordCamp TV” when you go into the page, which I’m not crazy about – would prefer to keep the naming consistent between the navigation and the page title.


Related Events

wptv-relatedevents

Basic archive page with featured area here.

This page would probably benefit from a similar structure to the “WordCamps” page, specially if we could leverage what the other events are (WordPress Meetups, BuddyCamps, etc).


How To

wptv-howto


Event Archive

wptv-archive-event

This archive is used by all the events, and right now they include:

  • Featured content
  • Videos (I assume ordered chronologically – by their post order)
  • Tags (Sidebar)
  • Categories (Sidebar)
  • Loooooooooooong list of WordCamps (Sidebar)

So, I see this template possibly being split in two: A generic one used for all events, and another tailored specifically for WordCamps. On the WordCamps template, we could definitely leverage the data we have from WordCamp.org or request more – WordCamp logo, HeaderHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. image, Schedule (and list videos according to schedule), Speaker bios, etc.

Aside from that, I think my previous comments apply: Better featured section, more interest to the videos list, etc.

The sidebar also seems pretty bland, I’m sure we can play around with tags to make them more appealing. The categories there seem confusing (they seem top-level, since they includes “How To”), and the list of other WordCamps seems unnecessary (and too long) – maybe we could have a “previous” and “next” navigation for WordCamps, similar thing for other events.


Speaker Archive

wptv-archive-speaker

This archive template includes:

  • Video list
  • Standard Sidebar

Again, we can probably do much more here: feature the Speaker avatarAvatar An avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name./gravatarGravatar Is an acronym for Globally Recognized Avatar. It is the avatar system managed by WordPress.com, and used within the WordPress software. https://gravatar.com/., a short bio, and a link for the speaker WordCamp.org profile. (I’m sure we can do this at the very least for WordCamps, and have cleaver fall-backs in place for the ones with less info)


Language Archive

wptv-archive-language

A basic archive template: videos and standard sidebar.

I think we can make this one much more interesting too. Feature Speakers in this language, have a latest featured video, etc.


Tag Archive

wptv-archive-tag

A basic archive template: videos and standard sidebar.

I don’t think there’s much to improve in this case. I’d still get rid of the standard sidebar and focus only on videos. Maybe allow for navigation filters (like language or year).


Date Archive

wptv-archive-date

A basic archive template: videos and standard sidebar.

This template shows for all videos from said year or month. There’s the other confusing “Year” category with sub-categories… I need someone else’s eyes here – why do we have that? Can’t we just use WordPress’s built in date archives?

Like on the previous archive template, I don’t think there’s much to improve in this case. I’d still get rid of the standard sidebar and focus only on videos. Maybe allow for navigation filters (like language, speaker, or tag/topic).


Video

wptv-video

This is the holy grail of this site – the one template to rule them all – what people will see the most 🙂

The main items here are:

  • Video
  • Sharing/Rating
  • Discussion
  • Video metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress.

I think aside from this needed some obvious visual hierarchy adjustments and embellishments, there ain’t a lot to do to its architecture. Maybe separate the description of the video from some of its meta. Could we actually add a screenshot of the slides in there, to go with the link? The Download info should also be separate from the meta, or at least not between Language and Subtitles.


Get Involved

wptv-getinvolved

This page seems like a waste of clicks. We definitely should optimize this to include instructions and the submission form, unless there’s other primary way to get involved. The Subtitle/Caption information could probably also be condensed and placed on this page in a secondary position.

Submission Guidelines

wptv-submissionguidelines

These guidelines are currently a page on the “Blog”, this should definitely just be part of the “Get Involved” section.

Submit form

wptv-submit

Again, this could probably just be in the “Get Involved” page somehow.

Add Subtitles/Captions guidelines

wptv-addsubtitles

There’s a lot of information on this page, maybe we could create a short video on how to do this? Or maybe make the instructions more condensed?


Blog

wptv-blog

The blog is pretty outdated, do we have a strategy for it? If not, does it make sense to keep it?

Blog Tag Archive

wptv-blog-archive-tag

Blog Category Archive

wptv-blog-archive-category

Blog Post

wptv-blog-post


Contact

wptv-blog-contact

This “Contact” page appears on the top navigation only when you’re in the “Blog” section. I’d remove it form there entirely and just have it in the footer.


Conclusions & Actionable Items

That was quite a lot of information. If you got this far, hooray!

Overall I think we have a pretty solid architecture in place for the site. Most of the improvements in this redesign will come from the visual treatments and better content hierarchy as I stated above. The archives are probably the areas that will need the most work and thought behind them, specially if we wanna pull off some of the suggestions above.

Reiterating our very simplified structure:

  1. Main Category Pages (WordCamps, Related Events, How To, Interviews (maybe))
  2. Archives (Events, Speakers, Languages, Tags (Topics), Date)
  3. Singles (Video page, standard Pages, Blog Posts)

Specific Templates that will need thought put into them:

  • WordCamps page
  • Related Events page
  • How To page
  • Interviews page (maybe)
  • WordCamp archive page (specific WordCamp, from the Events Archive)
  • Speaker archive page
  • Language archive page
  • Generic archive page (for Tags and Dates)
  • Video page (single)
  • Generic single template (for Blog post and pages)

Some specific design patterns I identified and that will need work:

  • Header / Footer
  • Featured content area
  • Video grid
  • Comments
  • Forms

 

There’s a lot more stuff I’m sure, but this is just a preliminary analysis of the site.

I’d love to hear your thoughts on this. I know there’s a lot here, so if you comment on specific areas, please refer to them as I have on the post. Let’s try to keep this discussion centered around content and ignore visual design for now, please (we’ll discuss that as we move further).

Thanks for reading! I’ll be available to discuss all this during the #wptv chat tomorrow on slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. at 17:00 UTC.

Cheers! 🙂

#design, #information-architecture, #vizrec, #wptv-v3