EdTech: End-to-End Mobile App 2025
9 Weeks
Sole UX Designer
Figma, Miro, Zoom, Photoshop
Creature Quest is an educational gaming app that uses augmented reality to create real world interaction - inspiring kids to explore the outdoors, and form gaming communities within their own neighborhoods.
Designed for kids ages 8-13, gamers learn about species native to their corresponding region and collect points according to the animals’ conservation status. The platform offers multiple modes of play and allows gamers to customize their experience and interact with both in-person and online friends.
Features include: Augmented Reality and Mobile Integration; Multi-Level Gaming; Profile Customization; Online Store and Trading Post; Digital Trading Cards and Inventory; In-Game Currency; Chat and Team Play
Gaming for the real world
The Problem
Kids’ outdoor play has dramatically decreased over the last 40 years, and 55% of parents believe their children are not getting enough time outdoors according to a recent survey by CBS News. What’s more, adolescent depression is on the rise nationwide. In a recent study, researchers found that “between the ages of 12 and 16 years, children’s physical activity levels began to decline, while increased sedentary time was associated with more depressive symptoms.” This is in contrast to the “53-hours per week” that kids 8-18 now dedicate to screen time and social media, according to the Kaiser Family Foundation.
Unfortunately, there are no easy solutions. Mobile app and screen time restrictions are inconsistent and therefore inadequate. Plus, they don’t guarantee outdoor play. And forcing kids to go outside can serve as a form of “punishment” which defeats the purpose. Many parents are anxious to bridge this standoff but have expressed the need for kids to come to it on their own. How can they encourage kids to want to go outside?
Research
Competitor Analysis
User Interviews
Personas
Affinity Mapping
Business Goals
Feature Set
POVs/HMWs
Design
User/Task Flows
Sitemap
Logo Design
Style Guide
Moodboard
Low/Mid/High-Fidelity Wireframes
Delivery
Prototypes
Usability Testing
Iterations
UI Kit
Final Product
The Research
Persona
Competitor Analysis: I compared the strengths, weaknesses, target audiences and features of three different gaming products, including Pokemon Go, Minecraft and an educational game called Nature Quest. While all three offered kids some level of creativity, challenge, socialization and educational content, none of them combined all of those features. And while two of the three encouraged outdoor exploration, they targeted very different audiences, and didn’t fully meet the needs and expectations of kids and their parents.
User Interviews: I conducted both in-person and remote interviews with a total of five kids (ages 8-13) and three parents to determine what games kids enjoy playing, why they enjoy playing them, and what concerns and expectations parents have concerning their children’s gaming habits.
Persona: My persona is based on a 12-year-old boy who describes himself as a “gaming expert.” He is fluent in gaming terminology, and loves the social aspects of gaming. He says strictly educational games are “boring” and not challenging enough for older players.
Affinity Mapping: Using data from a total of eight interviews, I mapped out goals, pain points, wants/needs, gaming priorities, and desired features and discovered a surprising amount of overlap between what kids and their parents want and need from gaming products.
Business Goals: I analyzed the needs from the business, user and technical perspectives and determined that they shared three intersecting goals: a user-friendly, accessible platform, a form of in-game currency to buy, sell and trade with other players, and limited technical constraints that would inhibit the above-mentioned objectives
Feature Set: Must-have features included profile customization, augmented reality, multi-level game play, in-game currency, and player chat. Nice to have features included game rewards and a virtual sidekick. Surprising and delightful features included a group or “team” mode of game play and a feature that could come later included offline progression.
POVs/HMWs: I explored ways to make educational, community-centered gaming more attractive and engaging to pre-teens and older kids, who expect features such as storylines and narratives, competitive game play, and personal customization.
Affinity Mapping
Through my affinity mapping and other research, I discovered a number of parallels between the wants and needs of young gamers and their parents, including:
Parents and kids both love online games for their customization and creativity
Parents worry about online safety and privacy in addition to kids’ overall mental health around game play
Parents wish online games were more educational overall, and are enthusiastic about products that could also encourage in-person socialization and help foster a sense of community
Kids are drawn to games that are challenging, but not impossible, and include different levels of skill play
While younger kids are more likely to play strictly educational games, older kids lean towards game play that fosters socialization and competition
Insights
The Goal
Parents want educational, community-centric games that encourage their kids to get outside. Kids want creative, challenging and often competitive gaming experiences that feature storylines and interactive play. How to best combine gaming with outdoor play so that parents – and kids– are both satisfied?
It starts with identifying intersecting goals:
Desire for customization, creativity and competition
Necessity of educational content that is also entertaining and compelling (in the form of a storyline or narrative)
Ability to socialize and interact with friends and neighbors
Need for multiple levels/tiers of gameplay
“The best kind of games involve stealth learning”
-Diana D., Parent
Logo Design, Style Tile and Sitemap
The Design
User/Task Flows: I created three possible task flows, including starting a quest, customizing your avatar, and viewing a “creature card.” These flows were chosen because they demonstrate the main objectives of my research: providing multiple levels of challenge; allowing users to customize their experience, and combining educational content with traditional game play
Sitemap: The informational architecture illustrated in the sitemap reflects the simplicity of my interface. There are a total of five menu items, including: dashboard, settings, profile, quest, and inventory (Settings was added after several more rounds of research).
Logo Design: The logo went through several iterations, and was inspired by my desire to include an animal that could stand in for both the full logo and lettermark. The font itself acted as a catalyst for the final design, and fit the overall look and feel of the site.
Mood Board: I created a mood board that reflected the bold, bright colors I wanted to convey, along with the simple, uncluttered interface. My goal was to present the backgrounds as flat illustrations, in contrast to the striking photographs I used for the actual animals.
Style Guide: Several of my users mentioned that they liked the “bright colors” of their favorite online games, but wanting to keep the game true to its natural roots, I chose Earth-based colors of brown and green and complimented them with splashes of orange, red and yellow. These are mostly conveyed through simple, flat backgrounds and shapes. Aside from the logo, the header and text font was chosen for its simplicity and accessbility, as well as the various weights it provided. Finally, the icons and other components reflect the natural, rugged, outdoors theme of the site.
Mid-Fidelity Wireframes
Early mid-fidelity wireframes were created in Figma to walk users through the three task flows, including “View A Creature Card” illustrated here. I eventually added two more menu items, and changed the card shuffle to a carousel, with user input guiding the design decisions I made in regards to what components to include and when to introduce them. I eventually changed the name “Trading Post” to “Inventory” (a more familiar gaming term) but kept the iconography of a multi-directional sign. I also added several different categories to the creature collection, including “Threatened” and “Invasive.” The lettermark in the upper left was also eventually swapped out to reflect the lettermark of the final logo.
High-Fidelity Wireframes
High-fidelity wireframes were created as the final step before prototyping and usability testing. These wireframes represent screens from the task flow “Customize your Avatar.” Instead of customizing your avatar according to clothing and accessories as in many other popular games, these avatar customizations reflect your personality! In this way, users who consider themselves “fast” can be a Cheetah, or a Peregrine Falcon - the fastest animals on Earth! In this way, I was able to successfully combine an educational element with a “Must-Have” feature (customization).
Key Findings/Observations:
Overall, users really liked the bright, flat colors and illustrations, and the simple, clutter-free interface. They especially enjoyed the ability to customize their avatars in accordance to their personality, and to select quests in different regions. The language and terminology, including the informational architecture, was familiar and expected for the majority of users.
The first task flow (Begin a Quest) was the easiest to navigate, with the fewest number of errors. Several users paused on the “Select Your Region” screen, as they were unsure of which region to click on. All users appreciated the start screen for the North America Quest, however, and were eager to check out the items on the tool bar. Task flow number two (Customize Your Avatar) was equally easy to navigate. The only problem it presented was the first screen. The more experienced users knew to click on “Profile” to locate their avatar, but casual and novice users selected other options first. Once on the profile screen, users easily navigated to the animal avatar for the "Peregrine Falcon” which was indicated in the task flow. Task flow number three (Select a Specific Creature Card) posed the most complications for users, with an average time of 45 seconds, and 1.4 errors. The youngest user (age 8) was unsure what the term “inventory” meant. More experienced and older users knew to click on “inventory” right away, however. The next problem this task flow presented was the size of the preview cards, with three out of five users reporting they had trouble reading the smaller font. All users attempted to click on the actual card to enlarge it to full size. At least two users tried to click on the card for the Gray Wolf, as they assumed the “Devil Dog” - which was indicated in the task flow - was a kind of canine, suggesting those users are relying more on visuals and not actually reading the text.
Usability Testing: Prototypes were created in Figma and usability testing was conducted with five participants remotely and in-person for a total of three task flows.
Data collection included: recorded sessions and notes; observation and follow-up questions; qualitative feedback.
Success metrics included: Total time to complete the task; number of “errors”; scale rating from 1-10 for ease of use (with 10 being the easiest).
Results were as follows:
Task Flow #1: Begin a Quest
-Average Time to Complete Task: (:23)
-Average Number of Errors: 0.2
Average Rating: 9
Task Flow #2: Customize your Avatar
-Average Time to Complete Task: (:26)
-Average Number of Errors: 0.6
-Average Rating: 9
Task Flow #3: View a Specific Creature Card
-Average Time to Complete Task: (:45)
-Average Number of Errors: 1.4
-Average Rating: 6.2
Delivery
Figma Prototype
Iteration #1: Add a drop-down menu of countries to each region
Iterations
Iterations from usability testing included the following:
Add a drop-down menu to the region buttons to clarify countries included and to aid users in selecting the appropriate region
Enlarge the size and scale of the Creature Cards in both the carousel and full-size screen
Make the Creature Cards in the carousel “clickable” to enable easier access to the full-size version
UI Kit
My UI Kit included a color palette of primary, secondary and neutral colors, logo design and lettermark, specialty fonts for the logo, and a san-serif font for the headlines and body in various weights and sizes.
Also included is enabled, active and disabled button states, menu and tool bar icons, and components for the Creature Cards, including status bar indicators, environmental icons, and a Creature Coin icon. Lastly, I included an avatar icon, illustrated in two different sizes.
Reflection/Next Steps
Every new technology creates real opportunities and perceived barriers. When television came along, people predicted the end of radio. When streaming came along, people predicted the end of television. And yet, all of these things still coexist because we were able to adapt to users needs and expectations. Online gaming is no different. We simply need to learn to adapt to kids needs and expectations. Kids want to learn, and they need to be active (preferably while getting some much-needed Vitamin D). Instead of gaming being a barrier to the outdoors, what if it became an opportunity to teach kids about the outdoors? What if we could combine all the things kids love about online gaming, with all the things parents need for their kids social and developmental growth? This was the inspiration behind “Creature Quest.”
Many strictly educational games are aimed at younger users, and games for older players are not educational in the traditional sense, nor is that their mission. Older kids (between the ages of 8-13) value creativity and competition. They value socializing with their friends and other players. They enjoy being challenged. I kept all of this in mind when developing this end-to-end mobile app, which is an educational version of “Pokemon Go.” Instead of rote learning, kids are learning in the context of gaming, with all of the familiar elements that make online games so popular.
My next steps would be to further develop my existing task flows, in addition to adding new task flows to include user chats and team play options. I would build out the profile customization page by adding more avatar options, attributes and creative design features. I would solicit feedback from my users about the ways they interact with online assets such as the in-game currency, digital trading cards and items found in their inventory. Next, I would fully develop the regional missions and flesh out the creature categories, including endangered, threatened, common, and invasive species. Lastly, I would speak to parents and digital safety experts about the best available features to protect kids online.
The Final Product
Task Flow #3: View a Creature Card
Set-up: View the Creature Card for the endangered Devil Dog (also known as the Eastern Hellbender)