Grace United Church

Grace United Church is a small local church located in Chelsea, Quebec. They feel that they need to have a stronger sense of communication with their community, and updating their website will be the best way to accomplish that.

I and my team members successfully made this website for them, which has features such as calendar, events showcase, donation page, and blog.

Project Scopes

Website Redesign

Research

Did research on related United Church websites for potential design and feature inspiration

Calendar Application

Integration with a more powerful and easier to use calendar application

Advanced SEO

Basic SEO (Search Engine Optimization) for a more easily found website on search engines

Donation Page

A donation page with options to donate

Website Migration and Deployment

Transferring content from existing site into the new site

Brainstorming

Brainstorming is a process whereby a team of designers generate ideas about how to address the issues and opportunities identified in the website development.

We did brainstorming with lots of sticky notes, where me and my team members wrote down all of our ideas. Those stickers represent a visual map of the best ideas generated for solving the design problem later.

Processes

STEP1: DEFINE

Understand
Gather Info
Organize
Set Expectations

STEP2: DESIGN

Wireframes and Prototypes
Content Collection
User Feedback

STEP3: DEVELOP

WordPress setup
Insert content
plugin installation
testing

STEP4:DEPLOY

Presentation
Migration
Tutorial for client management

DEFINE

First, we communicated with our clients to understand their needs. We kept video meeting or phone meeting with our customers every Wednesday. At the beginning of the project, we made personas according to the main people who came to the church.

Through communication and research of the church’s original website, we found the problems of the website:

1. The overall design style is too old to meet the current trend of web design, also not enough to attract people to use the website.

1. The website wants bilingual configuration, but the French part doesn’t work well on whole website.
2. The calendar part of the church is a main part. Through this part, audience can understand the events held by the church, which is a window for communication with believers. However, the calendar part of the old website is almost blank.
3. Blog page for publishing church news is empty.

After each meeting with clients, we summarized the contents of the meeting into documents and sent them to clients. After they read it, they gave us feedback.

They also gave us basic information about the church and what they wanted the site to have. Based on all the information, I designed the sitemap of the website, including several pages and several menus.

Next, we combine sitemap and persona to design which parts of the website every user will browse.

DESIGN

First of all, I searched the websites of other churches and sorted out the websites suitable for our study. Share it with the team members for reference.

Then, my team and I designed the wireframe, the wireframe of each web page (desktop version and mobile version), here is the home page as an example.

All project files are shared in Google drive for easy reference.

Although the client provided us with exquisite church pictures (people, environment and activity pictures), we went to the church in chelsea to do a field-trip, felt the overall style of the church, and took more high-definition pictures for later use. This has provided the foreshadowing for the later web page style design.

After that, I designed the mood board, including the design of word frame, color scheme, font choices and button styles. In terms of colors, I chose a stable color scheme, considering that the audience of the church is mostly the elderly.

DEVELOP

With wireframe, we started domain and hosting searches and recommended the right ones to customers. When the customer bought, we installed WordPress on the new hosting.

According to the required functions of the website, we found the appropriate theme and installed it. And then, we started designing the website. For the parts that couldn‘t be edited by templates or plugin, I was the person go to the back end of wordpress to modify the code.

Some convenient plugins can help our design. We have launched 19 plugins in total.

After the completion of the web design, I and the team members worked together with the customers to do the testing.

DEPLOY

Complete the handover work with the client, and taught the client basic web content input methods, such as blog and calendar parts.

See more websites made by me

Grace United Church Project