TLDR
Kinfo is a super user-friendly web platform, providing a seamless communication hub for kindergarten teachers and parents. It serves as a convenient one-stop place for parents to access all the essential information about their children's daily activities and schedule at the kindergarten.
As product designers and user researchers, our efforts yielded remarkable results during the project, catching the attention of an enthusiastic client who expressed interest in further developing and bringing the project to life.
THE STARTING POINT
The Challenge
Communications between kindergarten teachers and parents are all over the place -
Many messages get lost in various communication platforms, kindergarten teachers can't find children's health limitations, parents often forget to send things with their child, etc.
The Solution
Contain and organize all communication between kindergarten teachers and parents in a single simple platform.
UX PROCESS
Product Management
KPI
-
Decrease the number of times a child arrives without a required object.
-
Increase the teachers' ability to know if a parent had missed important information.
-
Decrease the number of clicks for the teacher to find out a childs' health restriction.
Target Group Research
We had two different research groups- the first were kindergarten teachers, and the other were kindergarten parents. This was to try and understand both sides' needs and find the perfect solution for each.
57% of teachers marked themselves as below-average proficient in childrens' allergies
60% of the teachers stated they spend more than two hours each day communicating with parents
45% of parents said they contact the kidergarten staff more than twice a week
55% of the parents said that they have missed important info from the kindergarten staff before
To the question
what frustrates you with the current communication type with the kindergarten?
the leading answers were -
Too many pictures that don’t involve my child
Too many Whatsapp messages
No specific details from the kindergarten teacher unless something extreme happened
Persona
Making a persona helped us to identify the user's needs and find the platform's weak points.
Angela Martin, 39
Finance
Married + 1
Jim Halpert, 43
Salesman
Married + 3
Pam Beesly, 27
Kindergarten Teacher
Engaged
Passionate
Uninvolved
Messy
Organized
Agitated
Patient
Pain points
-
Can’t keep organized all of my child’s kindergarten photos.
-
I want to speak with the teacher about the educational program but she is never free to talk
Passionate
Uninvolved
Messy
Organized
Agitated
Patient
Pain points
-
I always forget when the kids need to bring something to kindergarten and then my wife gets mad at me
-
My details are not listed in the kindergarten’s contact list so sometimes I want to pick up my kid but the staff won’t let me because I don’t have a permit.
Passionate
Uninvolved
Messy
Organized
Agitated
Patient
Pain points
-
I’m sick of reminding parents to bring things again and again
-
I don’t feel proficient in the students' health restrictions, I’m always agitated when building the week’s food plan
UX PROCESS
Market Research
We checked numerous calendar platforms such as google calendar, apple calendar, woven, etc. We searched for common features and things to make users' life a bit easier and then narrowed them to 5 main features -
Color coding for different types of events
Set up reminders
Invite other people
to collaborate
Duplicate events
Show important info
at first glance
User Flow
Teacher
(click on an image to expand)
Parent
(click on an image to expand)
UX PROCESS
Wireframes
Flow A - Parent choosing to bring an item
(click an image to expand it)
We chose to design the homepage as a calendar - it helps the parents see events in the future and prepare accordingly. Also, this is a known pattern to many users, and because we are designing for a wide variety of users with different tech abilities, we wanted to make this as easy as possible.
The most important information about each day is displayed even without opening the day window, which saves time & effort.
Furthermore, if a user opens a date to see more details, the info is displayed by hierarchy- first is the education plan, then the event that has an item list, after that comes the food menu, and last are pictures of that day.
The item list has an approve button, to make it easier for the teacher to know who brings what and to monitor if a parent hasn’t noticed that they need to bring something.
Also, the navigation bar on the left is for general information that needs to be available at all times, for example, the contact page or the private messaging with the teacher.
UI PROCESS
Design System
TYPEFACE
Headline 1
Headline 2
Headline 3
Body 1
Body 2
We chose the font Poppins which is a rounded font, it has a variety of weights so it adapts to different screen resolutions and gives a warm and familiar feel to the design
COLOR PALETTE
LOGO & ICON
We chose colorful and bright colors - a happy palette albeit not a childish one. We took finger-painting colors and made them more mature. This is to keep the kindergarten vibe but speak to the grownups
BUTTONS
All corners are rounded -
trying to keep a familiar and warm feeling, and relieve stress from the user’s eyes, so they can concentrate more easily.
ELEMENTS
UI PROCESS
The Final Design
Flow A - Parent choosing to bring an item
(click an image to expand it)
Contrary to our original UX plan, we decided to change the way the user opens a date to view it’s details
When the parent wants to open a day's schedule, they click on it, and a window pops up, which includes all the events, details, and images regarding that specific date
There, they can see if there is a special event planned for the day, and what their child needs to bring or choose one of an equipment list
Then, the parent chooses what they can bring from the equipment list, and make themselves responsible for it by clicking the I'm on it button
After this process, every time the parent opens that same day, they will only see what they have pledged to bring, thus, reducing the amount of cognitive overload for the user in every engagement.
Flow B - teacher is adding a photo
(click an image to expand it)
To add a picture album, teachers simply need to select a date and click on the plus button located at the bottom right corner
The add menu will pop up
The add window functions as a modal overlaying the calendar, ensuring teachers have constant access to their schedule. This design approach allows them to perform all necessary actions seamlessly within the same window, eliminating the need to switch back and forth between different windows. To enhance user intuitiveness and ease of use, we incorporated familiar icons and elements, like the upload icon, into the interface.
After uploading the photos, the teacher can conveniently review them. Each image is accompanied by text indicating who is tagged in it, which minimizes the need for individual checks. The tagging process is AI-driven.
In case the teacher identifies a tagging error, they can simply click on the image, and verify whether the AI tagging was incorrect or missed any tags altogether.
When the teacher hits the plus button, they can fix any missing tags themselves. It's also a way for teachers to actively teach the AI and make sure it tags things correctly later on.
THE RESULT
PROTOTYPE
Parents
Unfortunately, the prototype is only available on the desktop site. sorry :)
Teacher
Final words
Working on this project was an absolute blast! Immersing ourselves in the world of young parents and kindergarten teachers proved to be an illuminating and challenging experience.
Through the process, we gained valuable insights into the significance of research and how it can completely transform a design from start to finish. Although we encountered some edge-user cases that we believe could be improved, we are incredibly grateful for the opportunity and cherish the invaluable design experience it provided us.