Oasis Center, a Nashville-based non-profit specializing in youth services needed an updated version of their current site to attract donors as well as provide a smooth experience for the people using their services.
My team’s UX person worked with the client to create a logical site flow based on the client’s content and functional needs. The UX person then created high-fidelity page template designs in Sketch.
Once I had the Sketch file and the client’s functional requirements, I broke the layouts into repeatable pieces and components - taking screenshots to add to Jira tickets. I researched technical solutions to meet the functional needs then ran my choices by the account manager to make sure any associated costs (like plugin purchases) were ok with the client.
Functionally, the client needed:
The client also needed the site’s visual elements and functionality to be modern while still supporting older browsers (down to IE11).
I chose to use WordPress, since the client mentioned they were already comfortable using it for content-entry, and it met the needs of the project.
Keeping in mind that the site would be edited by several people - like seasonal volunteers, I decided to use Advanced Custom Fields to keep a tight control on the final mark-up and styles that would appear on each page.
I used the Timber plugin and starter theme as a base for making Twig templates. Using Twig allowed me to conditionally render content - including repeated rows and to take advantage of features like cropping images at a pre-defined size. I was also able to easily set-up default content fallbacks for areas of the layout, so pages could be created quickly but still look polished.
I was able to use Gravity Forms plus two Gravity Forms “add on” plugins to create the newsletter sign-up and donation forms. Both the email service and the payment processing service had fairly easy-to-follow instructions for connecting Oasis’s existing accounts with the two new forms. The payment processing service had a “sandbox account” service. This helped me test credit card payments and return both successful and failed processing messages.
Once the site was fully tested internally - with placeholder content to fill-out at least one of each page template type. I wrote a “Welcome to Your New Site” how-to guide for the client. I put the content I wrote into Google Slides and was able to save the slides as a PDF booklet - with a linked table of contents.
The client reviewed their new site on a staging environment and reviewed the PDF for a few days before coming into the office for an in-person training session. The client entered their content and after a final round of internal testing the site launched a few weeks later.
Lead Developer
