A few months ago, a non-profit I volunteer for @rtifice tech education, needed to get its digital face revamped. I spent a few weeks working on a full website and blog revamping.

Page loads and information

There were two main problems with the non-profit's web presence. First off, the website looked totally amateur and was filled with out of date information. This is, of course, completely normal for most non-profits, but it wasn't a great face for an after-school computer coding program. The second problem was that the blog was really slow to load. It was implemented with a very hacky Blogger template, which also looked pretty unprofessional. For that one, I have to take full responsibility.

Website update

The former admins had switched the whole codebase to reside in Github Pages, so I could easily make updates and we all could review remotely. Much simpler than the old days of SCPing your code onto a server somewhere.

Jekyll

Originally, the admins had been using totally static pages. I could have kept the same, but I've found that whenever there are changes to things in the nav menu, people (including me) inevitably forget to update them across all pages. That makes for an impossible navigation experience as users try to get to places that can only be gotten to from 1 of your pages.

Instead, I decided to switch to using a jekyll template, which would allow me to make site wide edits in one location. I based it on a template from a company called CloudCannon that released their template for open reuse with modification.

I was really happy with the main landing page. It used a lot of images, but also had good space for us to put our mission front and center.

I also added two additional pages that were mostly implemented in the template already. One was a community page that allows us to show how many amazing people work together to make our projects happen. The second was a lightweight CMS for big news in the organization. That was really cool to write up the little blurbs about all the big milestones we'd had over the years.

These were all relatively minor stylistic changes. It took a lot to design the flow of the website and figure out what content to surface, but the engineering challenges were minor. The main technical improvement came on the class signup page.

Class Signup

The coolest new feature that I built was the ability to signup for classes on the website. On the old site, I'd added a page to add donations using Paypal's built in donate button feature. Then when we needed to pay for classes we just directed them there and had them set the payment amount as their donation. I was pretty ashamed of how hacky that made the organization look.

So for this update, I wanted to make a clean form that allowed people to sign-up before being sent to a legitimate paypal payment page. It was technically very interesting because I had to do all of this without using a true database. So the record keeping had to be done entirely on the frontend with javascript, without any backend code.

To do this, I actually hijacked Google Forms, using some incredibly insightful info that I found from webjeda. Basically, google's forms are just basic webforms, but they try to obfuscate a few fields, making it difficult to just create any customization of style. But if you figure out the real names of the form fields, you can simply make your form submit those fields to Google's backend. It's pretty brilliant.

The second big hurdle

I described all of our in-class programs in detail. And built CTAs (Calls to Action), that hopefully helped people see what they needed to do. Obviously, a more thoughtful designer to make improvements, but I worked with what I had here.

But the real mindf**k came when I tried to combine this off-label usage of Google Forms with another off-label usage of Paypal form submission. And to do something that you aren't supposed to be able to do with HTML at all: use the same form fields in multiple form submissions! (The things that get me excited, I tell you.)

I found this writeup on how to customize Google Forms along with piecing together a few examples of hacking Paypal buttons into forms. Check out the code for more detail, but basically I overrode the generic form submission to allow the forms to swap info back and forth between submissions.

the gory details

The only way to make the submit occur from another form is for the submit button on the main form to be hidden, and to have it's label actually function as the button on another form.

This line hides the submit button on the main (Google) form

<input type="submit" id="submit-form" style="display:none;" value="Enroll In Course" />

Then here, I add the label to the second (Paypal) form with the for keyword referencing it back to the submit button for Google.

<label id="enroll_button" class="special_button" for="submit-form" tabindex="0">Enroll In Course</label>

Everything in the Paypal form is actually hidden so that form just grabs a bit of info from the other form using javascript jQuery and passes it on (securely) to the Paypal authentication site. The code below is run because the forms submit action is overridden to run a custom function:

onsubmit="submitPay()"

function submitPay() {
    $( "#name_paypal" ).val( $( "#name" ).val() );
    $( "#paypal_return" ).val( "http://www.artificechicago.org/enroll/?transaction=" + $( "#secret_paypal" ).val() );
    $( "#paypal_opened" ).val( 'Yes' );
    $( "#enroll_button").css('background-color','#4182e4');
    $( "#paypal_button").css('background-color','rgba(120,120,120,.5)');
}

And after finishing on Paypal the user just returns to submit the Google form and it will include the payment confirmation info automatically.

I won't explain too much more because this is kind of mildly vulnerable to exploitation (though don't worry not in terms of any payment information leaking*). Basically the paypal and google forms pass some confirmation numbers back and forth so that the Treasurer can confirm the transactions went through in the account.

Overall, the new main site is much more user friendly and professional.

Blog update

The blog update was less interesting because it was similar to things I had done before. I simply nabbed a free-to-use template from Templateism, and started making my own tweaks.

I did spend a good bit of time trying to think of the best way to make the info on the website explorable too though. I made a few easily navigable landing pages that helped to highlight some of our favorite work over the years.

I tried making the content more highly visible, and I think it paid off. Hopefully, the website helps to add some credibility to the organizations coding expertise and brings them more volunteers and students in the future.

* The vulnerability is that someone could figure out how to pass a boolean that says that the payment is confirmed even though it isn't. Still, part of @rtifice's ethos is that if you can figure out how to hack our systems you actuallyf deserve whatever tiny spoils you get.