Glen Urquhart School Site Launch

Posted by on Jan 6, 2010 in Case Study | 1 comment

What School Can Really Be.

What School Can Really Be.

At the beginning of December 2009 we launched a site for the Glen Urquhart School (GUS), a K-8 school on the North Shore of Boston. Their prior site was a lovely little Flash site which was easy to use from the point of view of the visitor but was challenging in terms of maintenance, and content updates. We pitched in early April 2009 and were awarded the job in the late spring. We handled IA, design, development and production on the job as well as some IT — we helped to migrate the school from one hosting provider to another and ensured seamless continuity for their email delivery as well as maintaining the functionality of legacy faculty sites running on a third party platform.

From a prosaic point of view the need to make maintenance and updates easier served as a primary driver behind the selection of WP. We spiced it up bit however by implementing WPMU in order to increase communication touch points between the school and the broader community of parents, students and interested visitors. So, while we take full advantage of WP’s CMS capabilities, we are also utilizing fully WP’s blogging capabilities to create a dynamic and changing body of content that reflects the life of the school and its community.

Another major factor in the decision to use WP was the fact that it is an open source platform with a robust community and resources supporting it. While exUrban, Inc.will provide support on an ongoing basis we are very comfortable stating (it was part of our pitch), and very up front about the fact that the school will not need us forever. As GUS grows more comfortable on the platform and experienced using WP, the school will eventually be able to mange this themselves — thus saving money over the life of the site.

Before jumping into some of the niftier aspects of the development of this job it’s important to mention how this site, and the platform on which it is built truly reflects the mission of the school. The school promotes hands-on learning, collaboration, and creative thinking based on participation in the arts as well as extensive involvement in community service programs (in addition to offering top-flight academics). What you see on the web is the result of a collaboration between the head of the school, Raymond Nance, and 3 very dedicated board members, Libby Delana, Steve Mushkin and Joe Hosler, who actively pushed for the adoption of WP and provided invaluable insight and support for the duration of the project. The end product is now a site that will grow and change according to the school’s needs and in which members of the community may participate and facilitate this growth. Already some parents with development experience are stepping forward to help create, and extend functionality.

One more thing to note about this site is that it was featured in the WordPress Showcase on December 18,2009 – something of which we are all proud and excited.

Home Page

The home page contains some nice features that highlight the variegated nature of the school and the things that go on  during the day. Whereas, the initial brief called for a an active, news magazine style interface, the final page is much more mellow, refined and open. Openness, above almost any other quality (though avoiding blog-like verticality was a close second) became a watchword for this project because the site needed to reflect that the school is an open place that does not impose limits on its students.

Picture 18

Custom built JQuery gallery update-able by custom fields, images hosted at Flickr

At the top of the page is a large image with three tabs. This feature enabled us to solve a couple of design issues as well as the underlying functional requirements for easy maintenance and update via custom fields. This is a custom built JQuery gallery. We wanted to be able to show more than one hero image and also work in the words “Knowledge, Creativity, Character” which is essentially the motto of the school. Clicking the tabs loads a new image. Making the navigation of the gallery user initiated removes sometimes grating rotating images, and also encourages exploration, and interaction. It is possible to add copy, and a link to each image to drive users into the site, it is currently off for launch, but can be reactivated should it be required (and will be manageable via custom fields as well). the images are all stored at the GUS Flickr account and updated via custom fields on the  edit page interface of the homepage.

Homepage: Calendar

Pulling a feed from Google Calendar to provide a slice of life at GUS

Pulling a feed from Google Calendar to provide a slice of life at GUS

The homepage really revolves around the calendar in the middle of the page to demonstrate the vitality of the school on a day to day basis. An interesting thing to note about the calendar is that we are using open source PHP code developed by James Cridland to pull in content from Google Calendar which the school now uses to manage its events. In the month after launch we experienced some technical difficulties with the code exhausting its memory limits. We corrected it with backend work to run an hourly Cron job that essentially breaks the overflow that was occurring. One of the reasons for this, we believe, was heavier than expected traffic to the site as a result of being featured in the WP Showcase, and also the fact that the school calendar has over 2,500 events for the year. As with much of this site we pushed the platform and our tools to their limits to provide as flexible and useful a tool as possible.

Homepage: Blog & Social Media Links

Pulling in blog content to draw users deeper

Pulling in blog content to draw users deeper & highlighting social media outposts

Beneath the calendar is a feed from the school’s blog which is located in the Parents and Community section. The blog is being used now to replace a newsletter called The Tartan that the school published and delivered monthly. Now, rather than having one monthly download of school information the same content can be delivered fresh, as it happens, keeping it fresh and lively, and hopefully sticky. We pull in the first 350 or so characters as well as an image (using Attached Image to achieve the last bit) to entice the user to explore more.

On the bottom of the page we’ve included some links to some of the school’s social media outposts. At exUrban, Inc., we often talk about the notion of listening posts — places where people can find out about you, and interact with you without having to come to the site. Because of the importance that we place on these listening posts, and the ever-increasing necessity of organizations to use and adopt social media, we’ve placed the GUS social sites on the homepage, making them easy to find and hopefully follow. The adoption and use of various social media platforms was a major driver behind the evolution of the site, and selection of WP. We are using FaceBook, Flickr and Vimeo (Twitter will be added soon) to extend GUS’s footprint and give interested parents, students and potential parents and students other venues in which to connect and interact with GUS.

Utility Navs

Easy updates, edits to utility navs

Easy updates, edits to utility navs

The final features to point out are the header and footer utility navs. They are all editable as their own pages and taking advantage of WP functions they appear dynamically up top or in the footer (depending on the parent) and do not require any coding to the header or footer files — again, we strove to make this site as easy as possible to update for the users.

Section Pages

Featured Pages on a GUS Section Page

Featured Pages on a GUS Section Page

On the second level of pages on the site we created a section page to contextualize the content within and also to highlight some features of the section. We created three buckets at the bottom of each of these pages to act as the highlight section. They pull their title from their target page and  a custom blurb can be created as well as an image. All of this is controlled via custom fields and therefore very easily updated by the users.

Inside Our Classrooms

Easily updateable sidebars on Class pages

Easily updateable sidebars on Class pages

Inside the classroom uses a custom template with sidebar on each class page. While we strove to keep away from blog-like verticality, we did alter design here a bit to take advantage of WP sidebar functionality. The sidebar on these pages, in this section, enables deeper levels of content, and also a different way to show the diversity of the classroom experience on a grade-by-grade basis. The teachers will ultimately control these pages (or at least the sidebar) and the sidebar affords them the opportunity to quickly and easily  update content as their classes begin studying new subjects etc. We created a feature to enable easy updates. All of the content beneath “Happening @ GUS” is drawn from a child page of the class page. Teachers can place almost any content they want into this page — be it prose, graphical or video. This feature enables easy updates to encourage frequent changes, therefore always keeping the content fresh. The sidebars also accept standard WP plugins and we are currently populating them with quotes from faculty that we are placing into the Plugin Stray Random Quote.

Showing the parent child relationship for sidebar content updates

Showing the parent child relationship for sidebar content updates

Calendars

The GUS events Calendar

The GUS events Calendar

One of the features that we wanted to maintain on the site was a calendar function. Before the redesign the school linked to a calendar outside of the school and we integrated it into the school to help create a more seamless experience. We utilized google Calendar, and while we pull in an overarching calendar into the home page and also link to it on the events page, we set up a custom field to pull in other calendars, such as athletics schedules so that people can get the info they need in logical places. We helped to create the event creation and editing process that enables this functionality and ensures that the events appear in the correct calendars. The calendar functionality will be expanded and usable on the teachers’ pages (they will also have the option of using a WP plugin calendar as well as the faculty sites come online). One of the challenges we faced on this aspect of the job was that during production WP changed the way that it handled iframes — it stopped accepting them. The custom field was a solution to that issue and we now bounce the calendars in as needed. In the future it would be wonderful to be able to better skin the Google Calendar (which is an awesome tool). This lack of skin-ability is somewhat disappointing.

The Future

In conclusion, the GUS site is a very flexible and ever changing entity. We are convinced that the platform will grow as need be and have already started to make updates and changes to the site to accommodate the school’s needs and adapt to feedback which has been very positive. At its core  we believe that the site, and the process we undertook to create it truly reflect the core values of the school. While Conor Feely did the design and Joel Oliveira did the build the finished project represents a collaborative effort on the part of many people to make it a reality. We got our hands dirty, pushed the platform and our understanding of site development and marketing into some new spaces to create what we believe is a unique and remarkable site that fits the client’s business needs (flexible, manageable, easy to update web presence),  and sets it apart form other schools in the area.

1 Comment

  1. Ted – you guys really put a lot of thought into this site. I especially like how you’ve set up a platform that is flexible enough to grow with the school. Talk to you next week!

Trackbacks/Pingbacks

  1. Tweets that mention Glen Urquhart Site Launch | exUrban, Inc. -- Topsy.com - [...] This post was mentioned on Twitter by johnhaydon and Pamela Grow, Terrapax. Terrapax said: RT @PamelaGrow: RT @johnhaydon: RT …