Gamification in web design

David Brooks
David Brooks

In recent years, ‘gamification’ has grown to become a popular buzzword across many disciplines and industries: from your online shopping to tax declarations, digital experiences are becoming increasingly ‘gamified’. This broad application of the concept results in debates about the terminology itself. 

Generally, gamification is defined as the use of game design mechanics in non-game applications. These mechanics are the devices that make games so engaging, and even addictive. Common game mechanics include simple behavioural motivators like competition or reward. They are the stimuli that drive us to return for another round of monopoly or candy crush saga. They leverage individuals’ natural desires for socializing, learning, mastery, competition, achievement, status or self-expression.

Continue reading

When applied correctly, these ‘drivers’ can be powerful tools to increase user engagement in web design. The benefits are vast, including the generation of a positive user response, as well as the facilitation of user comprehension of digital content.

Evolving development methods and tools, such as WebGL and Canvas allow web designers to integrate these into user journeys and interfaces ever more easily and seamlessly.

Let’s look at some examples

Challenges and storytelling: SPENT

‘SPENT’ is a website created by Urban Ministries of Durham (UMD) to raise awareness and money in order to fight poverty in deprived communities. Instead of relying on a typical imagery-based approach to make viewers feel pity or guilt, it makes clever use of storytelling and branching choices to challenge users by making them active participants in a scenario-driven tale of poverty.

Participants are placed in the shoes of a typical individual who relies on UMD support. The design also applies other mechanics like consequences, loss aversion and social networking to really immerse users.


In just 10 months after its release the game managed to raise $45,000 from 25,000 new UMD donors and received news coverage from CNN and ABC. In 2014 it was reported that almost 11 million people had spent an average of 11:46 minutes on the site.



Badges and achievements: Google News and Team Treehouse


Google News Badges

Google News Badges

Team Treehouse achievements

Team Treehouse achievements

A common, but difficult mechanic borrowed from video games are badges or achievements. Letting users acquire rewards for doing certain things on a website is ought to provide them with a sense of progression and thus keep them coming back. However, this is only effective if users value the rewards they receive.


In 2011, Google released Google News Badges in the US in an attempt to motivate users to read more news articles on topics which they would not normally engage with. With limited success they have largely remained unheard of. There was neither challenge in attaining them, nor value in sharing them.


An achievement system which I personally found engaging was the one used by Team Treehouse, an online service that teaches users to code. Their achievements feel challenging to earn and worth sharing. They provide users with a real sense of progression in an area where the learning curve is quite steep and can feel off-putting.


Combination of multiple mechanics: Google Interland

In 2017 Google released ‘Interland’ (Be internet awesome), a web-based gamified online learning platform to help kids learn key lessons about digital citizenship and safety.


Since this example aimed to engage kids aged 13 to 18 who regularly play video games, it made use of a broad spectrum of game mechanics, making it more of a game than a traditional online learning intervention.


Interland works through impressive advancements in browser capabilities, especially those of its own, Google Chrome, to make a website that essentially works like a full scale game to effectively hold the attention of kids.


From storytelling to rewards, Interland makes meaningful use of a wide array of game mechanics conveyed through a striking 3D-style user interface, acting as the ‘glue’ to tie it together into an interactive narrative that successfully entices users of all ages.

“To help kids learn these lessons in a way that’s fun and immersive, we created an interactive, online game called Interland. It’s free and web-based so it’s easily accessible by everyone, and most importantly, it’s in a format kids already love.”
Pavni Diwanji, Google VP of Engineering for Kids and Families

Image and quote source:


These were just a few examples of popular gamification techniques and their various applications. Thanks to the growing popularity of the subject, designers who want to learn more, will find an abundance of information online, ranging from blogs dedicated to gamification to online courses on their use in different contexts.

One such resource was designed by Andrzej Marczewski, who creatively highlights the vast number of established mechanics to choose from by displaying them in his ‘Periodic Table of Gamification Elements’.


I believe that, while these elements can act as highly beneficial techniques, they should not be viewed as a magic ‘one-size-fits-all’ formula to boost user engagement. On the contrary, in order to be effective, gamification in web design has to be applied with careful consideration. As web designer and blogger Peter Steen Høgenhaug put it:

‘We are not looking to transform our products into games. Instead, we are trying to learn from an industry with an extremely engaged audience. We shouldn’t blindly use these theories; rather, we should adapt them to our needs and to the platforms on which we deliver our products, without compromising with the quality of our products.’


Websites Referenced:

Sign up for more Miramar Insights

You'll receive expert analysis on trends impacting the b2b sector. We'll help you stay ahead of the curve.

Like what you've read? Let's get started

Tell us what you need and one of our experienced team will get straight back to you to discuss your objectives and how we can help you achieve them.

Chat to us

Recent blogs