Website Redesign

The challenge

St. John Catholic Community, a church and school with about 2,000 families, learned that the company that built and managed their website would be discontinuing its service. The marketing and communications committee made a decision to build a new website and handle updates themselves. Please see stjn.org for the full website

The organization requested the following changes:

  • Responsive web design

  • Video banner showcasing experiences at St. John

  • Color scheme and messaging in line with their branding

  • Reorganizing content for more intuitive navigation

  • Create a WordPress How-To Guide to aide staff in making future updates to the site

*Note: Some changes and additions have been made by the St. John Marketing Coordinator after the redesign project.

The journey

Over a 3-month period, on a part-time basis, I completed the following:

Competitive analysis

Conducted research on the layout and features of other church and school websites

User interviews and survey

Completed virtual and in-person user testing with individuals to observe their expectations for navigating the website

Emailed survey to all parishioners and parents on record to gain feedback on usage and pros/cons of existing website

Sitemap and sketches

Developed a sitemap, using the sitemap from the previous site as a starting point and making changes influenced by user testing and survey results. This helped organize all of the sections of the website before adding content to WordPress.

Produced low-fidelity sketches to determine the layout of primary pages to create some cohesion

Content creation

Built approximately 160 pages of content (new content and edited/shortened text from the previous site). Edited text and navigation headings to portray a friendly, welcoming feeling and sense of community. Also, I incorporated the color scheme used by the organization. The colors used in the previous website did not match the colors used in the organization's logo and signage.

HTML/CSS

Added HTML/CSS coding to include features otherwise available only with Plugins. It was decided to build the website with the more economical version of WordPress, which does not include the option to use Plugins.

Search bar: This is one example of where extra research and creativity were required to deliver a final product that met the expectations of the organization. I had wanted to have a search field on the navigation bar so it would appear on all pages of the site. WordPress, however, places it at the footer of the page. I was unable to find a way to move it to the header without the use of Plugins. The agreed-upon solution was to place it near the navigation bar on the home page.