top of page

Preschool Song Library

For this case study, where I was the lead UI/UX Designer and Researcher(also developer). In this case study I designed (and develop) a website  for a preschool to store songs and stories.

Song Notes
Image by Gautam Arora


 During the day I’m a paraeducator, almost like a teacher but without the paperwork or pay, for students who are developmental-delayed. At the school where I work there is a team of nine other teachers and paraeducators including myself. We use videos to show educational contents, stories, or songs to help expand student learning. Currently we are using software that is only on one computer and can’t be on the others. The other teacher has concerns with using google slides about privacy and people having access to the person's email when it opens. The problem with just going to youtube is students would get up and click on other videos or want to see other videos.


Solution: create a website that can host the videos, and view them

Understanding the users

For this case study the primary users are the teachers, and paraeducators(paras), as they are the one who choose the theme, and songs. Along with adding themes or songs to the program. Then the students are the secondary users as they are one watching the videos, or choosing the song. The teachers have been teaching preschool for years, along with paras. All of whom vary in technology knowledge. The students range from three to five years old. Students in the program are developmental-delayed, or have a diagnosis like Autism or other disabilities. The current pain point is keeping the current program up to date and time.

Screen Shot 2022-04-29 at 8.34.51 AM.png

For our persona, Ms. Liz is a busy preschool educator who needs a way to show videos of songs, or stories, to students, to help the students learn new things because the current system in place takes time and can only be done in one place on one computer, so the system is not up to date.


There are two goals for this case study. The first one is to be able to click on a theme, or a category and view songs related to the chosen category, so I can easily choose a song/story to view. Then the other goal is to be able to add a theme and or song so I can stay up to date.


For this case study I broke it up into two parts focusing on students’ view and  teacher/paras’s view. The student’s view is just the themes, the song and the video. While the teacher/paras’ view they can add, edit and delete themes, or songs. 

Starting the design process

I started with sketching out a couple of ideas for the website. Then drew a paper wireframe of the student's views, along with a digital version. I did two versions of the digital version : one was the student view,  the other was the teacher/para view. The student view was focused on the goal of picking a theme and song to watch a video. While the teacher/para was focused  on adding a new theme or song to the website. While making the digital version of the  teacher/para  I include a path for editing and deleting a theme/song, because as a teacher/para I would like to be able to edit themes or delete a song if needed. Based on the digital wireframe I made the low-fidelity.

Due to having two versions I did two usability testing both to test user flow. While the first one(the student view) the tester found simple and easy to use, there was some confusion with some of the wording. I did change the wording so instead of ‘category’ I changed to theme, because the users are more familiar with the use of ‘theme’ then ‘category’ when it comes to planning lesson plans for each week of the school year. I also changed the main page with the list of themes as the ‘table of content’ which can be seen in the mock up.


In the second one I had user login-in and ‘made’ a new theme which was used to edit and delete, then again for a song. There was the same issue as in the first usability test with wording.  

Refining the Design

As mentioned in the usability testing I made changes in the wording in both. In the teacher/para I did change the confirmation process for adding a new theme. So instead of two prompts it gave one. For accessibility make the font and icon size bigger so users with vision impairment can view the app.

Final look

Below are two video of what the final product will look like

The student view

The Teacher/Para view

Going forward

The case study hit a lot of the user's pain points by keeping it simple and easy to use, in turn saving on time for more learning.


Based on the design I've coded out the student view which can be viewed  here, which has the  right spelling of library and an interactive search bar.   In the next step  I will be building out the teacher/para view.

Thank you for your time and reviewing my work on The Preschool Song Library! If you’d like to see more or would like to get in touch,  you can go to my contact form

bottom of page