Web developer case study

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.

2. Background

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:

Customer features

• 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

Admin features

• Management of customer accounts
• Content Management for:
  • Pricing
  • Not logged-in content, i.e. for selling
  • Lesson plans
  • Messaging system to customer
• Error logging

Screens

• Not logged-in screens
  • Home / landing pages
  • About, Contact, Privacy Policy, Terms and Conditions, Membership Options, FAQs, Help
  • Stories, Games, Printables
  • Checkout
• Logged in customer screens
  • Dashboard
  • My Account
  • Games
  • Stories
  • Printables
  • Songs
  • Individual Game
  • Individual Story
• Admin screens
  • Accounts
    • Users
    • Accounts
    • Subscriptions
    • Prices
  • Site content
    • Books
    • Chapters
    • 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
• AngularJS
• JQuery
• SQL Server
• Entity Framework
• ASP.NET Identity
• Amazon Web Services Cloud Storage
• Bootstrap
• Braintree
• SendGrid
• MaxMind GeoIP2