Introduction to Gamification for UI/UX Designs

At the WebApp 2012, organized by SiliconIndia, I spoke on “Gamification in UI/UX Designs”.

It was not bad but I won’t called that a very good one either. My gauge of the audience was off the track. I was talking to a crowd who have never heard of “Gamification” and almost all of the audience haven’t heard of CodeAcademy, no clue of the recently popular and viral site Ben the Bodyguard and they were amusingly clueless about – Easter Egg. Next time, I’ll do more research on the audience I’ll be speaking to.

Flipping through the above slides won’t do much justice without reading the notes included with the slide or interacting with me during my session. I tend to have just about 10-13 major slides and I love interacting with the crowd. I’ve lots to learn and I’m learning a lot from the few interactions that I had recently, including this one at WebApp 2012.

This article is more of a re-phrase of my session but with links, examples, and more information, hoping that this will introduce you to the world of Gamification in User Interface and Experience Designs.

First, Gamification is not a new thing, and more importantly it’s not new at all to User Interface and Experience Designs or Web Designs. The term, Gamification, came to prominence around 2010 when it was popularized by marketers and managers to engage their customers.

Gabe Zichermann

Talking about Gamification will be incomplete without mentioning Gabe Zichermann who is regarded as one of the most prominent figure when it comes to propagating Gamification in Products Designs and Development. I was fortunate to see him speak at one of the Founder Institute session and I must say, he is an amazing entertainer. He’s is on twitter and he can be found writing and speaking on behalf of

What is Gamification?

Wikipedia defines Gamification as the use of game design techniques, game thinking and game mechanics to enhance non-game contexts. It is the process of using game thinking & mechanics to engage audience & solve problems.

Let me tackle some examples as a way to introduce the art of Gamification, which you can start applying to your Websites and Web Apps, right away.

Virtual Badges, Achievements and Accolades

Who would have thought that we will be happy with virtual achievements, digital badges and accolades that have no material or meaningful values in our physical world! However, it’s one of the most sought after and people are very happy, satisfied when they do achieved such badges, titles, achievements and accolades. We love to show off our increasing number, varied, different badges that we earn in our digital lives.

Foursquare does an amazing job when it comes to virtual achievements. We love to become “mayors” of a location, earn badges, etc. Another such example is that of CodeAcademy where you can unlock badges when you complete the courses offered there. The whole experience on CodeAcademy engages you to move forward and when you finally complete and unlock a hurdle, it’s a fun and satisfied experience.

Progress as a tool for Gamification

Progress status, progress bars and progress indicators have been used by Web Designers for ages. It is one such gamification technique that’s been proven very successful. LinkedIn does a good job of enticing you to fill in more information by showing you how filled-up is your profile and how you can achieve that 100% complete profile. Twitter also does a nice job by asking you to follow interesting people, as soon as you sign-up. That helps you get rolling and fill your timeline with interesting tweets.

Parallax Scrolling

Parallax Scrolling is a pretty interesting gamification technique in Web designs. It makes it interesting to use the websites and users tend to stick around longer. Look at some of the interesting websites that uses parallax scrolling to make it a fun experience for users.

Virtual Easter Eggs

A virtual Easter egg is an intentional hidden message, in-joke, or feature in a work such as a computer program, web page, video game, movie, book or crossword. One such very well known virtual easter egg is that of the Konami Code – a cheat-sheet embedded, particularly, in computer games. For other examples, try viewing the source of The Oat Meal, try searching for “Do a barrel roll” on Google or just “tilt” it, and you can scroll to the bottom of Kickstarter and click the scissor till it cuts it all through.

The dark side of Gamification

“With great power comes great responsibility.” Like any technique, Gamification has its own share of dark side and you should not be tempted to wield that power. Do not try to force users to do something via Gamification, just for your gains at the cost of the user.

A typical example is that of some Domain Registrars, which forces you to buy their other offerings instead of allowing you to go ahead and complete your Domain Booking Process. The “checkout” button is smaller (sometimes, it’s just a small link) and option to buy their other products are shown enlarged, right in the middle, trying to force you to buy them.

Get started with Gamification

Well, Gamification is an interesting technique to engage your customers, to make your websites a fun experience for users. It can increase the ROI for your bosses and clients, increase trust and loyalty of your visitors.

Gamification is a means to your end goal. It can only accelerate and move forward your contents and services. You cannot fool the users with bad websites, bad services and bad content. Use wisely. Enjoy Gamification.

mySchoolNotebook is digitizing the Classroom


mySchoolNotebook is an app for taking and sharing school notes in an easy and effective way. Nowadays, there is an increasing trend of students bringing their electronic devices to school and taking notes with them as well as school supporting integration of technology into education.

mySchoolNotebook allows students to take notes into well-arranged notebooks divided into topics and automatically numbered and dated lessons. Students can format their notes, upload files, search within the application, or convert notes to PDF and print them out if they get tired of looking at screen. When they miss a class, they simply ask friends to share the notes with them instantly.

Students can sign in with their Facebook account, which helps to automatically generate a friend list for sharing notes, or they can register with an e-mail. Another benefit is that mySchoolNotebook works offline. Therefore, students do not have to worry about an Internet connection. The application is offered in web, mobile, iOS, and Android version. The iOS and Android version can take pictures and record audios.

mySchoolNotebook is based in the Czech Republic. It was developed by a young high school student, CEO Jakub Roz, who tried to solve his own problem of taking notes effectively. He made the first version of mySchoolNotebook for himself. However, his classmates liked the service and wanted to use it as well.

Well, Jakub and the CTO of mySchoolNotebook, Jan Kuca develop a Czech version of mySchoolNotebook. It became a popular tool serving tens of thousand of students. mySchoolNotebook team then decided to release an English version at the end of 2011 to serve students at a global level. In addition, there is a version for German speaking users.

Download the App – iOS (iPhone and iPad), Android.

Vulcan Mind Meld for Locked-In Syndrome patients

Anybody who read the classic American tale Johnny Got His Gun has a slight comprehension of what it’s like to live trapped within your own body, incapable to move, nod, speak or even blink. The mind reels; the body does nothing. Unfortunately, this form of communication-stripped torture isn’t a fictional tale but a reality for many with Locked-in Syndrome (it was featured in the House episode with Mos Def guest starring), which is why the new functional Magnetic Resonance Imaging (fMRI) scanner, Brain Bee, that can translate brain waves into words — is a big deal.

Brain Bee

This new system empowers fully paralyzed and ‘locked-in’ people to mentally select letters of the alphabet in their brain, which are recognized and typed out on a screen, serving as a brain-based, non-communicative communication system for those unable to speak, sign or blink to indicate their needs. Researchers are able to recognize letter-based thought patterns by using characteristic blood flow patterns.

Before you conjure up images of telepathy or Vulcan mind melds though, this technology is a little more difficult than that to use. In order to ‘think’ of a letter the technology divides the alphabet into three rows, nine columns and 27 squares (26 letters of the alphabet plus the space bar). Each row is assigned a mental task, a motor-imagery task, a mental calculation task and an inner-speech task, that the subject must perform to select the row. The letters then cycle through and the subject selects the correct one by performing the task as the letter appears on screen. It is a time-consuming process but the technology is rather easy to learn, with test subjects learning it in under an hour.

The system has passed the theoretical and initial testing stages and has become a concept system. Although it is still in its initial phases — it has already shown promising results.

Guys — Want a Gadget that’ll tell you when your girlfriend is pissed off?

Angry Girlfriend

I thought I would get your attention with that one guys.

Just imagine walking into home everyday after work wearing a pair of O2Amps, glasses that can warn you of your wife, girlfriend’s, female roommate’s, sister’s, mother’s emotions. Most importantly you can detect her emotion BEFORE you say the wrong thing. Brilliant no? By increasing our perception of blood physiology 2AI Labs have come up with the O2Amp glasses, which amplify whether a subject’s blood is oxygenated or deoxygenated, and pooled or free-flowing–or in layman’s terms determine the general emotions of their viewing subjects.

Millions of years of evolution (sorry Scientologists) have already given human beings the ability to interpret blood signals into emotions and overall states of health, like rosy cheeks for overall health, blushing for embarrassment, green for nausea and yellow for fear — or jaundice. Now, like Viagra and boob jobs, scientists have improved on mother nature again.

Continue reading

Move Over Instragram — ForensicaGPS turns crappy photos into 3D Renders

Rarely are thieves, animators and illustrators frightened by the same technology — but all of the above should be on the lookout for Animetrics’ new software – Forensica GPS. This new software-based technology is able to turn low-res photos into stunning 3D renders.

While my mind is reeling with the possibilities, Animetrics specifically designed their software to help police investigators track down subjects — without the time-consuming sketch artist process. This automation process is able to capture distinct facial features like that of the trained eye of a sketch artist, but being a machine it can do it much quicker (and cheaper?).

The software is based on the growing technology of the facial recognition software movement, and uses facial recognition techniques to turn 2D images into 3D visualizations. Forensica GPS is able to best some of its 3D competitors and 2D counterparts by capturing small changes that make up definition, with things like lighting, tattoos and makeup.

Continue reading

Krassimir Fotev scoffs at SEO with his brainchild, Peer Belt

If you’re like me then you are sick of SEO. These cookie-cutter predictive patterns that create a myopic filter for the content we see online make as much sense as casting a rapper in a film noir, or taking a three-year old to a fine china shop.

This must be what Krassimir Fotev thought when he looked at how we gather, process and retrieve information and thought — pssst… I can do better. So he did. (Don’t you just love people like that?). He created Peer Belt — a personalized search engine that organizes the content you encounter online.

After first getting a masters degree in Physics, then giving up a cushy job at Credit Suisse Krassimir created Peer Belt, and hasn’t looked back since.

We had tons of questions for Krassimir — like what the heck Peer Belt actually does, so we fired off a series of rapid-fire questions to him about his entrepreneurial experience and the technology behind the brand. He then banged his head against his desk until something brilliant came out. And brilliant it was…

Continue reading

A Simple and Easy way to overcome your Twitter Addiction

Like most of you, I too am hooked to twitter – it is such a simple but awesome medium where you can talk to, connect with like-minded people and listen to those who you appreciate. I signed up for Twitter on Jan 29, 2007 which makes me amongst the first Million users (725,553rd) on Twitter.

Well, like many of you, I too have realized that it does take a toll on my time and eventually my productivity. In my ever-happening experiment for self-disciplinary self-imposed habits, I’ve successfully conquered my craving and yearning to be on Twitter all the time just like I did with emails long back. Of course, I’ve improvised a lot with email management since – keeping is much leaner, simpler and minimal yet effective and acting on them in a timely manner.

Continue reading

Adobe Creative Suite 6 – the new face of creativity

Adobe recently released their latest version of Creative Suite – Adobe Creative Suite 6, introducing a slew of features and enhancement to their software line-ups.

I was fortunate to be present at the Media Launch of Adobe CS6 in New Delhi, India. Presided over by Umang Bedi, Managing Director, South Asia at Adobe Systems, there were demos galore and quite a bit of stunning new stuffs with the likes of Photoshop, Premiere, SpeedGrade, Dreamweaver, Illustrator etc.

It was not surprising to know that many creative geniuses from India relied totally on Adobe Products to get their work done. Film-maker Aseem Bajaj talks about his experience from analog to digital film-making and how he uses Adobe Products day-in and day-out. Kushal Ruia, Creative Head at Amar Chitra Katha Media demoed some interesting and creative motion video works done in Flash. CB ArunKumar, Academic Director at FX School talked about the creative outcomes as a result of Adobe Products used by his students. It was a day well spent and I came back home thinking, ‘Adobe still have their mojo intact when it comes to creativity tools.’

Adobe CS6 software delivers a whole new experience for digital media creation, enabling you to work lightning fast and reach audiences wherever they may be. Now, for the first time, CS applications are also available through Adobe Creative Cloud, giving you the flexibility to download and install them at any time.

I’ve been trying out the products from the Creative Suite 6 collection and they’re awesome. They are pretty fast and a huge improvement over their predecessors.

Download and Installation

Here is my unfortunate experience. I got a ‘demo’ DVD of CS6 at the event and decided to try it out. However, Adobe Bangalore called me and told me they’re sending me a ‘final’ copy instead. Well, that turned out to be the “Pre-release” version, which means I was able to use my Master Collection Serial Number but cannot login to Adobe from the software, leaving me with just 5 days before it shuts me out.

After that ordeal, I decided to download the trial from Adobe’s website. For reasons known best to Adobe, I had to download a downloader to download the new download. I downloaded the downloader and installed it and finally downloaded the trial. I just wish Adobe can improve the user experience when it comes to downloading their softwares – simplify and make it easier for users.

They perhaps want to know who downloaded what! But then why not figure out that I’ve got the serial and I don’t need to be spammed every week that my trial is ending and I should buy the software. That was a sad experience. And yes, the unsubscribed link on that ‘reminder’ email led me to an error page on Adobe.

Adobe Creative Suite 6

Adobe Creative Suite 6, we can see a product-wide overhaul of the interface, albeit a dark-gray-theme, which seem to be more suited for creative people. CS6 sports better speed, improved performance, and native 64-bit support for both Mac and Windows across the suite of products.

Adobe Photoshop saw huge improvement and quite a lot of them are now the darling features of many artists, photographers and creative users alike. 3D got a huge changes in Photoshop CS6 Extended, with it’s primary focus on usability and performance. Adobe have completely overhauled the User Interface and 3D workflows, which are now, much more intuitive and easier to use. The new interface sports a single tool instead of the earlier 14. In CS6, you can use the standard Photoshop Move Tool and click on the element (light, camera, mesh) in your 3D layer (scene) and that will reposition it!

Illustrator features a new “gradients on stroke” feature, which can adds gradients to lines, pattern-creation tool has a new tracing engine, as well as the ability to create and edit tiled vector patterns, without any visible seams, from the images you trace. InDesign have added new features like Alternate Layouts, Liquid Layout, and Content Collector. This will be a blessing to those page designers who create for a variety of platforms. InDesign CS6 also offers vast upgrades with a new Linked content tool, as well as support for building interactive PDFs.

Dreamweaver, the entry point for most web designers, saw some decent improvement and is geared towards the new ‘responsive design’ paradigm of the web. I was under the impression that Dreamweaver will move to oblivion and die a silent death but CS6 seem to have taken a huge turn. Dreamweaver helps you design once and adapt your websites when viewed in a phone or tablet or on a browser. Dreamweaver CS6 is built for the multi-platform era, with full support for HTML5 and CSS3.

I’m not much of a video guy but from the demo I saw on that day, Adobe Premiere Pro seems to be kicking some real ass. It’s integration with After Effects and Photoshop is something very interesting and should serve as a convenient tool for video professionals. SpeedGrade was something the film-makers swear by, smiling to the fact that now they can see their movies being graded quickly in real-time right in front of them. Real-time subtitle support was another awe-thing from the video line-up by Adobe.

Well, for Adobe Flash, it’s not what we used to know from the yonder years. Flash graduated to doing more and more of HTML5 and Javascript. It’s now being marketed as ‘the tool’ for your web and mobile needs when it comes to HTML5 and Javascript and an easy development tool for iOS, Android and other platforms.

Adobe Creative Cloud

Adobe Creative Cloud

Adobe Creative Cloud is a digital hub where you can explore, create, share, and deliver your work using any of the Adobe Creative Suite desktop tools, Adobe Photoshop Lightroom 4, and new applications like Adobe Muse and Adobe Edge preview. Creative Cloud also includes new Internet-based services and enables the delivery of high-impact content experiences such as interactive websites and stunning digital magazines. By offering connectivity with Adobe Touch Apps, headlined by Adobe Photoshop Touch, Creative Cloud enables a mobile workflow, from ideation to publishing, to bring the power of Adobe innovation to iPads and Android tablets. Creative Cloud gives you freedom to create, offering immediate and ongoing access to industry-­defining tools and technologies, to serve a vibrant worldwide community of creative talent.

Well, if you do not want or cannot afford the costly software from Adobe, you can now use them by paying a monthly subscription. Membership to the Adobe Creative Cloud is available at a price of $49.99 per month for individuals and $69.99 per month per seat for workgroups, both for an annual plan.

Rosie Jetson: Coming to a home near YOU?

Rosie Jetson

If you’re anything like me, when you were a kid you dreamed that in the not-so-distant future you would be driving around in an anti-gravity car, living in an apartment hovering in a space-age bubble in the sky. Oh and with Rosie Jetson would be your back-talking robot maid. And if you’re like me then you are bitterly disappointed with the present epoch’s lack of hover jets. Well, to soothe that bitter sting of disappointment you can comfort yourself with the new robotic maid that will hopefully come to market soon.

Shaking your head in disbelief? You should be, because this isn’t exactly Rosie-caliber as of yet. The new robotic droid that could soon be playing Rosie — or Jeeves — in homes is programmed to scan a disheveled room, identify objects, and is capable of putting them back in their rightful places.

Continue reading

Dayson Pais: Entrepreneur²

Mumbai-based Dayson Pais is the founder of Webly, of Epicwhale, of The Womo — and now he is the founder (and janitor) of Textme. And all this has been in the past 5 years.

Dayson’s passion is incubating services and products for the web, brand identity, print, mobile & digital field — hence the creation of his digital agency and cybernated incubator, Webly. His understanding of the “Wild, Wild Web” as he calls it, has built a solid entrepreneurial base for his many endeavors. Finally, his many hats are beginning to pay off — with the success of many of his ventures, including his most recent, Textme.

Continue reading