An immersive, subscription-based learning community for artists

Quick Results

About the Client

ArtTutor is an online learning environment, hosting an extensive library of art-based classes. The learning platform is led by real-world tutors, complemented by an online community connecting art lovers and novices alike. They have amassed over 190,000 Youtube subscribers, with 11M+ channel views.

Business Challenge

When ArtTutor came to us in 2012, they were still sending out classes via CD. When organisations wanted to make use of ArtTutor’s resources, they had to purchase multiple copies of the same CD just to provide access to different people within the same room. 

At CTI, we were challenged with building a subscription-based website for ArtTutor’s videos, that would seamlessly integrate their existing, valued customer base. Such a large structural change could have upset customers; but, thanks to the quality build and useful features, the change was a success. 

Fast-forward 8 years and things have only got better. In each area of development we have implemented scalable solutions that could be moulded as trends and technology changed in the future.

MockUp 5 White

Our challenge is to keep ArtTutor at the forefront of subscription-based learning environments. The organisation’s ethos prioritises user-centricity, so ArtTutor are keen collaborators when it comes to pushing and implementing innovation for better UX. At one of our regular ‘defining success’ catch ups, we defined the following goals for the latest updates to the ArtTutor website:

  • Refresh ArtTutor’s branding
  • Implement an entirely new purchasing structure.

Information Architecture and Navigation

With new classes added regularly, we designed the structure of the website to be scalable and easy to navigate from the outset. When detailing the site’s information architecture, we had to consider pages accessible by members and those restricted by paywall barriers.

Since the initial structural design, we have revised the navigation, using stakeholder and user insights. Card Sorting and Tree Testing helped us to deliver the most relevant topics in the most intuitive space.

We also found that users regularly search by tutor, rather than subject matter, after building a digital rapport with certain teachers. Therefore, we implemented search filters to allow students to find videos and courses by the criteria that mattered to them. These filters also serve as a preemptive solution, should site managers in the future add new video descriptors.

Loadspeed and Video Playback

Video was a central part of ArtTutor from the start. Art Tutors' research identified that many users are retired and live in rural areas. As such, we utilised JWPlayer to host and optimise video playback for use in areas of low connectivity. The optimisation allowed automatic quality adjustments for quick access to videos. Other visual and Javascript elements were optimised for quick loadspeed, benefiting the site's long-term organic visibility as well as maximising user experience.

Style Tile and Re-theme

ArtTutor's courses are regularly updated to reflect the latest trends in art and design. Catering for users with an aesthetic eye, we were conscious of the need to maintain modern branding on the ArtTutor website.

We started with a style tile to redefine the logo, palette typography, iconography and buttons. We then fed these elements into an extensive Digital Style Guide that detailed rules and situations in which to use certain branding elements. These instructions give site administrators the guidance they need to maintain consistency throughout the site.

Once finalised, we then updated the base theme to reflect these changes globally. We refreshed content hierarchies and white space within the existing site, to improve user experience and modernise the site.

MockUp 2 Light Grey

 

Drupal Commerce

As a building block of the subscription-based website, we extended the Drupal Commerce module to deliver a smooth checkout process and allow for a simple recurring payment structure. In order to build customer trust, we included IP-detected currency translation and integrated in-site purchasing, to store all information securely in one place. 

During improvements to the existing checkout process, ArtTutor saw a gap in the market for requests to access individual courses as opposed to full membership. Together, we redeveloped the purchasing journey substantially, giving customers the option of paying per course or for a yearly subscription.

Personalised Course Dashboards

To improve the user experience we introduced a ‘My Dashboard’ page, featuring a user profile, courses, final artwork, and group posts.

Within the ‘Courses’ area, users can see an overview of every course they are accessing and their progress within each course. This makes profile management much easier for users who chose the one-time course purchase option.

MockUp 4 Light Grey

 

Affiliate and Referral Program

Despite its success, the existing ArtTutor affiliate programme lacked certain features. With the addition of single-purchase courses, the programme now also needed to differentiate between purchase type.

The existing system used the Affiliate NG module in Drupal, which we built upon to allow for one-off and subscription-based purchases. This differentiation works using a unique tracking link that drops a lifetime cookie associating that user with the affiliate. The cookie then tracks purchase type and calculates all sales associated with that affiliate, automatically generating a percentage fee.

Automating the process allowed us to create an affiliate dashboard that presents cumulative success metrics and encourages affiliates to recruit more sign-ups. The affiliate dashboard will enable partners to view their monthly performance with clicks, sales and more, while also safely housing their tracking link, reducing reliance on email communication.

Home Page Update

ArtTutor's home page traditionally communicated the benefits of its service and membership packages. While it was effective for direct conversions, it was unappealing to undecided leads and existing customers. 

To bring the homepage up to date, ArtTutor wanted to present visitors with a content hub, immersing users in all of the possible practices they could be learning. This update increased the click-through rate, seeing users investing in the site and ultimately increasing eventual conversions. Importantly, we provided ArtTutor staff total control over the homepage, by integrating highly flexible modules, with the ability to rearrange and change content at will.

The primary home page is now hidden for logged-in users, to avoid confusion over which courses they have access to. Instead, the 'home page' redirects to 'My Dashboard' for existing users.

Delivering the Content that Users Want

Loyal customers have always been at the heart of the ArtTutor project, so we added new pages to deliver features requested by user groups. 

We introduced “Hub” content pages, showcasing the best of a specific art form and all related topics. These pages make it easy to navigate the overwhelming number of courses, while also improving organic visibility for Google searches around that particular topic. Like the newly designed home page, the content hubs were built for ease of editing by ArtTutor.

ArtTutor_CaseStudy

Community Development - 'Groups'

After the core site was built and successfully launched, we undertook a continuous development process with ArtTutor. Part of this was to develop a community culture within the platform. 

We introduced ‘Groups’ to allow like-minded students to interact on the platform. Within these micro-communities, members of all ability levels could share their ideas and present their work for constructive criticism. This community converted users from customers to brand advocates, as they became the glue that held their groups together. Primarily the new feature gave members an immersive space to grow and develop their style and artistry, while ultimately increasing loyalty.

While the development of ‘Groups’ implemented back in 2016 increased course loyalty, there was still a common drop off in the completion of courses. Customers needed an incentive to finish. We added certificates to the end of every course that are automatically generated with the course title, completion date and user name. Users are now able to view achievements from their dashboard, and download or print certificates to share with friends.

Security

Drupal is built via open-source, with rigorous community code reviews ensuring stability in the face of security breaches. This means that Drupal is the chosen platform for many sectors and industries that rely on confidentiality. As a subscription service, we chose to build ArtTutor in Drupal in order to protect the hosting of ongoing payment details and identifiable user data. 

We also implemented granular user access controls, to keep data safe within ArtTutor’s organisation. Allowing managers to restrict access to each department ensures that no one person has total vision and control.

Quality Assurance

All of our projects undergo rigorous testing throughout the software development process. In order to deliver the utmost quality for clients and their respective users, our in-house QA team ensure that all end products perform accurately and reliably under normal and abnormal conditions. Testing is followed by continual monitoring of software performance, to prevent reoccurrence of any issues and to ensure efficient ongoing operation.

As such, we were able to confidently deliver a well-designed, scalable and technically stable result.

Results Old Vs New

MockUp 3 Light Grey

CTI Digital always deliver over and above my expectations and I would highly recommend them to anyone looking for Web Consultants & Designers services. They have an outstanding team of Drupal developers who are on the leading edge of new developments within the platform. I'm sure we'll be working with them for many years to come.

- Art Tutor