A NEW LOOK FOR THE SCHOOLS WEBSITE
ROLE
Product Design (UX/UI)
TIMELINE
2 Months
TOOLS
Figma
Photoshop
Procreate
Wireframes
Branding
Logo Making
Mockups
BACKGROUND
As a School Computer Technology Specialist, I support the instructional and administrative tech needs of my school—managing systems, providing support, and training staff on educational tools. Beyond technical work, I used my design background to redesign the school website and create a full branding kit (logos, brochures, business cards) to enhance our visual identity and support enrollment through a more polished, professional online presence.
PROBLEM ?
When I took on the redesign of the Park Slope Collegiate website, I began by meeting with school leadership to understand their pain points and goals. It quickly became clear that the existing site was outdated—both visually and functionally. As the principal candidly put it, “The site looks like it was made in the 2000s.” The design lacked modern appeal, and the user experience was not intuitive for families, students, or staff. A major concern was the difficulty parents faced when trying to find staff contact information or stay informed about school updates. The overall goal was to create a more modern, user-friendly, and communicative platform that better represented the school and served its community.
SOLUTION !
The goal of the Park Slope Collegiate website redesign was to create a modern, user-friendly digital experience that improves communication between the school and its community. The new site aims to simplify the route to essential information for parents, students, and staff, strengthen the school’s visual online identity, and ultimately support enrollment efforts by showcasing the school’s values, programs, and culture in a better way.
SCHOOL COMMUNITY WEBSITE NEEDS EMPATHIZE
PRIMARY RESEARCH
Research Approach
User Interviews
To better understand the pain points of the existing Park Slope Collegiate website, I conducted a series of scripted interviews with key stakeholders:
-
2 Parents of current students
-
2 Staff members (a teacher and a counselor)
-
2 Students from different grade levels
Each interview focused on how users currently interact with the website, what frustrations they’ve encountered, and what improvements they’d like to see. After conducting interviews were my key findings.
1. Poor communication systems
-
“I never know the best way to reach my child’s teacher.” – Parent
-
“We send out announcements, but many parents say they never see them.” – Staff
The existing site lacked efficient pathways for communication. Staff contact information was buried or outdated, and there were no centralized tools for sharing announcements, forms, or school news. As a result, parents felt disconnected, and staff were overwhelmed with redundant questions that could have been avoided.
2. Outdated visual design
-
“The site looks like it hasn’t been updated in years. We want the website to help us attract more families” – Principal
-
“It doesn’t reflect who we are as a school.” – Staff
-
“If a new parent sees the site, they won’t be impressed.” – Teacher
The website’s outdated visual design weakened the school’s credibility. Users perceived it as unprofessional and cluttered. First impressions matter and for many prospective families, the school’s website is their first point of contact. The old site didn’t tell a compelling story or make it easy for new visitors to learn about the school, schedule a visit, or begin the enrollment process.
3. Confusing website architecture
-
“I can never find what I’m looking for.” – Student
-
“The calendar is hard to locate, and sometimes links don’t work.” – Parent
Users struggled with poor information architecture and inconsistent updates. Critical content—like the academic calendar, forms, and enrollment information was difficult to find. This led to confusion, frustration, and missed deadlines.
PERSONA DEVELOPMENT DEFINE
Secondary Research
Persona Development
Problem Statements
To better understand the needs of parents exploring Park Slope Collegiate, I created a user persona based on Valerie Cohen, a pediatrician and mother of four, currently searching for the right high school for her youngest child. With years of experience navigating the education system, Valerie knows what to look for including, clear communication, academic quality, and a strong sense of support. However, when exploring Park Slope Collegiate, she quickly runs into issues with the school’s outdated website. She struggles to find basic information like staff contact details, school events, and curriculum updates. Important announcements are often buried or missing, leaving her feeling disconnected and frustrated. For someone who values being informed and involved, the current site makes it difficult to engage with the school community or trust it as a reliable source of information. Valerie’s experience highlights a deeper need for a more accessible, transparent, and well-structured digital presence.
Meet Jalen Scott, a 14-year-old incoming freshman and the youngest of four siblings. As he prepares to start high school, Jalen is eager to find his place—socially, academically, and creatively. He’s curious, expressive, and drawn to digital media and extracurriculars that help him feel connected. But when exploring Park Slope Collegiate’s website, Jalen finds it difficult to access the resources he needs. He struggles to locate information about clubs, events, and assignments, and the site doesn’t feel welcoming or designed with students in mind. For someone who thrives on community and support, the current website leaves him feeling overlooked. Jalen’s experience underscores the need for a student-friendly interface that makes it easy to stay informed, get involved, and ask for help when it’s needed most.
How might we?
How Might We create a modern, user-friendly school website that builds trust, improves communication, and strengthens the sense of community among students, parents, and staff?
By addressing outdated design, poor navigation, and communication gaps, how might we streamline access to critical resources, ensure families feel informed and welcomed, and reflect the school’s values and identity in a way that encourages community and boosts enrollment?
AFFINITY CLUSTERING & SITEMAP IDEATION
OVERVIEW
Ideation
Sticky Notes
Site Map
To kick off the design thinking process, I led a UX sticky notes exercise to map out key user needs for the school’s website. I held a collaborative session with school leadership to understand their priorities, while also referencing insights from previous parent and student interviews. By identifying recurring themes and user expectations, I was able to cluster ideas and clearly define what users would be looking for when visiting the site. This process directly informed the information architecture, ensuring the navigation and site structure aligned with how users naturally seek and access information.
I then organized these ideas into a clear structure that reflected user priorities. This process laid the foundation for the site’s information architecture, with each sticky note representing either a page or a key section of the website.
WIREFRAME PROTOTYPE
OVERVIEW
Wireframes
Branding
Logo Making
Mockups
WIREFRAMES
The wireframe phase laid the foundation for a clear, intuitive user experience focused on accessibility and ease of navigation. Through multiple iterations and user feedback, we crafted low- and mid-fidelity wireframes that prioritized key user needs—such as quickly accessing enrollment info, school updates, and academic resources. Every layout decision was made to reduce friction in the user journey, with strategically placed calls-to-action guiding families, students, and staff to what they needed with minimal effort.
LOGOS
Low Resolution
Old Logo
New Official Crest
New Vertical Logo
The school wasn’t seeking a complete rebrand, so I focused on refining their existing logo. I updated it to a high-resolution format and created versatile variations, including a vertical layout and a simplified shield version for stamps and other official uses.
Due to ongoing scaffolding at the front of the building, this was the only unobstructed photo available of the school. I applied a gradient map using the school’s brand colors to enhance its visual appeal, and this treated image became a central design element that inspired the overall look and feel of the website.
Design & Development
The final website serves as a clear and intentional roadmap for the school community—designed to simplify how parents, students, and staff access essential information. From event updates to donation links and staff contact details, every element was developed to reduce friction and improve communication. With easy navigation, a mobile-friendly layout, and content tailored to user needs, the redesigned site transforms what was once a confusing retro experience into a centralized, accessible, and welcoming digital modern home for Park Slope Collegiate.
.png)
Old Home Page
New Home Page
During interviews, the principal emphasized the importance of making the school donation process more accessible. Parents often didn’t know where to go to contribute, which led to missed funding opportunities. To solve this, I added both a prominent “Donate” button and a scannable QR code to the homepage, making it easy for families to support the school with just a few clicks.
New Donation section
(Home page)
Old Faculty page
(About Me page)
New Faculty page
(About Me page)
Both students and parents expressed difficulty reaching staff members in urgent situations. While the school had systems in place to contact families, the communication flow in the opposite direction was unclear and inconsistent. To address this, I designed a new “About Us” page that introduces the school with its mission statement and a warm welcome message from the principal. The page also features a staff directory, where each teacher and staff member is listed with their name, title, and direct email—ensuring parents have clear, immediate access to the people supporting their children.
Parents also shared frustrations about being out of the loop on key events like picture day, potlucks, and parent-teacher conferences—often relying on their children for updates that didn’t always come. In response, I added a dynamic school calendar to the homepage, along with a blog-style update section to keep the community informed about upcoming events, holidays, and important announcements.
IMPACT
Redesigning the Park Slope Collegiate website had a transformative effect on the school’s digital presence and community engagement. Prior to the redesign, the site averaged only 12 visits per week and struggled to serve the needs of students, parents, and prospective families. In June 2023, annual donations totaled just $634—partly due to the lack of visibility for school donations on the website.
Following the launch of the new website, the average weekly visits grew to 93, reflecting stronger engagement from both current families and prospective ones. A key feature of the redesign was a clearly visible and easy-to-use donation button on the home page, which contributed to a 43% increase in donations, bringing the total to over $900 within a year. We were then able to use that money to purchase more school laptops to give to kids that don't have devices at home to complete their work. In addition, the site’s improved organization and modern aesthetic made a positive impression on new visitors, helping contribute to a 25% increase in school enrollment and interest.
Beyond the numbers, the project showed how thoughtful UX design can bridge gaps in communication, build trust, and create tangible results for institutions that rely on clear, accessible digital tools to serve their communities. This case demonstrated the real-world impact of combining usability, empathy, and visual design into one cohesive solution.
REFLECTION
Redesigning the Park Slope Collegiate website helped me understand just how many different needs a school website must meet. I learned that parents often visit to stay informed, access forms, or communicate with staff; students look for calendars, assignments, and opportunities to get involved; and staff members need a space that supports both communication and school representation. Each group approaches the site with different goals, and a successful design has to balance clarity, accessibility, and trust across all of them. This project deepened my empathy for diverse users and reinforced the importance of designing with real, day-to-day needs in mind—not just aesthetics.