A Visual Presentation Game
As a graduate student at Bloomburg University, I created a prototype for an online collection game. Using gamification concepts, I designed a lesson to teach visual design principles and best practices for applying visual elements when creating content. In a scenario-based format, the learner explores visual elements such as visual hierarchy, layout or rule of thirds, images, font, and color.
I used the GameLearn platform (Emeraude Escape) to mock up the first of five gaming levels, Visual Hiearchy. The goal of this gamification project was to explore how gaming principles could be used in the design and delivery of instruction to make it a more active learning experience.
An overview of this project is provided below.
Visual Presentation Game
Project Details
Applying Gamification Techniques to Teach Visual Design Concepts
The goal of this gamification project was to use gaming concepts such as storytelling, instant feedback, acheivement badges, and different levels of progression to make learning a more active and engaging experince for the learner. As part of the design process I created several documents to plan content, structure, and scenarios. I then developed a prototype for the first of five levels.
Visual Presentation Game Goal: In a series of 5 levels, the learner needs to collect and assemble 7-10 clues for 5 visual design principles hidden in the game. These principles are visual hierarchy, rule of thirds, images, font, and color. As each clue is found on the levels and challenge questions are answered correctly, badges and pieces to a puzzle are collected. After collecting all the puzzle pieces from each level, the player can complete a well crafted visual display and win the game.
Learning Outcomes:
Visual Presentation Game Level 1: Visual Hierarchy
For the first level of the game, I designed the clue cards for the five visual hierarchy techniques using Adobe Illustrator. Three of these are shown here:
Placement
Typically, Western readers’ eye movements go left to right or top to bottom. You will want to consider this when creating a starting point for the viewer.
Image
Images are typically something the viewer will settle on first. They are more concrete and faster to process than text, making content more engaging.
Visual Cues
Visual cues such as arrows or dashed line that connect objects can convey motion and also helps direct the viewer's eye.
Images: © 2026 Marybeth Koon
Mini Tour of the Visual Presentation Game
In Level 1: Visual Hierarchy, the game story focuses on an office worker named Jan who must find five clues about visual hierarchy needed to create an important presentation. The player of the game, or learner, helps Jan by clicking on different objects in the office to reveal and gather clues and answer challenge questions.
The interactive slides, below, provide an overview of the visual hierarchy level. Click the slide arrows (
) advance to the next slide.
Overview of Game Story
In level 1, the learner enters an office building and is greeted by an office worker named Jan who needs help finding information on how to create visually engaging presentations by the end of the day for a very important meeting.
Jan is new to the office and does not know where her coworker put the files she needs to design the slides effectively. Under a time crunch, she needs all the help she can get to find these documents. For future iterations of the game, I had considered adding a countdown clock to heighten the challenge and suspense.
Description of Game Play
The learner is provided with an introduction to the Level 1 challenge to help Jan find information on visual hierarchy. Several clues are hidden througout the office and are revealed by clicking office supplies and furniture. There are no constraints on the player to find clues in a certain sequence. They are free to explore their surroundings, answer the challenge questions, earn badges, and collect puzzle pieces in any order. Once the learner successfully completes these steps, they can advance to Level 2.
Level 1 of the Visual Presentation Game introduced visual hierarchy concepts.
Learning Goals of Game
When the learner clicks on certain objects in the office, clue cards are revealed with a mini lesson on each visual hierarchy technique. It is not apparent to the learner which objects contain the clues, so they need to do some searching. The goals for the learner are to: 1) Identify 5 visual design principles (Level 1 focusing on visual hierarchy);
2) evaluate successful implementation of visual design principles; and 3) apply visual design princples in the creation of visually enhanced presentations. Each lesson contains practices quizzes to prep them for the challenge questions.
The player must collect five clues about visual hierarchy by clicking on different objects in the office.
Challenge Questions
In addition to the mini lessons with multiple choice practice quizzes, challenge questions are made up drop-and-drag functionality so the learner can apply princples and construct the visual hierarchy on their own.
Use the scroll arrows to advance throug each slide. Click on image for a enlarge image.
Each visual hierachy concept has a corresponding question challenge to reinforce concepts.
Additional Graphics for Level 2: Rule of Thirds
I worked on some additional graphics in preparation for building a prototype of Level 2: Rule of Thirds:
The rule of thirds is often used to create dynamic imagery rather than centering visual elements which can make them seem static.
Applying the Rule of Thirds, Option 1: Place the most important or dominant element of content along any one of the lines.*
A 3x3 grid is used for the rule of thirds. There are 3 sections, vertically and horizontally, resulting in 4 intersection points and 9 cells.
Applying the Rule of Thirds, Option 2: Place the most important elements at one of four intersection points, called power points.*
*The woman and cat images were obtained from freepik and modified by adding red grid to demonstrate Rule of Thirds placement