A “Gamified” Experience

CeramiQuest™ Logo and tag line


The term, “gamify” refers to the act of taking something that is not thought of as a game, and incorporating game activity into it to make it “game-like”. The idea behind gamification is that infusing game-mechanics into activities make it more engaging and therefore encourage participants to do more of it.  I see a world of opportunity for artists and programmers in making a handsome living by reinventing all sorts of businesses, including education (check out Google’s grass-roots effort to instill Gamification into education here) , by applying art and programming skills into this particular area. Hence,  it was my intention to gamify something, during my  sabbatical, and see how it goes. I’d also be acting like an “indie game” developer because it would be just me and a programmer making this game.

The term, “indie game” refers to a digital game being developed by a small group of individuals or one person only. This term spurs romantic visions of independent, swashbuckling young artists and programmers, making millions overnight! “How hard could it be, anyways? Just do it, work hard and it might be YOU becoming rich and famous!” This belief prevails in many circles of young game artists and programmers. The components require, in the least, an artist and a programmer coming together to make a game. Indie games have, no doubt, become increasingly abundant due to the accessibility of game-making tools and the increase of game programmers and artist graduates who have entered the field. Because of the large number of new grads jockeying for the same jobs, employers have the luxury of raising the bar to now require entry-level applicants to have already made a game before they will be considered for hire. Hence, aspiring game-makers have to somehow, find other like-minded individuals to team up with so that they can obtain the fundamental requirements being asked of them.

To gain more experience in gamifying and what it is like to make a game without a big team, I set out to gamify something. I again chose The Ceramics Studio, located in San Juan Capistrano, CA. I believe in the value of art-making and wanted to see if I could encourage more people to spend their time creating even more art. I studied how I could incorporate tried and tested game mechanisms into its customer service structure. The gist of the game was that customers would earn points, prizes and recognition on a website with every art piece they created at the studio. The website would showcase every customer’s work of art in their very own gallery and post the points they earned. The belief was that customers would be inspired to come in more often and strive to improve their art works when they not only earned points, but would receive public recognition for such accomplishments via the website.

I learned a great deal about what could and could not be done with regards to the programming, game-play, rewards and feedback systems. I also learned about front-end and back-end parts of a web-based application. I gained an understanding of databases and why we need them in games. The layout proved to be a big and important challenge. For example, my initial design was fun-looking, but was not going to be user-friendly. In other words, it would have been harder for the user to be aware of important aspects of the game because they could not be displayed for easy finding. It also did not allow for additional challenges to be added easily from the back-end. I learned how to properly create art assets for this web-based game. I studied up on the new scalable vector graphic (SVG) file format to see if this was best to use. Basically, it is a web-based vector graphic format that retains its quality, regardless of the size on the screen. Surprisingly, it is much larger than a raster-based JPG or PNG. No, you cannot enlarge a PNG or JPG, but you don’t usually need that feature. Instead, you just size the graphic as needed, then save it with the best quality settings to match its purpose. SVG file format does feature animation functions! This is cool, and I will keep it in mind for when I may need this feature. In the process, I studied up on other emerging web-based technologies, like WebGL and CSS3 Animations and pondered on how artists can better prepare themselves for these commercial applications.

Below are some of the designs for CeramiQuest:

Ceramiquest-Style-SheetStyle sheet[Click on the image to enlarge.] BADGESBadge and voucher designs[Click on the image to enlarge.]
Original Interface Design [Click on the image to enlarge][Click on the image to enlarge.]
2nd Mock-Up of Interface Design incorporating the folksie look of the actual studio. [Click on the image to enlarge]
2nd Mock-Up of Interface Design, incorporating the folksy look of the actual studio.
[Click on the image to enlarge.]
Ceramiquest score-card-new
Initial design of the score card

[Click on the image to enlarge.]

 Ceramiquest-interface-Mock33rd Mock-Up of the Interface. I redesigned it to accommodate easy navigation of the entire game site. [Click on the image to enlarge.]

The outcome as of June 2014: the computer programmer I had hired to help me had to up-and-quit suddenly, abandoning the project. I was left with a bunch of his code (called a “tar ball”) that is too incomplete to use as-is. Therefore, I will show my design and artwork only. In the near future, I will look for another programmer who can help bring this worthy project to fruition. [Notes: If you are reading this and you know someone who knows PHP using the Laravel framework who might want to help, please have them contact me!]

Next > Project#2 “Explore The Ceramics Studio!”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.