Blog Design for ROI Rule #3: Shower Attention and Appreciation On Your Community

This guest post is by Gab Goldenberg, author of The Advanced SEO Book.

This is part 3 of Problogger’s Blog Design for ROI series. Today we’ll talk about integrating your community into your design. Since a blog is a form of social media, even if—or especially if—it’s a business blog, it only makes sense to design the blog in a way that will maximize interaction.

Let’s address the importance of interaction, though, before we delve into the details of design.

The skeptics amongst you may ask, “What are the benefits?” Heck, giving attention to others may attract trolls and other negative behaviour!

One of the great benefits is that an engaged community promotes your blog, providing word of mouth marketing. This includes social bookmarking and sharing, as well as regular links from your community members’ own sites. So you increase your social and SEO traffic. Plus building community is more enjoyable than manually requesting links and attention…

I could go on, but check out Richard’s post on techniques to measure online communities’ ROI in dollars, or my own on the intangible ROI of social media such as better hiring, partnerships, and more.

How do you show that you care about your community?

There are a number of ways to visually reinforce the importance of community on your blog, and they center around giving your community visual prominence and rewarding (“gamifying”) their behaviour.

Credit for the contribution: avatars

One easy way to do this is to use avatars—thumbnail pictures of your members that appear alongside their contributions.

If you accept guest posts, why make your guest authors anonymous? Instead, show their profile picture at the top of the posts they publish on your blog. (We’ll discuss this more in the next article in this series, on post design.) My friends at SEOmoz were some of the first people to do this:

Of course, this idea isn’t limited to post authors—most people comment and they are in fact the bulk of your community, so you should offer avatars to your commenters, as well.

Here’s what you want your blog comments area to look like:

What do you do for people who haven’t provided an avatar?

I’d suggest something generic that reflects your brand, perhaps with the text, “User hasn’t yet uploaded a profile picture.” The idea is that users will realize what they need to do to get the avatar to appear. (Note: avoid using the word “avatar” since not everyone knows what it means. “Profile picture” is clearer.)

SEOmoz gets this partly right by using their logo’s starshape icon, but they omit to specify why that’s appearing instead of human picture like other people’s. It’s a missed opportunity.

It is nonetheless a step up from the generic-and-distracting images provided by certain blog commenting/avatar systems.

Why limit yourself to just showing a person’s photo and name, though?

Awards, badges, and recognition

Since you want to encourage high quality participation, as well as helping people understand why they should visit a particular member’s profile page instead of clicking elsewhere, give your members titles (or “badges”) and display these alongside members’ profiles.

When I was in high school and really into hiphop, I used to frequent a forum, NobodySmiling, that did a good job of this, placing badges (in the shape of various trophies) for various achievements alongside members’ posts. In the screenshot below, you can see an excellent example of a site that recognizes user contributions.

The moderator MetiphOracle has his title, Moderator, displayed as well as multiple stars indicating his veteran-contributor status. Additionally, his post count, win-loss record (in hiphop battles), “Vicious rating” (how frequently other members clicked his Praise or Smite links, a pre-Facebook Like function), and two microphone awards are shown.

It’s also worth highlighting that most of the awards were accessible on the basis of merit—win ten rap battles and you got a bronze mic, for example. This is important, because if the awards are only hierarchical—that is, only one person can hold an award—then it can reduce motivation for newer members.

The site admins realized that this was a very popular feature and quickly added other awards for a variety of achievements.

That being said, being #1 (or in the top five or ten) is also very motivating to senior members—especially so if you make the achievement of that status a contest. That was the idea behind the belts, like the Vet Tourney award in the screenshot above.

You can take the idea even further though, and reward the best collaboration.

The crown award in the screenshot above went to the best crew—the group of rappers who beat other top crews in rap battles.

As someone who competed for (and won!) the crown, I can tell you that my friends and I spent hours talking on instant messenger about how we were going to do it. So the result of this kind of gamification of your community is that its members are no longer dependent on their interaction with you—they’re brought back to your blog repeatedly to interact amongst themselves, and the friendships they build.

You don’t specifically need different images for your reward badges though.

An easy way to start is to have some kind of general-purpose image on which you can overlay people’s titles. Below, SEOmoz have a gold-colour ribbon that appears below members’ answers in SEOmoz’s Q&A forum.

A simple way to do this without a lot of up-front coding work—and to see if you have enough traction in your blog’s readership to warrant the coding work—is to begin with a monthly community contest.

Offer prizes for different forms of interaction—the most comments, the best comment, the best comment by someone who never won before, and so on. Then, you can have a monthly announcement for the winners, and a page where you list current and past winners.

Help and encourage members to interact between themselves

Another thing I recall being rather practical and popular on NobodySmiling—and which is now found everywhere from Skype and MSN messenger to Facebook (though not yet Twitter)—is the list of members online. Essentially, this is an invitation to members to chat or private message with each other.

Where does the “members online now” block belong?

I’d venture to say that it’s becoming conventional to list a similar block—the Facebook Page Likers list—in the sidebar, so it’s probably a good idea to place this here. Using conventions on your blog requires less effort from your visitors.

A further way to help encourage the contact via your blog’s design is to make member contact information readily accessible. You can see this done on SEOmoz member profiles:

Another tool that’s not pictured there is a button that lets members send each other private messages within SEOmoz, similar to the way forum software handles membership interaction.

An even better way to display this is to make the person’s contact information available at the end of all their posts and comments. You can see in the screenshot from NobodySmiling that MetiphOracle’s accounts—MSN and others—were all linked below his posts.

The following excerpt from an Inc. magazine article discusses how popular review site Yelp made a point of inviting its top members to exclusive parties.

This achieved a few things: it rewarded high levels of participation, provided recognition, and helped the members meet each other and interact.

“Without the cash for a national rollout, [Yelp co-founder Jeremy] Stoppelman decided to focus on making Yelp famous locally. With the help of a buzz-marketing guru he hired on a whim, Stoppelman decided to select a few dozen people—the most active reviewers on the site—and throw them an open-bar party. As a joke, he called the group the Yelp Elite Squad.

“[Yelp investor Max] Levchin thought the idea was crazy—”I was like, ‘Holy cr*p: We’re nowhere near profitability; this is ridiculous,'” he says—but 100 people showed up, and traffic to the site began to crawl up. Because the parties were reserved for prolific reviewers, they gave casual users a reason to use the site more and nonusers a reason to join Yelp.

By June 2005, Yelp had 12,000 reviewers, most of them in the Bay Area. In November, Stoppelman went back to the VCs and bagged $5 million from Bessemer Venture Partners. He used the money to throw more parties and to hire party planners—Yelp calls them community managers—in New York, Chicago, and Boston. The company now employs 40 of these people.”

Comments as forum posts—a way to encourage repeat and deeper interactions

Perhaps the most unique—and clever—form of tying a blog into a community that I’ve seen comes from the comic, Least I Could Do (NSFW Warning: sexual humour and scantily clad cartoon women).

Instead of using a common commenting system like Disqus, Least I Could Do (LICD) gets people to go to the forum to comment on blog posts.

The way the blog and forum are tied together is that blog posts are forum excerpts. In the screenshot below, you see that the Read More link (same as the Comments link) takes you to LICD’s forum.

The advantage of this approach is that forums comfortably hold longer discussions that are typically uncommon on blogs. Also, many of the community-oriented details described in this posts exists by default with forums (including easy member registration, avatars, recognition, member praise and thanks, and contact info links).

The disadvantage is that you need custom code to get your members’ avatars and other details to appear alongside their guest post author credits if you publish guest posts.

How to shower attention on your community

• Show avatars and usernames alongside contributions: Help people stand out as individuals. The more you do this, the more likely people will be to remember each other, and members will become friendly with one another faster.
• Visually recognize members:When people achieve certain contribution plateaus, when they get acknowledged by other community members, when they gain seniority, and when they outperform others, let them brag with badges that are visible on their member profiles.Pro tip: Make these badges embeddable on other sites so that members who are proud of their achievements can link back to your site to show off their badges.
• Encourage members to interact: Provide links to as many contact methods as they want to provide—Skype, MSN, social media profiles, personal sites, and so on. Also, show who’s online at the moment so it’s easy for people to draw their friends’ attention to particular discussions they want others to participate in.
  Pro tip: Offer a chat room. It’s old-fashioned, but it works! Before there were live webinars, people had live events in chat rooms.
• Use forums for comments: Encourage a community to build around your posts by putting the spotlight on members, allowing longer discussions, and more.

What design techniques do you use to recognize and reward your blog’s loyal users? What other ideas have you seen on the web? Share your experiences with us in the comments, and check back next week for the next part in our series!

Gab Goldenberg wrote The Advanced SEO Book—and you can get a free chapter here. Gab and Internet Marketing Ninjas, the folks behind the Blog Design for ROI series here on Problogger, are offering to mail you a free print copy of the Blog Design for ROI guide as a small book. Get your free copy from seoroi.com/blog-design-for-roi/ .