A few weeks ago I came to the realization that my current implementation of upgrading and billing users on FantasySP using Paypal was pretty terrible.
It was a clunky process where the user left my site to go to paypal, then they could sign in and/or input their credit card information. After that, they get directed back to my site to a “success” page.
The user was unable to upgrade from a monthly subscription to a yearly subscription, if he so chose. I never implemented automatic membership downgrades/upgrades because I thought I would be leaving paypal sooner rather than later. To top it off, the design of the page was just plain bad.
Talk about a mess. This is what my upgrade/billing page used to look like:
Simplicity is Key
When it comes to designing and implementing the new upgrade flow, I knew I wanted something extremely simple and easy to use:
- User should stay on the fantasysp.com domain during the process (SSL would have to be installed)
- Only 2 subscription choices to pick from with a suggested audience.
- Able to upgrade from monthly to yearly with a prorated cost.
- Able to apply a coupon code during selection BEFORE he checks out.
- Easily see the breakdown of features.
For me, Stripe seemed like the best option. There are countless posts out there detailing what Stripe is all about and why its cool. During the checkout process, stripe uses a javascript library that handles the form submission and processing of credit card information. If it all checks out, then the form is submitted to my server with an authenticated token that stripe recognizes to perform the transaction, create a new customer, or subscribe them to a plan. Therefore no credit card information is actually handled by my server.
Design the Page
Instead of hiring a professional designer, I decided to take a crack at this one myself. If what I made looked like shit then I would bite the bullet and hire a pro. I would never say that I am a designer, but I can pretend to be one. I looked at quite a few checkout pages ranging from 37signals to Old Navy. I skipped the Photoshop process of a mockup and went straight to designing in HTML/CSS because I knew what I wanted in my head:
The boxes look pretty much like Monopoly cards, right? Instead of smashing everything together, I wanted to make sure I utilized the entire width of the website. The user is presented with a CLEAR option of free, monthly, or yearly plus. Underneath the price suggests who would benefit best from the plan. Monthly is for the seasonal fantasy player, whereas Yearly is for hardcore players, and Standard is for the casual player. When mousing over each box, the background turns yellow.
You may notice that I decided to use different fonts (via Google Fonts) because I think it makes it appear and feel more unique. Arial gets boring real quick. I also wanted to make sure that the page relied solely on CSS for styling. Everything you see there are some fairly simple and common CSS techniques to add a bit of flare to each box.
The coupon code is shown just below the choices WITHOUT a button. My site will analyze the text as the user types or pastes the coupon into the box. In order to proceed to the next page, the user must click a box. If a valid/expired coupon code is detected then it gives a message like so:
But of course, the user needs to see the full breakdown of the features. The user also needs to see what the site would look like as a Yearly Plus subscriber, which means the top banner of the site will show Player Trends instead of banner ads:
The user can mouse over the bottom 4 choices and see more information about each via tooltips powered by qTips. Now lets move onto the actual form to submit the subscription order:
Thanks to Stripe, I don’t need their billing address or even full name to process an order. We want the bare minimum here so the user can quickly move on. Next to the plan is an option to change their plan. There is also an option to “Go Back” incase the user changes their mind. The “Submit Payment” button is BIG and BOLD because the user should be able to quickly find the “Submit” button.
Again, clicking the “Submit Payment” button sends the information to Stripe and then responds back with a token if valid. Once that happens, then communication between Stripe occurs and the user is upgraded to their selected plan. If all goes well, the form is finally submitted and the user is presented with a Success page.
But Wait, There’s More
You thought that was it, huh? That is the basic checkout process, but the user needs to see an email invoice to ensure they have something for their records. Sounds like something else I have to design that also needs to look just as good and be just as simple. Luckily I recently redesigned the email newsletter that goes out, so I used that template for the invoice:
Looks like I should be nearly done with the design of the billing process, but there are a few more possibilites to take into account. What about Cancelling memberships? What about Upgrading from a Monthly subscription to a Yearly Plus?
As you can see, choosing to upgrade a subscription prompts the user with a new box via jQuery UI. After clicking yes, the user is shown the price and is sent a new prorated invoice. Similarly, if the user wishes to cancel, then a similar box would pop up.
Wrap Up
Revamping a billing page takes a lot of planning, testing, and fine tuning. Just the design implementation alone took about 2 weeks with lots of tweaking. Lots of frontend technologies are used including jQuery, jQuery UI, Google Fonts, Stripe, and qTip. There are still a few things that need to be tweaked on the frontend and backend, but overall the new billing is exactly what I envisioned and is light-years better than what I had.
Hopefully this post will help others who are thinking about revamping their upgrade flow. Nearly 3 weeks of hard-work launched a few days ago and it was great to see a few users already go through the process with no problems. Merry Christmas to me.