Designed and developed a virtual classroom platform

Even before the pandemic, the team from CG Master Academy recognized the business potential and impact of a superior virtual learning environment. Discover how we helped them unlock this potential and become the leading provider of online digital art education which they are today.
CGMA

Mission

Computer Graphics Master Academy (CGMA) is a provider of digital art education for the games, movie, and animation industries. They pride themselves on their ability to have as instructors the artists with years of experience working for many of the major studios.
The CGMA team came to us with a need to introduce fundamental changes to their core product offering — a virtual classroom platform. Having already worked with them earlier on the CGSociety project, we were excited that they saw us as a long-term partner for another project.

Challenge

As a company evolves, it may often outgrow its initial nature. You can start your business with a website built with some free open-source solution, but as you expand and add custom functions, it may become difficult to support and maintain, too cumbersome to develop, less fault-tolerant, and hard to manage with every new feature taking more time and generating more bugs. This is what happened with CGMA when they faced the fact that their ready-made CMS lacked prerequisites for further development.
Another problem was the low level of student engagement. It was hard to realize the company’s business potential when after finishing their course, a student had no further reason to visit the website, no stimulus to return and enroll in a new course. CGMA decided to make their project more socially-oriented and similar in the learning-system respect to the brick-and-mortar universities to enhance the experience for existing students and attract new ones and make it their key feature and the basis for standing out from the competition.
To transform the old platform into a new, more user-friendly entity that would better serve students, instructors, and members of the CGMA team and become a much more high-value business asset, it needed a redesign and foundation made with a totally different and superior technology stack and a totally new level of customization opportunities. So our main objectives were to make the CGMA educational process more convenient, improve communication, and the management of educational materials.
The work on CGMA commenced in early 2018.
CGMA

Process

We had before us a plan for a platform consisting of 3 distinct portals based on a user role: Student portal, Instructor Portal, and Admin portal. Such a large project needed to be approached methodically. Thanks to our experience of developing larger-scale platforms, community sites, and marketplaces, our team was able to build a process that felt comfortable for both the client and us and was able to produce the expected outcome.
We broke the project down into several major phases which in turn got divided into sprints and stories. We met with the client once a week to discuss the status of the project, providing them with a comprehensive hours breakdown, so that they would be able to see exactly what we’ve been working on. This is our tested and proven approach that helps us provide our remote services as smoothly as possible and stay on time as the feature of this project was the client’s setting up the strict deadlines because they depended on the educational curriculum.

Design

The first thing we did was to research the flow of the old website to identify the weak spots and how to deal with them. Having studied our client’s project and requirements, we concluded that those were a severe lack of clear navigation and guidance, problems with the brand positioning, and issues with content strategy. We focused on making the new CGMA educational platform intuitive, memorable, and easy-to-use for all by tackling their common pain points. To do this, we needed to introduce a number of changes and basically change the whole user interaction process.
During the research, we came up with a new navigation system — more straightforward, simple, and predictable to better represent the information architecture and user intent.
CGMA
We also streamlined the user journey and made it more seamless and effortless by guiding a student along their educational path towards a goal with personal notifications and an academic calendar to help them feel more motivated.
CGMA
Simultaneously, we worked on the extensive project specification document with a detailed description of the project which we created in close collaboration with the client.
Then came the stage of creating style scapes — mood boards to make sure that our vision was in line with what CGMA wanted. As one of the previous issues was the lack of consistency between the educational platform and other company resources like the marketing website, we ensured that the new design was in agreement with the brand identity and resonated with the audience. Seeing that the target audience is young and with CGMA being mostly about creating graphics for games and movies, we wanted to make the platform design reminiscent of the current global digital and art culture. Our idea was to create something that doesn’t feel imposing as it sometimes happens with educational resources but conveys the vibe of the culture and community.
CGMA
We chose a dark background with strong contrasts of the brand and additional colors.
CGMA
Based on the research and documentation, we proceeded to make the prototype. It was a very collaborative process with us making it little by little, discussing each bit with the client. The clickable prototype was then tested by the team and the client.
CGMA
Next, we created the design system to ensure design integrity. A good design system helps make the design process more efficient, improves collaboration of designers and developers, saves a lot of designers’ time, and hence, more makes the whole design and development process more cost-effective.
CGMA

Development

As was mentioned earlier, the old Drupal-based platform was not able to provide enough opportunities for growth and it was more difficult and expensive to try to construct something new over it than to build a completely new foundation with Ruby on Rails. By doing it, we were able to address the issue of scalability, speed up the website, improve its security, and fulfill other needs with RoR’s built-in tools as well as other alternatives.

Data migration from old databases to a new structure

One of the main development challenges was transferring the existing data (everything there was since the old website’s inception in 2010) to the new platform with an entirely different architecture. Adding to that the necessity to meet the time limit, it involved substantial efforts on the developers’ part to successfully migrate all the content and user data to ensure it was safe and secure and no data was lost during the transition process.

Integration with Discord

Initially, CGMA wanted their new educational platform to have a forum but, as we felt that a live chat would be a solution to provide superior communication while complying with the project’s objectives, this was a suggestion accepted by the client. We decided to integrate the Discord chat and chose it due to its functionalities and because most of the target audience were already using it, so it was a really smooth transition. Moreover, we made it so that a person could use the chat even with no Discord account. It’s now possible to communicate over a chosen course, share and discuss homework with your instructors and peers, and generally discuss any topic of choice whether you are on the website or inside the Discord app. We also created the custom UI for the chat and made use of Discord’s storage capacity.
CGMA

Integration with Zoom

Video conferencing became part of our lives quite a while ago. We enriched the CGMA educational process by providing an opportunity to ask the educators more detailed questions during the events like live sessions and Q&A sessions. Educators on CGMA were already using Zoom for creating the classroom environment but before they managed it by manually sending Zoom links to students via email. We simplified this process by integrating Zoom into the CGMA learning platform to allow for the creation and update of meetings and events. To help students and instructors keep track of their activities, we added a convenient notification system that informs a user about any events happening on the website that concern them. We also added the ability to watch the earlier videos along with the recorded chats, which allows students to have access to the learning materials at any time without leaving the platform.
CGMA

Convenient video management system

We made it possible for the CGMA team to manage the educational video materials more conveniently by adding the opportunity to load, optimize, and store video files from various sources like Zoom, Youtube, and Vimeo in the system and manage and edit the entire courses, as well as additional texts and other materials. The uploaded videos are automatically processed for different screen resolutions for students to work with lectures even with a weak internet connection. We are currently working on a system for the automatic generation of subtitles to ease the learning process for students with lesser language skills.
CGMA

Integration with PayPal

We integrated PayPal to CGMA payment methods for one-time purchases and for purchases by installments allowing students to budget their courses. They can also pay for their courses with a card via PayPal’s PayFlow. We’ve also redesigned the check-out process making it more straightforward and added the notification feature that helps to manage payments for both students and administrators.
CGMA

Additional automation

We added the automated PDF generation functionality for receipts and certificates, introduced the Freshdesk helpdesk solution for support tickets, and integrated the SalesForce customer relationship management solution and ActiveCampaign for email marketing automation.
CGMA

Technology stack

Front-end:
React, Next.js, styled-components, react-query, HTML5, Sass.
Back-end:
Ruby on Rails, Sidekiq, Docker, AWS.
Database:
MySQL, PostgreSQL.
Additional libraries and services:
Chat integration — Discord, Main payment system — PayPal, Video conferencing — Zoom, Embedded videos — Zoom video/Youtube/Vimeo APIs, Email notifications — SendGrid, Communications protocol — WebSockets, Customers support — Freshdesk, Web automation — Playwright.

Key features

Live chat
Student/instructor and student/student communication at any time with the possibility of collaboration.
Homework assignments
Checking, evaluating, and communicating over weekly assignments with a reminder feature.
Video conferencing
To effectively connect educators with the audience and host events and meetings safely.
Video playlist management
For administrators to create, edit, and optimize video playlists.
PayPal integration
One-time purchases and installment plans.
Business analytics
For instant customer records access and collaboration.
Support ticket system
For an efficient customer service operation.
Custom PDFs
Automated receipts and certificates generated in the form of PDFs.

A go-to place to learn digital art

CGMA proved to be one of the largest projects we’ve taken so far. We’ve been happy to apply our skills and expertise along the way to help CGMA reach their goals. Today, it’s a full-fledged busy online academy with thousands of students and dozens of simultaneous industry-focused courses that provide long-term benefits and job offers at some major companies like Electronic Arts and Ubisoft. Its key features include personalized expert feedback and a collaborative classroom environment — something that was not possible before they reached us.
CGMA
Thanks to open communication with the client, we always found a suitable solution. Every idea that the client had imagined, that we had in mind, that designers wanted to introduce, and developers were able to translate into reality — everything coalesced into one beautiful project — cost-effective, user-friendly, and marketable.
We launched the updated project in May 2020 with remarkably positive feedback from users of all categories. Students actively make use of the new social features participating in classroom activities even after finishing their courses. The platform is now more robust, takes fewer employees to manage, open to new opportunities and features, and with a far more engaging educational process.
We continue to provide support and maintenance in the form of an ongoing partnership.
Manny Fragelus - CG Master Academy
Manny Fragelus
Owner & CEO, CG Master Academy
The team's timely, cost-effective, and consistent high-caliber work sets them apart.
Show full review