Skip to content

Saint Thomas More Catholic Parish

Parish Resources Available Anywhere, on Any Device

Website design for a Catholic church - St. Thomas More

Saint Thomas More Catholic Parish in Centennial, Colorado is one of the largest parishes in the region. Presently, there are more than 6,250 St. Thomas More families, made up of more than 20,000 registered individuals. Thousands of volunteers serve on the parish's 260 ministries. The vitality of parish life is evident not only in its social activities but also in its devotional life. Over 300 people attend Mass daily and 7,500 on Sundays. Please visit their website, stthomasmore.org, to learn more.

The Website Project

 

In mid 2013, St. Thomas More Catholic Parish (STM) selected Upper Room Media as its website design and development partner to help build the digital component of its extremely robust and dynamic parish life. With as many as a dozen or more activities and events taking place on practically a daily basis, STM needed a modern website that could engage users on any device. Current parishioners were designated the primary target audience, with prospective parish families being the secondary audience.

Custom Design for Those Accustomed to Custom

A differentiating demographic characteristic of STM parishioners is that they are affluent, very affluent. They have refined tastes when it comes to aesthetics, be it with regard to the art and architecture of the physical facilities, or the layout and design of the parish website. So I spent a lot of time with the brand marketing team of staff and volunteers to sift through countless examples what they considered to be good and bad design. From there, I developed a live wireframe of the page layouts. By creating the wireframe directly on the development site, I was able to demonstrate how the navigation structure worked to streamline access to STM web page designdesired content, present the layout of page elements for all the screen sizes of the various browsing devices, and show how the various features actually functioned to enhance usability. I was also able to make changes on the fly and then seamlessly take the final version directly into the next phase of the design process.

This next phase is where the graphic style is applied to give the website STM's distinctive brand identity. The design had to be simple and elegant, incorporating a hint of the interior design of the parish church with a particular emphasis given to the parish color palette. Based on this guidance, I created a style tiles in Photoshop to show how color and other graphic elements would be applied to the website. I was able to limit the use of design images to the parish logo and light-weight repeating background pattern, suggesting the marble in the church sanctuary. Once the style tile was finalized, I applied the style to the website to produce the finished product.

Rich Use of Rich Media

With all the activities and events happening at STM, its easy to imagine that a good number of them are worth capturing and sharing. Fortunately, STM has the technological resources and creative talent to produce an abundance of high quality rich media content. To facilitate optimum usability for both those posting rich media content to the website, and those looking to access that content, I worked with the STM website team to develop a simple categorization system for managing and displaying this content.

First, I setup different content types for audio, photo galleries, and video. Since audio would be limited in its use, STM opted for serving it directly from the website server. Using a simple form field for managing the uploading and presentation of each audio file, I was able to make each audio files playable directly on the website and downloadable for future listening on any mp3 compatible device. Conversely, video was expected to have extensive usage and play much more of a role in STM's social media outreach. STM Website Photo GalleryFor this and other reasons, STM opted to off-load video serving to YouTube and Vimeo, both free services with the best available technical capabilities. I accomplished this by configuring an embedded video field in the video content type. this field makes post a video as simple as copy and pasting the YouTube or Vimeo video URL. Photo galleries, like video, were expected to be widely used. However, STM wanted to have greater control over the presentation look and feel of the photo galleries than they could get via embedding a photo service gallery. Also, from a systems standpoint, photos are far less complex to process and serve than video. But, it had to be easy to use for gallery creators and gallery viewers alike. Using various JavaScript applications and Drupal modules, I was able to configure a simple drag and drop, multi-image upload widget; a draggable sort for the image files; and a dynamic, fully responsive gallery display.

Screen Shots

STM Website design 1