St. Joseph School
Designing a Website to Increase Student Retention and Enrollment
🚨 Disclaimer 🚨
In order to protect the digital privacy of the students of the school, I’ve used stock images and replaced private information. If you would like to see the live final product, please contact me at lhartley13@gmail.com.
Summary
Situation: A small Catholic school wants to increase enrollment and retention while keeping families up to date on school happenings.
Goal: Create a website that reflects the school’s voice and encourages current and prospective families to learn more and enroll for the upcoming school year.
Process: Utilizing a competitive anaylsis and information architecture to guide the sitemap and design of the website. Multiple checkins with the client and updating the design based on feedback.
Results: A live website that hosts enrollment information for current and prospective families and reflects the mission of the school. Baseline metrics for website visitors are established along with an increase in new students registered for the upcoming school year.
Background
The Principal of St. Joseph School, a small Catholic school with about 50 students in grades PreK-5th, was in need of a new website. We had a couple intake calls so I could get acquainted with their goals for the website.
In order to begin,
I defined their goals:
✅ Promote enrollment for their upcoming school year
✅ Showcase the school’s curriculum and mission
✅ Highlight the students smiling faces and school colors
With some stipulations, of course:
❗️Quick turnaround
❗️Using a platform that is new to me (Wordpress)
❗️Low maintenance website
Hold on! Customer care is a major priority of mine (thank you retail experience 🫡), so making sure I could deliver on time while meeting their goals was the number one priority. After some Wordpress research, consulting another designer for advice, and scope planning, I felt confident and moved forward with the project.
To the research we go! 🚀
What goes into a school website?
Competitive Analysis 🥊
I needed to learn more about what a Catholic school of this size should have hosted on their website. My primary goal was to establish the core pages.
I combed through two direct "competitor school’s” websites to put their pages into categories.
Must have
Maybe/ secondary
Ask the principal for clarification
Most likely no
These competitors were both larger schools in the same area as St. Joseph and offered more grades than Preschool-5th Grade.
Based on the competitor’s sitemaps, I narrowed down what was necessary and made sense for St. Joseph. For example, sports were not a core focus for St. Joseph so those were excluded.
Must Have:
⭐️ Home
⭐️ About
⭐️ Admissions
⭐️ Tuition and Financial Aid
⭐️Calendar
⭐️ Staff
Information Architecture 💭
Based on my research thus far and the notes that principal had given me in our initial intake calls, I turned to information architecture to get organized.
I organized the menu into four categories and then sorted the remaining pages based on priority and upkeep.
Challenges 🛑
After multiple iterations of the sitemap, the principal and I went over each page together. We discussed the name and the page contents. We struggled on a few things,
📌 Deciding on “Prospective Students” or “Admissions” as a title
📌 The principal didn’t want certain pages included (Faculty and About)
📌 Pages the principal want but didn’t have information within the project timeline for (Handbook and Lunch Menu)
📌 Some pages required too much upkeep (Announcements and Lunch Menu)
We talked through each concern until we found a resolution that was best for the website.
✅ We decided on “Admissions” since that is what the majority of other school used
✅ We included “Faculty” and “About” based on research and competitor sites
✅ Skipped including high maintenance pages and pages that could be added next school year
Designing for Wordpress
New Platform, No Problem? 🤔
Once the sitemap was set, I faced my biggest issue. How do I translate my designs from Figma to Wordpress?
Taking into consideration the timeline and the client, I quickly came to the conclusion that high fidelity wireframes and interactive prototypes in Figma were not necessary. The principal would have little use for that and I needed to remember that their goal was a low maintenance site.
I decided on low fidelity wireframes and some UI elements in Figma were enough to translate my design into Wordpress.
Low Fidelity Figma Designs
Final Design 🎉
Once I began designing in Wordpress, the most pressing issue became the copy and media.
The principal is a very busy individual, so instead of pestering them for this information and pictures, I decided to get more specific. I created a template for them to fill out that would answer the majority of my questions. The template can be found here. I also suggested creating a shared photo album with all of the pictures they wanted featured on the website.
I was able to finish the design with a couple days to spare so the principal and I could go over everything together. After some minor changes, the site was published.
Below are four pages that highlight the goals for this project.
🚨The grey boxes with black outlines are pictures on the live site but have been removed for this case study to protect everyone’s digital privacy.
Homepage: Highlighting the school’s mission and promoting enrollment for the upcoming school year.
Admissions & Tuition: Easily presenting tuition and enrollment information for prospective families
Preschool: Showcasing the school’s curriculum and opportunities.
Kindergarten-5th Grade: Showcasing the school’s curriculum and opportunities.
Metrics 📈
Keep in mind that this school is relatively small with around 50 students total and about 16-20 staff members and volunteers.
Since publishing the website on January 22, 2024 the website has seen in a consistent amount of visitors each month. The first few days were much higher than average due to the site being promoted at a school open house. Since then, there are an average of 20 visitors per week.
The top five pages visited are:
Homepage
Elementary
Admissions
Preschool
Faculty
In order to further promote the site, I recommended:
💡 Add a QR code to the paper pamphlets promoting the school
💡 Add the website to their email signature
💡 Post on their Facebook page to encourage families to visit
🗓️ After some time, I reached out to the principal to see how enrollment for the next school year was doing. They weren’t able to give exact numbers, however they said there was an increase in enrollment and retention stayed about the same as previous years.
The total views of each page as of March 2023
The total amount of views and visitors for the websites first week