Capstone Case Study
The DPA Helper — A website designed to help 4-H’ers create their District Project Achievement speeches and portfolios.
Project Date: Fall 2023
Project Overview
The DPA Helper is the first online, interactive resource designed to help 4-H families create speeches and portfolios for Georgia 4-H’s District Project Achievement. Using WordPress and various plugins, this site allows users to input personalized information and receive a speech outline, introduction, and conclusion. The site also gives youth a space to track their project related activities throughout the year for their portfolio.
The Problem
Henry County 4-H is a youth development organization dedicated to providing youth opportunities to learn leadership, citizenship, and life skills. Each year, Henry County 4-H offers youth across the county the opportunity to participate in a statewide public speaking competition called District Project Achievement. This competition requires youth to develop a speech on a topic of their choice and a portfolio/resume of their 4-H career and project related activities. There are no online resources and very few print resources to support these participants with these goals.
The Solution
Initial Inspiration — Speech Assistant
New, 5th grade 4-H’ers across the state of Georgia are encouraged to create a 4–6 minute speech for Georgia 4-H’s Project Achievement public speaking competition. However, many students have no idea how to write a speech. Because of this, 4-H staff in Henry County use a template to help youth learn to write a speech.
However, with using a paper handout comes many challenges. Youth loose it, spill things on it, tear it, and their dogs even eat it. Parents call and email the 4-H office wanting additional copies and requesting digital materials.
Initial Inspiration — Portfolio Builder
Indeed and LinkedIn are two websites that allow users to input career experience with outputs such as resumes and timelines being created. This served as a great inspiration for the Portfolio Builder pages of the DPA Helper.
From LinkedIn, the ideas of easy to navigate user input and features that allow a user to save their work were found. However, the concept of easily being able to change the final product produced from the site was found to be lacking.
From Indeed, the idea of easily being able to manipulate the final product was seen, but at the cost of being able to save the information inputted. Additionally, experiences were directly added to the resume rather than being input by a form. This led to some of the consistency of information being lost.
These discoveries inspired the idea of being able to input experiences and edit the final deliverable on the Portfolio Builder.
The Prototype
It was determined a website could be created to help resolve these issues for 4-H’ers. To begin, an outline of features/pages was created.
- Home Page
- Speech Builder
- Portfolio Input Page
- Portfolio Output Page
Next prototyping began. First up was the “Home Page”. The “Home Page” needed to be easy to navigate, appealing, and a “hub” for all things on the site. Below is the page that was created.
Next, the “Speech Assistant Page” needed to be designed to assist younger 4-H’ers in writing the introduction and conclusion parts of their speech. This page was designed to be simple and straightforward to younger users to understand.
Additionally, downloadable resources were added to the page to help 4-H’ers and their parents with the remaining sections of the speech. Example speeches were also linked to the page for ease of viewing.
After creating this page, an additional page was created for the results of the form.
This page shows a 4-H’ers speech introduction and conclusion in the boxes. 4-H’ers could edit the parts in the box, or use them as written.
Next, the “Portfolio Builder Input Page” was created. Here, the research and findings from LinkedIn and Indeed were very useful. It was determined the page would need to be broken up into a few different sections. The first section was the “input” section. Here, 4-H’ers can input each activity they do, what section it goes in their portfolio, and attach any pictures they may have of the event.
However, creating this page soon led to the discovery that more pages would be needed for ease of navigation to and from the input form, the inputted items, and example portfolios. Because of this, the “Portfolio Builder Main Page” was created.
On this page, users can chose to add a new portfolio item, view their portfolio, or view example portfolios. This page helps users to not have to click through several other pages to navigate to where they want to go.
Furthermore, the “Portfolio Builder Management Page” was created to allow users to view the items already listed in their portfolio and download an editable version of the portfolio list.
Once these items were created, it was discovered there was one flaw in the design of the site — there was no way to save any of the information! While the idea of saving information had worked in theory, the actual site had no way of doing so. Thus, it was determined the best way to create a saving feature was to have users make an account to sign in and out of to view their portfolio and speech.
Below are the pages created to assist users in creating an account and signing in.
To view a prototype of the site created, click here.
Building the Original Site
At the start of this project, The DPA Helper was created using a Bootstrap template, HTML, and CSS. A navigation bar, home page, and the beginnings of a Speech Assistant page were well on its way.
It wasn’t until the starting on the Portfolio Builder became a consideration that issues started to arise. Eventually, a meeting with Chris was needed.
After a 39-minute meeting with Chris, it was decided that while the beginnings of The DPA Helper looked great, it was time to scrap them in favor of a WordPress powered site. This would help to make the functions of the Portfolio Builder much easier to create.
Swapping to a WordPress Site
So, The DPA Helper was recreated into a WordPress powered site.
Starting with the Home Page, each page had to be recreated, however there was a bit of a challenge in creating a WordPress site. A WordPress site needed widgets to help perform tasks on the site, thus a great deal of research needed to be conducted.
Speech Assistant
The first task that was researched was the Speech Assistant. For this, an input form would be needed that could take the information input by users and match it to corresponding fields to help format a speech introduction, outline, and conclusion.
After a great deal of research, it was determined that WP Forms would be the best widget to use for this task. So, a form was created and the generic “thank you” message that normally popped up after someone filled out the form was altered to instead show a personalized speech introduction, conclusion, and outline.
The Hack
Just as things were starting to move smoothly, tragedy struck The DPA Helper. Hackers decided The DPA Helper was so awesome they wanted to take it over.
Fortunately, after about 2 weeks and LOTS of emails to Reclaim Hosting and WordPress, the site was able to be recovered! However, not wanting to take any risks, it was determined a security plugin could help protect The DPA Helper from further hack related issues.
Thus, WordFence was installed.
WordFence is a security plugin for WordPress sites that allows website owners to better protect and monitor a site.
Logging In
With the site back up and running and the Speech Assistant working well, it was time to tackle the bigger of the challenges for this project — the Portfolio Builder.
When created the Portfolio Builder, the number one consideration was that youth did not need to see other youth’s information. Because of this, it was decided that a login system where each user has their own account could be helpful to solve this problem.
But yet again, this would require a plugin.
Thankfully, after a bit of research, The Ultimate Member was discovered. The Ultimate Member is a plugin that allows site owners to create a login system and manage users for their site. However, the problem with The Ultimate Member was that it did not restrict access to certain pages (which was needed so users could not see each other’s information).
However, after a bit more searching, it was discovered that the plugin, Simple Access Restriction, partnered with The Ultimate Member and allowed for page restriction based on account type and member.
With these two plugins discovered, the login page was well on its’ way. Pages were created for logging in, viewing your account, and registering.
Portfolio Builder
Next, came the Portfolio Builder. A form to enter activities and a page that showed an individual’s activities with a download option were going to be needed.
To begin, research was conducted to find a plugin that would allow users to input information in a form and view their own information in a table without others’ information showing. This proved to be a difficult task. It was found that there was not a plugin that met all the needed criteria for the Portfolio Builder, thus creativity was going to be needed.
After researching plugins, two plugins stood out that seemed like they could partner well together — WP Forms (which was already purchased for the Speech Assistant) and Tablesome.
WP Forms allowed users to enter new activities in a form. This helped to create the New Portfolio Item page.
Tablesome allowed for the results of this form to appear in a table. This, combined with Simple Access Restriction allowed for exactly what was needed. Users enter information in a form through WP Forms. Tablesome takes the data and displays it in a table. Simple Access Restriction removes any data not entered by the account which is logged in. It also restricts the View Portfolio Page and the New Portfolio Item page to only logged in members.
Once this had been created, it was also discovered that Tablesome had a paid feature which allows users to download their table as an Excel doucment. So, after a few dollars, this feature was added to the site. This allows users to download their entire portfolio list and any uploaded pictures with the simple click of a button.
Cleaning Up the Site
Once all of the main functions of the site were up and working correctly, it was time to clean the site up a bit. Example portfolios and speeches were added. Guidelines to the project and links to external resources were added. Even a basic footer was created using the plugin Code Snippets. Overall, the BETA version of the site looks great and functions as needed.
Results
Overall, the site serves as a huge personal accomplishment. Despite the various issues faced, the site is up, working, and looks great. Countless lessons were learned, WordPress skills were greatly improved, and critical thinking skills were put to the test. Moving forward, the next steps of this project will be to begin user testing on the site. This will help to uncover issues and improvements that can help to make the site even better.
