WPLP Website

Overview

The Wabash Pastoral Leadership Program (WPLP) is a training program for pastors. The program approached me to redesign their website with the goals of improving its usability and modernizing its appearance.

Over the course of several weeks, I worked with the WPLP team to develop a comprehensive plan for the website redesign. We identified several key areas of focus, including the user experience, mobile responsiveness, and integration with the program's digital marketing strategy.

Project Goals

The primary goals for the WPLP website redesign were:

1. Responsive and User-Friendly Design Across Devices

One of the main objectives of the redesign was to improve the user experience across all devices, including desktops, tablets, and smartphones. To achieve this goal, I created a responsive design that adapts to the size and resolution of the user's screen. The new design also features a simplified navigation menu and intuitive page layouts to make it easier for users to find the information they need.

2. WordPress CMS with Easy Editing by Staff Members

The WPLP team needed to be able to update the website content regularly, so I chose to build the site using WordPress as the content management system (CMS). WordPress is a powerful and flexible platform that makes it easy for non-technical users to create and update website content. I also provided training to the WPLP team to ensure they were comfortable using the CMS to manage the site on an ongoing basis.

3. Integration with Digital Marketing Strategy (SEO, UX, etc)

To support the WPLP's digital marketing strategy, I implemented several features to improve the site's search engine optimization (SEO) and user experience (UX). This included optimizing page titles and descriptions, creating a clear site hierarchy, and implementing responsive images to improve load times on mobile devices.

The Information Gathering Process

Before starting the redesign process, we needed to gather information about the WPLP's target audience and their needs. To do this, we conducted several exercises, including building out personas and conducting a card sorting exercise. This allowed us to establish the information architecture (IA) for the site and develop a sitemap that accurately reflected the program's offerings.

We also developed funnels and user journeys for each persona to understand their needs and identify the key call-to-action for each page on the site. By developing user flow charts, we were able to illustrate how users would move through the site ecosystem from a cold lead to conversion.

The Development Process

Once we had gathered all the necessary information and finalized the designs, we moved on to the development process. This involved building out the site designs using front-end HTML and CSS and then building out a custom WP theme.

Using WordPress CMS

Wordpress allowed us to create entire sections dedicated to content publishing - including articles, videos, testimonials, and more. WordPress also offered strong SEO optimization, which helped us achieve better search engine rankings.

In addition, this content section of the site supported any email announcements, print mailings, and social media promotion the WPLP did. The team could post announcements to the site and include a link in communication pieces.

Building Additional Functionality

We also wanted to include additional back-end functionality using server-side languages like PHP, including the ability to submit testimonials, register for events, make a donation, and nominate. We also built additional front-end functionality using front-end languages like JS, including interactive elements such as lead magnet popups, buttons, forms, navigation, and more.

Accessibility

To ensure the site was fully compliant with the Web Content Accessibility Guidelines 2.0, we took a people-centric approach that focused on making the website POUR - Perceivable, Operable, Understandable, and Robust.

Testing and Feedback

Finally, we set up an external staging site with a private link for testing by the WPLP team and any key constituencies. This allowed us to gather feedback and make any necessary adjustments before launching the site to the public.

Tech Stack Used

Wordpress: As the chosen content management system, WordPress allowed us to create a flexible and scalable website that met the client's requirements. The CMS is user-friendly, which made it easy for the WPLP staff to add and edit content.

Custom Theming: I created a custom WP theme for the website that matched the client's branding and design requirements. This theme was designed to be responsive, ensuring that the site looked great on all devices.

Sass for CSS: I used Sass, a preprocessor scripting language that compiles into CSS, to write the website's CSS code. Sass allowed us to write cleaner and more organized CSS code, which made the development process smoother.

Key Takeaways

Information Gathering: The information gathering process at the start of the project helped so much - we understood the target audience, their needs, and the goals of the website. It helped us develop a more focused strategy and design a website that met the client's requirements.

Collaborative Communication: Effective communication between the client and the development team was crucial to the success of the project. Through regular meetings and feedback, we were able to ensure that the project was on track and that the client's needs were being met.

Attention to Detail: Attention to detail is essential in web development, particularly with regard to accessibility and security. By paying close attention to these details, we were able to ensure that the website was fully compliant with accessibility guidelines and that it was secure against potential attacks.

Conclusion

The WPLP project was a significant website redesign that required a comprehensive information gathering process, collaborative communication, attention to detail, and continuous learning. By using a technology stack that included WordPress, custom theming, custom plugins, and Sass, we were able to build a site that met the client's requirements, was accessible, and was secure. Overall, it was a rewarding project that helped me gain new insights and hone my web development skills.