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?
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 set a career goal and specify the level that they want to get to in that profession.List of recommendations. Receive a plan of courses, events, blogs, podcasts etc. that you can do to work towards addressing any skill gaps in your knowledge.
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.
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 gardening and how it's being used to promote environmentalism and donations
- Understand the experiences people have when signing up as a volunteer, donating, or finding their way around
- Discover the goals, needs, motivations, and pain points of consumers of similar websites
Heuristic Evaluation
.png)
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 PHIG might be part of.
Consumer Trends
- People tend to donate 72% more to smaller startup organizations.
- Users seem to prefer mobile devices when it comes to transactions.
- Over 49% started participating in gardening activities due to mental health improvements.
Demographics
- About 53% of people are 40 or older.
- 54.4% of gardeners are men.
- The gardening market since 2022 is slowly growing.
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.
User Research
surveys have indicated that users brought up purpose of donating as a frequent issue. To understand the problem further, in-depth user research emails were set up with our top clients who use similar websites often.
Define & Ideate
Defining the Problems
Now that I've got a grasp of each user type, my next step was to consider the issues we aim to address for them. Using the insights and needs gathered from the empathy map, I delved into a more detailed exploration, crafting point-of-view (POV) statements and How Might We (HMW) questions. These served as guides to fuel my brainstorming process and gain a deeper understanding of the problems at hand.
Information Architecture
Site Map
I formulated a site map for PHIG's brand, focusing on the most realistic layout. It helps determine how everything is organized.
.png)
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.
Mid-Fidelity Wireframes
Now that I have refined the overall structure of the PHIG website based on what I learned from testing, the question now was - what will it look like? Taking the information provided, I turned them into mid-fidelity wireframes and condensed what was on the original site into basic interactions. These mid-fidelity wireframes would serve as the foundation to the highly revised high-fidelity wireframes.
Branding
Branding
Before working on the UI design, I worked on refreshing PHIG’s branding to effectively communicate their unique brand personality through their website.
Style Tile
Now I worked on compiling everything together and defining the specific direction I will be taking for Glyde's branding. Each decision I made for the branding elements were based off of effectively communicating their theoretical brand attributes.
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
.png)
