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.
Background
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.
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.
The student view
Student view
Teacher view
The student view
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