How we built the MASCED Accreditation Online E-course

For those who haven’t yet seen the site, The MASCED Accreditation is an online e-course aimed at Hair, Health and Beauty industry professionals. It is designed to educate professionals who have regular contact with their clients’ skin, helping them detect the early signs of skin cancer by spotting suspicious lesions. This can prevent their clients from disfigurement through surgery and in the case of spotting melanoma early, even prevent their death.

Our Brief was simple enough:

• Create a secure, stable, super-fast website that is optimised for all modern devices and browsers.
• Administration should be reduced as far as possible by allowing users to keep their contact information and login credentials up to date.
• The accreditation e-course must be intuitive and user-friendly across touchscreen devices, laptops and desktop PCs. Progress must be automatically saved as the user completes the course.
• The course must be far reaching. Both the Skcin Charity and the accredited users must be able to share achievements on social media.
• The site is to be launched in two stages with an initial site created to promote the fact that the course is ‘launching soon’.
• An extensive, bespoke management panel is to be created to allow multiple, remote administrators handle contact requests from a centralised admin area.
• An In-depth reporting area to help the charity gauge the performance and reach of the website whilst highlighting any users who may be struggling with certain aspects of the course.
• Finally, and most importantly, it had to be affordable. The client is, after all, a charity so no £50k budget that would divert too many resources away from what they do best i.e. Saving Lives! So, no pressure then.

Why we felt we were the right team to accept the challenge:

Our small team has a wealth of experience developing bespoke web applications just like this one. With expertise in Database Architecture, CSS, Object Oriented PHP and JavaScript we possess the necessary skillset to build the application from the ground up. This is not the kind of application that can be built with an off-the-shelf solution like WordPress. No amount of third party plugins can provide the bespoke functionality required here.

Phase 1: Planning, Planning & More Planning

Skcin’s very talented design team provided almost all the artwork for the site, we just had to bring it to life. Before a single line of code could be written however, the whole development process had to be mapped out, confirming the following areas:

Technologies to be used & Site URL Structure

The planning process started by establishing the technologies that were most suited to the project before setting out the basic URL structure. To ensure the site was compatible with the largest number of hosting providers and for ease of maintenance the following technologies were implemented:

• Apache Web Servers, synchronised and load balanced across multiple locations – installed on almost all Linux web servers worldwide, Apache is the leading HTTP server in existence.
• MariaDB Relational Database Engine, configured as a Galera Cluster – with our custom connection script to allow each webserver to connect to any available database server in order of proximity, Galera provides fast, highly available access to data.
• PHP Scripting language – Fast and flexible, PHP powers many of the most popular websites in the world.
• JavaScript & jQuery Client-Side Scripting – jQuery is a feature-rich lightweight JavaScript library supported on all modern browsers.
• AJAX submission of accreditation steps – As it must be possible to complete the accreditation on mobile devices, it was important to keep the amount of information travelling between the browser and server to a minimum.

Page Templates, HTML Mark-up & CSS Styling for Static Pages

To ensure the static pages of the site can be easily maintained and updated, templates were designed with the elements that are present on all pages throughout the site. As the site needed to be optimised for all devices, a responsive layout was selected using media queries to dynamically update the layout on different sized screens.

Database Architecture

The database serves as the beating heart of any complex web application. The requirements for the database running the MASCED Accreditation go a lot further than simply storing usernames and passwords so it was imperative to establish the optimal structure to store the following data:

• Accreditation questions including correct and incorrect responses and whether the user must get the correct answer before proceeding
• Directory of the different types of question. true / false, multiple choice, etc.
• User contact information including business and postage addresses
• Each user’s answer history
• Associated Feedback and star ratings from each user
• User profile image locations

Phase 2: Development of Static Pages

To ensure the pages of the site load quickly for desktop and mobile users alike, we imposed a limit of 0.5MB for loading the initial page of the website with further reductions for subsequent pages. By leveraging browser caching of resources that are required for multiple pages, compressing all code before sending it to the browser and painstakingly updating line after line to be as efficient as possible, all pages of the site load almost instantly despite being such an image-rich design.

All pages of the site were created with a default mobile view, then additional CSS rules were composed to cater for additional screen sizes and whether the user is looking at the site in a landscape or portrait orientation. The end result is beautiful looking webpages that outperform many sites with far less images:

Phase 3: User Authentication & Account Management Pages

Whilst we are not collecting any payment details or extremely sensitive information from users, there is still a requirement to follow fundamental security procedures to ensure the site and its database are as secure as feasibly possible. HTTPS encryption is achieved by means of an SSL certificate and all user passwords are encrypted at the point of submission. Users have the option to set their browser to remember them by means of a cookie, but this is not assumed. The usual SQL injection prevention measures are undertaken (principally through prepared statements) and other principles such as safe URLs with no user information are deployed throughout the site.

Once authenticated by means of a username and password, the user gains access to a comprehensive User Profile area allowing them to manage the following aspects of their Accreditation:

• Update email address & password
• Submit contact information for the delivery of their guide and generation of personalised Certificate of Accreditation PDF
• Download a PDF version of the MASCED Guide

 

Phase 4: The Accreditation!

Categorisation of Questions & Question Logic

After the initial, draft artwork for the questions arrived, our first objective was to categorise them in terms of both design and behaviour. Each question was grouped together based on its visual layout, what the user had to achieve to proceed to the next question and what visual cues were provided to the user when it was answered incorrectly. Rules had to be established in regards to when users would be provided with clues, which questions would require a correct answer before the user could proceed and which questions would require additional functionality such as file uploads or social media integration.

Storage of Information Associated with Each Question

The following question data had to be stored in the database:

• The question text
• Text seen by the user when they answer correctly
• Text seen by the user when they answer incorrectly
• Possible answers to multiple choice questions and whether they are right or wrong
• Which course of action is taken when the user gets the question incorrect
• References to any images displayed

Delivering the Question to the User and Establishing if they have Answered Correctly

We considered several possible methods to deliver the HTML content including the question data to the user although many conditions had to be taken into account to establish how best to achieve its efficient delivery. By working through the requirements, there was only one method that remained viable:

1. The user navigates to the accreditation e-course splash page and the assets that are required for every question are downloaded as part of the initial page load:
   1. Accreditation stylesheet and JavaScript files – By segregating the CSS rules and JavaScript functions that are only required for the accreditation process, we ensure that users browsing other pages of the site don’t download any unnecessary data
   2. Pre-load the next question the user is due to complete – The accreditation is completed in a modal window. The content of the modal window is pre-populated with the question that the user is next due to complete
2. The user launches the accreditation modal window and submits their answer to the question displayed which is sent to the server by means of an AJAX call. There are multiple benefits to using an AJAX call to submit each answer to the server:
   1. The assets required for the whole accreditation process do not need to be delivered to the browser on initial page load – Speed is the aim of the game here, with dozens of users completing their accreditation at any one point, downloading the whole accreditation every time each user lands on the splash page places an unnecessary load on the server. More importantly, having to display a loading message while they wait for the whole course to download is a poor experience for the user. We have provided users with the ability to complete the accreditation in stages, let’s not force them to download over 100 questions worth of text and images if they are only here to complete a handful of questions.
   2. Ascertaining whether the correct answer has been supplied takes place server-side – This avoids having to send information regarding the correct answers to the user’s machine before they have completed the question. Although nobody is expecting users to complete the accreditation under strict exam conditions, it is still important to ensure that users can’t access data that may expose the correct answers.
   3. Data transferred between the browser and server is kept to an absolute minimum – The request to the server only includes the details about which question is being answered and the answer provided, keeping the request data to well below 1KB. The response from the server includes information to be displayed based on whether the user selected the right or wrong answer.
   4. No page refresh – User experience is further improved by not having to reload the page every time they answer a question. This can be especially frustrating for mobile users, increasing data usage and causing unnecessary distractions as elements reload.
   5. User progress is automatically saved – By seamlessly interacting with the server at every stage, user progress is saved by default. This ensures that if the user leaves the website, they can resume the process from exactly where they left off.
3. Upon incorrectly answering a question, after storing the attempt in the database, the AJAX response is parsed to display text explaining whether their answer was incorrect and may include a tip to assist them. The user can acknowledge the message before re-attempting the question.
4. Upon correctly answering a question, after storing the correct answer in the database, the AJAX response is parsed to display a congratulations message. The user can then click a continue button and the process starts again with the next question.

Generating the HTML for the Questions

Probably the most work-intensive part of building the accreditation was creating the visual layout templates. Each template had to be created with a responsive layout that catered for all devices and screen sizes with variations for both portrait and landscape orientations. Once created, each one had to be tested across a range of devices with each of the questions that would inherit its rules.

Phase 5:   Ongoing Reporting & Administration

With the anticipated significant press coverage and industry interest in the website, it was clear from the outset that Skcin would require ongoing access to live reporting data relating to the ongoing performance of the accreditation e-course. This is provided by means of a bespoke administration panel. The admin panel provides live reporting statistics based on a huge amount of data that has been collected since the site launched. This allows Skcin to establish useful information such as which industries are benefitting from the accreditation the most, which countries have the most registered users and which questions may be posing a stumbling block to the most amount of users.

So, how has the website been received?

We have now delivered several key projects for Skcin including the Sun Safe Schools and Sun Safe Nurseries accreditations that assist Schools and Nurseries in their duty of care to keep children safe in the sun and are extremely proud to be playing our small part in this incredibly important campaign. The MASCED Accreditation is the most comprehensive course that health, hair and beauty professionals can complete to help make a real difference in the detection rates of Skin Cancer and help save lives. We knew it would be popular, but the accreditation has gained real traction and surpassed all expectations. The charity set itself a target of 1,000 registered users within the first year, yet this was achieved before the first week was out. Over 90% of accredited users have provided the maximum feedback rating of 5 stars and over 99% would recommend the course to other industry professionals. But don’t take our word for it, here are some appraisals of the accreditation:

“I have reviewed the MASCED Accreditation Programme and believe this is a fantastic resource for the hair, health and beauty industry. Education on a national scale is vital in raising awareness of skin cancer prevention and early detection to improve prognosis. The MASCED Accreditation by national melanoma and skin cancer charity Skcin, fills this void to provide excellent, accessible, free training on a national level that can make the kind of impact required to make a real difference and save lives.”

Dr. Vishal Madan, Consultant Dermatologist, Laser and Dermatological Surgeon, Everything Skin Clinic

“The Melanoma and Skin Cancer Early Detection (MASCED) programme has been developed by skin cancer charity, Skcin, as a free educational resource for Hair, Health and Beauty Industry Professionals. I have reviewed the programme, which clearly and succinctly explains the symptoms and signs of the most common skin cancers, and I hope that its use will encourage people to seek medical advice promptly regarding any skin changes suggestive of skin cancer.”

Consultant Dermatologist Dr Rachel Abbott BMedSci(Hons) MBBS MRCP(Dermatology)

Welsh Institute of Dermatology, Glamorgan House, University Hospital of Wales, Heath Park, Cardiff

Joanne Morgan, Make Up Artist video review: https://youtu.be/S1q5hB-tJQA
Jeff Ross, Physiotherapist: https://youtu.be/GCuJKD5i-9E
Dr Nyla Raja, Medical Director at Medispa, Wilmslow: https://youtu.be/AA_o3udjCk4

And most importantly, how did Skcin find working with Total SEO Services?

“Working with Total SEO Services and in particular Adam who heads up the team has been an absolute pleasure over the past several years, having undertaken many large and extremely important projects for us that have all proved incredibly successful.

During my personal career I have been bamboozled too many times with smoke and mirror explanations, silly prices and unresponsive communications from various web companies that take an age to get anything done and charge the earth for doing them and I know all too well how this can fail any business, not to mention a charity and the important work we do.

Total SEO Services are quite the opposite. As creative Director of Skcin, my job is to come up with ‘blue-sky’ thinking that will generate greatest impact, provide longevity and can be measured and reported upon. This is all well and good on paper, but making this happen in reality is a huge challenge.

Every job is embraced by the team at Total SEO Services with professionalism, commitment and passion. No job is too big, or too small, nothing I have ever requested has been met with excuses, just solutions, and everything explained in a jargon free manor – phew!

We are a small charity with BIG aspirations, BIG ideas and BIG plans for the future and Total SEO Services play a BIG role in what we do and are absolutely crucial to our success. They are very highly thought of by the entire Skcin committee for their commitment to our work and are seen as integral members of our team.”

Kathryn Clifford
Creative Director at Skcin