How to create a UX design with gamification in mind, plus a bonus UX Case study

What is gamification?

Gamification in a nutshell is applying game mechanics & terminology to a set of actions performed by users on a regular basis. In most cases it involves applying them to a web application as a way to boost engagement and make dull or repetitive activities, fun. One example I remember hearing from Gabe Zichermann, two or three years ago, and which I’m paraphrasing now is that if you tell a person to click the mouse button 1000 times or fill a spreadsheet one hundred times, they will probably get bored after a few tries, but if you create a game around it or disguise it as a game , that action automatically becomes fun and that goal is reached.

For example you could create a spreadsheet game, where at the end of the day a user from within the company is awarded a badge that gives him a real reward, or once a user fills 10 spreadsheets he receives a funny image or information about what a certain colleague enjoys, thus they can start chatting about that in the office, next time they meet…so as you can see the possibilities are endless

Who’s using it:

Well all the cool kids are: Google, Facebook, LinkedIn, Foursquare and so on. Usually corporate or big companies use a subtle approach like for example both LinkedIn & Facebook, uses a profile completion system as a way to push users to fill their profile.

So as you can see gamification can be more than just badges & achievements, it can actually push users to complete a certain action and in some cases get rewarded. This type of system is amazing in an online learning environment such as codecademy , since it can really make you feel as you accomplished something and did a great job, once you get that achievement or badge.

So what are the advantages?

  • pushes interaction between users
  • pushes user behavior towards a certain action
  • can make users work together to achieve something
  • can make users come back to the website
  • can build value, prestige & brand trust


How do you create an UX design with gamification in mind?

Well as with any other design there are some rules and problems that you will face and something that’s initially quite simple, can get extremely complex UX wise,  however the general rules I would like to point out is that you need to have a set of actions the users will perform, have different values associated to them based on difficulty and try to create a wide variety of incentives in both practical (access to something, unlocks) and non-practical format (achievements,badges), so let’s begin:


  • First thing you need to do is to know your audience, this means their average age, their familiarity with the web,  their industry and so on. Why?  because this can impact how playful your system can be, for example if your targeted group are designers, then you can make it as wild as you want, since designers are quite familiar with all the web stuff and have some kind of gaming background while being an overall young demographic that would enjoy such a system. However if your target is corporate lawyers or medics, you have to trim down the playfulness and stick with a more modern and less intrusive approach.
  • Set out the goal and all the actions that users can perform via a red route analysis and visualize the most important user actions, as an example let’s set our goal to increase the number of shares for an image and the total list of actions that users will perform on our website is read, share, watch, comment, download or click on links.
  • ask yourself why would they perform that action ? in our case, why would they share it? maybe the image is interesting, maybe they get something out of it, maybe they know someone who will benefit from it like in the case of an info-graphic, an open position and so on.
  • do you want to make this a community based action, which will make them work together or a single individual action? For our purpose we will focus on a single individual action.
  • refine the action which in our case means do you want users to share it on all networks? or on a specific network? do you want the user to perform other actions like post a comment? for our example we will want users to share the image on Facebook.
  • create an incentive or reward for performing that action (share) this can be a discount code, a badge, a download, a new website feature like a new background, a new website area,etc. Our incentive will be to grant users access to a video showcasing a detailed view of how that image was made, so once they share that image on facebook they will either receive a link or be automatically granted access to that video.
  • identify how often will this action take place? daily? weekly? monthly? hopefully you already know this from your red route analysis, but an action performed very often means it will lose it’s value and could get annoying, while an action that can be performed on a weekly or monthly will be more valuable. In our case we will post images every 2 weeks, this way they are still perceived as valuable and thus won’t get ignored.
  • repetition? do they get a small bonus for repeating that process? like do they get something for sharing that image on different networks, like maybe on two other social networks? in our case yes, we want them to share that image on a second network this will unlock the assets used in creating that video like, brushes, textures, original image, etc.
  • sketch the flow or user journey and see how they would interact with it. Our user journey will mostly involve user coming to the website, seeing the image, reading that there’s a detailed video available if they share it, they share the image, they are granted access to the video, they watch the video, they see a banner saying that they can share the original article page on a different network to unlock the projects assets, they share and unlock the assets, they click on download and continue browsing the website, later on they try reproducing that image in photoshop, sharing their creation with the site via the comment section.That’s version one of the user journey, that will be altered after some feedback.
  • create the wire-frames: this means designing a series of pop-up windows or pages that will meet the user journey mentioned above
  • measure user feedback and adapt, this can be done either on a single variation of the gamified system or on multiple variation of the system via A/B testing
  • provide the final ux design solution


 Bonus tips:

  • build tiers & other small rewards for the rest of the user actions  like doing a certain set of actions on a weekly basis could result in offering a custom badge?  or maybe a free month of pro membership, which displays a pro badge on their profile which comes with it’s own set of perks like getting access to training, job boards, forums and so on.
  • build a table and assign some values for all these actions in the form of points,  xp or currency. This will help you prioritize and visualize which actions are more important then others and how often people could reach a certain level or rank. Due note that if you chose to actually display points or currency, your web-app will instantly be perceived as playful and some niches might suffer in return, so if you want to avoid this then simply use progress bars as a way to push users towards certain interactions.


UX Case Study with Gamification:

This was a simple example and hopefully you’ve gained an idea on how to integrate gamification into your UX design process and how to think when it comes to implementing it. If you would like more information then you could take a look at one of my UX case studies from my portfolio, where a gamification system was integrated from early stages of conception.

View the UX Case Study

Gradinar Razvan
Gradinar Razvan
I've been in the industry for over 9 years and as a Senior Designer I've managed to gather a solid knowledge in a wide variety of fields such as UX, graphic & web design, architecture visualization as well as earning some awards & recognitions. Nowadays I work with clients from across the world doing all of the above, depending on the project & clients need. If you would like to know more about me feel free to view the about section of this website or visit my LinkedIn profile.
Related Posts