Holy Spirit Parish and School is a church and private k12 school located in Saint Paul, Minnesota that has been growing its Catholic community for 70 years and counting. As a well-established community looking for continued growth, Holy Spirit wanted to enhance their online marketing efforts through redesigning its website. A fresh look and feel optimized for mobile use would help attract young, local families; while maintaining its current community and boosting the usability of its website.
Holy Spirit had not seen a major website redesign in over five years. Design trends and user habits have changed greatly since then, so it was time to enhance its online presence with an upgraded look and feel, as well as some new functionality. Aside from balancing church and school on one site, going into this project we had a short list of objectives that were critical for success:
As you can see, we had a great project ahead of us and knowing we had experience in all areas; we went into this one with a lot of confidence.
After meeting with members from both the church and school, we discovered more of the specifics of what was needed for this project to meet their expectations. The main concern was finding an equal balance between church and school on the website. Both entities of the Holy Spirit organization were important, we didn't want to draw too much to one or the other. We also discovered that the school did need some functionality that the church did not. We decided that the best course of action was to have a dual homepage, or splash page that users would be brought to when accessing the main site, www.holy-spirit.org. From there, users would be able to choose if they wanted to go to the church side of the website, or the school side. This would provide us the balance we needed to keep the two organizations separate, but together at the same time.
We also discovered that a custom website was necessary in order to give Holy Spirit the branding it was looking for. A fresh look and feel was going to do wonders for enhancing Holy Spirit's online presence and attract young families, but we also wanted to make sure this site was optimized for mobile usage, and served as tool for staff and community members. We would achieve this mobile objective through a responsive web design. We also had some functionality up our sleeves to turn this website into a slick communication tool.
In order to accomplish the communication aspect of this project we planned to implement a news blog for both the church and school, as well as an event feed to promote upcoming events. We also had plans to implement Google Calendars. One of the biggest components of functionality desired for this project was the addition of classroom pages, which would allow users to login and view information on their children's classes (announcements, events, videos, assignments, and more.) Before we started on this advanced functionality, we needed to layout the site and design it.
As we began the custom design process, the first thing we did was defined all page templates that were needed for this website. Being that the church and school were going to share a website, most page templates would be similar, but would contain a different logo and different header/footer navigation. Each of these page templates would also include a mobile version for the responsive design. The page templates that were needed for this site included:
The next step in the custom design process was to layout the site’s content and structure in a wireframe. Even though there were a lot of templates listed above, the wireframes did not need to cover duplicate templates for church and school, which cut down the design time significantly. For example, we only designed one internal page template that would work for both church and school, the logo and navigation could be adjusted later. Wireframes act as a blueprint to the site’s content structures and layout. Once the wireframes for each page template is approved, we pull in the graphic designer to bring them to life.
A custom website design really allows our graphic designer to emphasis the branding portion of the project. Especially in the case of schools, it is important to adequately represent the school’s colors, logo, and overall brand in the design. It was also important to keep this brand consistent throughout the site for both church and school pages. The color scheme of the site was based on Holy Spirit’s existing school colors, which stemmed from the color of the students’ uniforms to the colors used in the logo. We also included some custom textures and stylings to make the site more unique. For example, the header of the site includes an image of a stained glass window found on the Holy Spirit campus, and the footer includes a texture similar to the uniforms that the students wear.
Once these design mockups were approved by Holy Spirit, it was time to take the static design images and convert them into usable code that would be used to integrate the page templates into the content management system (CMS). We sent the designs off to slicers to convert them into CSS and HTML coding.
When we received the coded designs back from the slicers, it was time to start implementing the designs into the content management system (CMS) that would be used to develop the site and manage all content moving forward. The first step was to implement the page templates into the site. The use of page templates gave us the ability to reuse each template multiple times based on the content needs of each page. The developers wen to work on all page templates to get them as far as possible, before handing them off to an engineer for more advanced development.
The engineers got to work writing code for the complex functionality that was needed for this website. Development included a custom blog, events feed, Google calendar integration, and classroom pages. All of these features would help Holy Spirit communicate better with its community, families, and members, and would turn the website into a tool, instead of just a website.
Blog. A blog is a great way to distribute information to the masses in a timely and efficient manner. We implemented a blog for both church and school,from which they could post relevant information to the site for the community to see. Community members are also able to signup for new posts via email or a RSS feed.
Event Feed. Both the church and school play host to several events every year. They needed a way to update community members about upcoming events on the website. So, we built a custom event feed that allowed website admins to easily plugin information about upcoming events (title, date, time, location, and a description) that would then be posted to the site for everyone to see.
Google Calendar Integration. Both the church and school manage several different Google calendars, some for public events, and some for internal meetings and facility usage. They wanted to promote the public calendars via the website. So we took the code from the Google calendars they wanted on the site and iFramed them into the page.
Classroom Pages. The classroom page functionality was the biggest item on the development to-do list, as it would be the feature that would truly streamline communication between the school and parents/students. We designed and developed classroom pages that teachers could create in order to post class announcements, assignments, field trip information, forms, newsletters and much, much more. In order to access these pages students and parents would need to login into the website via an unique username and password. To edit pages, teachers would login to the front-end of the site via an unique username and password. This secure access will prevent any outside users from seeing information regarding student and classes.
After a couple of months of the project being in the hands of the developers and engineers, we had produced a fully functional website ready for content entry and quality assurance. While the client was busy writing content on the site, our QA team was working hard to break the site and find errors in the functionality. They tested the site on all browsers and devices, and kept track of any issues that needed to be fixed. When everything checked out, we went through our 30+ item checklist that we go through prior to sending any site live.
We sent the website live just in time for Back to School Night!
Branding Holy Spirit Church & School. In any website redesign, branding is always a huge objective. We wanted to incorporate the school and church brand into the site’s design. Through custom color schemes, textures, stylings, and images this custom website fully represents the Holy Spirit brand. Verdict: Success!
Optimize for Mobile Usage. The design and implementation of a responsive web design was a direct result of the growing number of users on the mobile web. Mobile users will surpass all user types very soon, and Holy Spirit is now prepared for that migration. Mobile users are presented with the same content as the desktop/laptop users, but a responsive web design optimizes the layout and content for a mobile screen. Verdict: Success!
Streamline Communication. Most users visit church and school websites to gather more information about the organization. However, we wanted to turn this church and school website into more of a communication tool. We accomplished this through blogging, event management, and the classroom pages that will streamline communication between teachers and families. Verdict: Success!