The Piedra Angular Church Website Redesign was created to help the church share its teachings, connect with its community, and provide accessible resources for spiritual growth. The project aimed to solve key issues like unclear navigation, lack of information, and limited engagement for non-members. My role as a UX/UI Designer was to ensure the new website was user-friendly, visually appealing, and aligned with the church’s mission.
This project focused on redesigning a website to improve how users access teachings, community activities, and resources for personal growth. The purpose was to create a digital platform that simplifies navigation, provides clear and structured content, and fosters engagement for both members and visitors. By addressing challenges such as confusing information architecture and limited accessibility, the redesign aimed to enhance the overall user experience and better communicate the organization’s mission and values.
The design process included five key stages: research, where we gathered insights about user needs and frustrations; define, to establish clear project goals and user personas; ideate, to brainstorm solutions for improved user experience; prototype, where low and high-fidelity designs were created; and usability testing, ensuring the final design addressed user pain points and offered seamless navigation. This iterative approach ensured a user-centered and effective solution.
To create a user-friendly website, we first needed to understand the needs and frustrations of the audience. Using empathy maps and feedback from church leaders, we identified key challenges. These included difficulty finding resources, lack of clarity in content, and limited guidance for non-members wanting to participate.
The empathy map was developed to better understand the thoughts, feelings, and behaviors of the church’s audience. It highlighted key insights, such as the desire for accessible resources, frustration with confusing navigation, and motivation to grow spiritually, guiding the design to meet their emotional and practical needs.
Develop a comprehensive and enriching website for those wishing to explore more about Piedra Angular Church, which believes in the divine holiness manifested in Jesus, transforming everything.
Offer clear and authentic resources that allow a deep understanding of God's Word, impacting the local community and providing tools for spiritual growth and active participation.
The process started with user research, using empathy maps and feedback to inform the site structure. Prototypes were created and tested iteratively, focusing on clear access to sermons, studies, and community features. Key additions like search functions, interactive resources, and non-member participation were integrated.
The design was refined for mobile responsiveness and seamless navigation before final WordPress implementation, with continuous testing and content updates to ensure a smooth experience.
We created user personas based on insights gathered from church leaders and audience feedback, representing individuals with different needs, such as seekers exploring theological content and pastors seeking in-depth biblical resources.
An affinity map helps organize user insights and group related ideas or themes. For this project, we gathered feedback from church leaders, community members, and online visitors, and sorted them into the following categories
The journey map was created to visualize the user's experience across different stages, from discovering the church's teachings to engaging with its community, highlighting key touchpoints, goals, pain points, and opportunities for improvement in their interaction with the website.
People intrigued by social media references and encouraged by close friends to visit the church are seeking to know the true God. However, the church does not provide the information needed to better understand the community of Piedra Angular.
There is a need to access clear and comprehensible information about the community’s beliefs. This is crucial, as these individuals are deeply committed to their spiritual growth and are looking for an authentic understanding of how the values of Piedra Angular align with God’s Word.
To address the identified challenges, we developed solution cards that outline specific actions designed to enhance user experience and meet the needs of the audience. Each solution targets key pain points and opportunities to improve the site's functionality, ensuring a more intuitive and engaging digital presence for the church.
To inform the design of the Piedra Angular Church website, a benchmark analysis was conducted by reviewing three similar church websites. The goal was to identify best practices, strengths, and areas for improvement in terms of design, user experience, and functionality. This analysis helped highlight key features, such as content accessibility, mobile responsiveness, and user engagement strategies, while also revealing areas where these sites could benefit from modern design approaches or improved navigation.
The information architecture focused on reorganizing the website’s structure to improve clarity and navigation. By categorizing content into intuitive sections like sermons, community events, and resources, users can easily access the information they need. This redesign ensures a logical flow, making the website more user-friendly and aligned with the audience's goals.
To develop the information architecture, we analyzed user needs and pain points identified during the research phase. Insights revealed a demand for clear navigation to sermons, events, and resources. Using these findings, we prioritized content based on user relevance, ensuring a logical organization that would enhance accessibility and streamline the user journey.
The team created a sitemap to define the structure and hierarchy of the website, grouping related content for intuitive navigation. Multiple iterations and reviews were conducted to optimize pathways, ensuring a user-friendly design that aligned with the project’s goals.
Low-fidelity wireframes were created to establish the basic layout and structure of the website, focusing on functionality over design details. These wireframes allowed for early testing of user flows and navigation, ensuring the core structure met user needs before moving on to high-fidelity designs.
Prototyping is helpful to ideate and iterate faster through ideas. By creating quick prototypes, we can explore different concepts, test them rapidly, and make necessary adjustments. This process speeds up the development cycle, allowing us to refine and improve ideas efficiently.
Major features and their benefits
Simplified access to sermons, teachings, and community information.
Added multimedia content, such as videos and graphics, to enhance learning.
Enabled sermon search by books of the Bible or preacher.
Clear instructions for participating in events.
Optimized design for all devices.
Included real-time updates via Instagram.
Highlights key lessons gained during the project and the obstacles faced, offering insight into how these experiences shaped the final design and improved future processes.
Importance of collaboration with stakeholders for clarity on priorities.
Tailoring designs to address both functional and emotional needs.
Outlines the upcoming actions to finalize and maintain the website, ensuring its usability and impact remain high.
Learnings and general thoughts
This project taught us the importance of aligning user needs with organizational goals through thoughtful design. By prioritizing accessibility, clarity, and engagement, we learned how critical user research and iterative processes are in creating meaningful digital experiences. As UX designers, this reinforced the value of empathy, collaboration, and the iterative nature of refining ideas to deliver impactful solutions.
Let's work together to achieve our goals. Combining our skills and perspectives will create innovative solutions and ensure success.
