HBC Web Redesign

Boyd Johnson
7 min readMar 26, 2022

Redesigning HBC’s web presence

This is a transfer of a case study from another platform, looking back a few years to some initial website work at Hickory Bible Church and. to how I was using user-centered design before adopting more formal UX thinking.

A lot to say:

Hickory Bible Church regularly has a lot going on. One of the biggest challenges on redesigning and iterating HBC’s website was the sheer scope of information that needed to be easily accessible to a broad collection of end users using myriad devices each with different technological comfort levels.

For this project, there was a progressive interplay of understanding the end users and their needs, ideating solutions, implementation, and testing. A key was always keeping open ears and listening with patience and compassion.

A project like this is never truly finished, perpetually benefiting from more research and insights applied to progressive iterations, but the result was a web presence that managed to make the most commonly needed information easily and simply accessible while keeping the depth of information available for those looking for a particular topic.

Interviews

Frequent, informal, always open

A perk of the position though is that I get to regularly interact with congregants (end users) and listen to their feedback weekly. I get to really know the people in a deep way that is always truly helpful in building trust and gathering qualitative information about how these end users interact with our web presence.

That qualitative understanding is crucial. We have everyone from tech-savvy twenty-year-olds to a few in their eighties or nineties who don’t have an email address who all needed a positive experience using our website.

An enduring lesson learned has been the value in taking time to develop meaningful relationships and listening with compassion and understanding fostering trust.

A view of the homepage for hickorybiblechurch.org
The home page features a few blocks for the most commonly accessed information, bold fonts and recognizable pictures help with accessibility.

User Journey

A big priority was making sure our end users could find the most pertinent information as quickly and easily as possible. A quick dip into our analytics data showed us what our most frequently accessed content was. Combining that information with known goals for what content we wanted to present gave us our priorities to map.

The top item was, and still is, viewing the sermon for the week and the accompanying literature. In this case specifically, the previous data structure was more like a catalog. Each sermon series had its own web page with a list of all the sermons in that series, which themselves all each had a webpage. This was understandably clunky and took multiple clicks with several points that could introduce confusion (what was the sermon title I was looking for again?).

The new method I introduced was to use a blog system where the most recent content is always available first. A single click from the home page takes users straight to the most recent sermon, always filtered down to the current series. The accompanying literature is present for easy download as well as an audio-only version for when users need to use less data or simply prefer to listen.

Moving Forward

I recently built out a survey to send out to end users. We structured the survey to answer some specific questions we had gathered while listening to informal user feedback. This should give us some valuable insights to test our assumptions about our design. If time and budget allowed, I’d be interested in scheduling some observational sessions with a representative group of end users to see how they interact with the website.

A view of the main navigation for hickorybiblechurch.org

Information Architecture

This was a situation where our very small team limited the depth of research we could do. There’s an element where a designer has to consider the cost/benefit as well. For an application like this, the cost to do in-depth research would be very high for the church while the benefit might be very small as opposed to just using good design and information architecture best practices.

That being said, we spend a good bit of time considering all the information we had to present and sorting it into categories, reducing redundancy, and generally making the information flow as intuitively as possible.

Lessons Learned:

If I were doing this project again today, I’d like to schedule a good card sorting session with a good number of users and iterate a few times as time and budget allowed. Our design has been pretty well received, but there are a few items such as “Equipping Classes” that could logically fall into either “ministries” or “resources.” A card sorting session could help determine where end users most often would think to look for that specific topic.

A view of analytics data

User Testing

Early On

Early in this project, I wasn’t explicitly aware of UX concepts, but found myself instinctively needing data on which to base decisions. Even early on in the design process I brought in other staff members to see how they handled the redesign.

Current & Future

I’ve been consistently observing how users interact with this project since its launch. One lesson has been that your best intended design might not work well for all end users, but the frustrations they feel are real and valid and meaningfully affect their decision making process. Open conversations and observations have been really helpful in building trust with end users and discovering meaningful insights from which to make changes.

Lessons Learned:

More and qualitatively richer data is always helpful. In my current position I’m very limited on time to conduct formal tests, but in another world I would love the time and resources to conduct more thorough testing such as a greater number of specific interviews, observational usability testing, user journaling, more surveys, etc. There are differences between a good visual design, a functional design, and an insightful design; greater understanding through meaningful research is the only way to progress from one to the next.

Personas

Here are some personas that are helpful in considering UX decisions. These are based on aggregations of a few specific groups in our users.

Gerald

Gerald is in his 90s. He’s a sweet guy who’s always engaged and wants to be involved in what’s going on. He can manage some technology, but don’t try to contact him by email; he doesn’t have time for that.

George

George works full time as a pharmaceutical sales associate. He has a wife and four kids, so he doesn’t have a lot of time to spend online. He’s tech savvy, but needs to be able to find the information he’s looking for quickly with minimal fuss.

Ginny

Ginny is in the Young Adults group. She really cares about community and the cause. She’s an artist, so the aesthetics of a design really affect how she feels while interacting with it.

Lessons Learned

That’s UX actually

The term UX is relatively new to me, but I’ve been mulling the ideas behind UX design for years. When reading up on what a UX designer does, I began to realize that it was the very same approach I was using with all my design work at my current position. Everything from the website to what goes on the projector screens in the auditorium (lower contrast, ambient lighting, and larger viewing distances change what works well; especially for members with aging vision) was going through user-centered design thinking. I was constantly pursuing feedback and listening to users and their experiences and basing my design decisions on insights from those conversations.

Limitations

Time… Time has been the single biggest limiting factor for what I’ve been able to accomplish in my current position. As Director of Production, my responsibilities cover a swath of problem solving, technological/IT, design, and live event work, so the amount of time I’m able to devote specifically to design and UX is very limited and by necessity has to become the undercurrent that subtly directs decisions made under the other hats. Projects are often requested last minute, so turnaround time severely limits creative iteration. Again, a big thing here has been making UX thinking that driving undercurrent. Even in IT, carefully explaining technical concepts with the understanding that this particular user has no idea what packet loss is, but can work with the example of a letter being lost in the mail helps make their experience better and reduce frustration. It can also empower them to feel like they’re understanding more with the context they have. In the live event space, I don’t stop at setting a volume level; I walk the auditorium to see how things sound in different areas and provide hearing protection for those that are more sensitive to high volumes.

Moving Forward

Picking up UX Design in a more explicit way has been a blast. I find that the concepts and ways of thinking come very naturally to me. It’s a great hybridization of design and aesthetics with nerdy research and business sensibilities. If you’d like to work together, just get in touch!

--

--

Boyd Johnson

Hi, I’m Boyd! I’m a creative problem solver, lifelong learner, and user advocate based in lovely North Carolina.