Earlier today, I released version 3.5 of my Achievements for WordPress plugin. If you’ve not heard of the plugin before, it’s a great way to gamify your WordPress site with challenges, badges, and points. I’d like to share some notes on how Achievements for WordPress was designed.
I’ve been working on Achievements for several years, and about a year ago, I shipped version 3.0, which was a massive rewrite from the 2.x versions. It took me about a year on-and-off to build as I was working on the project myself in my spare (limited) time, while trying to maintain the 2.x version, and work on several other plugins.
During a recent tidy-up, I re-discovered a couple of notebooks full of sketches and notes that I made during the 3.0 rewrite. It was pretty interest to take a fresh look at my old notes again, so I’ve scanned in a few of the more interesting pages that cover the original templating ideas, the leaderboard, and the Heartbeat API-powered “Live Notifications”.
Group-specific achievements notes from the 2.x version of the plugin
Some rough designs and notes for the “give award” screen for admins for 3.0. In this idea, I was playing around with a grid of icons, and live search filtering.
Single achievement template page designs and notes, 2/2.
Some sketches for the single achievement template page for 3.0. The implementation ended up pretty similar to the design on the right, though I had to remove the pagination because of a code/implementation bug which I’ll fix sooner or later.
This is some design ideas for the Achievements index template (i.e. the big list of all the achievements on your site). It’s obvious which I decided to build for 3.0, and I like pagination more now than I did then — I think it required me to build out more of an API, which I eventually did 😉
I’m not sure why I decided to remove the achievement featured images from this screen; itt may have come down to time reasons.
Achievements user profile designs and notes. These were not implemented for 3.0 because of how long they would take to build (I really wanted to ship 3.0 by that point!).
These are likely to be resurrected in some future version of the plugin.
Miscellaneous notes and drawings about the “users” admin screen. I very nearly decided to add a column to WordPress’ standard “users” admin screen, but decided against it as that screen breaks down from a UI POV as soon as more than one plugin tries to add its own columns (see: bbPress).
As I approached the big initial 3.0 release after such a long period of development (~1 year, on-and-off), final tests were important to make sure that I didn’t miss any obvious or critical bugs prior to shipping. You only get the opportunity to make one first impression.
Achievements 3.0 final tests checklist, 2/2.
It was obvious fairly on that a leaderboard feature could upset your database or web server, so I spent a lot of time exploring ideas of how best to cache the data. These are some notes from that process.
Leaderboard planning notes; a very early version. I was considering how I needed to re-work the leaderboard code that was had been contributed to the plugin on Github — https://github.com/paulgibbs/achievements/pull/94
Leaderboard templating notes, plus a list of requirements for the API that I checked off as I built them.
Step-by-step guide of how I planned to use WordPress’ Heartbeat API to build Live Notifications for Achievements.
The shipping version (Achievements 3.5) was much simplified. There was no benefit in the JS heartbeat response telling the server what notifications it had already received.
Notes about how to integrate WordPress’ Heartbeat API into Achievements. I wrote these down to help visualise the order of the communication between the browser and the server.
Related
5 thoughts on “How Achievements 3.0 Was Designed”
How can I help translate Achievements into Spanish?
That’s a good question, and thank you for offering. I think I will set up some new site to manage translations; I’ll probably work on it over Christmas, I’ll doubt I’ll have time before.
I’ll get in contact with you nearer that time and check in to see if you’re still interested, etc. Thanks again.
Hi Paul, please do. Although I have no idea of programming, send me the files when you are ready and I will take care of it. Very good plugin. We want to use it for our webinars, people are requesting to get certificates of participation, so I will try to link your plugin with our registration mechanism (custom plugin) so when people participate in X number of webinars (each registration will earn points), we will give them, via your plugin, a certification/achievement.
Hi Paul, happy new year. Could direct me to the documentation to add new achievements, such as register for a webinar or downloading a paper from our site? Many thanks!
Paul Gibbs 
How can I help translate Achievements into Spanish?
LikeLike
Hi!
That’s a good question, and thank you for offering. I think I will set up some new site to manage translations; I’ll probably work on it over Christmas, I’ll doubt I’ll have time before.
I’ll get in contact with you nearer that time and check in to see if you’re still interested, etc. Thanks again.
LikeLike
Hi Paul, please do. Although I have no idea of programming, send me the files when you are ready and I will take care of it. Very good plugin. We want to use it for our webinars, people are requesting to get certificates of participation, so I will try to link your plugin with our registration mechanism (custom plugin) so when people participate in X number of webinars (each registration will earn points), we will give them, via your plugin, a certification/achievement.
LikeLike
Sounds like a great use
LikeLike
Hi Paul, happy new year. Could direct me to the documentation to add new achievements, such as register for a webinar or downloading a paper from our site? Many thanks!
LikeLike