Mew-nique Markings
A Genetic Game of Feline Fur Patterns
This eLearning game uses familiar cat coat color traits to teach genetics skills. It includes catvatars (cat avatars), simulates a dating app, and offers a drag-and-drop kitten scenario for interactive learning. Originally developed for a non-majors biology class, the game benefits anyone curious about science.
Audience: Non-major undergraduate students in a genetics or biology class. The science-curious public and cat breeders would also benefit from this eLearning course.
Responsibilities: Instructional Design, eLearning Development, Visual Design, Creative Writing
Tools: Articulate Storyline, Adobe Illustrator, Adobe XD, Camtasia, ElevenLabs, PowerPoint
The Problem
Genetics is central to fully understanding biology, but the topic is challenging for many students. Concepts are hard to grasp, and the examples used (pea plants) are not engaging to some students. Learners lose interest and struggle in class, resulting in a poor outcome.
The Solution
Studying genetics with an animal students know well, like the house cat, can increase engagement and knowledge retention. Adding games can boost engagement and retention further, especially for non-scientists.
I created a gamified e-learning experience that instructors can use as a module on their own. It can also supplement in-person learning. The first section of the training builds a learner's knowledge, and the second part has the learner apply their knowledge and skills using cats of their choosing in an eLearning game.
The Process
The ADDIE model inspired my process and included the following steps:​
​
Needs Analysis & Learning Objectives
The Kansas City Art Institute hired me to develop a science course for art and design students that improved critical thinking and problem-solving and aligned with the student learning outcomes of the Liberal Arts Department. Since my background was in molecular biology and genetics, I wanted to build a course around those topics, but I knew the course would challenge non-majors. It had to be creative, fun, and appeal to art students. I developed learning objectives for the semester course and learning objectives for each class. You can learn more about my course, Unraveling Inheritance here.
​
One of the modules in my course was cat genetics. I decided to use cats as a model to explain the concepts since the students could relate to this animal, and many learners had cats as pets. I developed in-person, blended, and online versions of the cat genetics learning experience. This page describes the eLearning game I developed called “Mew-nique Markings, A Genetic Game of Feline Fur Patterns.”
Here are the learning objectives for the learning game:
​
-
Distinguish between dominant vs recessive traits
-
Predict the results of a simple genetic cross
-
Determine if a kitten is the offspring of two cats
​
Storyboarding
I created text-based storyboards to capture my ideas in writing and to guide my development. The storyboards included on-screen text, a list of media, programming, animation, and navigation notes.
​
A sampling of the storyboards is below.
Visual Design
After creating the storyboards, my next step was to develop the visual design. I chose a web-friendly font combo and used Raleway for the Headings and Roboto Light for the body text. I picked an orange, gray, and black color palette that complimented the fur colors of the cats used in the eLearning.
​
I created designs for the buttons and developed a style guide to help my development process:
I created mockups of the major slides in Adobe XD and iterated on my designs to improve them. An example is below:
I sourced vector graphics for the cats from Freepix. I modified the colors and patterns in Adobe Illustrator to fit the examples used in my learning experience, one of the most labor-intensive parts of the development.
Evolution of Mochaccino
Development
I knew my learning experience would have layers, states, triggers, variables, and conditions, so I chose Articulate Storyline to develop the eLearning.
​
There are three parts. The first part, “Learn Genetics,” introduces basic genetic concepts to the learner. For some students, this could be a refresher. It includes a TED-Ed video, a video I created using Camtasia with text-to-voiceover narration from ElevenLabs, and a custom-designed click to reveal terms and definitions used in genetics.
After completing all three items in Learn Genetics, learners take a quiz. Successful completion will unlock the other two parts, “Cat Breeder’s Central” and the Mew-nique Markings game.
​
Cat Breeder’s Central features a cat enthusiast named Geoff and his eight kitty companions. Clicking on one of Geoff’s cats tells learners about the cat trait and how it is inherited.
After learning about genetics and cat traits, the learner plays the game. The first step is to choose a Catvatar (a cat avatar) among three female cats.
The next step is to examine the Catvatar for the traits covered in the first part of the course using a tab interaction quiz.
If the learner answers correctly, they can choose a cat date for their cat in the Mew-nique Markings dating app simulation. Swiping left gives learners another profile, and swiping right chooses the male cat, like the Tinder dating app.
After choosing their date, the learner examines the male cat for the traits covered in the first part of the course using another tab interaction quiz. If the learner answers correctly, they advance to the last phase of the game, a drag-and-drop interaction. Kittens appear one at a time, and the learner must decide if their catvatar and date could have created that kitten by dragging them to the cat bed or cat shelter box.
At the end of the game, learners can choose a different date, pick a different catvatar, or exit the game.
Prototype and Feedback
I developed a rough prototype with all the major features. Learners liked the funny cat conversations, and the cat dating app (see above) and appreciated the subtle touches that added to the learning experience like the cat paw animation on the splash screen.
Since this was my first Storyline project, I expected bugs like triggers that didn’t work. I also anticipated reworking an interaction and clarification of the learning experience. Learner feedback included more detailed instructions, fixing triggers that didn’t work, simpler, streamlined interfaces, and redesigning interactions so they were not too easy. One learner figured out a way to cheat! Learners wanted the ability to go back and make different choices and an easier way to get help.
​
I fixed all the bugs and redesigned some of the interactions. A few before and after screenshots are below:
Genotyping and Phenotyping Quiz
Before
Two tab interface which was clunkier and made cheating easier. To get help, learners needed to navigate through several steps back to Cat Breeders Central.
After
Streamlined interface that minimized cheating. To get help, learners just need to click the question mark to get trait-specific information.
Kitten Drag and Drop Interaction
Before
Busy screen with no way to get help during the interaction
Less cluttered screen and a way to get hints by clicking the icon in the upper left corner. Kittens appear one at a time instead of all at once.
Results and Takeaways
I loved developing the personalities and bios of the three catvatars and the five cat dates. The learning experience lets learners choose their genetics adventure with 15 possible paths and 15 different custom conversations. Personalization required tracking learner responses with variables and using conditions and triggers to implement the different paths through the game.
​
Modifying the colors and patterns of the cat vector graphics was a lesson in patience and took time. I also had to learn new skills in Adobe Illustrator. Getting the colors and patterns correct according to genetics was crucial. Not modifying the cats would have confused learners.
​
I also enjoyed developing Mew-nique markings, the cat dating app. I found myself giggling at the silly profiles I wrote. They added a touch of humor to the learning experience consistent with my working style.
​
Mew-nique Markings was my first project in Articulate Storyline, and I chose a challenging one that developed my skills! I started this project with no experience, and in just a few months, I’ve gained the ability to program advanced features in Storyline.