Happy Bulletin

Summary

Happy Bulletin represents a longstanding passion project of mine. Constructed on the Wordpress Multisite CMS, this web application is my full coding and design endeavor tailored for churches, providing them with an online platform for their church bulletin needs.

Tools Used

Adobe XD
Adobe Illustrator
Font Awesome Pro 5 and 6
Wordpress Multisite

Reason

With several years dedicated to the ministry, both as a staff member and a freelancer, I recognized a scarcity of solutions for transitioning traditional, printed weekly church bulletins to the digital realm. The aim isn't to replace the church website but to complement it. Given the substantial portion of church budgets allocated to printing costs, this alternative significantly reduces expenses.

The users?

Three user categories include:

Church administrators responsible for backend management of online bulletins.
Members utilizing the web app on the frontend.
Visitors accessing the web app on the frontend.

Goals

User-friendly interface
Enhancing church value while reducing printing costs
Centralizing church communications
Archiving bulletins for access to previous versions
Time-saving for volunteer administrators
Clear communication for both members and visitors

It started from a wireframe...

The inception of the Happy Bulletin product idea began with this wireframe. My vision was to enable church attendees to walk into their church, open their browser on a tablet or phone, and instantly access a web version of the church bulletin— not a PDF, not an image, but a fully dynamic bulletin. Due to constraints on time and focus at that moment, I temporarily set this concept aside.

Initial questions.

Initial inquiries were numerous. As the driving force behind this passion project, I assumed multiple roles such as "project manager," "QA," and "dev."

This multitasking initially posed focus challenges. To overcome this, I broke down the project into smaller, more manageable questions that required immediate answers:

"What is the rationale for having an online bulletin alongside an existing website?"
- Follow-up: "Is there a discernible demand that this project can meet?"
"How much cost can the church save in printing through this initiative?"
"What time savings can this project offer compared to traditional printing?"

To gather valuable insights, I distributed a questionnaire to church communication directors across a spectrum of sizes, from small to medium to mega-churches. The responses provided both qualitative and quantitative data, justifying the continuation of the project.

The Frontend: Bulletin

Challenges

Given the necessity for this project to cater to and enhance value across a spectrum of church sizes, I had to contemplate numerous options and considerations that were not immediately evident.

For instance, small churches may desire features like listing birthdays and anniversaries for members, given their more intimate congregations. However, such features might be deemed clunky and undesirable for larger churches due to their extensive membership base.

My objective was to create a mobile-first application without restricting it to mobile-only usage. Addressing the diversity of devices was crucial in the design process. To achieve this, I employed SASS to generate the CSS for the front-facing bulletin, incorporating a range of responsive variables into the final CSS. Ultimately, I adopted flexbox and CSS grid to establish the framework for the bulletin, providing optimal flexibility for display across various devices.

Flow

Following testing and feedback from the selected churches, I crafted a design that addressed a broad spectrum of potential needs and met the essential requirements.

Upon loading the bulletin, a panel displays the current week's sermon title, summary, and speaker. The main content area features the cover image, a list of announcements, prayers, and events. In the top right corner, there is a pop-out with a QR code for convenient 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.

Happy Bulletin

Training Connect

Inventory Listing

Reason

The users?

Goals

It started from a wireframe...

Initial questions.

The Frontend: Bulletin

Challenges

Flow

The Backend: Dashboard

Challenges

Flow

Embedded Bulletin