Blog Post

Game on

Apply these 5 gamification principles to boost user engagement on websites and apps
4 min read

When COVID-19 social distancing began, I challenged myself to exercise at least 3x per week. I use Google Fit and Strava to track steps, runs, rides, and other activities, and I'm a huge fan of these apps! Google Fit has highly automated tracking activity that automatically senses runs, walks, and cycles and reports it in the form of "heart points" and "move minutes". Over time, a complete picture of activity emerges, and helps motivate me to finish the week or month strong if I'm slacking. Strava pairs recording activities with a community vibe for following others and sharing activity, pace, and distance. They hold monthly challenges like completing a 5km run, a certain number of weekly workouts, a half marathon, etc. Knowing distance times and comparing them to those I'm following definitely encourages me to get better over time.

Both apps heavily utilize gamification, which Tubik Studio defines as "the technique of exerting game mechanics into websites and mobile applications". In essence, it's about incorporating challenges and rewards into your app or website to make it more fun and easier to comprehend. They go on to list these 5 game mechanics that are applied to user experience design:

  1. Confront users with a Challenge that motivates people to take action
  2. Use a Points system to give users feedback on their progress, and site owners a way to measure engagement
  3. Award Badges and Stickers as virtual rewards attained after completing challenges or reaching set levels of points
  4. Rank participants using Leaderboards
  5. Creating a Journey entails onboarding to explain how to interact, disclosing features over time (vs. all at once), and showing progress

These principles are used in nearly all mainstream digital products. Think of expanding your LinkedIn contacts list, adding business reviews or photos on Google Maps to earn Local Guide points, or earning trophies on various fitness apps. Gamification plays a HUGE part in enhancing the core experience, and there are plenty of cases that point to higher conversion rates, recall, and ROI from gamified activities.

Since the early days, we've looked for ways to incorporate gamification into Circuit. In a content-rich experience like a virtual tour, it helps users by providing more feedback, a sense of progress, and subtle rewards for completion. Here are a few examples of the above principles in action.

Creating an engaging virtual tour Journey using gamification principles

To start with, we recognize that there is a lot of content to explore, so we use the Journey principle to break it down into logical groupings, as "Campuses" and "Areas of Interest" below. Users can also see how large (in scenes) each tour is, so they know what to expect when they get inside. The tours also inherently serve as Challenges - complete what interests you and learn more.

Next, before interacting with 360º content, the overlay below tells them they can use their mouse, keyboard, or gestures to pan around 360° content. This is progressive onboarding in action to improve usability.

It isn't always obvious when you're looking at a 360º image. This tutorial overlay helps.

While viewing 360º scenes, the indicator bar in the guide card moves rightwards as visitors cycle through hotspots, showing progress through the scene. Checkmark icons appear after hotspots have been viewed, serving as Stickers of sorts.

Hotspot indicators and checkmarks

Visitors shouldn't have to track what they've already seen and what is left to view. Progress bars show unfinished tours, a simple checkmark shows completed tours, and a flag tells them what they are currently exploring. Button text also reflects the status - Start, Resume, or Revisit.

Homepage showing progress states of various tours (Conestoga College)

Finally, after completion of a tour, a simple "Well done!" message overlay appears and presents un-viewed content.

When all the scenes in a tour have been completed, visitors receive a "Well done!" message with other tours they can visit.

These are just a few examples of how we are integrating gamification principles into Circuit to enhance the user experience. Your case will be slightly different, as you fine tune these elements to align with your brand and audience. Design it right, and the outcome is almost certainly going to pay off with higher engagement, completions, and conversions. You can imagine how to add fun and playful elements that delight your users!

Latest Posts