Client: United Community Church

Role: UX design, UI design, Graphic design 

The Challenge

United Community Church wanted to transition away from using physical bulletins printed on paper. These documents handed out during Sunday services hold weekly announcements on one side and sermon notes on the other. It was crucial to not just slap a PDF on the church’s website, but to actually create an experience native to the chosen platform.

The use-context of an international church presented two key challenges:

• Diverse user base: Attenders from over 30 different nationalities. Wide range of different aged people.
• Unobtrusiveness: The church context requires the application to be helpful without getting in the way of the Sunday service itself.

The Process

I started the process by thinking through the purpose of the physical bulletin and how that could translate into its digital form. I also conducted short casual interviews to gain a better understanding of how people use the current physical bulletins. The key takeaway was that for the most part the bulletin serves as an aid for the Sunday service experience, while not being significantly utilized outside that particular time window. Thus the digital bulletin would also need to be tailored specifically for that context without adding additional clutter.

User Personas & Scenarios

I developed simple user personas to better take the varying needs of users into consideration. These were drawn up based on my own experience at the church, due to a lack of time and budget for more extensive user research. The key differences between users lay in their level of experience with technology and whether they were regular weekly attenders or first-time visitors. Short scenarios painting a picture of an average Sunday experience were developed for the personas, in order to think through the requirements for the application. 

Choice of Platform

I decided on using Squarespace to build the digital bulletin. The church’s website already used Squarespace and having the bulletin there would make the weekly process of updating the content more manageable for staff. From the user’s perspective a web-based solution similarly had benefits. Opening a web page has significantly less friction involved compared to downloading a dedicated app. Especially from the perspective of a first-time visitor, a web-based solution is an easier option. In addition, a web-app would allow reaching more devices and operating systems (iOS, Android, Windows Phone, etc.) with a single solution rather than having to develop apps for each operating system separately.

Sketching & Prototyping

From here on I drew up some quick sketches of the interface and then went on to build a simple prototype right on Squarespace. After displaying this to the core decision makers and receiving buy-in for the direction things were going, further iterations of the web-application were created and tested on family and friends. It was important to make the application as simple and unambiguous as possible to take the diverse user base into consideration. This led to clear big icons at the center of the interface and little else around them. Navigation between pages was made quick and snappy to mimic the speed of simply flipping a physical piece of paper.

Other Considerations

To take regular attenders better into consideration, it was necessary to find out a way to help them add a bookmark to the webpage on their device’s home screen. This would make the weekly process of opening the page faster and easier. As most users would not be familiar with how to do this, an instruction page and a suggestion to “add to home screen” was added to the interface. It was crucial to make this suggestion unobtrusive and allow users to first get a sense of the value the web-app could provide, before requesting them to commit to adding it to their home screen.

As the web-application is built around consuming content, it was important to have clean, clear and consistent typography. Comprehensive documentation was provided to the client, with extensive style guides to make this possible. I also created promotional graphics for the launch. After the launch, Fullstory was used to check on use patterns and ensure that the actual user experience was in line with the design intentions.

The Outcome

The transition from paper bulletins to digital was implemented very quickly. Essentially, UCC stopped printing physical copies as soon as the digital bulletin was launched, leading to a high adoption rate. Promotional pop-ups on the website were utilized on Sundays for the first couple of weeks to ease the process of finding the web-app from the website. Reception and feedback was very positive and session replays from Fullstory seemed to confirm that the application served its purpose as designed. 

Later on, the bulletin design was slightly adjusted to accommodate archiving as part of a larger redesign of how sermon notes, audio and study questions are stored and accessed on the UCC website.