Beyond Baptism
A massive undertaking, that unfortunately excluded church services and museum content, leaving the informational experience visually neglected from the new website. With that, museum traffic nearly quartered in size since the rebrand. This clearly needed to be resolved.
Overview
Beyond Baptism is a Catholic Church that educates newcomers to the Catholic Faith, the Eucharist, and provides pilgrimages to Italy and the Eucharistic miracles seen there.
Challenge
Aside from creating a new visual experience for our users, we also had some hefty goals that contribute to our organization's goals at large: to increase organic SEO. With this redesign, we also needed to improve blog to signup conversions, communicate the Eucharist, and keep the site lightweight, manageable, and iterative.
Use Case
Role
For those seeking a relationship with God
UX & Graphic Designer
Time Constraint
Tools
5 weeks
Figma, Adobe Photoshop, InVision
I was the sole UX designer of the team
I joined Beyond Baptism as a UX designer when it was just a small team of the founder, one developer and myself. I led the UX and UI strategy for the team. I've been extremely fortunate to have part of this journey and have grown tremendously during my time at Beyond Baptism, some key achievements of which I have listed below:
- Juggled many different hats. Working in an early-stage startup is not easy. I dedicated hours of my spare time and weekends conducting research, sketching, testing and designing the website alongside taking the lead to coordinate schedules with the coders, delegating responsibilities to the coders, and taking the lead role. Additionally, I redesigned and developed their current logo to match their vision.
- Turned an idea into a product. The ability to transform an idea into something much more tangible is a process that is both exhilarating and rewarding. I worked closely with the founder and team to shape the product vision and strategy of Beyond Baptism. While the product is still in development and has not yet been released to the public, being able to see how much we have grown as a team and startup is truly sensational.
Understanding the Problem
As a Catholic myself, I understood the pains of educating others about the importance of our respective religion. The original website was outdated and more importantly didn't offer or communicate creative ways to learn about it. The website owner requested a total redesign of the website with this in mind.
I wanted to validate these problems with peers, so I took the initiative to run a user survey orally and through Google forms with 7 random people. Most of which do not fall under the Catholic denomination to avoid skewing results. I decided to focus on what I can do to make the learning experience engaging.
After listening to these users, I identified the top frustrations:
There was no clearly stated goal or CTA. The visual hierarchy isn't consistent throughout.
The white text color on a bright red background doesn’t follow WCAG 1.4.3 guidelines - which highlights contrast errors
Content isn't organized in a consistent manner.
HOW MIGHT WE
How might we better inform people who want to learn about Catholicism and the Eucharist?
The process
I had a clear vision for how I could transform the messy and unscalable design to coherent and efficient, which led to higher satisfaction for the website owner, developers, and ultimately the end user.
Don't over-engineer the wheel
I was mindful of a key principle in UX design: users spend most of their time on familiar sites, so they prefer others to work the same way they already know. This is especially true in the context of design systems, with companies like Pinterest, Airbnb, Netflix and many more offering fantastic design systems that stay within user expectations. To avoid over-engineering the wheel, I took inspiration from many aspects of them regarding accessibility and overall design system structure. Given the age demographics sits in the older range, this was crucial.
Audit and Analysis
I started by conducting a comprehensive audit of Beyond Baptism and the existing website design to catalog all UI components, patterns, and styles currently in use. This step also reinforced my understanding for why and how components were currently used.
Defining the MVP
I conducted workshops and sketching sessions with the team to map out the user flow and come up with a storyboard to capture the MVP.
We identified the following key features:
Goal definition. Allow users to discover information about the Eucharist, Catholic beliefs, and parish benefits.
List of recommendations. Sign up for a free membership and receive the opportunity to go on pilgrimages, tour a virtual museum, and learn more about the Eucharist, etc.
Connecting with providers. Curate or import a list of your activity history from existing providers such as Codecademy, Coursera, Khanacademy, Github, Stack Overflow etc. This allows your activities to be synchronised automatically, reducing the need to remember tracking everything that you've done.
Tracking of development. View your progress over time to see how you are tracking towards your goal.It is also worth noting that there were technical constraints that had to be taken into consideration as a learning machine algorithm was not an easy feat for the recommendations page. The proposed short term solution was to provide a manual list of activities mapped based on the profession, specialisation and level.
Defining the MVP
Challenges & Limitations
It is also worth noting that there were several challenges involved when designing the website.
The proposed solution was to use a black gradient to differentiate the text from the background. While this works to some extent, the text below it doesn't have the same benefit.
EMPATHIZE
Research
Through market research, competitive analysis, and user interviews, I set out to gain a deeper understanding of the market and the customers for education and nonprofit organizations.
In preparation to dive into my research, I first set some clear goals and created a research plan that would guide my research process.
- Understand the market trends in the education and nonprofit industry
- Identify the target market
- Learn about the current trends of Catholicism, how to promote the Eucharist, and bring people closer to God
- Understand the experiences people have when signing up as a volunteer, donating, or navigating
- Discover the goals, needs, motivations, and pain points of consumers of similar websites
Market Research
I started with market research to understand the general market, consumer, and business trends in order to gain a deeper understanding of the market Beyond Baptism might be part of.
Consumer Trends
- There's a 70% surge of young adults in their 20s and 30s who are becoming Catholic in 2025.
- Users seem to prefer mobile devices when it comes to transactions.
- Emails, texts, and social media are becoming more personalized. This applies to as well.
Demographics
- Only 17% of Catholics attend mass every week.
- Nondenominational and nonprofit churches often attract a younger, more diverse crowd. Only if the church offers modern worship or digital engagement.
- 94% of donors form their first impression based on website design.
- 1.5% of website visitors make a donation, with an average of $1.29 per visitor
Competitive Analysis
.png)
User Interviews & Key Findings
Now, it was time to validate the market research through user interviews with the consumer base of similar websites. During these interviews, I asked open-ended questions to learn as much as I could about their experiences and identify what the user’s needs truly are.
I conducted interviews with 8 participants, about 10 minutes each.
Some questions asked during the interview:
- What would motivate you to donate or volunteer?
- What steps would you take to reach the donate button from the home page?
- Which issues have you encountered on this site?
- What would make your experience on our website better?
- Do you primarily access our website from a desktop, tablet, or mobile device?
After conducting these one-on-one sessions with the participants, I wanted to take all this new information gained and synthesize it to better understand who the users are.
Prototype & Test
Building a Prototype
In order to make sure the design decisions I made in the lo-fi wireframes effectively help reach our project goals, I wanted to get to a point where I could test the design with real users.
Laying the foundations
The new design began with defining the core foundations of any UI element: typography, color, spacing, and shadow. I organized the currently used elements of Beyond Baptism and created a color palette that defines each color style, spacing, text, and shadow value, along with how they were used.
Final Prototypes
Incorporating visual elements in line with Glyde’s branding, I worked on the UI design of the app and created high fidelity wireframes.
View Final Prototype
