Redesigning Preschool website.
Treehouse
website
Case Study - DesignLab Project
background
First Covenant Treehouse Preschool is based in Oakland, California, and was founded in 1975. It offers various academic programs and age-appropriate developmental activities from ages 2 to 6
problem to solve
-
The visual design and user interface need a refresh.
-
Inconsistent use of fonts, hierarchy, and colors.
-
Inconsistent use of page titles.
-
The main navigation gets lost in the header area.
-
Overall, website interaction could be improved.
project details
Project Type: Responsive website design + branding refresh.
Role: Sole UX/UI designer
Tools: Figma, FigJam, Zoom, Photoshop
Methods: User Research, Usability Testing, Information Architecture, UI Design, Visual Design, Brand Design
Duration: 65 hours
the user
I focused on users who enrolled their children in either Preschool or Private Kindergarten in the 2024 school year.
quick sneak peak
CURRENT DESIGN
Redesign Objectives:
-
Design a modern, aesthetically pleasing interface that reflects fun and excitement while maintaining clarity and professionalism for the parents.
-
Add bright/fun colors and elements to make the website more user-friendly and visually appealing.
-
Use modern and clean fonts for better readability.
-
Ensure all the website CTAs and links stand out.
-
Make sure the content of the website is well-organized and easily available.
-
Reconsider the navigation placement.
-
Provide accurate page titles that match the navigation.
Updates:
-
Redesigned the navigation and cleaned up the UI to be modern and aesthetically pleasing as users mentioned the current website felt too dark, and some text was hard to read
-
I placed the menu in the main navigation area so it is consistent, easily accessible, and doesn't clash with the website content.
-
Listed different program offerings and their details as users thought that information was missing from the current website.
-
I added a photo gallery and a teachers and staff page, as those two were very important for users to familiarize themselves with the school.
PROPOSED DESIGN
Highlights a video tour and new navigation
Programs offered with a short description.
Highlighting programs offered with detailed description for each.
Highlights a video tour and new navigation
the process
Discovery & Research
Research Objective:
-
Learn about their research process for preschool or private kindergarten.
-
Learn about their important decision factors while selecting a school.
-
Find out about their current school website and how it was helpful to them.
-
Observe how they use the Treehouse Preschool website.
What I Already Knew Through Secondary Research:
-
Parents are anxious and want to be careful when selecting a school for their children. They prefer collecting as much information about the school as possible before scheduling a tour.
Competitive Analysis:
Researching the main competitors helped me understand how the problems were currently being solved on the market and which problems still needed to be solved.
User Interviews:
Once I gained a strong understanding of the problems surrounding finding a preschool and the enrolment process, I selected five users to interview. At the end of the interview, I showed users the Treehouse Preschool Website and observed as they navigated through different pages.
Pulling Out The Key Themes:
Affinity mapping helped to organize the data from user interviews into actionable insights.
Our 1st priority was safety and
a fun environment.
Making sure the school had good programs and the tuition was affordable.
We wanted to make sure student-teacher ratio was good
The most important was curriculum and student-to-teacher ratio.
We looked at the playground structure, number of classes. It’s important to know how big/specious the classrooms and play structures were.
What Users Wanted:
-
5/5 users wanted a safe environment and friendly staff when considering the school.
-
5/5 users pointed out that the student-teacher ratio was one of the most important things.
-
5/5 users mentioned that having good ratings/reviews of the school was important.
-
4/5 users were interested in looking at the weekly/monthly activities calendar.
-
5/5 users mentioned they scheduled the tour once they liked the school and their program.
-
3/5 users mentioned that the curriculum and program the school offered were also important to them.
Website Audit Feedback:
-
4/5 users thought the website looked too busy.
-
5/5 users mentioned that the light blue links on the dark blue background were hard to read.
-
5/5 users preferred a white background on some of the pages as they thought it was easier to read.
-
5/5 users tried to download staff profiles, but they didn't know where it went.
-
5/5 users liked that it showed if there was an opening, but they tried to tap on the text with underlines, thinking those were links.
-
5/5 users liked the contact icons on the bottom.
Creating Personas:
After I compiled the findings from the research through the affinity map, I was able to create personas that represent my target demographic.
Finding Project Direction :
I brainstormed several POVs and HMVs and narrowed them down to the ones below:
POV
-
I’d like to explore ways to enhance user trust so that they feel educated and confident about the school environment and offerings.
HMV Statements:
-
How might we provide information that’s more transparent so users can feel more confident and have more trust?
-
How might we provide detailed information about the programs offered so users are more confident about scheduling the tour?
-
How might we provide information about the teachers and their bios so the users get to know a little more about them?
-
How might we provide information about the tuition so the users can decide if the school is affordable?
-
How might we provide information about daily/weekly/monthly calendars with activities so users are more aware of what goes on at school even after the enrolment?
Define & Ideate
Generating Ideas:
From the HMV statements above and came up with the following ideas:
-
Clear, easy-to-navigate FAQ section to address common concerns like safety protocols, staff qualifications, or school policies.
-
Include parent reviews or video testimonials that highlight their positive experiences.
-
Provide a detailed breakdown of each program (e.g., age-specific classes, special needs programs), including the teaching methodology and benefits for the child.
-
Create a comparison tool where parents can compare programs side by side.
-
Include specific FAQs for each program to address common concerns directly.
-
Include detailed teacher bios with professional photos highlighting their qualifications, teaching philosophies, and experience with children.
-
Allow teachers to introduce themselves via short videos or blog posts.
-
Provide a clear, itemized tuition list (e.g., monthly/annual rates, enrollment fees, extra costs for materials or activities).
-
Integrate an interactive calendar that parents can filter by daily, weekly, or monthly views. The calendar should show school activities, events, and holidays.
-
Include a parent portal with ongoing activity updates, reminders, and event schedules that families can access throughout the year.
-
Allow parents to sign up for email or SMS reminders for important school events and activities.
Prioritizing Design Decisions:
To make informed decisions about the prioritization of features, I analyzed the information gathered from user interviews. I identified the main screens and features necessary to complete the most commonly used tasks on the site. Based on this analysis, I prioritized certain features over others.
Design, Prototype & Test
Mid-Fidelity Wireframes:
I shared mid-fi wireframes with 5 users to get quick feedback and received the following feedback:
-
5/5/ users liked the video idea on the homepage.
-
5/5 users noticed the “Find out More” button on the homepage.
-
5/5 users liked Parents' Testimonials on the homepage.
-
5/5 users noticed the “Schedule Tour”, “Contact Us”, and “Submit Application” options.
-
5/5 users liked the program details page.
-
They liked the breakdown of what curriculum includes.
-
4/5 users wondered if tapping the “Curriculum” options would take them somewhere with more details.
-
5/5 users liked Teacher Bio and Tuition Info.
-
Users also liked that it showed them if the school was accepting applications and that the program had an opening.
-
5/5 liked the photo gallery and wondered if they could zoom in to see the photos if needed.
-
Redesigned the menu by organizing the pages based on the sitemap and provided options for users to send applications or schedule a tour.
Creating a Polished Prototype:
Based on the chosen brand value and color palate I designed high-fi wireframes.
-
Redesigned the navigation and cleaned up the UI to be modern and aesthetically pleasing.
-
Users can schedule a tour, contact the school, or send their application.
-
All the programs offered are listed as tabs, along with high-level information about each program, its age range, and whether the school accepts applications for that program.
-
The homepage showcases testimonials from the current parents.
-
The programs page lists all the programs listed as tabs, along with high-level info about the program, the age range, and whether the school accepts applications for that program.
-
Each program section also highlights the main activities offered in the curriculum.
-
The Teachers & Staff page follows program tabs that list the teachers specific to that program.
-
The Tuition page will list the fees and admission process for each program under the tabs.
-
The photo gallery has tabs as filters for showcasing pictures of that area of the school.
Usability Testing With The Prototype:
I tested the mockups with 5 users remotely via the screen share feature. The usability test was moderated and took about 30-45 minutes per user to complete.
-
Whether users can find the content of the homepage helpful.
-
Do users see the option to enroll or schedule a tour?
-
Do users find information on the Programs useful?
-
Do users notice tabs and know what they are for?
-
What do users think about the photo gallery and teachers & staff page?
Key Research Goals:
Measuring Success:
I evaluated the overall success of the product and any iterations needed with the following metrics gathered from my testing:
-
5/5 users liked the colorful and simple design.
-
Homepage:
-
5/5 users noticed the video player and liked that feature.
-
5/5 users immediately noticed the green action buttons and knew what they were for. They also inquired which program they would be applying to because the programs were listed under the buttons.
-
5/5 users liked testimonials on the homepage.
-
-
Programs Page:
-
5/5 users liked the info provided on the page.
-
5/5 users tried to tap on the circular icons under Curriculum Includes. After asking further, they thought it would show a little more detail on that activity.
-
4/5 users wanted to see what the day schedule looked like.
-
5/5 users liked that it showed the school has an opening.
-
Users wondered if there was a way to add their names to the waitlist if they were not ready to enroll just yet.
-
-
Teachers and Staff:
-
5/5 users liked the teacher bio.
-
-
Tuition:
-
5/5 users liked the tuition breakdown but thought knowing the admission process was more important to them.
-
They were curious about how the application process would work. After asking further, they wondered if they would be asked to provide their email address, and the forms would be emailed to them, or if they would provide their address, and the forms would be mailed.
-
-
Photo Gallery:
-
5/5 users liked that they could see the photos of the facility.
-
5/5 users liked that they could use the tabs to see photos of specific places.
-
Final Design Iterations
Homepage:
BEFORE
AFTER
-
Moved the "Tour," "Contact," and "Apply" buttons under the programs section so they are visually associated with each program and don't distract users from the program info as they did in the previous version.
Programs:
BEFORE
AFTER
-
For consistency, use the same buttons for "Tour," "Contact," and "Apply" on the Programs page.
-
Added a use case when there's no opening for admission.
Admission:
BEFORE
AFTER
-
On the Programs page, the same buttons were used for "Tour," "Contact," and "Apply" for consistency.
-
Moved admission-related info to the top and included a section to inform if there are any openings.
What I learned:
While working on this project, I learned…
-
To obtain the most valuable insights, diving deeper and fully comprehending the user's underlying needs while also listening to and observing their challenges is crucial.