Introduction
The Vale Church is a very established name in Guernsey. I grew up knowing about this church and attending some of the many events they have put on over the years so when Beverley and the team approached me for this project I was very excited.
The old website
They had an old Wordpress website but they found it very difficult to update and maintain and it had become very outdated and stale with lots of incorrect information. It had even got to the point where people were contacting them to point out that the website was wrong and that they couldn't find what they were looking for. I made a note of this straight away.
Beverley explained that most of the people who will be visiting the site are not tech savvy so this made it even more important to make the site easy to use and navigate.
Goal for the site
Easy to navigate and find what you are looking for, regardless of tech skill.
Scope, content & tech stack
The Vale Church is very active in the community and have been open for a very long time and due to that there was loads of different services, activities, facilities, events, people, milestones, photos, magazine issues and so much more to go into the site.
- Services
- Facilities
- People
- Photos
- Activities
- Events
- Milestones
- Magazines
This is a really content rich website which would have usually led me to use Astro as the Javascript framework of choice, but we actually started this site a long time ago before we expanded our tech stack at Island Web Design so this site ended up being built in vanilla javascript and css with Sanity's composable content cloud as the CMS of choice.
Problems with the old website
When Beverley and I started digging in to what is the most important information on the website we couldn't land on any one thing. There were so many different things going on all as important as each other and everything and every one needed to be highlighted and easy to find. I actually cleared my hard drive and can’t seem to find any images of the old website so you will just have to use your imagination.
Pre-existing content
They already had hundreds of issues of the church magazine and they already had a widget with all these uploaded to on the old website so we decided to stick with that because it was something their users were familiar with.
Despite the wealth of information and content one thing we were lacking in was images. We had a few great shots of the church, and a few members of the team had decent photographs but that was really it so we had to get creative and dig around online to find suitable images for the site.
Design Assets
I ended up finding some awesome pencil illustrations that I think represent Vale Church's values well so I decided using these in the background with a low opacity would break up the whitespace on the site and make up for the lack of image quality.
Colours & Typography
Same goes for colours and typography, they didn't have an established brand style guide but they did have a general feel and direction they wanted to stick to. I basically kept the same typography style from the old website but I put it on a type scale and added a handwriting font to the mix to highlight important words and add to the personal, friendly feel of the site.
The message
Inclusivity was a word that kept coming up and a word Beverley expressed to be integral to their values, this is what led me to the main title for the home page...
Everyone is welcome at Vale Church
The content
One thing that made my job much easier with this website was the fact that every single member of the team wrote something about themselves and their role at the Church, so rather than writing copy for this site my job was to structure what they already had and make it more digestible for the end user.
When I was initially planning out the structure of this site in Figma I realised we needed super easy to use menu/search functionality, but a search bar would not be suitable here as not everyone will know what they are looking for already, we want to show them what is available and let them pick rather than trying to let them discover what is available.
Navigation/Search functionality
This is what ultimately lead me to creating the 'Search by Genre', 'Search By Team Member' and 'Search by Activity' sections, making it super easy to end up where you want simply by picking either the team member associated with that section or the activity itself. For example if you are looking for the Church Rector you can navigate to that by either searching by person and selecting Rev Bev, or by searching by service and selecting Church Rector. I found this to be the best approach because as we say in the title 'Everyone is welcome at Vale Church' so I wanted to make sure everyone felt welcome and every potential option that a user may want to take is catered for.
This menu/search functionality aloud us to put all of Vale Church's services on a single long scroll based page but without having the user scroll all the way through the page trying to find what they are looking for, especially on mobile where the page would be much longer. This is also why I included the fixed position 'back to top' button to make sure no matter how far down the page you make it you can always jump straight back to the menu and navigate somewhere else.
Advanced contact form
The next integral part of this website project was making sure that users could contact any member of the team that they want all from the same contact form. There are many different activities and depending on which section the user clicks the 'contact us' button in, when they land on the form it is already pre-populated with the person associated with the service they expressed interest in and the mail to address of the form is automatically changed to go to the correct email. I did however keep in mind that Vale Church will have a slightly older demographic meaning there will be a significant amount of people who want to make contact by phone, so I have also included the phone number of each member of the team in a list next to the form along with their email addresses for anyone who doesn't want to use the form.
Donations
Obviously, like most churches, the Vale Church take donations so this was another important aspect of the site but thankfully they already had a donation link that had proven to convert so I was reluctant to change this. I ended up using an Iframe to embed the current donation link on the site in a pop up using the native HTML dialog element. This means the external dialog link behaves like it is native to the website and gives the users an experience that doesn't take them away from the website or confuse them.
The content management system
All of the above mentioned stuff, plus much more, contributed to a high quality, easy to navigate and beautiful front end for the Vale Church's users but what the users don't see, and what really makes this website is the custom coded admin back end that I built using Sanity allowing the guys at Vale Church to have full control of every aspect of their website, regardless of their tech level meaning the site isn't going to go stale like the last one they had and will be able to move at the same pace as the church and all of its different activities and special events.
As I have already mentioned there are many, many equally important aspects of this site that all need to be easy to find and with the amount of different events the Vale Church do this was also something that was bound to change regularly, so we made sure to include all of the navigation links and hero call to action buttons in Sanity so any time they want to add a new page or section to the navigation or the call to action buttons in the hero, they can simply add one, they can also drag them round and reorder them depending on what they are hi lighting at that time.
With this site being built with vanilla Javascript and CSS there were limits to the complexity of the CMS but we were still able to include all that was necessary just with a bit more code.
Every single section on every single page of this site is editable which was very difficult to do with Vanilla JS and involved a heavy amount of html template strings but this now means that if they want to change absolutely anything they can do it easily.
Lets take the service and worship times as an example, they just click in to the home page, in to the service times section and here they have free reign to add new service times, reorder the current times and really update anything in the section, meaning they can give everyone the most up to date information about their timings without having to pay me to make changes to the site every week.
Site performance audit
Even with this site having loads of assets and being integrated with the Sanity Api and a load of external scripts such as SwiperJS, I frames, multiple Google maps and a connection to the magazine widget which has a load of magazines in it we were still able to get the page speed performance of this website nearly perfect as you can see from this Lighthouse report.
Outro
So obviously the new website was a hit, Beverley and I have both had fantastic feedback from Vale Church's users and Beverley has managed to update some of the content herself already which is a testament to the simplicity of our custom coded admin dashboard.
They now finally have a place online which is modern, user friendly and up to date with all the correct information. They can take bookings for any activity, event or room easily and they can take donations for the church simply by sending their users to the donations page, overall the site has significantly increased their online presence and the amount of people who contact them and donate or book through the website because people can finally find where they are going.
I am extremely proud of this site and I look forward to working with the Vale Church again in the future.
Full page screenshot
