✺ App ✺ UX/UI Design ✺ Dart ✺ AI ✺

Spellie App: Making Spelling Learning Interactive with AI

Timeline
3 Months

My Role
Product Designer, App Developer

Tools Used
Design & Brainstorming - Figma
App Development - FlutterFlow, Dart Language, Replicate API

ABOUT THE APP

Spelling app with AI integration

Spellie is an app where children, aged 5–7, can speak to the app, and it will display the words along with their spelling. They can speak one sentence at a time for a maximum of 5 seconds, and each word will be accompanied by its spelling. There will also be an additional feature where they can tell a story, and the app will generate an AI picture based on the story they tell. This will, of course, be moderated.

THE PROBLEM

Children often struggle with learning spelling and retaining correct word spellings

Traditional methods of teaching spelling may not always engage young learners effectively, leading to limited progress and frustration. There is a need for an innovative solution that combines interactive technology and educational techniques to enhance children’s spelling skills in a fun and engaging way.

Goal: To develop an AI-integrated app that improves spelling skills for children aged 5–7 and bridge the gap between spoken and written language in a fun and interactive manner, empowering young learners to express themselves confidently.

USER RESEARCH

Short surveys to understand the users better

I conducted surveys with a sample size of 15 to get a better grasp of what makes these kids tick and what parents are looking for in an educational app.

Key Insights:

  • It turns out that most parents (11 out of 15) allow their children to use educational apps on mobile devices several times a week, while a few (four parents) let their kids indulge daily.

  • I also discovered that a good number of children (13 out of 15) enjoy speech-based activities, such as role-playing, storytelling, and interactive quizzes with voice responses. They love expressing themselves, which gave me some cool ideas for the app.

  • In addition, many kids (11 out of 15) are into narrating stories out loud and discussing them with others. It’s amazing to see their interest in expressive verbal communication.

User Personas

Taking all these insights into consideration, I went ahead and created two user personas: the main target user, the kid, and the supporting user persona, the parent. These personas will be my guiding stars as I continue to develop Spellie, tailoring it to meet the unique needs of both groups seamlessly.

DESIGN PROCESS

Step 1: Ideation board

In this process, I utilised Figjam to outline the challenges, questions, ideas, and other factors to consider during the development of this app.

Step 2: Creating a user flow

Before jumping into the layout structure of the app, I worked on a simple user flow to have an idea of how the flow of the app will be.

Step 3 : Sketches

I then created a very rough sketch of the app using Figjam on my iPad. At this stage, I conceptualized 10 pages, including key features like the 'Speak & Spell' and 'Tell a Story' features." I jotted down some notes on how the users can interact with the app.

Step 4 : Wireframing

Next, I started to define it better with a high-fidelity wireframe and added a few things that weren’t included in the initial sketches, such as the choose avatar page, my stuffs and loading page.

Step 5 : UI design

With the wireframe done, I then started working on the interface design. I chose the colours green, teal, and blue because according to Susan Smith and Karen Tyler in their 2008 book called “The Impact of Color on Children’s Learning,” these colours are more likely to help children focus on learning tasks and remember the information they learned. And below is the final design output:

TECHNICAL DEVELOPMENT

Building the app using FlutterFlow (Dart) & Replicate API (AI)

The foundational block for Spellie app’s development was FlutterFlow. If you’re not familiar, FlutterFlow is this amazing platform that streamlines the app development process. What I truly admired about it was how seamlessly it integrates with Figma. FlutterFlow mainly uses the Dart language and it offers various packages that allow you to build so many different functions. Using the speech_to_text 6.3.0 package from pub.dev, I was able to develop the core function of the Speak & Spell feature which uses speech recognition technology.

For the Tell a Story Feature, I used the Replicate API for AI Image Generation. Using both POST and GET methods, this API allowed Spellie to process story narrations by the user and generates an AI Image based on their story. This API is great because it also holds a feature where you can filter out words that you don’t want to be processed the the AI.

USER TESTING

Testing the app with a child and their parent.

For the usability testing, I had Rick, a 7-year-old, and his mom, Niza, try it out to see how it works for them and the results were as below:

Key Findings:

  • Speak and Spell's Value - Rick found it easier to learn challenging words like 'Difficult' and 'Gorgeous' using the Speak and Spell feature.

  • Simple Sign-Up for Parents - Niza appreciated the straightforward process of using her Google account to sign up, building trust in the app.

  • Stories and AI Enhance Learning - Rick enjoyed telling stories and seeing them come to life through AI images. This feature not only entertained him but also helped with spelling.

PROJECT DEMONSTRATION

Quick walkthrough of the app prototype built on FlutterFlow

REFLECTION

What can be done better next time

  • User Testing can be conducted at earlier stages of the product lifecycle, such as during the wireframing stage.

  • User Surveys should be more comprehensive, encompassing a broader range of children from various backgrounds.

  • The login page should offer multiple social login options. Due to time constraints, I was only able to implement login via Google Account. Additionally, the buttons need to clearly indicate which social account the user is logging in with.