Gamification: Universi-tea Bingo


Project Overview

  • Responsibilities:

    • Instructional design

    • eLearning development

    • Gamification

  • Target Audience:

    • Sales team members
  • Tools Used:

    • Articulate Storyline

    • Adobe Photoshop

    • Adobe Animate


Problem & Solution

I created this concept project based on a tea business I was a team lead for. Onboarding for new hires was not interactive as it was just a binder the team member had to read. It also required a team lead or store manager to lead the trainee through each section of the binder.

My solution was to convert the onboarding training to an eLearning design. Included in this design were gamification options for assessments and practice. Including gamification in the training could improve engagement with the new team member and increase retention and transfer of information onto the sales floor.



I used the game-based learning theory when designing this project. Game-based learning (GBL) uses our desire to play in combination with the learning goal of an activity. GBL has can increase motivation, which in turn can increase the level of engagement and transfer between the learning activity and on-the-job performance.

The learning goal for this game was for learners to be able to identify a tea correctly at least 80% of the time, given the basic characteristics of that tea. This represents one branch of the mind map used to align individual learning goals with the learning objective of the onboarding.

In a store at any given time, there are 52 types of teas sold. Each tin has characteristics and history of the tea printed on the back as a job aid. This is the information used in the onboarding program to teach the learners about the various teas. Since there are so many types, the top 24 selling teas were built in to not overwhelm the learners. Having a high level of knowledge on the best-selling teas will give the learners a good start when on the floor selling.

The characteristics of the teas were used to mirror what information the sales team receives from customers or seeks from customers to make a sale. A customer will come in with an idea of what they want or with no idea, and the team uses probing questions to determine what flavors, ingredients, and other characteristics the customer is looking for. This allows the team member to find the best matching tea to sell to the customer.

After analyzing the learning goals and learner characteristics, I started designing the game and gameplay. I used the company brand style guide to determine the aesthetics of the game. The introduction to the game and the main game screen orients the player towards the game and how to play it. On top of that skeleton, I added visual effects to increase the professional appearance of the game.

Adobe Animate

To complete the design idea I had for this challenging project, I needed to learn to use Adobe Animate. I wanted to include a moving bingo tumbler in the game as a fun button. I went through a few tutorials on Animate to learn how to use the features before hopping in on my bingo tumbler idea.

I created the tumbler in Adobe Photoshop as four separate parts – the base, the handle and dowel, the wire cage, and the bingo balls. After making each part, I imported them into Adobe Animate. The first animation I completed was the handle and wire cage. I locked them together and moved them as vertical switches back and forth. With the bingo balls, I moved them horizontally and vertically.

I think this was the hardest part of this project. I had never used Adobe Animate before and it took some time to get a grasp on the basics to create this tumbler. I am looking forward to using this more in the future.


Layers were used to make this game work; I needed to create 24 separate question layers and a victory layer on top of the main screen. This allowed me to have the different bingo quiz questions with one free space. I kept the design the same for each layer, and just changed the tea characteristics and the possible options.






The interactions required many triggers to make work together and with the layers correctly. Each interaction had a trigger: selecting a correct answer, selecting one of two incorrect answers, blocking additional clicks on answers once one was chosen, etc. There were 37 triggers on the main game page and 1 on the opening page. Each tea layer had 19 triggers, and the victory layer just 1. Total, I set up 495 triggers to get the game working. A lot of organization kept me from losing track of where I was with each step.



Want to see more?

Experience the project