Achievements 2.0 update

I’ve been re-working my Achievements plugin for some time now and, with the invaluable aid of some amazing testers, it is getting closer to a beta release. Achievements will require a minimum of WordPress 3.0.1 and BuddyPress 1.2.6, and it will work on both regular and multisite variants of WordPress. In the next few weeks, I will be launching a dedicated site for Achievements. In addition to explaining why every BuddyPress-powered website should use Achievements, it will contain screencasts, walkthroughs, developer and site admin documentation, as well as support options (both free and premium).

Enough pitch! As with any software that is still in development, certain sections of it are more finalised and robust than others. I’m excited to share with you the following screenshots of these more finished sections, and I look forward to reading your comments here, by email, or on Twitter.

Achievement creation

A close-up image of the Create and Edit Achievement screens; part one of two.
Achievements 2.0 Create/Edit pages

Once the plugin is installed and activated, it will integrate itself fully into the default BuddyPress theme. All of Achievement’s pages and settings are controlled in the user-facing parts of the site, and each has a separate WordPress capability. This lets you use a plugin like Role Scoper to give certain users to access to specific pages. For example, you could let certain users edit Achievements, but not add or delete them.

WordPress comes with a sample blog post and comment to give new users something to view and edit, to teach them how to use the dashboard. The first version of the Achievements plugin took a similar approach and came with ~20 Achievements. Unlike WordPress, to add more, you had to know how to code, read the documentation and be a master of voodoo. Not awesome.

To encourage creativity and to allow true customisation, Achievements will come with easy to use Create and Edit screens. You don’t need to know how to code, or read the documentation, or know voodoo. Awesome!

Detail page

An Achievement's detail page, summarising information about the Achievement, displaying its picture, its point value, and so on.
"Detail" page

Achievements has been built to appear visually similar to BuddyPress Groups. In the same way that each Group has its own set of pages, an Achievement has its own set of pages.

Common to each Achievement page, there is a universal header consisting of the Achievement’s name, type, points value and assorted meta information; i.e. if the current user has “unlocked” this Achievement and how many people in total have unlocked it.

The details tab displays the Achievement’s description which can contain any HTML or rich-text formatting that you can use in a regular WordPress post. It also supports shortcodes and oEmbed.

Change Picture page

An Achievement's change picture page, which has a grid of images to choose from.
"Change Picture" page

After creating an Achievement, you’ll want to customise its picture. You can choose any image in your WordPress Media Library. If you’re considering using Achievements on your site, I suggest that you plan ahead and design your pictures now, as the visual branding is critical. Get those crayons out!

Achievements makes use of the Media Library as it’s built in to every WordPress install, and it removes a lot of potential code duplication and handling of file uploads. It also enables you to keep taking advantage of plugins that enhance the Media Library; for example, W3 Total Cache‘s CDN support and WP Smush.it, which automatically strips unnecessary information from each image, resulting in smaller file sizes.

Directory page

Shows a list of a person's unlocked Achievements; contains the Achievement's picture, title, description, points value and the timestamp of when it was unlocked.
My Unlocked Achievements / Directory

The Directory page matches BuddyPress’ Members and Groups list, with filters to show all Achievements and only those which the user has unlocked. A recent usability enhancement for admins, invoked by moving your mouse over each item, are quick links to that Achievement’s edit, change picture and delete pages. It’s made my day-to-day development much easier.

Widgets

Displays the three widgets that have been built for the Achievements plugin so far; leaderboard, recent Achievements and available Achievements.
Achievements 2.0 widgets

Everyone likes widgets, and so far, Achievements has three; a leaderboard, recent Achievements and all available Achievements.

The leaderboard is a very common concept, and is a great way of ranking the users who participate most on your site.

The recent Achievements widget displays the pictures of the user’s most recently unlocked Achievement. The idea is to bring your Achievements’ branding into the rest of your site.

The available Achievements widget lists all of the active Achievements on your site, just like the Directory. Why? Built with WordPress multisite in mind, you can configure certain Achievements to trigger only from actions on specific sites. You can drop this widget into your sites so that your users can discover what’s available; a great way to encourage people to visit all of your sites.

The most frequently asked question: what’s the release date?

Soon.™

45 thoughts on “Achievements 2.0 update

  1. Hi Paul,

    first of all, congratulations on getting Achievemets to it’s current state – fantastic work.

    Realise I haven’t been helpful in testing code, but hopefully a few UX comments will help:

    1. Could you post a list of complete achievements? I imagine that a lot of users will want to customise their achievemmt badges so a list would be useful to brief designers with

    2. Can you provide stock images for a price? Might help to monetize the app, and give new users a headstart. Much like premium WP themes take the effort out of getting an attractive site from the get go

    3. With the predefined achievements, is there a way of giving them different levels, eg 100 comments, 250 comments, 500 comments, 1000 comments, etc?

    4. Is there an option for users to suggest new achievements? Something Foursquare doesn’t seem to take much advantage of (as yet)

    5, What’s the release date? :)

    Cheers,
    Ben

    1. Hi Ben

      1. Achievements are created by the admin, see edit/create screenshot in the article. What you probably mean is, what actions can Achievements use? (i.e. on blog post, on comment) I’ve got about 15 actions integrated at the moment, and I’m going to spend this weekend working on adding more. I’ll let you know a complete list soon.

      2. It’s something I’d have to outsource, but which I’m looking into. I love the idea.

      3. There aren’t any predefined Achievements. In general terms, if you have an Achievement that you want to trigger after “10 blog comments” and “20 blog comments”, you’ll have to build two separate Achievements.

      4. Not currently. The implementation of this may be too site-specific to do well; some people may want to collect ideas via blog, or twitter, and so on. I’ll have a think about this.

      5. I need to finish up a couple of screens before I’m going to publicly commit to anything. And, hey; you’ve got the alpha version already ;)

  2. Hey Paul,

    Thanks for the update and all your input on this plugin, it really is amazing and I’m itching to use it. My designer is working on our badges as I type :)

    I’m sure I’ll need input from you soon so will be in touch.

  3. Now that’s an upgrade!

    Seems this plugin is coming along VERY nicely – so glad to see it reach version 2.0.

    Can’t wait to use this within a production environment…

  4. By the way, is there an option to change the points slug to something else like Trophies? because I use Points slug for CubePoints.

    1. Yes. Unlike BuddyPress, you can change all of the slugs. i.e. from example.com/achievements/change-picture to example.com/badgers/mushroom

  5. Paul this looks like stunning work, very polished! Have to admit I hadn’t really taken note of ‘Achievements’ before.

  6. Great work! Looks awesome so far …

    We have a Gamecenter on our upcoming site. Say the Flashgame developer is going to build in some hooks into his code (e.g. if one finished a level = user gets 100 Points), are we able to build an Achievement around it?

  7. Cannot WAIT for this! Cubepoints integration has never worked as well as I would like on our site and I’m looking forward to replacing it with this. Thank you for all of your hard work!!!

  8. Brilliant! I was toying around with some ideas around this very concept and… lo and behold, there it is! (That happens regularly with WP plug-ins, sure, but not ones with so specific an idea. That only tells me this is an idea that’s intuitive, whose time has come!)

    I’m happy to help contribute – thought of uploading to GitHub / bitbucket etc., even in raw form?

    1. It is available but I’m reluctant to give out the URL here because I don’t want people to think that it is finished (I’m still classing this as alpha-quality). Send me an email if you want to give it a test drive to see about contributing, etc.

  9. I’ve been looking forward to this since I played with the initial release wa-a-ay back in circa BP1.1!

    Being able to award achievements incrementally (1 comment, 10 comments, 100 comments, etc) is a must to encourage participation and I think I’ll be exploiting the badge feature to its fullest on this.

    On that point, I’m wondering if it’ll be possible to combine several achievements, or create an achievement that’s awarded when several actions are completed. That way, once a user completes actions 1, 2 & 3, award “Bronze” status badge; complete actions 4, 5 & 6, award “Silver” status badge; actions 7, 8 & 9, “Gold” badge and so on.

    Of course, some users would be tempted to abuse a system such as described in the previous 2 paragraphs by completing the required actions to get the points/badge, and then deleting them. Ex: create 100 “dummy” comments to get “Bronze” badge, then delete all dummy comments.

    There would have to be some kind of point retraction system. Maybe “award” a negative point value for deletion?

    Anyhoo, my fingers are itching to play with this again, and get it integrated on my site which I hope to launch by year’s end.

    Thanks so much for creating this plugin!

    1. Hi Patrick

      There’s no currently no way to define multiple requirements for each action. It’s not impossible to add such a feature but it wouldn’t make it into the first release.

      Points are never retracted automatically. I’m not trying to create a virtual currency, and a site could hide the points total all together. There will be a way for an admin to unreward an achievement from a user, and to change that person s points total.

      1. Hi Paul,

        Thanks for a speedy reply!

        My site will cater to folks recovering from alcoholism and drug abuse. This is a demographic that is notorious for finding loopholes and exploiting them (and I speak from experience ;-) ). So a way to remove points/awards is, at least for my needs, a requirement. If it has to be done manually, so be it… at least it can be done.

        Thanks!

    1. I’ve also just committed support for the activity stream secondary avatars… something so new it only was put into BuddyPress last night. So that’s another reason!

  10. This is sooper!
    You’ve rekindled my hopes! I’ll run re-start a site I own, rechristened & from scratch!
    I’m bootstrapping, setting up a team here. And our to-be-team may in some(substantial)time, get into a position to contribute too!
    Do meanwhile, let me know if I can taste it on from the alpha release, please. I can contribute with bug-reporting or UI/UX suggestions, as much as possible from my end. Keenly awaiting your reply. :) :)
    And alas, I hope I could’ve email-subscribed to this comment thread :(

  11. I am getting that tingly feeling (and not the kind you have to see the doctor about). VERY excited to see this come out, let us know soon!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s