Spa Standard
Early 2015
Introduction
Spa Standard aims to elevate the beauty and wellness industry through collaborative resources in mentorship and professional development. It is an educational community site with e-commerce elements, and several paid membership levels with different sets of permissions. We’ve been working on this project since March 2014.
Spa Standard Challenge
- Create an educational website with variety of media tools for learning
- Consistently use native Drupal modules for better performance and time to market
- Apply custom UI design with Spa Standard branding features
Technology
Frontend
- 960px grid system, the most popular, stable and advanced platform for building responsive HTML templates. The grid system helps generate initial static templates, which are later converted to a Drupal theme.
- Omega. We use the Omega subtheme and Omega + Delta + Context approach. The Context + Omega + Delta combo provides an easy and flexible out-of-the-box template editing system with responsive support. Delta allows making duplicates of our theme settings for any context on the site via the Context module. It also provides a framework for alternative layouts as a reaction in Context.
- jQuery. The industry standard JS library used in most web applications, and included with Drupal distributions.
- Colorbox is a light-weight customizable lightbox plugin for jQuery. This module allows for integration of Colorbox into Drupal. Images, iframed or inline content can be displayed in an overlay above the current page.
Backend
- Drupal 7. In addition to it being the client’s preference, we’ve selected Drupal as a platform due to its advanced out-of-the-box functionality that covers e-commerce and social networking requirements. We are trying to use as much of the native Drupal.org modules functionality as possible, such as Views and Field API, and extend them with our own small custom modules as necessary. We always start with the latest stable Drupal version, and will keep it up to date during our development process. Our development approach and architecture never prevents Drupal from getting easily upgraded.
- Drupal Commerce is a set of modules that provides out-of-the-box e-commerce features such as checkout and cart. Drupal Commerce also offers contributed solutions such as payment gateways, order management, discounts, coupons, etc.
- Views is the most popular module that allows flexible manipulation of Drupal content.
- Features is a collection of Drupal entities that combined together allows completion of specific use-cases. It enables the capture and management of features in Drupal.
- Backup & Migrate module allows easy manipulation of database dumps and setting up regular backups on the production site.
- CKEditor. We use a WYSIWYG editor for the content in the admin area. It is included in a contributed CKEditor module in Drupal that allows easy integration and editor decoration management in the Drupal admin area.
- Podcast Integration. We are using the Views module for podcast feed generation. We have created a podcast page similar to BBC podcasts with valid RSS2 compatible formation. The podcast stream is adapted to most popular podcast applications such as iTunes and Zune. The podcast page UI is a grid-based solution using jPlayer.
- Video Integration. We are using Vimeo video hosting, because it is one of the most advanced and popular video providers. Video can be embedded using the Video Embed Field and Video Filter modules. We are providing role based video content restrictions using the Vimeo Private Videos feature.
- Authorize.net is a payment gateway for credit cards with subscription options for annual and monthly payments. This provider was picked from several other options because our client had prior setup with them.
- Commerce PayPal provides Paypal as a payment method.
- Quiz creates graded assessments in Drupal. We’ve largely customized this one by adding different modules.
- Revisioning is a module for the configuration of workflows to create, moderate and publish content revisions.
- Messages provides chat features for registered users.
Browser compatibility
- All the latest versions of standards-compliant browsers (Chrome, Firefox, Safari, Opera)
- Internet Explorer 9+
- Mobile devices will be supported in Phase 2
Spa Standard Highlights
Version control: Git/Gitlab
We use the Code Driven Development approach, which allows us to avoid having to merge databases during releases between environments. This approach lets us store all Drupal settings in the code: in Features entities and custom modules. All the required database changes are done during the install/update process (install/update hooks in .install files).
Player for Podcasts
We picked jPlayer for being the most versatile and community-supported player out there. It’s a library that provides an HTML5 player with Flash fallback for older versions of IE. This player is easily integrated with the FileField module, and fits well with the existing Spa Standard UI.
Video Service Integration
Spa Standard is conceptualized to deliver a large portion of its content in video format, therefore we had to research the most relevant 3rd party video hosting provider.
We researched the following popular video hosting providers that are compatible with Drupal:
In the end, we selected Vimeo because it offered the following advantages:
- Support for the Drupal Media module. Also, Vimeo supports both the Media 1 and the more modern Media 2 systems, which is important for better long-term performance.
- Vimeo Plus/Pro supports private video access by utilizing domain restrictions. This was one of the most important requirement that we had for Spa Standard. This way video will be available only from our own domain, and we can change user access permissions from within our Drupal CMS installation.
We also considered Wistia (since we have experience with this video provider on another project, Awarely) but it turned out that Wistia is not the easiest platform to integrate with Drupal 7.
Courses & Grading Tools
Main goal of Spa Standard team is to provide courses for users who would like to learn more about new methods & techniques in the beauty industry.
Researching Drupal modules that fits this educational focus, we’ve come to the conclusion that it is easier to create this module exclusively for Spa Standard.
Courses Functionality includes:
- Addition of multiple lessons with media materials:
- videos
- podcasts
- supplementary materials e.g. docs, presentations, etc.
- Limited access to lessons depending on the user’s role
- Course completeness display based on lessons completeness & quizzes scores
- Related resources blocks with various media materials
- Feedback & Tech assistance forms for support purposes
Grading tools are presented by quizzes, final exams and final projects. They can be assigned to any course.
Quiz module allows creation of various type of questions, such as sequencing, matching, essay etc. Educator is able to select any type of question for quiz and final exam. Final projects include only essay questions and require educator to review answers before granting certificate of course completion.Certificates are generated automatically and granted after user passed the final exam or the final project.
Educator Role & Revisions Module
Challenge: Add a role that can create/edit various content that can be published only after admin moderation. User should see previous version of content if the latest version was not yet approved.
Although this task seemed to be simple enough, we need to be ready for cases when content was updated but not yet approved. We used Revisioning module that guaranteed that user will always see content even if it is the previous version.
- Educator can create any type of content e.g. courses, videos, podcasts
- Educator can edit the content any time before giving it out for approval by the admin.
- When educator updates content, a revision is created.
- Admin has an ability to publish/unpublish and edit any revision.
QA Engineering
Currently, we are using manual functional QA on the project. We focus on the latest version of Desktop browsers (Firefox, Chrome and Safari) and different version of Internet Explorer browsers (IE 9+).
We use Impasse plugin for Redmine as test case management tool for testing after sprint releases.
In future sprints, we are going to implement automated testing to perform QA process more efficiently as a part of continuous integration (CI) process. For running automated tests via a CI server, we’ve selected Cucumber with Watir & Jenkins accordingly.
Management
Time spent as of August 2015: 2220 hours
Methodology
We are borrowing as much as we can from Agile: for example, we write user stories and conduct daily Scrum meetings. We include only high-priority features in Sprints in order to reduce risk and fit the budget & timeline. We also hold regular sprint planning, backlog grooming calls & retrospective meetings. However, we do not estimate user stories in points, which is something we plan to implement in Phase 2.
Speed and Function is a web development company based in Philadelphia, PA