We’re excited to highlight a recent website redesign project completed in September for St. John Catholic School. Their website, originally designed by OlyWeb in 2015, had served the school well for nearly a decade but was due for a refresh. The age of the site was starting to show with difficulties in navigation, site performance, and also general look and feel so it was time to look at designing a new web presence for the school.
The original website (left) and the new website (right) launched in September 2024
For the new site, we worked together with the school’s leadership team to determine the specific goals for the project and the scope of our work. Among the needs for the new site were:
- Better communication of the school’s mission and academic experience
- Improved site performance and navigation
- Incorporating the new WordPress block editor for staff to edit content more easily
- Updating the look and feel to reflect the school’s new logo and colors
- Better optimization of the site for mobile and tablet devices
- Organization of the wealth of content they have with an eye for search engine optimization (SEO)
Highlighting the Mission of St. John Catholic School
There’s something particularly rewarding about working with schools that have such a rich history like St. John Catholic School. Serving the Greenwood area since 1923, the school has provided quality education and served their community for over a hundred years. When it comes to translating that legacy to an online platform, it can be easy for the nuances of the school’s legacy to get lost in the bustle of a busy website. That’s why it was important for us to tailor the design, especially of their home page, to highlight the many important aspects of the school that has given it such a lasting reputation in their community.
The school’s new home page gives a quick glance of some important features of the school.
When working with a school on how to structure their home page, we often start with their own school tours. What would you make sure to mention to a new family on their first visit? Choosing a few main points that are usually covered during that visit is often a great start to what can inspire the content of their home page.
For the final home page design, we included the school mission, three spotlight sections focusing on values of the school, an at-a-glance statistics section as well as current news and the latest social media posts. This all came together as a virtual ‘guided tour’ giving a quick overview of what the school is like from their core values to current events in a clear and concise way.
Improved Performance
The new site we developed embraced modern web design aesthetics while focusing heavily on functionality, user experience, and performance—everything a busy school community like St. John’s needs in a website. The redesign included a new custom theme built by OlyWeb on the WordPress platform. It utilized the latest best practices for theme development and leveraged all the latest features of the new block editor functionality in every template. This overall improved the site’s performance, ensured faster load times and a smoother browsing experience. This also makes the site easily adaptable to how the web will change over the next 3-5 years giving them optimal compatibility and flexibility.
Optimized Navigation
St. John’s new website needed to improve the experience of navigating their significant amount of content while highlighting the key points of their story and mission. Approaching any school’s website redesign typically involves a balance of focus on the prospective families looking at the school for the first time and existing families who often need to find information quickly.
With this challenge in mind, we went through the existing menu and page structure together and developed a sitemap and menu organization to simplify the navigation process and make it more intuitive. The main menu was consolidated and reorganized as well as an upper menu added for access to more utility items.
Previous Navigation
Updated Navigation
To help with site navigation we also added breadcrumbs to inner pages and posts to help visitors understand how the content was organized. With all navigation it’s important to keep in mind the key guideline: navigation should always show a user where they are as well as helping them find where they want to go.
New breadcrumbs aid in site navigation
Incorporating the WordPress Block Editor
Built on the latest version of WordPress, we took full advantage of the new block editor (Gutenberg) to make content management easier for the staff. The block editor allows the school’s staff to create and customize content with more flexibility, giving them a modular, visual way to build and update pages. This has greatly simplified the process of adding new information and updates to the site without the need for advanced technical skills or cumbersome “shortcodes”.
If you’d like to learn more about the WordPress Block Editor (Gutenberg) check out our blog post: Guide to the New WordPress Block Editor
A Brighter, More Vibrant Look
One of the first things visitors will notice about the new site is the bold and engaging visual redesign. St. John had recently updated their branding with a new logo and refreshed school colors, and it was essential that the website mirror these changes. The updated palette, combined with a clean and professional design, gives the site a much more energetic and contemporary feel, aligned with the school’s values and community spirit.
Streamlined Design for Mobile Devices
Another important change was refining the layout of the site for better compatibility with phones and tablets. As the previous site had a default two column layout, this made viewing the old site between mobile to desktop more jarring. Information that was easily seen in the two column desktop version wasn’t as easily found in the mobile version. To address this and bring the site in line with most modern websites, we shifted the layout to a single column for desktop as well as mobile, freeing up more space for the content of each page. The two column layout was preserved for content needing more navigation features like in the case of blog posts.
The original website (left) with two column layout and the new design (right) with a single column layout
Desktop, tablet and mobile views of the new website
Organizing A Wealth of Content
One of the biggest challenges in designing a school website is the sheer size of information a school needs to organize. Schools like St. John have to provide a wealth of information not only for prospective families but also for current students and parents. Prospective parents need to easily find details about the school’s academic offerings, extracurricular activities, admissions process, and more. Existing parents need quick access to critical information like school calendars, contact details for staff, important announcements, and student resources.
This challenge can feel daunting for any school and that’s why it’s a major component of the services we offer at OlyWeb for school website projects. Working hand-in-hand with the St. John’s staff, we sifted through all of the existing content, including thousands of images, posts, and pages, ensuring all content was organized with best practices in mind as well as making sure everything was reflecting current information.
Optimizing for SEO
The task of organizing content also included making sure everything was optimized for search engines as well. Search Engine Optimization (SEO) is critical for schools looking to attract new families and engage with their community online. Search engines are the first step in many families’ search for a new school so making sure search listings are correct is crucial to capture the audience the school is looking to attract.
The school had been diligent over the years making multiple news postings every week as well as adding information to pages and their social media. This meant they already had a great presence online, ranking well with major search engine listings. Our task included a full technical audit looking for any issues on the site and optimizations that could help search engines list their content. In the end we were able to dramatically improve their SEO score and correct many small issues that had accumulated over the years in their content.
Built on WordPress for Flexibility and Scalability
The new St. John website was built on WordPress, the world’s most widely-used content management system. WordPress offers schools like St. John the latest in web technology while ensuring the platform remains user-friendly and affordable. The school has access to thousands of plugins and add-ons, allowing them to add new features or customize existing ones without significant development costs.
Along with robust writing and content management tools, the platform also provides many helpful integrations with calendars, email platforms as well multiple ways to show announcements including popups. WordPress provided the flexibility to incorporate these features while maintaining ease of use for their staff.
The Result: A Modern, Engaging Website Experience
We’re so thrilled with how the new St. John Catholic School website came together. The project was truly a product of collaboration as the school’s leadership team worked tirelessly with OlyWeb to make sure the new site captured the school’s identity and messaging. With their support we were able to develop a user-friendly, fast, and visually striking website that can support the school’s mission in serving its community for years to come.
Visit the site to see how the work came together: St. John Catholic School
Are you ready to give your school’s website a refresh? Contact us today to find out how we can help!