Overview

Our team’s re-imagining of St. Mark’s Preschool welcomes a new generation of parents and students to the St. Mark’s community. The original website was difficult to navigate and contained outdated visuals. After completing user research and by using an Agile design process, our team redeveloped their site. Our new website separates information into separate user-friendly pages, has a cohesive brand, and is mobile responsive.

To understand parent’s current user experience, our team sent out a survey to parent’s with children enrolled for the 2024-2025 school year. We analyzed their experience navigating the site, enrolling their child, and how they interpret the current design through quantitative and qualitative feedback.

• Potential parents struggled to find information for the upcoming school year. Such as cost, schedule, curriculum, and toilet training requirements
• Contact information and calendars are difficult to locate for current parents
• Overall aesthetics were not engaging and there is a large quantity of text
• Enrollment experience was straightforward and easy

Quantitative Data regarding Navigation

Quantitative Data regarding Aesthetics

• Website navigation does not utilize multiple pages, all information is available by scrolling through a single page
• Disorganized staff information and social links in the site’s footer
• Text displayed over images is cluttered and difficult to read
• St. Mark’s Preschool has brand discrepancies on the website in comparison to classroom materials (colors, fonts, logos)

Sitemap

Our team organized the information on the school website into four categories

• Research – Information potential parents are looking for when comparing local preschools
• Enrollment – Forms and payment that need to be collected for future students
• Day-to-Day – Information that currently enrolled parents are looking for
• Aesthetics – Visual cues and branding

Dividing the information into these categories allowed our team to understand what information should be located on the same page of the website. We used this flowchart to guide the development of our preliminary sketches.

Preliminary Sketches

Referencing our sitemap, our team drew preliminary sketches of a new web interface for the preschool. We utilized multiple pages to organize information and group similar information together for easy user access.

Branding

To establish St. Mark’s online presence, we refined their branding to reflect their mission. St. Mark’s new color palette focuses on utilizing primary colors, which reflect their goal to introduce children to art and early learning. The final branding is also cohesive with the St. Mark’s church. Featuring a similar cross and shared shade of dark blue, while using soft yellow and blue tones to set themselves apart as a children’s organization.

Figma Prototype

Our team’s Figma High-Fidelity Prototype focuses on advertising positive classroom experiences and making key information easily accessible to current and future parents. The redesign focuses on organizing information to be straightforward and concise, while increasing visual engagement.

St. Mark’s Homepage

Homepage Testimonials, Photo Gallery, and Site Footer

Classroom Information and Comparisons

St. Mark’s Staff Information

Next Steps

After developing our Figma prototype and communicating with our client, our team will be moving forward to publish St. Mark’s Preschools refreshed website. Based on feedback from our client and potential user’s, our team will be implementing the following refinements.

• Feature new photographs taken of the preschool this spring with recently purchased playground equipment
• Prioritizing school photos over parent testimonials in homepage organization
• Implement 2025-2026 school year enrollment

Team

• Allie Nolan
• Kaitlyn Kennedy

Team Contributions

• User research
• Flowchart
• Preliminary sketches
• Documentation

14+ weeks | January 2025 – Current