Wilderness Louisville Website Redesign

The Wilderness Louisville Website Redesign project was done by multiple groups across three semesters during my time at the University of Louisville. Each of us played a key role in the projects life, from inception to completion. Our groups also competed to see who’s website gets chosen by the client to be the official website.

My group is named Team Rocket (after the crime syndicate in the Pokémon media franchise) and consists of Michael Ly, Chancellor Caldwell, Scott Luong, Alex Schoborg, Brian Lam, and Caleb Caster. I was elected the Project Manager role while Michael, Chancellor, Alex, and Caleb chose to be developers and Scott and Brian chose to be testers. An overall great group of people to work with!

Wilderness Louisville, Inc. is a 501(c)(3) nonprofit organization founded in 2013 with a mission to be champions for Louisville’s natural areas, from Jefferson Memorial Forest, the nation’s largest municipally-owned urban forest, to the ones in neighborhoods all across Louisville. They work in partnership with the Louisville Metro Government’s Department of Parks and Recreation to promote the development, stewardship and community awareness of these natural areas.

The project began in the Spring 2019 semester by doing a strategic assessment on the client. In this assessment, we got to learn about the organization’s history and purpose, management and business processes, their current information technology environment, as well as their envisioned goals. Through this, we also had a chance to analyze the top 10 technological issues it faces and suggestions on how they could overcome these issues. We identified the current website to be a central problem to majority of their issues and suggested a website redesign that is mobile friendly, intuitive, and easy to use by Wilderness Louisville staff. We also identified other areas of improvement including creating a centralized place to store data, interactive maps to help users find and get directions to hiking trails, campsites, or other points of interest, as well as integrated tools to handle donations, memberships, campsite and facility rentals, as well as event tickets.

Once Wilderness Louisville agreed to have our groups move forward with the website redesign project, we entered the planning & design phase in the Fall 2020 semester. We started the phase by creating a System Request, Narrative, and Statement of Work, listing the stakeholders involved, the problem statement, business case, and feasibility statement, and explaining the goal, scope, final deliverables, schedule, costs, technologies we plan to use, and any key assumptions made about the project. Some of the other early planning documents we created include the “As-is” and “To-be” Process Models, a Vision Document with system requirements and features, use cases, use case diagrams, class diagrams and our initial architecture considerations.

We then created some very high-level wireframes to have an understanding of how the website will be setup and where each feature will live. Once finished, we designed some lower-level, more detailed prototypes of how we predict the website will look once complete. Finally, we presented all of our plans and designs to the client, receiving feedback and approval to move forward with the development phase.

The rest of the project took place in the Spring 2021 semester, starting with the development phase. Snapchat groups was chosen as our primary communication tool while Microsoft Teams served as our cloud, calendar, and group meeting platform. We had initially chosen Jira as our project management platform, however after some accessibility issues, we ended up switching to Microsoft Azure DevOps (formerly TFS). We then established our meeting schedule and began building out our user stories using the requirements we gathered in the previous semester. Once the backlog of stories was complete, we established a sprint plan, signed up for stories, and started our first sprint.

Our first sprint consisted of doing the initial server and domain setup as well as software installation. To save us some money, we decided to use a free subdomain off one of my primary domains. I directed the subdomain’s nameservers to my home’s public IP address where I have a physical linux web server. The server, a $300 Dell Inspiron Windows 10 desktop computer, was something I had originally reconfigured to be a linux based personal cloud server similar to Google Drive or iCloud. However, after some experimenting, I learned that it would be a perfect server for our project and decided to use it instead of having to pay for hosting. All I had to do was install WordPress, setup the apache virtual host, open some ports in linux’s firewall, and setup port forwarding on my router to direct the web traffic to this server. I installed phpMyAdmin to give us easy and quick database access and established a database and database user for the WordPress setup. While I was at it, I also change the php configuration to give WordPress access to more RAM, reduced some of the restrictions, and increased the file size upload limit, allowing the website to run faster and giving us more freedom when building the website.

Now that the host and server were configured, it was time for us to get to the initial WordPress setup. We entered the database information, gave the website a name, and created our first administrative account. After the setup was complete, we created additional administrative accounts for each team member and began installing some of the plugins, a theme, and added some security. We are using a premium website builder plugin called Avada to help us easily build the website’s frontend without having to write any code. The template theme we chose is called Church and it is also part of the Avada plugin. The plugin is one I use already for my portfolio website (the website you are currently reading this on) so no money was spent here either. Some of the other initial plugins we installed include Wordfence Security, The Events Calendar, Simple Weather, FileBird, UpdraftPlus, WooCommerce, and WP Google Maps. However, we only did the installations for these, not the setups as we planned to do this in future sprints.

The last thing we did for this sprint was fill the site with fake information and data to help us configure the theme, added the Wilderness Louisville logo, changed the background image, updated the main navigation, and did some other small styling adjustments to help fit our prototypes.

Our second sprint primarily focused on building out the pages that didn’t contain any plugins or additional functionality, including the About Us pages, Initiative pages, as well as the Natural Areas pages. Some of the functionality we did build out includes the live park weather that updates every five minutes using the Simple Weather plugin, the interactive map showing parks, trails, campsites, and points of interest using the WP Google Maps plugin, and additional security measures using the Wordfence plugin.

We also spent a lot of time on styling the website, adding call-to-actions for Donating, Becoming a Member and social media links in the universal header and footer. The landing page got a makeover with an interactive slider and widgets for Upcoming Events and Recent Posts. A secondary navigation bar was also added to the top of the website as requested in the requirements. Lastly, we also spent some time configuring the theme for mobile, making some minor visual adjustments with CSS.

Our third sprint was a bit longer than our others, giving us plenty of time to make a lot of progress. We finished up the Natural Areas pages by adding images of the parks, writing a small paragraph about each, listing the hiking trails, giving links to additional resources like Park Rules, and added an Upcoming Events widget to the sidebar.

Next we worked on building out the Adventures pages by installing and using the Pods – Custom Post Types and Fields and FacetWP plugins. These plugins allowed us to easily create and store tables within our database for each type of activity and all data associated with each. The FacetWP plugin was used to display this data on the frontend and to allow users to quickly and easily filter this data, allowing them to find trails, campsites, as well as other activities or points of interest within each park.

We then built out the Contact Us page, replaced the fake content within the blog and events pages, installed and configured the MC4WP: Mailchimp for WordPress plugin, created a Newsletter signup for within the universal footer, and began work on the campsite and facility rental tool powered by our recently installed Hotel Bookings Lite plugin.

Lastly, more styling was done in CSS to fix minor visual issues that had come up.

Sprint four was spent mostly on the eCommerce functionality including the Donate, Become a Member, and Store pages. We installed and configured GiveWP to handle the donation and become a member functionality while configuring WooCommerce to handle the store.

Next, we built out the Careers and Volunteering pages using the Pods – Custom Post Types and Fields plugin again. This allowed us to create database tables to handle all data associated to open career positions as well as open volunteering opportunities. It also add functionality to the WordPress admin control panel for Wilderness Louisville to easily created these positions and opportunities just simply filling out a form.

We also managed to finish up the campsite and facility rental pages and do a ton of styling to make sure the website looks good across all devices. The website is now complete and ready to be tested.

Our fifth sprint was dedicated to running unit tests, user tests, and usability tests. Our unit testing was done across a variety of desktop and laptop computers, tablets, and phones. Our user and usability tests we combined together for the sake of time. We had a pre-test questionnaire to get to know more about the user, their experience with websites and organizations similar to Wilderness Louisville, and to understand what they are typically looking for in these types of websites. We then had them use the website and complete a variety of tasks within the website while taking notes on their comments and reactions. Lastly, we had a post-test questionnaire to get feedback and suggestions. We received overwhelmingly positive feedback with many users excited to about seeing and using the website when it gets deployed.

Our last phase is deployment. The final demo presentation will be given on April 29th to the client along with all the other groups across two classes. Only one group will get chosen to deploy. However, my team and I are confident that our website will be chosen and we cannot wait to deploy it and have it become the official Wilderness Louisville website!