Phonic Friends

An ed-tech, learning kit designed to help children with auditory dyslexia engage with reading through a blend of interactive tools, including a smart pen, book, and app.
Phonic Friends cover image with book, pen and tablet application

The Challenge

Children with auditory dyslexia face many challenges when learning to read.

Solution

The design team created a physical book, interactive pen and companion app that uses a blend of auditory, visual, and tactile learning techniques to help students with auditory dyslexia learn how to read. Our products focus on teaching phonemic awareness, empowering children to discover the joy of reading through a rich, multi-sensory experience.
Role
Product Designer
Industry
Education
Timeline
March 2024 - June 2024
Team
Arthur Jensen
Ryn Rangel
Celia Choi
Tools
Fusion 360
Adobe After Effects
Adobe Illustrator
Figma
Phonic Friends
A prototype of how a child would begin a lesson.
Press R to Restart
Press ↗ to Expand
See Prototype
1a

Design Challenge

How might we support children aged 5-7 with auditory dyslexia better process and distinguish sounds?

1b

What I Led

♦ Collaborated with a cognitive psychologist to conduct user research and gain deeper insights into education and learning
♦ Developed smart animations to enhance the user experience of the digital app
♦ Created the physical model of our smart pen

2a

Who We are Helping

6 year old Jacob is struggling to keep up with his reading and writing. He has auditory dyslexia meaning he has difficulty processing sounds.

Drawing of our target user, Jacob
User persona developed based on research
2b

My Design Process

We began by exploring various social issues, and eventually our team pinpointed education as a critical issue for Generation Alpha.

Brainstorming sticky notes on user journey story

Understanding the Problem

Based on our research, we identified Structured Synthetic Phonics (SSP) as the most effective method to teach children how to read. SSP is broken up into 6 stages with each state focusing on a specific set of phonemic sounds.

Los Angeles Unified school district

Teacher Interviews

Arthur conducted three teacher interviews. His findings revealed that many educators lack essential resources to support neurodivergent students.

"Many teachers lack the necessary resources when it comes to supporting students with disabilities.”

- Anonymous Teacher at Los Angeles Unified School District

headshot of Dr. Lea Held, cognitive psychologist

Insights from a Cognitive Psychologist Dr. Lea Held

I conducted the interview and combed through psychological research papers. My key findings were:

1. Movement and Learning: Numerous studies have established a strong connection between physical movement and improved memory retention.

3. Repetition and Memory: Studies have shown that repetition plays a crucial role in enhancing memory and learning for children.

3. Auditory Stimuli and Cognitive Performance: Background music adds to cognitive load, especially when it competes with the primary task for attention.

Beauty shot of the e learning product osmosis

Reviewing Design Precedents

We looked at a variety of digital and physical educational products to help us design Phonic Friends. We were inspired by Square Panda, Duolingo, Khan Academy Kids, Leap frog, and Osmos.  

Step 5
Insight sorting of ideas

Bringing it All Together

After many design iterations, we landed on creating a smart pen, an interactive book, and tablet application. After learning that neuro-divergent children learn best with a blend of visual, tactile and auditory learning experiences, we decided to incorporate this into our overall user-experience.

3a

Our Proposal

We wanted to make a clear distinction between the book and the app. The book is dedicated for learning and the app is dedicated to testing and review.

Tactile: The book contains a unique texture for each phonemic sound the child will learn.

Auditory: An interactive pen that reads aloud the sounds in the book, along with an app that provides auditory prompts and descriptions.

Visual: We wanted our visuals to be dyslexic friendly and divided into bite sized pieces.

Phonic friends book, tablet and smart pen.
4a

Physical Objects

We designed our pen to seamlessly connect our interactive book with a tablet. It features built-in speakers that allow students to hear the lessons read aloud from the physical book. Additionally, the pen includes a stylus tip for writing on digital tablets.
Emotion sketch of the smart pen

Emotion sketch of the smart pen by Celia, capturing its elegant, brush-like design.

Exploded view of the smart pen

Exploded view of the interactive smart pen outlining all the parts listed in our bill of materials.

Hero shot rendering of the of 3-d model of the smart pen

Hero shot of the smart pen highlighting the playful design reminiscent of a paint brush.  

Michelle creating the physical model of the smart pen

Me crafting the 3-D model of the interactive smart pen out of foam core.

We designed the book using the same color pallet as our app to create a cohesive product. Ryn crafted a low fidelity and high fidelity mockups of our physical book.
Physical model of the book 3/4 view

The low fidelity physical mockup of the interactive book created by Ryn.

Low fidelity mockup of a sample texture in the book. Showing bronze shiny texture

Low-fidelity physical mockup of the interactive book, highlighting a potential interior texture designed by Ryn.

High fidelity physical models of the book and the iPad app

The final prototype of the interactive book and tablet application.

Ryn crafting the physical book

Ryn working on creating the high fidelity physical prototype of the interactive book.

4b

Bill of Materials

We conducted thorough research to assess the feasibility of manufacturing our physical products. We also looked at the technology necessary for each product. The pen would need to be created through various injection molding techniques and the book through die-cutting, and lamination.

Mood board of smart pen
Mood board for the Pen
mood board of phonic friends book
Mood board for the interactive book
4a

Heuristic Evaluations

Our team utilized Nielsen’s 10 usability heuristics to evaluate our low and mid-fidelity UI. The areas that we needed to improve upon were with regards to:

♦ User Control and Freedom
♦ Match Between System and the Real World
♦ Error Prevention
Low fidelity screen of the onboarding to phonic friends
The initial screen users encounter is the onboarding screen, allowing them to select their own avatar.
Low fidelity mockup of Huey who dropped his painting
We started of with a simplistic wireframe of our character's storyline. Huey is an artist who will walk the students through each review lesson.  
Low fidelity digital mockup of a sample multiple choice question
We developed a prototype outlining the fundamental structure of a multiple choice question.
Mid fidelity image of the onboarding screen
Our next iteration of the onboarding screen contained colorful watercolor profiles.
Mid fidelity digital mockup of the character Huey who broke his painting
There were some initial concerns over our story line about a painting being broken potentially being distressing to young children.
Mid fidelity digital mockup of a multiple choice question
We thought it was a good idea to include audio in our interface, and neglected to include a back button to offer users control.
high fidelity onboarding screen for phonic friends
After our heuristic evaluation, many peers pointed out that the UX writing wasn't clear. We wanted to clearly distinguish the purpose of the book as a place to learn, and the app as a place for testing and review.
High fidelity prototype of my painting lost it's color backstory
We upgraded the appearance of our main character, Huey and also changed the story to something more kid friendly.
high fidelity prototype of a multiple choice question
Using background music in our interface might be distracting. Instead, we could use audio to test whether children understood how to pronounce each sound.
5b

Creating a Design System

We created a design system to establish a unified and consistent user experience across our three products. Recognizing the importance of maintaining brand coherence and efficiency in design and development processes, we sought to streamline workflows and promote reusability by providing a centralized repository of design assets, buttons, and guidelines.

♦ For our design system, we chose a sans serif font that has larger tracking for improved readability.
♦ Based on research we found, we used left aligned text to make it easier for students to find the start and end of each sentence.
♦ We selected a soft color palette that’s soothing and helps kids focus.

Design system showing all button, card, and spacing standards
Design system showing various buttons
Design system showing various states of cards
6a

The Anatomy of Phonic Friends

Letter Association
Progress Bar
Phonic Stages
Stage one of phonic friends
Gamification
Stage one of phonic friends: the farm
Exit Route
Lesson Review
digital review of the SH letter pairing
Movement and Learning
an example of how phonic friends reviews the sounds learned in the book
Learning Progress
Achievements and Badges
User Profile
high fidelity mockup of a profile screen
7a

Testing our Products on Students

We evaluated our product with with a focus group of six first-grade students with dyslexia. After engaging with the product, all participants expressed a desire to use the tablet and book again!

A student testing out the prototype
8a

Retrospective

This project was immensely valuable to me because it pushed our team to envision not only a digital product but also a physical solution that seamlessly addressed a real-world problem. Our biggest challenge was creating a cohesive solution. We spent considerable time crafting a compelling story and and brand for our products and ultimately settled on a painterly theme for both our book and tablet application. Another significant challenge was defining the purpose and boundaries of the book and app. There was a lot of discussion on whether or not the app had more importance or the book. Overall, I believe the project successfully blended the physical and digital realms, resulting in a seamless user experience.