Designed and developed a virtual classroom platform
Discover how we helped CG Master Academy unlock their business potential and become the leading provider of online digital art education, creating a superior virtual learning environment.
The 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.
The 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.
Research
Before diving into the process, we studied the market specifics and the target audience’s preferences. Using our experience from previous e-learning projects, we saw various ways to attract new users, increase user retention, and revamp UX. This step-by-step approach allowed us to make education engrossing and convenient for both teachers and students.
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.
Research
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. 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.
.png&w=2560&q=75)
Mood board
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.
Colors
We chose a dark background with strong contrasts of the brand and additional colors.
Wireframes
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.
Design system
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.
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.
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.
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.
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.
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.
Technology stack
Front-end
Back-end
Database
Additional libraries and services
Key features
Together with the CGMA team, we’ve built a completely new foundation for their e-learning platform. It allowed students to gain new art skills and collaborate hassle-free.
Brushing up the toolkit
Students and teachers can connect through voice or video chat, fostering collaboration and support whenever needed. They check homework assignments and discuss them weekly, with a reminder feature to keep everyone on track. The platform admins can manage video playlists to optimize educational content. A support ticket system ensures efficient customer service, while automated custom PDFs generate receipts and certificates seamlessly. For instant access to customer records, admins have business analytics. Also, students can use PayPal for convenient purchasing.
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.
.png&w=2560&q=75)
Robo Advisory
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.
Customer Testimonial
The team's timely, cost-effective, and consistent high-caliber work sets them apart.Manny FragelusOwner & CEO, CG Master Academy
.png&w=2560&q=75)