This project is a webite created for CAC Surrey Docks Church to add to their digital experience. The website provides its users with the ability to watch past sermons on-demand, as well as live worship experience broadcasts. I was contacted by the board member to help with the website redesign as a part of the overall rebranding of the organization.
UI/ UX Design
CAC Surrey Docks
Client:
Status:
Ongoing, 2024.
Tags:
User Research, User Experience, Product Design
About Project
The Challenge
Over the last few years, CAC Surrey Docks has been losing its members, especially young adults. The previous website was not reaching new people—or communicating with website visitors—in a very effective way. Its design was outdated, difficult to navigate and not optimised for search engines. In addition, they had just changed their superintendent and the management, so they desired a website that is tightly integrated with the new system, allowing website visitors to have a more seamless and enjoyable experience.
High Level Goals
At a high level, the primary goals for the project encompassed enhancing user engagement and satisfaction through intuitive navigation and responsive design. It aimed to create a website that not only facilitated easy access to past sermons and live broadcasts but also fostered a sense of community among church members and visitors. Key objectives included enhancing navigation to streamline content discovery, optimizing for mobile responsiveness to reach a broader audience, and integrating multimedia features for a more immersive worship experience.
The Process
We broke the project down into four key phases, each comprised of important steps. This approach helped plan out the project roadmap and determine key milestones and deliverable dates.
01
Discover
User Persona Development
User Journey Mapping
Information Architecture
02
Defining
User Persona Development
User Journey Mapping
Information Architecture
03
Concepting
User Persona Development
User Journey Mapping
Information Architecture
04
Outcome
User Persona Development
User Journey Mapping
Information Architecture
Discovery Analysis
Current Site Review
As the lead UI/UX designer at Branxel, I worked closely with my strategic team to gather all necessary information and insights about the CAC Surrey Docks Church. This phase was crucial for understanding the church's mission, vision, target audience, and the overall goals for the website redesign.
We began by conducting stakeholder interviews with the church board members and key staff to gather their expectations, pain points with the current website, and their vision for the new site.
We also carried out a thorough analysis of the current website using tools such as Google Analytics and heatmaps to identify user behavior patterns and areas needing improvement. We also sent out surveys to church members and visitors to collect direct feedback on their experiences and expectations.
Research Findings
Our comprehensive research and data collection revealed several key insights. Stakeholder interviews highlighted a strong desire for a more user-friendly and visually appealing website that better reflected the church's mission and community spirit.
The competitive analysis showed that leading church websites typically offer seamless navigation, high-quality video streaming, and easy access to past sermons and events.
Our analysis of the current website's analytics and heatmaps identified significant pain points, including difficult navigation, low engagement on key pages, and a lack of mobile responsiveness. Surveys and feedback from church members underscored the need for improved accessibility and a more engaging online worship experience
Definition
With the data and insights from the discovery phase, the next step was to define the project scope, objectives, and deliverables. This involved translating the gathered information into clear, actionable goals and establishing a strategic direction for the redesign.
User Journey Map
We started by defining user personas and creating detailed user journey maps to visualize the different ways users interact with the church's digital platforms. This helped us identify key touchpoints and opportunities to enhance user engagement and satisfaction.
Next, we developed a project roadmap outlining the key milestones, deliverable dates, and dependencies. This included setting timelines for wireframes, mockups, prototype development, user testing, and the final design handoff to the development team. Establishing these milestones was crucial for keeping the project on track and ensuring timely delivery.
Concepting
Wireframes
We iteratively wireframed to define the information architecture of screens, exploring various navigation approaches to determine the best user experience. Throughout this process, we actively engaged with CAC stakeholders and users to validate concepts and gather feedback, ensuring continuous improvement of the experience. We conducted two rounds of low-fidelity wireframes before advancing to high-fidelity designs. After each round of usability testing, we made several revisions, focusing particularly on refining the navigation and enhancing search features based on user feedback.
- 1. Making event info more prominent
- 2. Add Search bar to the sermon page.
- 3. Update event info hierarchy to make the critical info stand out
Design Kit
I created most of the components with the goal of keeping them cohesive with the newly developed branding. I created a simple set of icons, buttons, and a colour palette using different shades of the logo. I wanted the new site to represent the more approachable and relaxed version of the church.
A key aspect in the process was choosing the right font. Since a large part of the website information was in text format, it was important that this displayed well and clearly. The key criterion here was performance. We needed a typeface that rendered well, and had been extensively tested in similar scenarios.
High Fidelity Prototype
We then developed high-fidelity mockups and interactive prototypes in. These prototypes allowed us to simulate user interactions and gather further feedback through usability testing sessions with a select group of church members and visitors. The feedback from these sessions was invaluable in making final adjustments and ensuring the design was both functional and engaging.
Usability Testing
As we approach the Outcome phase, our design deliverables are finalized and ready for handoff to the development team. This includes annotated design specifications, assets, and documentation outlining design decisions and rationale. Throughout the process, close collaboration with the development team ensured feasibility and alignment with technical requirements.
Key milestones and deliverable dates have been met, thanks to diligent project management and adherence to the established roadmap. The website design for CAC Surrey Docks Church embodies a seamless blend of user-centric design and functional requirements, aimed at providing an enriched digital experience for church members and online visitors alike.
Outcome
Conclusion & Evaluation
Although the website project is still ongoing, the progress thus far has been promising. We have successfully completed the design phase and are now working closely with the development team to bring the new CAC Surrey Docks Church website to life. The new design promises to enhance the church's digital presence, providing users with a seamless and engaging experience to watch past sermons on-demand and join live worship broadcasts.