Check out the features of our membership website for Club Roy.
Easy signup process
Allows subscribers with multiple currencies for global audience
My Account area
Automated emails to subscribers
Authentication and lost password functionality
Renewal email reminders
Easy to use navigation
Guards html5 games and other resources
Search functionality to find games and resources
Minimal backend costs
Admin system to manage users
Tracks last used content
Message board for users
... and more!
1. Final Outcome
Emma and I used our web development skills to build a bespoke subscription website. This web app has helped us monetize our educational products.
The web app provides paid access to:
- Interactive games for iPads, desktops and interactive whiteboards
- Interactive stories
- Printable worksheets
- Lesson plans
The site also has an admin system. This allows us to manage users, their accounts and partial content.
The site is running well and has subscribers from all around the world. When subscriptions grow further we’ll consider moving the web app to a cloud solution.
My coding skills originate with building interactive resources for the primary education market. Supporting the teaching of reading is something that I am very passionate about. And to this day, I continue developing interactive resources.
I started out with providing free content on www.roythezebra.com. To create a sustainable business without ads, we decided to monetize some of the content. We decided that we would develop a paid, bespoke membership website.
Our priorities for building the system included:
- Providing rich interactive content that supports reading skills
- Easy to navigate for teachers, parents and children with minimal clicks to content
- Secure, yet easy to sign up with both credit card and PayPal
- Automated as much as possible, so that it required minimal on-going input
- Minimal backend costs
- Able to scale with ease when subscriptions have grown, e.g. transfer to a Cloud-based solution
3. Core Functionality
The core functionality included:
- Easy signup process
- Payment in more than one currency - GBP, USD, AUD, EUR and NZD, with PayPal integration
- Determine customer’s country using IP address lookup to display prices in the most appropriate currency.
- My Account area to allow customers to manage their subscription. This includes easy cancellation and downloading of invoices
- Easy and quick access to all paid-for content areas
- Content history to allow users to revisit content
- Quick search, very useful in the printable section that has more than 700 documents
- Forgot my password
- Emailing of key messages, including: welcome, upcoming renewals and renewals emails
- Management of customer accounts
- Content Management for:
- Not logged-in content, i.e. for selling
- Lesson plans
- Messaging system to customer
- Error logging
- Not logged-in screens
- Home / landing pages
- Stories, Games, Printables
- Logged in customer screens
- My Account
- Individual Game
- Individual Story
- Admin screens
- Site content
- Game topics and sub topics
- Error logging
4. Building the Web App
Even though the site was for us, we went through the normal development cycle that we use with customers. This included lo-fidelity wireframes created using Adobe Illustrator, moving to high-fidelity screen previews. We created the high-fidelity screens with Photoshop. In the future we’ll do both low and high fidelity wireframes with Adobe XD.
An important decision was who to use as our payment gateway provider. Our criteria was that it needed to be easy to use, secure, available in multiple currencies, offer subscriptions and must allow payments by PayPal. We had used SagePay in the past but after some research decided on Braintree. The integration option we used meant they would store the customer data on their server, minimising the work we needed to do to be PCI compliant.
The customers which use the site largely come from the US, Australia, New Zealand and the UK so we needed to be able to offer payment in currencies for these countries. We used MaxMind GeoIP2 to lookup the location of the customer, which allowed us to determine which currency to use during the sign-up process.
We wanted to optimise the performance of the site, so used AngularJS in conjunction with ASP.NET caching on most of the logged in pages to ensure fast loading of the games and stories. We used AWS Cloud Storage to host most of the images used within the site to save on costs.
Having made the decision to build the site using ASP.NET MVC 5 with a SQL Server database we used ASP.NET Identity to integrate membership functionality. Users can register, log in, recover passwords, change passwords, cancel subscriptions and view most recent invoices. We offer four membership options, school and individual user, monthly and annual subscriptions. School users have an admin login with full access and a student login with restricted access and a customised home page.
During the build process we tested the web app on Microsoft Azure. However as the site was new, we didn’t know what the actual costs would be once we went live so went with a traditional Windows server setup.
Throughout we used an agile approach to ensure quick time to market. We launched a minimal viable product which works very well. And when we have the time, we’ll add more features. New features will include reporting and allowing customers to manage their payment methods.
5. Tools Used
We used the following frameworks and libraries.
- ASP.NET MVC 5
- SQL Server
- Entity Framework
- ASP.NET Identity
- Amazon Web Services Cloud Storage
- MaxMind GeoIP2