.png)
Building a website for a local spiritual nonprofit organization, to increase attendance and membership
Role: WordPress Developer
Duration: June, 2023
%20(2).png)
Before building this website, I went through the full design process to determine how to best achieve the goals of the organization and create a user-friendly experience. You can read about the full process on the UX side of my portfolio. You can also check out my Figma design files, which I used to store all of my design decisions.
I spoke with the organization about how they wanted their website to be built and hosted. We explored some options, but in the end they had a strong preference for a website built using WordPress, and hosted on a personal server owned by one of the organization's leaders. The main reasons behind this were cost (the server was already owned by the leader) and consistency (another website was already running with WordPress on this server).
Building this website was the first time that I had ever used WordPress, and so I learned a lot about the platform during this project. For the most part I found it similar to other website building platforms I had used in the past (Webflow, Squarespace, Wix, etc.), but there were a few unique features.
I used the Gutenberg editor, which gave me a selection of blocks to drag and drop to create basic pieces of the website (for instance, headings, paragraphs, images, etc.)
WordPress uses plugins to add or extend a site's functionality. During this project, the only plugin I needed to add was called EditorsKit, which gave additional options for how to style the Gutenberg blocks. I realized that I needed to add this plugin while creating link elements that were comprised of both an image and text.
A "pattern" in WordPress refers to design elements that are structured and styled in a specific way, that can be used in multiple places in a website. They are useful for speeding up development time, and to ensure consistency between pages. You can use prebuilt patterns, or create your own. For this project, I created two custom patterns: one for the page headers, and one for the picture links. Both cases involved highlighted text in front of an image, and I wanted to make sure that this was done consistently.
When translating a design to an implementation, especially in the context of working with an established organization, there are always some changes that get made.
Included in my UX case study for this project is the process I went through to design a new logo for the organization. However, despite liking the new design, the leadership was unable to officially change the nonprofit organization's logo with the government at this time. Until that time, the old logo is still in use on the site, with a white outline to make it visible against the blue banner.
The newsletter was an evolving piece of the design: it had been discussed as a possibility early on in the process, but not with enough certainty to add it to the menu of the original design. However, after nearly finishing the site, the leadership decided it was a top priority. I added a primary button to the header to link to the newsletter sign-up, because it was a clear call to action, and it was very important to the organization to be able to contact people through the newsletter. I set up a reoccurring newsletter template through MailChimp.
After the site went live, my last job was to teach the organization's leadership how to make their own modifications in the future. In a virtual meeting, I stepped through the process of making text changes in WordPress to teach them how. I also created custom CSS classes, for instance a class to hide any element, and then walked them through how to attach or remove the class to the desired element.
The new website for the Institute of LUV is now live, and the leadership is very happy with the improvement from their previous site. Some new potential members have found the organization through the website, and current members have told me that they find it much easier to navigate to the dates and links they need to find.
On a personal note, this project has left me with some valuable lessons and takeaways. First of all, it gave me a chance to familiarize myself with WordPress, adding another website creation platform to my repertoire. It also gave me experience working directly with an organization's leadership to discuss pages as they were created and finalize them together.