Summary
Happy Bulletin has been a longtime passion project for me. It's a web application built on the Wordpress Multisite CMS. I fully coded and designed for churches to use as an online church bulletin.
Tools Used
Adobe XD
Adobe Illustrator
Font Awesome Pro 5 and 6
Wordpress Multisite
Reason
I've spent a number of years in the ministry field, either working on staff or in a freelance capacity. I realized there are few options to migrate an existing physical printed weekly church bulletin to the web. It's not to replace the church website but to provide a supplement to it. Printing costs are a huge portion of church budgets, and this option cuts it down considerably.
The users?
Three users:
1) Church administrators who will manage the online bulletins on the backend
2) Members who will use the web app on the frontend
3) Visitors who will use the web app on the frontend
Goals
- Ease of use
- Adding value for the church and cut their costs for printing
- Being a central part of the church communications
- Archivable bulletins to access previous versions
- Save time for the admins who are often volunteers
- Clear communications for members and visitors
It started from a wireframe...
This wireframe was the initial spark of a product idea for Happy Bulletin. I wanted to provide a way for churchgoers to be able to walk in their church with their tablet or phone, open their browser, and immediately have a web version of the church bulletin. Not a PDF. Not an image. A fully dynamic bulletin. I didn't have the time or focus to put into it at that time, so I put it on the back-burner for a while.
Initial questions.
Oh, there were many. Being a passion project, I was also the "project manager", "QA", "dev", etc.
This made for some focus issues in the beginning. I needed to break this project into smaller and more simplified questions that needed to be answered immediately:
- "Why have an online bulletin, when I have a website already?"
- Followup: "Is there a demand for this that this project can fill?"
- "How much money can this save the church in printing?"
- "How much time can this save the church vs printing?"
I sent out a questionnaire to a list of church communication directors - from small to medium to mega-churches.
This provided qualitative and quantitative value that justified going through with the project.
The Frontend: Bulletin
Challenges
Since this project had to appeal and add value to a range of church sizes, I had to consider many options and branches that were not initially apparent.
For example: Small churches might want to list birthdays, anniversaries, etc. for members (since they have a small congregation). Large churches would find this clunky and undesirable due to the sheer number of members.
I wanted this to be a mobile-first but not mobile-only application. The variety of devices had to be considered and addressed while designing. To accommodate, I utilized SASS to generate the css for the front-facing bulletin, which allowed for a variety of responsive variables used in the final css. Ultimately, I used flexbox and css-grid to provide the framework for the bulletin. This allowed for the most flexible options to display on devices.
Flow
After the testing and feedback from the sample churches, I was able to come up with a design that covered most potential needs and the firm requirements.
When the bulletin loads, a panel will show the current week's sermon title, summary, and speaker. The primary content area holds the cover image, listing of announcements, prayers, and events. The top right corner is a pop-out with the QR code for the bulletin, allowing for easy sharing.
The Backend: Dashboard
Challenges
The dashboard used by administrators had to be a clean, smooth flow. The ages for users could be anywhere from 18 - 90. I pulled together a group of church communicators within that age range and initially showed my wireframes, then ultimately the working, coded versions. I spoke over Zoom with each of them and had them walk through screens as I notated their actions. I presented them with a series of tasks:
- Add a cover image to a new bulletin
- Delete a current event
- Add three (3) announcements to a new bulletin you created
- etc.
I had to tweak and revise my screens and flows to address some of the issues I saw (and heard) from the admins. Ultimately I created a dashboard that had "contextual help" shown for each section and a "welcome overlay" that provided some information to new users.
Flow
The dashboard allows users to add the content they would be placing on the bulletin itself. Covers, announcements, etc., are form based content that the user can also filter and edit at any time. The dashboard has a welcome screen with tutorials for the users.
Embedded Bulletin
This is an embedded demo bulletin. It will still be revised, with new features to be added in the future, but it's a live project being used by several churches.