Day 3 of Chamber Musician Today - Classical music community

I hope you had time to rest during the weekend. Our next task is to dive into the world of those fascinating creatures - the wireframes. On day 1, I said that we are building "Chamber Musician Today" and that we have most of the functionality clear. Guess what, both statements were wrong. The reason for that is that me and Jerry decided to give it a try and go one step further. We wanted to have custom presentation in the entries of the "CD reviews" and "calendar" community, that are more focused. It took me a day or so to get my head around the idea of how a music community is functioning and what are the needs we have to cover, but Jerry is guite experienced and helped a lot (note: having an insider always helps). The project also needs to evolve and the new functionality should be introduced slowly, so the members can get proficient in it.

Describing the functionality design process can be a little too much, but believe me, it is the key to a successful solutions. Most of the web communities out there, are with "out of the box" functionality, which is supposed to provide some valuable know-how from the vendor, that will magically solve your visitor needs. But how it can be true, when only in a very specific occasions the software was designed and developed with the specifics of your target community in mind. Giving a day or two, if a thought is definitely a "money saving" process.

What is a wireframe?

So first things first. According to Wikipedia, wireframe is:

"Wireframes allow for the development of variations of a layout to maintain design consistency throughout the site. This is an important part of the initial development stage because it creates user expectations and helps develop familiarity with the site.

Creating a set of wireframes for a project also acts as a way to communicate with clients and stakeholders such as content creators, engineers, and developers. Over the course of a project the wireframing exercise functions as a stable base on which to consider changes, diverse user paths, and new requirements. The information architect and information designer typically use the wireframes as a meeting of the minds and as solid working documents on which to establish the language, content, and structure of interactions users will have with a given site or project."

The wireframes can be developed by hand or with the help of a software. If you are like me - not the best artist in the world, I suggest the software way.  Maybe here is the right place to thank to a team that saved me significant amount of time and energy. The guys from Balsamiq who developed a pretty amazing software for wireframes. So if you are looking around for one, give them I try. I am really happy with it and of course am not related in any way with its team, so consider it as a free advice.

A website usually needs about 5-10 wireframe images, which takes me about a day. This is much less than preparing all the graphical materials and than start making changes. I am new in this (doing it for the past 6 months), but I love it. I hope you do too. Helps me to clear my thoughts.

So, without further ado, here is my initial wireframes on the subject. Jerry hasn't seen them also, so it will be new for all of you. I expect much will be changed in the process, but two things will happen for sure - first, we will have more clear idea what to build; second, the result will be much better solution.

Community posts thread / Home page

What we discussed with Jerry is that he wants the site's home page to be the "posts" thread list. This fits the "Community blog" concept so I expect little trouble in implementing that. The "unusual" thing requested by Jerry, is the share buttons from tweetmeme and facebook. They have pretty good help pages, the blog post presentation template can supply all the required information and I have already done it.

I have implemented some new ideas in the wireframe that needs to be discussed and your feedback will be much appreciated.

First the post categories are presented as a navigation bar, which makes them far more usable, but limits their number. I think this is a reasonable trade-off.

The second idea is the introduction of a dedicated user menu on the right side. When the user is not logged in, it will be switched with a login webframe. My target with this user menu is to make the navigation around the users personal stuff more obvious and easy. It should expose the different posting threads and user personalized list better. This could be easily measured with a page click through overlay later.

Third, I am suggesting easy access to three community posts threads (besides the category ones): Editor's selection (latest posts marked by the editor), By influentials (posts with authors followed from more than certain number of memebers) and All (just all available posts).

View single post

The post view presentation introduces a wireframe page concept that will be repeated in the single CD review and single Calendar event pages. The post is having a central place on the page and the page layout is unconventional. There will be no guessing what is the purpose of this page, which I think is very important for each website page.

Bellow the post is presented information about its author, his latest entries and the post comments. This should help the the readers consider how creditable the post information is.

CD reviews list

On this page are presented 5 or 10 of the CD reviews. By default the "editor's selection" is presented, but one can easily access all reviews or the ones posted by site influentials (members which reviews are followed from more than certain number of memebers).

To present a "CD review" entry, the blog presentational template should be altered, to fit more accurately its purpose. It will present a standard view of the CD cover thumbnail, the Artists name, the CD title, some information snippet and a sample mp3. The ITBrix.Blog post elements that we will use to make the CD specific information will be the post thumbnail and attachment. We will need to embed also one of the many flash mp3 players, but this shouldn't be any trouble. What concerns me a little is the space that could be required to store the mp3s, but we can limit the sample size if we need to.

Single CD review

The single CD review entry, looks much a like its sibling in the list, but will present the full content of the review.

Calendar events list

This page will grant easy access to four lists: Editor's selected events, Events by influentials, All (all future events) and Archive (all already passed ones).

As currently we do not have a dedicated events handling application, we will have to make the Community calendar, using the same ITBrix.Blog application.

The main elements of an event are the date, place and subject. We will be able to implement them using the posts future posting ability. We will use the source_name field of the post to store any possible address information, so we are covered.

The calendar events list has also a specific. We need to present only upcomming events, but also provide a link to review the already passed events. The presentation of the date will be also custom formated as it needs to stand out from the rest of the events content. This could be easily achieved the the custom formating options of the date presentational tag of the post.

Single calendar event

The single Calendar entry, looks much a like its sibling in the list, but will present the full content of the review.

<< Back to Day 2