>> Return to website design services...
Designing and developing a subscription website
Time to read - 5 minutes
We’re passionate about marketing and web activities, but if you didn’t already know, we’re also passionate about reading skills. We have used our digital know-how to develop two game and story websites that support teachers and parents to teach reading skills. One website is free, its sister-site is priced so that it is affordable whilst a) paying for itself and b) making a contribution to the ongoing development costs.
In this article, I’d like to showcase the subscription site - www.ClubRoy.com. It’s home to 149 reading games, 2 epic guided reading stories and more than 700 printable PDFs. All developed to support emerging readers gain the valuable skill of reading.
User-friendly Design
The design of the site had to be user-friendly as it would be used by children aged 5 to 7 as-well-as busy school teachers. It also had to be suitable for accessing through iPads and school interactive whiteboards. And finally, it needed to look engaging to help inspire the children to play it.
We stuck to these principles…
- Plenty of whitespace for the interface so that important elements could be easily spotted
- Sharply contrasting colours for buttons and making them as large as possible
- Using images to help navigation and recognition of games
- Using animation to reduce the amount of visible clutter
- Minimal clicks to reach the desired content
- As exciting imagery as we could make!
Take a video tour of Club Roy to see how the finished design looks.
Subscription Functionality and Payment Gateway
Again, the task was to make it as simple as possible. Whilst there is a lot going on in the background the front-end user experience is straightforward. We haven’t had any issues with subscribers getting confused and lost. Each subscriber has an account area where it is easy to manage their subscription and to print off receipts for their subscription order.
A super-admin backend was also required so that we could support teachers with managing their subscriptions as-well-as as a way of editing and adding content.
We opted to used Braintree as our payment gateway. We made this decision for three reasons. It had an excellent drop-in user interface, it had PayPal already integrated with it and there was no monthly fee. So far we have been really pleased with our choice. On earlier e-commerce projects we had used SagePay but their user interface was very poor (as at March 2017) and we didn’t like the monthly subscription… and whilst I should have known this (through their Ts and Cs), they charged us an extra 3 months use when we closed the service.
We use an email service provider to send all communication for the site including receipts and subscription reminders.
The Games
Sometime ago we made the strategic decision to make games that played in the browser rather than developing apps. We used the javascript game engine CreateJS which has been a great library to develop with. It makes it easy for developers who are coming from a Flash background to migrate their skills, as was the case for me.
The Stories
I could have developed the story functionality using CreateJS but we weren’t rich in time. In the end we decided to find an open source solution. We opted for Reveal.js, which is normally used as a tool for creating presentations. It has some great functionality particularly for iPads, for example, swiping the screen to advance the story. It also has event hooks to plug your own javascript into. We added some extra functionality along the way which included detecting Retina screens and adding narration through a small CreateJS app.
Cloud or VPS?
We spent a great deal of time trying to estimate the costs of using Microsoft Azure using their calculators - it started to get very pricey when we added a content delivery network with ssl across our key regions. With the number of subscribers being difficult to forecast we decided that initially we should use a fast virtual private server and once we have built a suitable amount of subscribers we will then move the site to the Cloud. So far this has been the right decision.
Marketing Club Roy
The site relies on leads from its free sister website - www.roythezebra.com. We have remarketing running. This marketing setup works well for us.
Take a guided tour of Club Roy.
By: Tim Bowerbank
Role: Web Developer