S.F. True Light Baptist Church Website Design
Illuminating Hearts, Embracing Tomorrow.
Illuminating Hearts, Embracing Tomorrow.
Illuminating Hearts, Embracing Tomorrow.
Redesigned the Website to Empower Church Explorers and Boost Conversion Rates with Clear Navigation, Accessible Information, and Engaging Content.
Redesigned the Website to Empower Church Explorers and Boost Conversion Rates with Clear Navigation, Accessible Information, and Engaging Content.
Redesigned the Website to Empower Church Explorers and Boost Conversion Rates with Clear Navigation, Accessible Information, and Engaging Content.
Team Member
Zheng Wei Product Designer
Lianlian Ma Product Designer
Haoyu Yan Software Engineer
Contribute
Observation
Questionnaire
User Interview
Affinity Diagram
Competitive Analysis
Empathy map
Persona
Value Proposition
Card Sorting
Information Architecture
Prototype
User Testing
Design System
Tools
Figma
FigJam
Github
Adobe Suits
Google Workspace
Duration
07/2022-12/2022
Overview
Overview
Overview
Problem Statement
Problem Statement
Problem Statement
How might we attract and retain church explorers, ultimately increasing conversion rates?
How might we attract and retain church explorers, ultimately increasing conversion rates?
How might we attract and retain church explorers, ultimately increasing conversion rates?
Solution
Solution
Solution
Efficient Information Retrieval
Comprehensive
Efficient Information Retrieval
Clear Communication
Clear Communication
Clear Communication
Building
Trust and Engagement
Building Trust and Engagement
Building
Trust and Engagement
Impact
Impact
Impact
Although the new website has yet to launch, our user testing results are promising: 65% of test participants completed the contact information form, indicating a potential 65% conversion rate.
Although the new website has yet to launch, our user testing results are promising: 65% of test participants completed the contact information form, indicating a potential 65% conversion rate.
Although the new website has yet to launch, our user testing results are promising: 65% of test participants completed the contact information form, indicating a potential 65% conversion rate.
The number of website viewers was increasing from 4,514 to 7,448 people.
The number of website viewers was increasing from 4,514 to 7,448 people.
65 %
65 %
The number of website viewers was increasing from 4,514 to 7,448 people.
65 %
Client Brief
Client Brief
Client Brief
S.F. True Light Baptist Church, established in 2002 with about 90 members, sought to revamp its outdated 2017 website. The church faced challenges in attracting and engaging members, especially during the pandemic. Stakeholders highlighted issues such as a cluttered design, difficult navigation, and outdated content, which hindered communication and interaction. The redesign aimed to create a welcoming, informative website with clear navigation, up-to-date content, and engaging visuals to attract new members and retain existing ones. This project was crucial for modernizing the church's online presence and improving its digital outreach capabilities.
S.F. True Light Baptist Church, established in 2002 with about 90 members, sought to revamp its outdated 2017 website. The church faced challenges in attracting and engaging members, especially during the pandemic. Stakeholders highlighted issues such as a cluttered design, difficult navigation, and outdated content, which hindered communication and interaction. The redesign aimed to create a welcoming, informative website with clear navigation, up-to-date content, and engaging visuals to attract new members and retain existing ones. This project was crucial for modernizing the church's online presence and improving its digital outreach capabilities.
S.F. True Light Baptist Church, established in 2002 with about 90 members, sought to revamp its outdated 2017 website. The church faced challenges in attracting and engaging members, especially during the pandemic. Stakeholders highlighted issues such as a cluttered design, difficult navigation, and outdated content, which hindered communication and interaction. The redesign aimed to create a welcoming, informative website with clear navigation, up-to-date content, and engaging visuals to attract new members and retain existing ones. This project was crucial for modernizing the church's online presence and improving its digital outreach capabilities.
Empathize
Empathize
Empathize
Observation
Observation
Observation
We began by observing church services and events to understand user behavior and needs. This allowed us to identify key areas for improvement.
We began by observing church services and events to understand user behavior and needs. This allowed us to identify key areas for improvement.
We began by observing church services and events to understand user behavior and needs. This allowed us to identify key areas for improvement.
Findings
Findings
Members needed help with outdated, cluttered interfaces.
Finding relevant information quickly takes time and effort.
Users desired straightforward navigation.
Members needed help with outdated, cluttered interfaces.
Finding relevant information quickly takes time and effort.
Users desired straightforward navigation.
Members needed help with outdated, cluttered interfaces.
Finding relevant information quickly takes time and effort.
Users desired straightforward navigation.
Questionnaire
Questionnaire
Questionnaire
To gain further insights into user needs and preferences, we conducted surveys with 29 participants. This step was crucial to understanding the church community's pain points and desired features.
To gain further insights into user needs and preferences, we conducted surveys with 29 participants. This step was crucial to understanding the church community's pain points and desired features.
To gain further insights into user needs and preferences, we conducted surveys with 29 participants. This step was crucial to understanding the church community's pain points and desired features.
Website Browsing Behavior
Website Browsing Behavior
The data shows that while 66% of respondents visited the church's website, many only visited 1-2 times. This indicates that the current website may lack the engaging content or functionality needed to retain church explorers and increase conversion rates.
The data shows that while 66% of respondents visited the church's website, many only visited 1-2 times. This indicates that the current website may lack the engaging content or functionality needed to retain church explorers and increase conversion rates.
The data shows that while 66% of respondents visited the church's website, many only visited 1-2 times. This indicates that the current website may lack the engaging content or functionality needed to retain church explorers and increase conversion rates.
Discovery and Information Access
Discovery and Information Access
How Respondents Came to Know the Church:
How Respondents Came to Know the Church:
The image indicates that improving the website's appeal could boost direct online engagement, increasing conversion rates beyond personal referrals.
The image indicates that improving the website's appeal could boost direct online engagement, increasing conversion rates beyond personal referrals.
The image indicates that improving the website's appeal could boost direct online engagement, increasing conversion rates beyond personal referrals.
Findings
Findings
78%
78%
78%
Struggled with the existing site's navigation.
Struggled with the existing site's navigation.
Struggled with the existing site's navigation.
85%
85%
85%
Desired more interactive and engaging features.
Desired more interactive and engaging features.
Desired more interactive and engaging features.
58%
58%
58%
Joined the church through friends’ references and the website.
Joined the church through friends’ references and the website.
Joined the church through friends’ references and the website.
User Interview
User Interview
User Interview
Building on the above 2-step findings, we conducted in-depth interviews with 16 users to explore their needs and pain points further. This helped refine our understanding and tailor the design to meet the diverse needs of different user segments.
Building on the above 2-step findings, we conducted in-depth interviews with 16 users to explore their needs and pain points further. This helped refine our understanding and tailor the design to meet the diverse needs of different user segments.
Building on the above 2-step findings, we conducted in-depth interviews with 16 users to explore their needs and pain points further. This helped refine our understanding and tailor the design to meet the diverse needs of different user segments.
Findings
Findings
75%
75%
75%
wanted more event information and photos.
wanted more event information and photos.
Wanted more event information and photos.
80%
80%
80%
interested in learning about church personnel.
interested in learning about church personnel.
Interested in learning about church personnel.
55%
55%
55%
found it difficult to watch weekly Sunday services.
found it difficult to watch weekly Sunday services.
Found it difficult to watch weekly Sunday services.
& Most were unfamiliar with church terminology.
& Most
were unfamiliar with church terminology.
& Most were unfamiliar with church terminology.
Synthesis
Synthesis
Synthesis
We used an affinity diagram to identify common themes and patterns from the interview data. This process distilled the qualitative insights, guiding our design decisions to provide comprehensive event information, clarify church terminology, and enhance overall user interaction with the website. Affinity Diagram Link
We used an affinity diagram to identify common themes and patterns from the interview data. This process distilled the qualitative insights, guiding our design decisions to provide comprehensive event information, clarify church terminology, and enhance overall user interaction with the website. Affinity Diagram Link
We used an affinity diagram to identify common themes and patterns from the interview data. This process distilled the qualitative insights, guiding our design decisions to provide comprehensive event information, clarify church terminology, and enhance overall user interaction with the website. Affinity Diagram Link
Findings
Findings
Comprehe-nsive
Comprehensive
Comprehen-sive
Updated
Updated
Updated
Clarification
Clarification
Clarification
Interaction
Interaction
Interaction
Users want comprehensive, updated content, including event photos and details. They also need clarification of proprietary terms related to education and faith. Additionally, users desire enhanced interaction with fellow church members through the website.
Users want comprehensive, updated content, including event photos and details. They also need clarification of proprietary terms related to education and faith. Additionally, users desire enhanced interaction with fellow church members through the website.
Users want comprehensive, updated content, including event photos and details. They also need clarification of proprietary terms related to education and faith. Additionally, users desire enhanced interaction with fellow church members through the website.
Competitive Analysis
Competitive Analysis
Competitive Analysis
To identify industry best practices and areas for improvement, we analyzed a list of competitor and stakeholder-selected websites to uncover consistent industry themes.
To identify industry best practices and areas for improvement, we analyzed a list of competitor and stakeholder-selected websites to uncover consistent industry themes.
To identify industry best practices and areas for improvement, we analyzed a list of competitor and stakeholder-selected websites to uncover consistent industry themes.
Findings
Findings
Consistent
Visual Design
Consistent
Visual Design
Consistent
Visual Design
Competitors lacked consistent visual design
Competitors lacked consistent visual design
Competitors lacked consistent visual design
Religion Knowledge
Barriers
Religion Knowledge
Barriers
Religion Knowledge
Barriers
Excessive religious terminology was a barrier
Excessive religious terminology was a barrier
Excessive religious terminology was a barrier
Historical & Event
Information
Historical & Event
Information
Historical & Event
Information
Competitors rarely showcased this
Competitors rarely showcased this
Competitors rarely showcased this
User Segments
User Segments
User Segments
As our research deepened, we identified three key user segments, starting with initial demographic insights and refining our understanding through further investigation. We conducted a detailed analysis using a matrix to understand these segments better.
As our research deepened, we identified three key user segments, starting with initial demographic insights and refining our understanding through further investigation. We conducted a detailed analysis using a matrix to understand these segments better.
As our research deepened, we identified three key user segments, starting with initial demographic insights and refining our understanding through further investigation. We conducted a detailed analysis using a matrix to understand these segments better.
Caption: Rate on a scale of 1 to 5, where one is low and five
is high.
Caption: Rate on a scale of 1 to 5, where one is low and five is high.
Caption: Rate on a scale of 1 to 5, where one is low and five is high.
Prioritize Target Audience
Prioritize Target Audience
Prioritize Target Audience
Our matrix analysis identified Church Explorers as the primary user group for this design. We prioritized them to create a welcoming and informative website, aligning with user research and stakeholder goals to attract more explorers and increase conversion rates.
Our matrix analysis identified Church Explorers as the primary user group for this design. We prioritized them to create a welcoming and informative website, aligning with user research and stakeholder goals to attract more explorers and increase conversion rates.
Our matrix analysis identified Church Explorers as the primary user group for this design. We prioritized them to create a welcoming and informative website, aligning with user research and stakeholder goals to attract more explorers and increase conversion rates.
Define
Define
Define
Empathy Map
Empathy Map
Empathy Map
The Church Explorer seeks clear, accessible information about church activities and beliefs on a user-friendly, visually engaging website. Addressing these needs will make the site more welcoming and supportive for non-Christians exploring faith. Empathy Map Link
The Church Explorer seeks clear, accessible information about church activities and beliefs on a user-friendly, visually engaging website. Addressing these needs will make the site more welcoming and supportive for non-Christians exploring faith. Empathy Map Link
The Church Explorer seeks clear, accessible information about church activities and beliefs on a user-friendly, visually engaging website. Addressing these needs will make the site more welcoming and supportive for non-Christians exploring faith. Empathy Map Link
Primary Persona
Primary Persona
Primary Persona
User Need
User Need
User Need
As a new visitor exploring church communities, I need a user-friendly, regularly updated website with clear navigation and engaging visual content, so I can easily learn about the church and decide whether to engage further.
As a new visitor exploring church communities, I need a user-friendly, regularly updated website with clear navigation and engaging visual content, so I can easily learn about the church and decide whether to engage further.
As a new visitor exploring church communities, I need a user-friendly, regularly updated website with clear navigation and engaging visual content, so I can easily learn about the church and decide whether to engage further.
Value Proposition
Value Proposition
Value Proposition
Our redesigned website offers a user-friendly, visually engaging platform that simplifies church exploration for new visitors. By providing clear navigation, updated content, and accessible explanations of Christian terminology, the site enhances user engagement， making it a key tool for attracting church explorers and retaining new members. Value Proposition Link
Our redesigned website offers a user-friendly, visually engaging platform that simplifies church exploration for new visitors. By providing clear navigation, updated content, and accessible explanations of Christian terminology, the site enhances user engagement， making it a key tool for attracting church explorers and retaining new members. Value Proposition Link
Our redesigned website offers a user-friendly, visually engaging platform that simplifies church exploration for new visitors. By providing clear navigation, updated content, and accessible explanations of Christian terminology, the site enhances user engagement， making it a key tool for attracting church explorers and retaining new members. Value Proposition Link
Goal - Conversion Rate
Goal - Conversion Rate
Goal - Conversion Rate
Our ultimate goal is to improve the overall user experience to increase retention and conversion rates, creating a website that effectively attracts and engages church explorers.
Our ultimate goal is to improve the overall user experience to increase retention and conversion rates, creating a website that effectively attracts and engages church explorers.
Our ultimate goal is to improve the overall user experience to increase retention and conversion rates, creating a website that effectively attracts and engages church explorers.
Engagement
Comprehensive
Comprehen-sive
Accessibility
Accessibility
Usability
Usability
Trust
Trust
Success Metric
Success Metric
The conversion rate will be measured by the number of church explorers submitting a pop-up form with their contact information, enabling the church to proactively engage with these potential members.
The conversion rate will be measured by the number of church explorers submitting a pop-up form with their contact information, enabling the church to proactively engage with these potential members.
The conversion rate will be measured by the number of church explorers submitting a pop-up form with their contact information, enabling the church to proactively engage with these potential members.
Ideation & Prototype
Ideation & Prototype
Ideation & Prototype
In this phase, we turned research insights into actionable design solutions, focusing on content organization, navigation, and user experience.
In this phase, we turned research insights into actionable design solutions, focusing on content organization, navigation, and user experience.
In this phase, we turned research insights into actionable design solutions, focusing on content organization, navigation, and user experience.
Card Sorting
Card Sorting
Card Sorting
To understand how users categorize and prioritize information, we conducted card-sorting exercises. This led to a logical website structure that makes content easy to find and navigate.
To understand how users categorize and prioritize information, we conducted card-sorting exercises. This led to a logical website structure that makes content easy to find and navigate.
To understand how users categorize and prioritize information, we conducted card-sorting exercises. This led to a logical website structure that makes content easy to find and navigate.
Information Architecture
Information Architecture
Information Architecture
Using card-sorting insights, we developed a clear Information Architecture. Collaborating with stakeholders and developers and using user feedback, we structured the website into key sections like Sunday Worship, About Us, and New Member Guide, ensuring easy navigation and access to relevant information.
Using card-sorting insights, we developed a clear Information Architecture. Collaborating with stakeholders and developers and using user feedback, we structured the website into key sections like Sunday Worship, About Us, and New Member Guide, ensuring easy navigation and access to relevant information.
Using card-sorting insights, we developed a clear Information Architecture. Collaborating with stakeholders and developers and using user feedback, we structured the website into key sections like Sunday Worship, About Us, and New Member Guide, ensuring easy navigation and access to relevant information.
Wireframe to Prototype
Wireframe to Prototype
Wireframe to Prototype
We began with hand-drawn wireframes to conceptualize layout and flows, then moved to mid- and high-fidelity prototypes in Figma, refining the design with user and developer feedback.
We began with hand-drawn wireframes to conceptualize layout and flows, then moved to mid- and high-fidelity prototypes in Figma, refining the design with user and developer feedback.
We began with hand-drawn wireframes to conceptualize layout and flows, then moved to mid- and high-fidelity prototypes in Figma, refining the design with user and developer feedback.
Testing & Iteration
Testing & Iteration
Testing & Iteration
After developing our mid- and high-fidelity prototypes, we used usability testing to validate our design decisions. We conducted usability tests with eight users to gather insights on functionality and user-friendliness while incorporating developer feedback to ensure feasibility.
After developing our mid- and high-fidelity prototypes, we used usability testing to validate our design decisions. We conducted usability tests with eight users to gather insights on functionality and user-friendliness while incorporating developer feedback to ensure feasibility.
After developing our mid- and high-fidelity prototypes, we used usability testing to validate our design decisions. We conducted usability tests with eight users to gather insights on functionality and user-friendliness while incorporating developer feedback to ensure feasibility.
Feedback: The user wanted to avoid the endless, which was overwhelming and made it difficult to find specific information.
Change: Updated the format to a time-filtered display with bottom pagination, improving information retrieval efficiency and enhancing the site's SEO.
Feedback: The user wanted to avoid the endless, which was overwhelming and made it difficult to find specific information.
Change: Updated the format to a time-filtered display with bottom pagination, improving information retrieval efficiency and enhancing the site's SEO.
Feedback: The user wanted to avoid the endless, which was overwhelming and made it difficult to find specific information.
Change: Updated the format to a time-filtered display with bottom pagination, improving information retrieval efficiency and enhancing the site's SEO.
Solution
Solution
Solution
Efficient Information Retrieval
Efficient Information Retrieval
Efficient Information Retrieval
Clear Navigation:
Enhanced architecture with a sidebar for organized content and easy access to historical videos and devotions, reducing cognitive load and encouraging exploration.
Clear Navigation:
Enhanced architecture with a sidebar for organized content and easy access to historical videos and devotions, reducing cognitive load and encouraging exploration.
Clear Navigation:
Enhanced architecture with a sidebar for organized content and easy access to historical videos and devotions, reducing cognitive load and encouraging exploration.
Clear Communication
Clear Communication
Q&A Section:
Added a Q&A to explain faith-related terms, making complex terminology accessible and fostering deeper connections with users.
Q&A Section:
Added a Q&A to explain faith-related terms, making complex terminology accessible and fostering deeper connections with users.
Building Trust and Engagement
Building Trust and Engagement
Authentic Content: Displayed real historical information, activities, and testimonials to build trust and improve user understanding, fostering interaction and boosting conversion rates.
Authentic Content: Displayed real historical information, activities, and testimonials to build trust and improve user understanding, fostering interaction and boosting conversion rates.
How We Get Impact
How We Get Impact
How We Get Impact
We conducted user testing to evaluate the design solution before launching it, using the submission of the contact information form as a key indicator of successful conversion. This form not only reflects users' engagement with the website but also represents an important step in their journey of exploring the church.
We conducted user testing to evaluate the design solution before launching it, using the submission of the contact information form as a key indicator of successful conversion. This form not only reflects users' engagement with the website but also represents an important step in their journey of exploring the church.
We conducted user testing to evaluate the design solution before launching it, using the submission of the contact information form as a key indicator of successful conversion. This form not only reflects users' engagement with the website but also represents an important step in their journey of exploring the church.
Our redesign has shown a significant impact:
Our redesign has shown a significant impact:
65% Conversion Rate:
Successfully attracted and converted explorers, achieving a 65% conversion rate.
Positive User Feedback:
Users found the site engaging, easy to navigate, and were eager to explore further.
Stakeholder Satisfaction:
Stakeholders praised the design for addressing all issues and exceeding expectations.
65% Conversion Rate:
Successfully attracted and converted explorers, achieving a 65% conversion rate.
Positive User Feedback:
Users found the site engaging, easy to navigate, and were eager to explore further.
Stakeholder Satisfaction:
Stakeholders praised the design for addressing all issues and exceeding expectations.
65% Conversion Rate:
Successfully attracted and converted explorers, achieving a 65% conversion rate.
Positive User Feedback:
Users found the site engaging, easy to navigate, and were eager to explore further.
Stakeholder Satisfaction:
Stakeholders praised the design for addressing all issues and exceeding expectations.
Exploring the church through the new website was a great experience; it was easy to navigate and provided all the details I sought.
通过新网站探索教会是一次很好的体验；它易于导航，并提供了我所寻找的所有信息。
Exploring the church through the new website was a great experience; it was easy to navigate and provided all the details I sought.
通过新网站探索教会是一次很好的体验；它易于导航，并提供了我所寻找的所有信息。
——Andrew huang
Exploring the church through the new website was a great experience; it was easy to navigate and provided all the details I sought.
通过新网站探索教会是一次很好的体验；它易于导航，并提供了我所寻找的所有信息。
——Andrew huang
——Andrew huang
The new church website not only enhances information access and interaction but also serves as an important platform to connect new and old members.
新的教会网站不仅提升了信息的获取和互动体验，还将成为连接新老会友的重要平台。
The new church website not only enhances information access and interaction but also serves as an important platform to connect new and old members.
新的教会网站不仅提升了信息的获取和互动体验，还将成为连接新老会友的重要平台。
——Pastor Wei
The new church website not only enhances information access and interaction but also serves as an important platform to connect new and old members.
新的教会网站不仅提升了信息的获取和互动体验，还将成为连接新老会友的重要平台。
——Pastor Wei
——Pastor Wei
Next Step
Next Step
Next Step
Our product roadmap focuses on future improvements to enhance the website's functionality and user experience.
Interactive Features: Adding interactive elements to engage users further and encourage exploration.
Mobile Optimization: Optimizing the site for seamless use on mobile devices, ensuring accessibility and a smooth user experience across all platforms.
Advanced Search Functionality: Implementing a robust search filter to allow users to find relevant content quickly, improving overall usability and satisfaction.
Our product roadmap focuses on future improvements to enhance the website's functionality and user experience.
Interactive Features: Adding interactive elements to engage users further and encourage exploration.
Mobile Optimization: Optimizing the site for seamless use on mobile devices, ensuring accessibility and a smooth user experience across all platforms.
Advanced Search Functionality: Implementing a robust search filter to allow users to find relevant content quickly, improving overall usability and satisfaction.
Our product roadmap focuses on future improvements to enhance the website's functionality and user experience.
Interactive Features: Adding interactive elements to engage users further and encourage exploration.
Mobile Optimization: Optimizing the site for seamless use on mobile devices, ensuring accessibility and a smooth user experience across all platforms.
Advanced Search Functionality: Implementing a robust search filter to allow users to find relevant content quickly, improving overall usability and satisfaction.
Takeaways
Takeaways
Takeaways
Reflecting on this project, I learned a few key lessons that will help me make significant strides in my design journey:
Open Communication: Good communication and teamwork were crucial to keeping everything on track.
Time & Project Management: I realized that improving time and project management is essential — setting clearer goals and breaking tasks down into manageable steps helps projects run more smoothly.
Market Segmentation & Competitor Analysis: Digging into our audience and competitors really paid off.
Collaboration with Developers: Working with developers reminded me of the importance of balancing design with functionality.
Reflecting on this project, I learned a few key lessons that will help me make significant strides in my design journey:
Open Communication: Good communication and teamwork were crucial to keeping everything on track.
Time & Project Management: I realized that improving time and project management is essential — setting clearer goals and breaking tasks down into manageable steps helps projects run more smoothly.
Market Segmentation & Competitor Analysis: Digging into our audience and competitors really paid off.
Collaboration with Developers: Working with developers reminded me of the importance of balancing design with functionality.
Reflecting on this project, I learned a few key lessons that will help me make significant strides in my design journey:
Open Communication: Good communication and teamwork were crucial to keeping everything on track.
Time & Project Management: I realized that improving time and project management is essential — setting clearer goals and breaking tasks down into manageable steps helps projects run more smoothly.
Market Segmentation & Competitor Analysis: Digging into our audience and competitors really paid off.
Collaboration with Developers: Working with developers reminded me of the importance of balancing design with functionality.