Design & UX
Article

6 Inspiring Examples of Gamification in Design

By Aja Frost

From the Powerball to Candy Crush to Farmville, games have permeated our lives. And for good reason: They’re fun, exciting, and rewarding. Plus, leveling up or winning a game provides us with an instant sense of gratification and pride.

So to make your UX more engaging–even addictive–try incorporating gamification elements.

To inspire you (and prove that gamification can be interwoven into any type of site or app), I’ve found six awesome examples of gamified user experiences.

1. A Video Game Portfolio

Designer Robby Leonardi took a very literal approach to gamifying the interface of his personal website: He turned it into a video game.

Designer Robby Leonardi's portfolio

Upon entering the site, you’re greeted with a welcome banner. A video game character (clearly meant to represent Leonardi) is standing underneath, and it doesn’t take more than a couple swipes of your mouse to discover that you’re animating him.

As you move through the levels of the video game–jumping, flying, and hopping into air balloons along the way–you see cartoon elements describing Leonardi’s impressive career history.

The “journey” ends on an email form. By this point, you’re so impressed and delighted that it would be hard not to hire him.

Although Leonardi’s portfolio is so fantastic partly because it’s one-of-a-kind, you can still derive inspiration from it. Consider adding visual game elements to your UI to make it more novel and awake your user’s inner child.

2. A Data Visualization Dashboard

Daytum is an elegant website that allows you to turn personal stats into charts, graphs, and tallies.

Data Visualization

For example, one user created a pie chart displaying which songs he replayed with the greatest frequency. Another is recording how many days he works each year (his records go back to 2012).

The gamification element is subtle, but the concept of racking up points and tracking progress is definitely a gamified one.

This is a great example of how you can use gamification without forcing your users to compete. Since there are no templates or limiting rules, everyone on Daytum creates their own dashboards and themes–and for that reason, you can’t compare your results or updates with anyone else.

3. Motivational Apps

Todoist

Many apps meant to help you live a better life incorporate gamification elements, but Balanced is a particularly good example.

Every time you finish a task, you swipe right to mark it as “Done.” A “just done” tag will then pop up beneath the task, and “Nice One” will flash onto your screen. Independently, these responses may be underwhelming, but in conjunction, they’re a 1-2-3 hit of positive feedback. Also, the “Done” bar is green, which is significant because green is associated with feelings of balance, energy, and health.

Todoist, a task management app, also makes good use of gamification principles.

It uses a points-based system to encourage you to be productive. When you cross off items on your to-do list, use Todoist’s advanced features, and reach self-assigned productivity goals, you receive Karma points. When you let tasks become two-plus days overdue, you lose Karma.

You might be wondering, “What can you buy with your Karma?” The genius is: Nothing. Todoist’s creators understand that accumulating points is, in and of itself, rewarding. There’s no need to offer a higher incentive.

I’d also like to point out that receiving points relies on using the app more frequently and exploring its functionalities. The best gamification elements will subtly promote loyalty and dependence in your users.

4. A Navigation Tool

In 2013, Google paid more than $1 billion for Waze–and the investment paid off, because three years later, it’s got 50 million active users.

Gamification is a huge component of Waze’s success.

If you’ve never used it, Waze provides both traditional directions and road “tips” from other drivers. For example, if you’ve got Waze open while you drive down the freeway, it might notify you “Police in 1 mile” or “Accident in 3 miles.”

Waze motivates its users to both use its app and supply information through an intricate points, rank, and badges system.

Waze Social Driving App

Every time you report a road condition or gas prices, you get six to eight points. And this is truly genius–Waze gives you points for every mile you drive with app running, incentivizing people to use it even when they already know where they’re going.

You can even get video-game-esque “road goodies,” or randomly placed loot worth a varying number of points.

Rank is determined by the number of points you have compared to the people in your region.

Apart from the satisfaction of becoming a “Waze Warrior” or “Waze Knight,” the points don’t have any application. The fact that both Todoist and Waze use an ultimately arbitrary points system shows that you can incorporate scores and hierarchies into your product without needing a real-world reward.

5. A Career Networking Platform

Say what you will about LinkedIn’s clunky UX, but the integration of gamification elements is nicely done. The site encourages you to fill out as many fields of your profile as possible by quantifying your profile strength.

It’s actually impossible to reach “100%,” which is a diabolically clever way to get users to endlessly tinker with their profiles.

LinkedIn

LinkedIn also shows you how many page views you’ve gotten in the last 90 days, how that compares to your historical views, how many “actions” you’ve taken, and how you rank compared to the other people at your company, in your network, and in your field.

By showing you these metrics, LinkedIn pits you against two entities: your professional “competition,” and yourself.

Not only do you want to rank more highly than your peers, but you also want to beat your former numbers. This aspect of the site can make LinkedIn just as addicting as, say, Facebook or Instagram.

Even if it doesn’t make sense to incorporate user competition within your product, you can almost always find a way to incorporate self-competition.

6. A Blogging Community

There are tons of blogging sites out there; Medium has always primarily differentiated itself by its clean, monochromatic aesthetic.

However, look closely, and you’ll realize Medium is also unique in the way that gamification principles have been woven into its fabric.

Medium Stats.

There’s the now-traditional ratio of followers to those you’re following, which is the Internet’s lingua franca of status. In addition, each user receives detailed analytics on his or her posts. Not only can you see how many total views, reads, and “recommends” you’ve gotten in the last month, you can also see views, reads, and recs for individual stories.

Medium even helpfully breaks down the percentage for you: X percent of the people who clicked on the story kept scrolling.

These metrics are an effective way to drum up enthusiasm for content production–but the site’s creators have also found a way to gamify content digestion.

Every comment on a story can receive “hearts” of approval; if your comment gets the most hearts, it’s shown first. Since only a limited number of comments are displayed, there’s a clear incentive to leave the most popular note. Responses to responses can also be hearted. Furthermore, readers can publicly highlight the snippets of the story they really like. If the same snippet is highlighted multiple times, it turns a special color and the honor of “Top Highlight.”

If you’re interested in reading more about gamification, I recommend the following articles:

  • http://exclusive-paper.com JanySmool

    I absolutly agree with you! Such things are very important for your web sites! Also, I think that very important to have a good content and actuality topics! But how do you thing, is design is more important!? I read a lot of informtion about design trends and needs, and a lot of them use PHP platform! Is it good?

  • http://www.infoprolearning.com/ Rashmi Verma

    Thanks for sharing such useful information. Totaly agree with you we should use gamification in designing. If we implement gamification correctly it can have a huge impact on user loyalty and engagement.

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Design, once a week, for free.