Today, I’ll show you something that isn’t on the live site. I designed a new membership signup form, which was available in the prototypes that we tested with users.
My original idea was to allow people to fill out their own membership badge. This would have been displayed next to completed membership badges.
Fresh off of conducting a round of surveys for this project using AYTM, I was used to pretty robust tools. So my design for this form had a good deal of skip logic, custom buttons, and a full order review. I tried adding input fields within labels as the third slide depicts, but our plugin did not support that. To allow a quicker checkout process (and probably boost conversions), I made it possible for users to bypass the Coaster Crew merch and charity donation steps.
I added some space for the badge background and some copy in the wireframe. The low-fidelity prototype already had a full set of input fields and logic for navigating between the pages of the form.
For internationalization reasons, I used “First/Given Name” and “Last Name / Surname” language.
In this form design, I really wanted to highlight natural language. Interacting with one of these sites should not feel like interacting with a computer. I recently saw an insurance website whose search form is just “I drive a (car’s year, make, and model), and I live in (ZIP code).” That language makes a website feel human. Websites’ forms are often terse, and interacting with them feels like interacting directly with a machine.
It is likely that we would have needed a premium e-commerce form to handle the skip logic and purchasing logic here, even though the choices are quite simple for users.
This screen would have detected whether users had selected an option in the beginning that would have not given them the best possible deal on their membership. Another way to do this would have been to ask for the user’s and their guests’ information and recommended a membership type based on what they had entered. This may have required disclosing the price to be a later step and felt like bait and switch to people who had seen a low membership price advertised on the pages that gave them links into this checkout process.
This order review slide cannot be developed with the plugins available to us at this time. This is how it was intended to work.
There were actually 12 steps in this signup process, including all guest information pages. I have omitted the rest from this post for brevity, but for the near future I will make the wireframe and prototype available online. Submitting that form does not actually submit any data, so feel free to try it out.
A few screenshots of the prototype are available below.
The overall page used some copy which did more to highlight the benefits of membership in our club.
The Family memberships step allows for a quick checkout but also has options for extras. Most of our test users actually did buy extra merch and donate to the ALS Association. (The form they tested was not actually submitting anything. I had them do what they would have done normally.)
If users opted to go to this screen, they could add Coaster Crew merchandise to their membership order. Some users in early rounds of testing had not remembered that some merchandise was included with their platinum memberships, so I added that copy here.
The charity slide had a quick writeup explaining that the ALS Association raises money for research related to ALS (Lou Gehrig’s disease). I recently launched a site for a non-profit, and I know that people want to know more about the charities they are giving to without being asked to give out of guilt.
The payment page would have included the order total, calculated from previous slides’ data. Users really needed to know this, and Coaster Crew staff required it, but we couldn’t find a free plugin that would meet our needs.
This confirmation page assumed that Coaster Crew staff needed to process PayPal payments manually, but the staff wanted that to be an automatic process. That is the technical reason why we needed to be able to calculate the payment amount.
The prototype’s form had 12 pages, like the wireframe’s. The prototype will still be available online for the near future.
Our beta site, which is still online as of this writing, had the signup form implemented with the closest plugin we could find to what we needed. Here is how it looked in the desktop layout. The benefits of each membership type were reprinted here so that this page could serve as a landing page. Commonly, The Coaster Crew shares out the link to their membership page directly rather than sending out a link to their homepage or another page.
Because our plugin did not have skip logic, I combined all of the guest signup information onto one longer page and made all fields optional so that users signing up for individual memberships could skip it with one click.
This confirmation page shows up when users submit their membership information.
Here is an example of how the form displayed on mobile. I wrapped our form plugin instance within a Foundation framework (4.3) column class so that it would be responsive.
So due to technical limitations, the new membership signup form didn’t go live. The live site shows the first page of the signup form but with a button at the bottom to take users into the old signup process on a separate server.
I had basic assumptions at the outset about WordPress plugins for forms. We assumed we could find a form plugin that was:
- Responsive to any device,
- Able to calculate prices based on what users enter in previous steps, and
The closest we could get while I was working on this project was BreezingForms, which lets you build multi-page forms for free. This plugin was in use on the beta site. Since we were using this form for e-commerce, being able to carry prices forward was very important. Our site’s new store runs on WooCommerce, but the free version of that doesn’t do the calculations that we need for memberships and event signups.
I am a user experience designer specializing in the amusement industry. I work for amusement parks, ride companies, coaster clubs, and any other company or organization affiliated with amusement. If you would like to hire me, please contact me through my website or tweet at @AmusementUX. You can also like my company’s Facebook page or follow me on Twitter.