"Learning for Kids" Case Study

This project is meant to showcase a responsive website and a mobile app for an educational program that helps children learn about emotions and other basic topics. The program also assists educators and caregivers in tracking their kids' progress and creating custom lessons based on each child's individual needs. Since this program is dedicated to children, I aimed to keep the visual design appealing to kids but not too overwhelming.

The problem

Users need a website with detailed progress reports and customizable lesson plans. Users also need a way to keep their children occupied and engaged in an educational way.

The goal

To create an app and website to help children easily learn various topics and for adults to monitor progress.

My role
UI Designer
UX Researcher

Responsibilities
Creating user personas
Conducting user research
Wireframing (Paper and digital)
Prototyping (Low-fi and Hi-fi)
Mockups

Information Architecture

Responsive Design

Digital Wireframes

After drafting some paper wireframes and refining the designs, I created the digital wireframes. I aimed to create a layout with easy navigation access and customizable lessons.

Welcome Page

Lesson Suggestions

Welcome Page

1/16

Custom lessons allow for users to tailor learning materials to the specific learner.

Navigation placed in the Thumb Zone allowing for easy access.

Lo-fi Prototype

Before doing usability testing I did some basic prototyping had to connect all the pages relevant to the user flow of a quiz. The prototype can be viewed here.

Usability Study Parameters

Study Type

Moderated Usability Study

Location

United States, Remote

Participants

5 Participants

Length

10 minutes

Usability Study Findings

1

Users want to input their own data

Users expressed frustration when trying to input login information

2

Users need more visual cues

During the quiz, participants had difficulty knowing which answer to choose because answers aren’t labeled

3

Some icons may not be intuitive enough

Some users found it challenging to find the “class scores” page

Mockups

After conducting the usability study, I refined my designs and added in visually pleasing elements to best convey my vision of the app.

Lessons Before Usability Study

Custom Lessons Before Usability Study

Lessons After Usability Study

Custom Lessons After Usability Study

Since users expressed strong interest for personalized lessons, I added this feature makes it easy for educators to create, edit and preview questions.

Final Sample User Flow for Learning for Kids

Welcome Page

Create Account

Lesson Suggestion

Welcome Page

1/19

Hi-fi Prototype

After my initial usability testing I continued to build a more in-depth prototype. The prototype can be viewed here.

The matching section of the quiz proved to be quite complicated to build. I made sure all connections were working despite Figma seemingly not being able to handle this number of connections.

Responsive Design

I came up with three screen size variations:

Mobile App

Tablet Web

Desktop Web

Sitemap

After creating the main user flow for the mobile app, it was time to work on the responsive website. My first task involved creating a comprehensive page map to establish a well-defined and organized structure.

Accessibility Considerations

1

Representative icons help users easily access what they are looking for.

2

I chose a Sans Serif font for this project because it promotes readability. But at the same time, I made sure to use a font that would be more visually appealing to children.

Takeaways

Impact

Learning for Kids is an educational mobile app and a website. It offers a user-friendly interface for children to effortlessly explore various topics while providing caregivers with valuable tools to track progress and tailor the learning experience to each child's needs.

“Having a tracking progress capability is great and being able to build my lessons saves me time” - Customer C - Elementary school teacher

-Participant 2

What I've Learned

This project proved to be a challenging yet rewarding endeavor. I was taken aback by the intricate web of connections throughout the matching portion. I wonder if there is an easier way to prototype this in figma, maybe using different properties and variants could have made this process simpler. However, upon completion, the sense of accomplishment was truly gratifying.

I found great satisfaction in creating visuals tailored specifically for children. Leveraging my background in psychology, I was able to skillfully adapt colors, fonts, and other elements to cater to their unique needs and preferences.

Next Steps

1

Conduct another usability study on the responsive website to identify any missed pain-points or problems.

2

Improve the matching interactions, currently it works, but not very well. Maybe another software would be more capable.

3

I would also like to create the remainder of the lessons to ensure more of a wholistic feeling to the program.

Let's Connect!

Thank you so much for taking the time to view this case study! This was an incredibly rewarding experience. I am so excited to continue my UX/UI journey and come up with great ideas and designs to create for users.

If you are interested in connecting, get in touch with me via the contact form below, by email, or on LinkedIn.

User Research Summary

Five participants were interviewed via zoom and were asked to complete a series of prompts. During the first usability study participants proved that they need more intuitive icons, visual cues and improved functionality. The second study showed additional functionality and interaction issues with adding a lesson and the matching question in the quiz.

Persona: Mark

Mark is a special education teacher
who needs a website with detailed progress reports and customizable lesson plans because he wants to monitor his student’s progress and growth.

Persona: Jennifer

Jennifer is a mom who needs to keep her son occupied in an educational way because she needs to work and complete household chores.

Ideation

I used the “crazy eights” method of generation ideas for the Learning for Kids app and website. This was an easy and low pressure way to visualize what I wanted the design to look like.

Ideation

I completed a “How Might We” activity and brainstormed ways to actually teach children about emotions.

"Learning for Kids" Case Study

1

2

3

1

2

1

2

3

Previous Project

Next Project

Get in touch