CEAM (Evangelical Comunity of Global Revival) is an International Church community with services in London and São Paulo, Brazil. They came to me to design and produce a website which could allow them to expand their digital space and show news and events based on their local communities.
The project was divided in 5 main stages:
Stage 1 – Briefing and Research
Initially I briefed the client with some key questions pointing exactly to what they wanted to achieve with that project. They wanted to be able to write posts and publish photos and videos of events. That sounded more like a blog platform and was exactly what we sticked for.
Stage 2 – Organizing the content
After receiving all the content needed for the project, I designed a sitemap to visualize how many pages and sections the website would have initially.
CEAM has churches in São Paulo, Brazil and in London, UK so the website couldn’t have only one language. To avoid having 2 separate websites, my approach was to have both languages on the same website. I used a multi-language plugin that allows content managers to publish content in different languages, in this case Portuguese and English.
The blog section was initially divided in 3 main categories to ensure that the information could be quickly and easily navigated by the user. I was aware that their blog would increase in the future, so I went for the use of a Content Management System that would allow their staff to add more categories if they needed it.
Stage 3 – Initial wireframes
With the sitemap ready, it was now time to move to wireframes. I decided to design a wireframe based on Bootstrap grid system, to save time and move straight to a high fidelity mockup once the client was happy with the content arrangement.
I considered 3 key points as a must to display on the website:
Service times: According to Grey Matter Research, 43% of church website visitors are searching for service times. If they don’t know when you meet, how can they join you?
Location details: After researching other church websites, would you believe many of them forget to list an address?
What to expect: What are their services like? Is your congregation diverse? How do people typically dress? All these these questions were already answered during Stage 1 so it was easy to arrange and organise that information.
Contact information: Display an email address and phone number to make it easy for people who have questions to get answers.
Stage 4 – High fidelity mockups
To keep CEAM’s website authentic and looking fresh, I minimized the use of stock photography and incorporated recent images of the community, including a hero slider and photos of recent events and staff members. The main goal of the homepage was to make a connection with visitors before they even walk through the door.
For the multi-language challenge, the easiest way was to add a switch on the top right corner, with the flags representing the available languages (see image bellow). So for non-English speakers and non-Portuguese speakers it would be easy to locate their language straight when the page was first loaded.
Stage 5 – Development
The website was built with a WordPress blog which as well as handling blog updates, functions as a content management system for pages detailing CEAMS’s local events and news. For the Front End I used Bootstrap to accelerate the process, Sass for a better CSS manipulation and, of course, it is responsive and works on Mobiles, Tablets and Desktops.
Most of CEAM’s new visitors says they found the Church community through the website and every Sunday service CEAM receives at least 2 new visitors. Paulo Sergio, the main Bishop said the website is really helping them to be more close to church members and to local communities in London and São Paulo.
- UI design and development