AI Powered App to Teach Kids STEAM
- Hope Myers
- May 9, 2024
- 13 min read
Updated: Jun 17, 2024
Key Words: STEAM education, user research, wireframes, prototyping, user testing
Highlights:
Company:
Erandi Aprende is an Ed Tech startup for girls, by girls. We seek to close the gender gap in STEAM by creating an AI learning companion app to provide personalized learning experiences that foster creativity, critical thinking, and inclusion, focusing on STEAM subjects.
Founded in Mexico and focusing on the Latin American and US markets, Erandi Aprende is a bilingual app. A startup in the pre-seed stage, the beta app was launched in March 2024 and will be publicly available on the iOS and Android app stores in August 2024.
Duration:
September 2023 - Present (10 months)
My Role:
As the UI/UX Designer (freelance) my main responsibilities are:
User and market research for education and design solutions
Creating wireframes, mockups and prototypes for the mobile app and website
User flows and scripting for the onboarding, chat, and activity structures
Writing and conducting user surveys, A/B testing, and moderated usability studies
Brainstorming new features and iterating designs for existing features
Working with a small team I wear many hats and also help with marketing, customer service, and investor reports.
Project Summary:
Erandi Aprende is a bilingual (English & Spanish) AI powered app that helps kids learn STEAM. Erandi is transforming screen time and STEAM education by sparking kids’ imaginations, encouraging creative thinking, building their confidence, and igniting love for learning.
Our current product consists two main components. The first component is an open ended chat where users can type their own questions or select from a list of preset questions to ask Erandi, their AI learning companion. Erandi’s responses are tailored based on their age and interests selected in the onboarding process, and tie any questions kids ask back to STEAM related topics.
The second component is Erandi’s inventors workshop. Also built as a chat interface, in the inventors workshop Erandi guides kids through the engineering design process to imagine, design, and create their own inventions. The inventors workshop uses a mix of preset messages and AI generated responses to structure and tailor the learning environment. Kids are encouraged to think of their own ideas for inventions and designs, but can also ask Erandi for examples and help implementing. The user interface includes a roadmap to show which stage of the design process the kid is currently in and allow them to switch stages, as well as a summary and check list of the features that their invention has.
Still in the beta phase, we are currently undergoing user testing for these components. Feedback from early testing has helped us improve interest selection, preset prompt options, STEAM dictionary feature, Erandi’s response length and backend AI prompt phrasing. User pain points such as misspelling and difficulty reading for younger users has also given us ideas and priorities for new features like voice to text and audio playback of messages. Our goal is to use these design features to increase user engagement and retention. KPI’s include: number of users, messages sent to Erandi, and attendance at bi-weekly onboarding parties.
The Challenge:
How can we increase the number of girls in STEAM and transform STEAM education?
Women only represent 27% of the STEM workforce in the US today, Latina and Hispanic women make up only 2% [1].
Erandi Aprende seeks to eliminate these gender biases and ensure that girls are actively encouraged to learn about STEAM topics and pursue STEAM careers in the future.
The AI E-learning market is projected to grow by more than 10% by 2032 [2].
With many new products entering the market Erandi Aprende stands out by transforming STEAM education through high quality and child friendly content and activities. Erandi Aprende provides a personalized learning experience that fosters creativity and critical thinking, and preserves the spark of curiosity and imagination that defines childhood.
Users:
Erandi Aprende’s primary target market is girls ages 8-14 and their moms
Secondary target markets include all children and parents, educators, after school programs, and B2B partnerships
User needs:
Child friendly AI —> Erandi runs on Claude 3, a HIPPA compliant model
Child friendly interactions
Age appropriate conversation starters and responses
Open ended but guided learning
High quality screen time
Excitement about learning
Onboarding support and customer service
Pain points:
Many younger kids don’t have their own phones
Kids are spelling and reading at varying levels
Users don’t know where to start when chatting with Erandi
Multiple kids (siblings/friends) want to use Erandi separately or together
Technical constraints:
The AI gives responses to questions but isn’t as good at prompting kids to engage in open ended thought
Business requirements:
Free vs. paid features
Bilingual and culturally appropriate content
KPI’s:
User signups and retention
Number of messages sent to Erandi
Number of inventors workshop projects created
Attendance at onboarding parties
The Solution:
User and Market Research
Background Research: Best practices when designing for kids
Key learnings include varying menu design with bigger icons/text for different ages, having appropriate touch target and safe space sizes, using colors to signify options, creating child friendly user testing environments
Key learnings include how to create a sandbox style creative learning environment, effective cases of learning through passion projects
User Surveys: To learn routines with the objective of learning how Erandi Aprende can fit into user's schedules
Parent Survey - Key questions:
On average how much screen time does your child get daily?
About what percentage of your child's screen time is spent using educational apps vs. entertainment, social media etc.?
When does your child get to use educational apps? (Ex. When you’re cooking, after class or dinner, on weekend mornings etc.)
Can you recall an instance when you used an educational app together with your child? What did you like/dislike about the experience?
Teacher Survey - Key questions:
Do you use any educational apps in your classroom? Which and why?
What is your set up when you do use educational apps in your classroom?
How much time do you spend a day using educational apps in your classroom? When in particular?
What would you say the average child’s attention span is while using educational apps?
Competitive Audits:
Reviewed other EdTech and AI websites and apps including:
Key Findings:
Personalized character that's always present
Animated movements and character interaction
Prompts for things to explore
Voice conversation based
User Data:
Data Collected:
Language
Age
Interests
Messages to Erandi
Next steps:
Focusing designs/activities in accordance with user preferences determined from data
Wireframes, Mockups & Prototypes
Home Screen:
Version 1
Our original idea was to have the AI chat interface be the main feature on the home screen. Other activities could be accessed through the bottom navigation bar.
Version 2
For the MVP we heavily simplified the home screen design, removing many of the details on the bottom bar that we didn't have capacity for yet and putting buttons for the initial two activity options as the focal point.
Version 3
Re-design for a more visually appealing home screen. Based on research from "Designing Digital Products for Kids" by Ruben Cantuni, these new designs use color as a navigation guide and differentiate icon/text size for younger vs. older kids. Although my initial wireframes had the Erandi character taking up half the screen, while testing mockups on Figma I found that Erandi could be positioned behind the buttons to better utilize screen space.
Onboarding:
After the account is created users (parents and children together) go through the onboarding process. Language was originally planned to be part of onboarding but is now selected during sign up and can be changed in settings. Onboarding includes:
Learner's name (Erandi will address the user by this name)
Learner's age (interests, prompts, and language are tailored by age)
Interests (Erandi connects questions to the users interests
The onboarding process is currently being updated to include more interests with images and an option for parents to write a paragraph about their child for the AI to enhance personalization.
To keep track of what data is collected during user onboarding I also created a flow chart:
Chat Prompts:
Preset prompt ideas can be accessed through the thought bubble on the left side of the chat bar. Most of the chat interface features were modeled off iMessage and whatsApp for familiarity (ex. clicking the plus on the left side of the iMessage bar to add photos or send audio etc.).
The expanded thought bubble selection design (above) was not used. We went with the bottom overlay (right) to continue mimicking traditional mobile messaging design and to also have space for images related to the prompts.
Dictionary:
Highlighted STEAM Words MVP Dictionary Pop-Up New Dictionary Top Bar Design
One feature idea was a dictionary function. The AI highlights STEAM related words in yellow and when pressed opens a word definition from the Miriam Webster API. Selecting the 'I want to learn more' button auto-sends a message to Erandi asking to tell me more about the chosen word. Following UX best practices the design for the dictionary definition is being modified from a pop up window to a top bar so that users can still see their chat messages below and also click on other words to get definitions.
During user testing we found that kids did not know what the yellow words were for (they guessed STEAM related but not that they could click on them). We are exploring options for how to make this clear and having introductory chat messages introducing these features.
Inventors Workshop:
In the inventors workshop Erandi walks users through the engineering design process to create an invention. They can brainstorm a problem, solution and design with Erandi or start with an idea they already have. The first design challenge for the inventors workshop was to create a 'road map' to show the users which stage of the design process they are in.
Option 1 Option 2
These wireframes show options for the road map layout and where to position it on the screen.
I went with option 2 so that the road map didn't cover up any of the chat messages and was in a natural clickable location.
Road map UI
After making mockups of multiple iterations testing out different sizes, widths, icons, and colors I settled on this version of the road map UI.
I included a play button to start that I could use to familiarize users with the process, have the current stage in a larger size, and completed stages are green.
I am also exploring options for the UI for when users go back to a previous stage after already having completed some.
Opening messages Imagine Stage
These mockups show the road map UI changes as the user starts, receiving the opening messages, and then moves on to the imagine stage.
In addition to the visible design I also wrote the script for the inventors workshop and tested tailored options for the AI rules to get the best responses.
Design Checklist
In addition to the roadmap we also wanted users to think about specific things for their invention. At first I thought of a checklist with items for each stage, however I realized this would be too challenging for younger kids.
Instead I used the same format as the general chat interface when users click on the thought bubble in the message bar to see some prompts they can send to Erandi - prompt options shown below.
The prompts change depending on what stage of the design process the user is currently working on, and the prompts are written in a way that the AI will send messages encouraging the user to think more about each topic themselves rather than just giving answers.
Prompts for each of the design stages
Inventors Workshop Prototype
Try out the Figma prototype to walk through the entire inventors workshop process!
Website Re-Design:
Key components:
Nav Bar (Logo + Call to Action)
Hero section
The Problem
The Solution
What AI Allows Us to Do Now
Testimonies
About Us
Social Proof (Logos)
Final Call to Action
Footer (Social Media Links)
Design inspiration taken from competitive audit
Website wireframe Low-fi Mockup
Figma Prototype - High-fi Mockup
Usability Studies, A/B Testing, and Observations
Moderated User Testing:
User Tester - Anneke, Age 8
User Tester Characteristics:
Kids ages 6 - 12 and t heir parents
Focused on girls
Interested in STEAM
MVP Full Usability Testing Plan
MVP Plan Summary:
Methodology - moderated over zoom
Research goals - determine if users can complete the core tasks within the app and measure ease of use. Determine what features users like about the app
Recruitment - personal networks, STEAM conferences, social media
KPI's - observations (users are given tasks to complete within the app), responses to questions, and system usability scale results (questions about ease of use for children & parents to rank 1: strongly disagree - 5: strongly agree)
Features tested: Onboarding, general chat with Erandi, preset prompts, changing Erandi's outfit
MVP Usability Testing Script: here
MVP Usability Test Findings and Next Steps:
Selecting interests during onboarding - users unclear on how many they can select or skip over them quickly
Break down onboarding interest selection into multiple sections
Allow for user inputted interests
Add interests into settings so users can update them
Users didn't know what to say to Erandi
Expand preset prompts, have them update are one is used and be based on user interests
Worried about mispelling when typing
Have voice to text feature
Length of AI responses were too long
Split AI generated response into multiple shorter messages
Limit length of AI response based on user age
Have audio playback option for messages
AI doesn't know how to respond to one word or non-question messages
Adjust backend data sent to the AI with more rules about how to reply to messages
Parents wished for more guided learning
Have activities focused on specific topics based on learner interests
Create educational scaffolding and clear goals for the inventors workshop
Further usability testing in progress for the inventors workshop, home screen and onboarding re-designs, dictionary, and more.
A/B Testing
Font Options:
White Only Font Bold Yellow STAEM Words Font Larger Size Font
To improve legibility of messages we are doing A/B tests to determine which font sizes and styles work best for kids of varying ages. Additionally we may also test their preffered length of messages (currently broken into two sentence chunks). The font Nunito was chosen as a recommended child friendly option based on it's x-height. Font size will be preset by age range and may also be added as an option in settings if there are large differences in preferred font size.
Fiestas:
The Erandi team has been hosting public Fiestas (user onboarding parties) via zoom, monthly since launching our beta app.
The goal of these fiestas is to promote the app, build community, increase engagement and user retention, and answer questions.
During the fiestas we have STEAM speakers, do activities using Erandi Aprende. We have been able to make some observations about app use during the fiestas.
Key Observations:
Kids engage much more with the app when working with a parent or responding to prompts from the team over zoom
Attention span is limited, but improved by having short, repeatable activities (ex. using Erandi to play mini games like Simon says)
Combining using Erandi Aprende with a physical activity like drawing on paper improves focus and participation
Kids like to share what they have learned or create with the group and comment on each others as well
In addition to the moderated usability studies, these fiestas allow us to gather observations about informal app use and how we can improve features to create a better experience.
Upcoming Features
Audio Playback and Voice-to-Text Messages
In all usability testing sessions as well as observations and comments, users wished for a way to listen to Erandi's messages, and to also be able to send Erandi messages through voice-to-text. This will create a much more user friendly experience for younger children who are still learning to read, and also enhance their character recognition of Erandi
These features are still under technical development. Once they work we will be able to test preferred message length in audio form, as well as the UI for the audio playback method
Educational Scaffolding
Scaffolding Example 1 Scaffolding Example 2
Another key finding from user testing was that kids needed more guidance and structure within the app. To improve this I first research educational scaffolding techniques:
Key concepts included:
Breaking down learning into chunks
Providing prompts that guide children to the next activity/task
Using lots of visuals and examples
Encouraging critical thinking and asking questions
Use of open ended learning
The above Figma mockups of a scaffolded chat with Erandi take into account these concepts. In example 1 the child starts with a preset prompt asking about a famous female scientist, they first get a very short answer and an image to grab their attention. Next they are asked to think aloud, this could step be done together with a parent or friend, which encourages critical thinking and engagement. (This is also useful because the AI has trouble responding to long or indirect thoughts).
In example 2 the child is given the option to talk about their own idea, or have Erandi share ideas for more things to talk about. Having these options promotes independent and open ended learning, while still giving support for users who are not sure what to say. When sharing ideas Erandi gives multiple options to encourage exploration and discovery.
We are talking to childhood education and learning design experts to continue to improve educational scaffolding in Erandi Aprende. We have not yet started incorporating these scaffolding features into development yet and also expect to face challenges setting up the scaffolding within the AI responses.
Additional Settings
Current Settings
This image shows our current settings. We also plan to add:
Interest selection - users will be able to add new interests or delete old ones at any point. While only a few initial interests are selected during onboarding, the number of interests in the settings will be unlimited. We are also exploring users being able to ask Erandi to add a topic as one of their interests from within the chat interface
Font size - based on user testing results we will add some options for users to select their preferred font size (likely between 16pt to 24pt)
Outfit options - currently there are two choices for Erandi's outfit. Users liked this feature and wished to dress her up in other outfits and with accessories. We would also like to incorporate a 'design your own' option for kids to draw, upload, and select their own clothes for Erandi
More Activities
As Erandi Aprende grows we are continuing to add new activities within the app. Some upcoming ones include:
Preset Inventions
The inventors workshop mainly focuses on thinking of and designing inventions, however our users are also interested in inventions that they can actually create at home. We will have a selection of pre-set invention ideas (ex. soda rockets, baking soda volcanoes, and other child-friendly DIY science experiments) that kids can design in their own styles, and use Erandi to walk them through the building and testing processes
Mini Games
During our fiestas we have played mini games like Simon Says using Erandi in a guided activity. We plan to incorporate this as a section in the app where each mini game has it's own chat with Erandi and the AI is set up in that chat to play each specific game
Weekly Discovery Challenges
A way that we plan to increase user engagement and retention is by having weekly discovery challenges where kids are shown an image and encouraged to think about it, given clues, and eventually an explanation. These challenges will be designed with the educational scaffolding concepts discussed above and users will be able to go back to past weeks that they missed to complete the challenges
Multiple Child Profiles and Group Activities
Because the activities and responses are personalized based on the user's age and interests, another important feature is being able to switch between multiple child profiles. As we expand on our MVP we also plan to add a parent portal for them to manage child profiles and overall settings.
Group work and collaboration is also an important part of STEAM education so we encourage siblings or friends to work together on activities like the inventors workshop and also plan to design some activities that specifically require multiple users.
Results:
#5 in F6S.com's list of top EdTech companies and startups in Mexico - June 2024
Upcoming B2B partnerships with Coca-Cola Mexico, Simens, the Government of Panama and more
Current finalist in MIT SOLVE Learner/Meets/Future: AI-Enabled Assessments Challenge
Up for other awards and funding from: The Global Innovation Fund, Impact AI Challenge, Robinhood AI Poverty Challenge, Santander X Global Challenge, Mexico E-Awards, and more
Next Steps:
iOS and Android app store launch in August 2024
Continued usability testing
Building out new features for the general chat and inventors workshop
Adding mini games and other activities
Refining AI responses through prompt tests
