Mini logo

How We Designed a Modern Website for a Bishop of London

Mouse icon

The Diocese of London is one of the 41 Church of England dioceses. What's one of those? It's a geographical region under the leadership of a bishop. In this case, the Bishop of London. Gulp.

Objectives of the redesign

Why did the Diocese of London need a website redesign? The good people within the diocese were doing great work, but their light was being hidden under a bushel.

The Diocese needed a better platform so that this valuable work could become better known and also to achieve the goals of Capital Vision 2020.

A secondary objective was to improve the quality and breadth of support information for parishes. The plan here was to make members of staff curators for the web content that related to their business areas. This would make it easier to adapt to a web-first publishing model.

To achieve all this, the Diocese of London put their faith in Moove Agency.

The brief

The Diocese of London's new web presence needed to wear several different mitres (that's a bishop's hat, by the way):

  • News and opinion The site had to be a publishing platform for news and blog articles about the work of the Diocese and parishes. This is professional stuff, written by paid members of staff and a large team of volunteers. We had to do it justice.
  • Directory The site had to be a mini directory, able to put people in touch with their local church or clergy. It had to advertise church events across London, too.
  • Information It also had to offer basic information for the public about matters of faith, the church and life events such as weddings and baptisms.
  • Support It had to give a helping hand to clergy and parish officers with updates and support information.
  • Intranet Access to information and forms for staff was another box to tick. We were going to be busy.

The site had to be a publishing platform for news and blog articles about the work of the Diocese and parishes. This is professional stuff, written by paid members of staff and a large team of volunteers. We had to do it justice.

The site had to be a mini directory, able to put people in touch with their local church or clergy. It had to advertise church events across London, too.

It also had to offer basic information for the public about matters of faith, the church and life events such as weddings and baptisms.

It had to give a helping hand to clergy and parish officers with updates and support information.

Access to information and forms for staff was another box to tick. We were going to be busy.

Key audiences

So that's one website, several audiences. Just to recap:

  • General publicImage of general public
  • Clergy and parish officersImage of clergy
  • StaffImage of staff

Example user stories

The editor

I need to be able to plan, track, schedule, edit and publish news and blog pieces from the team of 20+ writers. I need control over SEO settings and what we share on our social media channels. I need a workflow system to approve content changes made by other members of staff.

The site administrator

I want to be able to manage content and page layouts in-house.

The blog contributor

I could be anywhere, so I'd like to write and submit my articles from wherever I happen to be. I want to be able to communicate with the rest of the editorial team about the piece I'm currently working on, and possible future articles.

The prospective church visitor

Where's my nearest church? I want to be able to search by name, location and postcode - or just browse.

The journalist, funder or member of the public

I want to catch up on the latest news and opinion, and browse the archives by topic. If I like what I read, I might choose to follow on Twitter or Facebook, or sign up for one of the newsletters.

The member of staff

Where's my nearest church I want to be able to search by name, location and postcode - or just browse.

The vicar or parish officer

If I can get easy access to information about my role, I don't need to bother other members of staff on the phone. It's also handy to share my good news and read news about other parishes. For me, the website has to replace the annual paper directory.

Building the website using interactive prototypes

At Moove, it's all about you and your input. We kick off with a stage called wireframing/prototyping, but only after productive and insightful discussions with you over coffee and croissants.

We'll talk about content, page structure and calls to actions. Interactive prototypes allow us to do this with amazing clarity and effectiveness.

We used interactive prototypes to test the user experience, new navigation, structure of pages, calls to action and content.

Website design

These days, it's all about surfing on the run, so we had to build the best-possible viewing experience for mobiles and tablets. We worked extra hard to use a responsive framework and get a consistent experience for every possible device.

Diocese of London's responsive website shown on an iPad, iMac and iPhone
Page layout preview Page layout preview
Page layout preview Page layout preview

Style guides

Yikes. This was a high-pressure, multi-user site. It was the perfect opportunity to push our internal guidelines and quality standards to the next level. We created a beautiful web style guide to help both developers and the client's in-house web team. They'll use the web style guide like designers use brand guidelines.

Dare we say it, the Bible of development.

We created a beautiful web style guide to help both developers and the client's in-house web team. They'll use the web style guide like designers use brand guidelines.
We created a beautiful web style guide to help both developers and the client's in-house web team.
We created a beautiful web style guide to help both developers and the client's in-house web team.
We created a beautiful web style guide to help both developers and the client's in-house web team.

The yearbook online directory

Who needs a printed yearbook? This is 2015, right? The directory feature brings together content types and functions to create an easily navigable and searchable source of contact information for people and places within the Diocese. It replaced the 200-page yearbook.

We introduced complex data structures, such as the entire database of thousands of contacts within the Diocese (on the directory section). This is searchable by keyword or postcode and synched daily with a third-party CRM system.

The directory feature brings together content types and functions to create an easily navigable and searchable source of contact information for people and places within the Diocese.
It was time to become WordPress superheroes and be the architects of a new widget system. This one took our WordPress development skills to yet another level.

Bespoke widget systems

The challenge was to allow WordPress admins to create groups of widgets and update individual widgets globally. WordPress comes with a default widget system. But that's not enough, because default settings don't allow you to modify widgets globally or create groups of widgets.

We needed WordPress admins to be able to create a group of widgets usable on multiple templates with global settings for every widget. By default, the WordPress widget system allows you to create only one widget and assign it to a particular sidebar. Use this widget on ten sidebars and modify it later and you'll have to modify it ten times. If you have dozens of sidebars? Forget it.

It was time to become WordPress superheroes and be the architects of a new widget system. This one took our WordPress development skills to yet another level.


Knowledge base

The Diocese has hundreds of categorised articles online, but in a separate taxonomy to the news/blog articles. They're used primarily for the clergy and parish officers' audience. The Diocese site had to build in a review process for these articles – a system that flags articles due for review and notifies the owner by email.

Migration of data from the old website

The old website was a mine of old news articles. Not for the faint-hearted, and nothing that could be done manually. Our development teams worked closely with the client to map categories from old to new and then created a custom script to import old data into the new WordPress system.

Fast-loading site and SEO optimisation

Super-fast speed and load times can propel you up the Google escalator. They also sit well with impatient users.

That's why we optimise our websites to achieve the highest-possible speed-loading score.

We implemented all this:

  • Content delivery network (CDN)
  • Image Optimisation (lossless compression)
  • Minified CSS, HTML and Javascript code
  • Mobile optimisation
  • Page speed optimisation
  • Redirection of broken links
  • Semantically structured html tags
  • Sitemaps generated automatically
  • SSL certificate (HTTPS)
  • Structured data (schema)
  • W3C-compliant code
  • Yoast SEO plugin installed and setup

What the client had to say

Robert Hargrave - Communications Manager, Diocese of London

“We were very impressed with Moove's presentation and enthusiasm for the project. They showed a true understanding of our needs and a real commitment to the vision we want to achieve with this project. ”

Robert Hargrave, Communications Manager Diocese of London