Fresh Food Safe for Dogs
Embedded Files
This is an interactive micro-eLearning game, with a fun and memorable experience, for dog lovers or anyone interested to learn about fresh human food that is safe for dogs.
Audience: People who would like to learn about dog food safety
Responsibilities: Instructional Design, Graphic Design, eLearning Development
Tools Used: Articulate Storyline, Adobe XD, Adobe Illustrator, Audacity, Google Doc
Overview
Inspired by my own dog-parenting experience, I designed and developed this micro-eLearning game to help dog lovers learn and memorize safe foods for dogs in an entertaining way. I employed gamification theory and the "Design Thinking" methodology to guide my user experience (UX) design process. After several iterations, with feedback from peers in the LXD community, I successfully brought this micro-eLearning game to life.
The UX Design Process
I followed the five-stage process of the Design Thinking method with an agile approach, where I modified and refined this interactive project through rounds of iterations.
5-Stage Process with the Design Thinking Method
I. Empathize
As a dog mom to my sweet pup girl - Cookie, I have been learning everything about dogs since adopting her. Like many dog lovers, I cannot help myself spoil Cookie by sharing pieces of my food with her from time to time. I’ve learned that many foods we people digest fine may cause severe health problems to dogs.
When I go online to learn about foods dogs can or cannot eat, I always come across information dumping articles with either a long list of foods or a single type of food followed up with explicit explanations why the foods are safe or harmful to dogs.
.
Reading those text-heavy articles doesn’t help me remember all the food knowledge, and I often find myself repeatedly Googling for prompt food information. My dog-owner friends told me they had the same experience. We all had made mistakes by giving the wrong food to our dogs and ended up being at the vet clinics, though we’ve read online articles countless times trying to remember the food information.
I imagined there could be an interactive micro-learning game as the solution that helps dog lovers learn about and memorize the food our beloved canine pals can or cannot eat.
II. Define
With a qualitative research approach, I conducted a content analysis on several popular online resources sharing knowledge about dog food safety. Here are examples:
Through analyzing the online content about dog food safety, I found that most of the content is informative yet text-heavy and lacks engaging activities to help readers (i.e., the website users) effectively learn and remember the knowledge.
As a dog owner myself, I hope to create a fun eLearning experience to help the potential learners - dog lovers or anyone who would like to learn about dog food safety - obtain and memorize the knowledge without being overwhelmed by redundant text-heavy information.
For potential digital marketing purposes, I envision this game can be paired with the subject matter content to increase the engagement with the readers and optimize their user experience on the websites.
III. Ideate
User Flow and Low Fidelity Mock-ups
With the analysis done in the previous stages, I rapidly sketched out frameworks of main slides that consisted of the game journey and some of the visual and functional elements I brainstormed.
Based on my sketches, I had a clearer idea of what the user flow should look like. Then I mapped out a refined user flow chart that identified a complete path wireframe that a user would go through in this learning game.
User Flow Chart
I drafted out low-fidelity wireframes in Adobe XD based on the user flow, including essential elements in each phase of the game journey. Here are some features of my design decisions:
“Drag and Drop” Game. This game allows users to determine if one food is safe or harmful to dogs based on their existing knowledge about the food.
Users’ Choice. To enable users’ control in this gamified learning experience, I designed “decision points” to allow users to choose their path. They can access the learning or go straight to the game and test their existing knowledge; they decide to replay, exit, or review and reinforce the knowledge.
Game Elements. To meet my goal of creating a gamified experience, I set up flashcards, avatar selection, name input, and a performance indicator, along with adorable illustrations and dog barking and UI sound effects.
Low-Fi Wireframe Mock-ups
Text-based Storyboard
After generating the user flow and wireframes, I drafted a text-based instructional storyboard. I drew the subject matter knowledge from the online content on dog food safety and edited them into concise pieces with only essential information.
To have a reasonable scope of this micro-learning experience, I narrowed it down to a list of 10 foods commonly found in our kitchen and tend to share with dogs - five of them are safe, and five are harmful to dogs. This way, users would not feel overwhelmed by the game's length.
IV. Prototype
User Interface (UI) Design and High Fidelity Mock-ups
I gathered illustrations from Freepik and customized them in Adobe Illustrator/XD to create the graphic assets that featured the theme of this project - safe and fresh dog food. I generated a color palette with dark green as the primary color, matching a color scheme intuitively representing a fresh, healthy, and safe theme.
With the illustration assets in place, I designed and developed hi-fi visual mock-ups in Adobe XD based upon the established wireframes, adding detailed graphics and UI elements on each slide.
High-Fi Visual Mock-ups
Full Development and Design Features
After several rounds of iterations with constructive feedback collected along the way, I developed the entire project in Articulate Storyline 360. I extensively used variables and conditions to create functionalities to bring users a customizable gamified learning experience.
Flashcards
The Flashcards slide provides learners with essential and concise subject knowledge. I designed and developed two versions of flashcards - one is for players to learn the food knowledge before entering the game; the other one allows players to access after the game to review the knowledge and reinforce their learning.
Visually, I used red to feature the harmful foods info-cards, to distinguish from the primary green color for safe foods. I also kept the consistency with the same color choice and info-cards design throughout the game section.
User Customization
Enabling customization features enhances users' experience since it lets users control their interaction and determine what gets displayed on the interface. I created the customization that allowed users to choose their own dog avatar and name and the sound effect by manipulating different variables and conditions throughout the project.
Performance Indicator
By setting up a set of states and using the "number" variables and conditions, I successfully developed a performance indicator to display players' results in the game. Also, with the variables set up, I created three different endings showing players their particular results based on the game performance.
V. Usability Test
During and after the development process in Storyline 360, I meticulously tested and troubleshot challenging technical issues to make sure the critical features of this project functioned the way I wanted. With the feedback collected along the way, I refined my design and iterated and optimized programming to assure the deliverables' quality.
I set up the Exit buttons by executing JavaScript to allow players to close the game webpage when finishing up the eLearning. I imagine if this project is part of online content about dog food safety, we could set up the call-to-action UI button to link to the target web resource by using JavaScript.
Takeaways
Design Thinking Methodology
Working throughout this gamified micro-eLearning project, I exercised and advanced my learning experience and UX/UI design skills with a human-centered "Design Thinking" approach. The non-linear and agile design approach allowed me to iterate, test out, and refine the project throughout the design and development journey.
With a user-centered design perspective, I prioritized players' preferences in this eLearning game, allowing them to customize the experience and determine their learning journey.
In the future, I will keep learning and practice more UX research methodologies to guide my process and elevate my skillset in learning experience design.
Gamified eLearning Design and Development
Developing this gamified eLearning project has strengthened and advanced my skills in using Storyline 360. More importantly, I've gained a more profound understanding of using different types of variables and conditions to create complex functionalities.
Learning how to design a gamified micro-eLearning drove me to always look for a straightforward and effective solution to optimize users' journeys and go beyond simply applying game elements in designing the experience. I'll learn about gamification and aim to bring more entertaining yet impactful learning experiences.
.
.
Page updated
Google Sites
Report abuse