Designed and developed an art e-learning web platform
What do you do when your business outgrows its original magnitude and requires a major transformation? It happened to Proko – a web platform for artists with quality art instruction videos and tutorials. Or, at least, it’s all that it was before they approached us in 2017 with an ambitious vision to transform it into a full-scale e-learning and communication platform.
The story behind Proko
Stan Prokopenko is a dedicated fine art painter, a teacher, and the founder of Proko.
The founder has been into art since he was a kid. Having studied at the Watts Atelier of the Arts in Encinitas, California, he later became a teacher there, specializing in fine art painting. That was a moment when he decided that he needed to share his skills with a larger audience of fellow artists. He founded an e-learning platform in 2012, at that time still living in his parents’ house. Thanks to his dedication, the web platform bloomed into an educational project that went beyond its limits, making him build a team of full-time employees and partners, including other gifted educators like Marshall Vandruff and Court Jones, and buying some real estate as a full-fledged art studio.
B2C web platform’s story is an amazing example of success and a real inspiration to any struggling artist. Having been in their shoes to the fullest, the e-learning courses’ CEO, has the audience really relate to him – he has nearly 2 million followers on YouTube alone.
E-learning courses’ CEO focuses on making his video tutorials engaging and fun and believes that communication is an excellent means of making the learning process better. That is why he approached us with an idea to make his project more socially-oriented, feature-packed, and modern from a technical standpoint to cater to the needs of his growing audience.
From the business perspective, the CEO planned the website to become his primary marketing channel where he would promote his courses. So there was a need to expand the number of its features to make it more attractive to both students and instructors and thus more commercially successful.
E-learning project's previous website was a simple WordPress platform, severely limited and not able to translate any of the e-courses’ founder ideas into reality. He needed something far more robust, advanced, customized, and personalized.
To continue using the web platform as an educational resource, users were in need of social features to get the instructor's advice on their studies and communicate with peers to get experience.
To increase sales of premium content, the website had to be more advanced to provide users with features they were in need of to get a better user experience, including additional payment options, use of artificial intelligence and gamification, online streaming, and an improved search engine.
So there were several major tasks before us.
We were set to make the e-learning B2C website: more socially-oriented, technologically superior, more profitable.
Art e-learning projects is one of our fortes. Apart from this e-learning platform, we have immense experience with CGSociety — a world-famous professional CG artist network, and Cubebrush — an online artists’ marketplace. So we were able to implement the best practices we keep in mind for making our projects highly effective.
We follow the Agile methodology and adhere to the 4 values of its Manifesto: we value people over processes and tools, we prefer working software over comprehensive documentation, we actively collaborate with our customers, we respond to changes over following a plan.
This e-learning platform is a great example of a long-term project where we had the opportunity to put these values into practice. Because of all the insights that we’ve received from the B2C company, we were able to quickly outline our involvement and get to work.
We worked by the time and materials basis on the Scrum methodology, taking regular meetings. During these meetings, we discussed questions and features we need to work on and the ones we’ve already done, having been given access to our project management tool to make the process transparent. Our experience with similar projects allowed us to make the process as efficient and organized as possible while keeping the B2C company informed at every stage.
The web platform that was before us was just a collection of videos about how to draw without any type of personalization. The CEO of e-learning courses came to us with a broad concept of how he viewed the future website. The idea was to create something similar to an e-learning platform with clear learning objectives, elements of interactivity, and notable educators. Plus, both self-paced and peer-to-peer learning and feedback from instructors and simple yet engaging UI and UX.
In the beginning, our designers did research, studying similar educational platforms like Coursera to gather and make use of everything that was truest and best. We decided to make the web platform different in the level of freedom assigned to a user. To not strictly guide them throughout the process, but leave with the possibilities to decide a lot of things by themselves.
Then came wireframes and prototypes. Much effort was put into making user flows easier, for example, by making it possible as a user to start over where they had left previously. We also simplified the checkout process by reducing the number of steps and making the process smoother with continuous flow.
A focus on the social aspect called adding various social networking elements in the design — comments, following, feed, list of completed and upcoming lessons like on YouTube. The challenge was to integrate it all in the clearest and most convenient way.
We then proceeded with visual elements. We decided on the overall design style pretty quickly. The idea was to give priority to content — videos — and make it the primary and the most prominent element on any page. So we chose a simple scheme.
For the color scheme, we chose neutral shades with vibrant color highlights. A lot of elements were designed to resemble a thing familiar to and loved by any artist — an invitingly blank piece of paper. We also incorporated Stan Prokopenko’s illustrations done in a vintage Walt Disney style of likes, and made some animations of them.
After working with the desktop version of the website we moved to designing the responsive and mobile versions. The main challenge was to fit the multitude of elements into small screens so that the website remained intelligible and user-friendly. Some layouts experienced a total change.
Currently, we are in the process of designing an iOS mobile application.
The main challenge with development was to choose tools and approaches that would be able to withstand the passage of time, regarding the long-term nature of the project. Any large project that is bound to take several years faces the problem of outdated tech. The way to solve it is to choose the best and make sure it does its job. Then watch for the emergence of new tools that perform better and incorporate them.
The commenting and discussion of social networking features were accompanied by the ability to add images, tag other users, and follow accounts, and a personalized news feed. There are also gamification features involved where people get credit for everything they do on the website, including watching videos, helping other users, and completing assignments.
One of our big challenges was to make the project available to a larger audience geographically. E-learning courses’ main audience is from the USA, Europe, and Canada. We put a lot of effort into getting to China through the Great China Firewall because Youtube, Google, and many other services are banned there and the connection speed is often quite low.
We also took pleasure in using some of the latest tools like using complex data analytics algorithms, the users’ possibility to get immediate basic feedback without interacting with human instructors, and search for other courses that match the user’s interests.
Angular 7, TypeScript: 3, NgRx Store 6.1.0, nguniversal, fuse theme + material.
Language - Ruby, Framework - Ruby On Rails, Backend server - Puma, Search engine - Elasticsearch, Main database - PostgreSQL, Cache - Redis, Static files storage - Amazon S3, Content Delivery Network (CDN) - Amazon Cloudfront, Background Jobs - Sidekiq, Continuous Integration - Circle CI, Errors tracking - Rollbar, Transactional Emails - Mandrill.
Ruby code testing & code standards
UnitTests - RSpec, Code Coverage - Simplecov, Code Standards - Rubocop, Code smells – Reek.
Social networking elements
Comments, following, feed, tagging, list of completed and upcoming lessons.
Use of smart algorithms
Data analytics, basic feedback, recommendations.
A personalized news feed, a personal account, learning process tracking to provide better recommendations.
Points for specific actions like watching videos, helping other users, and completing assignments.
Improved search engine, extra payment options, responsiveness and mobile version, Akismet spam filter.
The multitude of elements fitted into small screens remain intelligible and user-friendly.
Ability to scale — use of Amazon Web Services
Amazon EC2 and Amazon RDS that both support auto-scaling and S3 to have unlimited static file storage.
A new beginning for an amazing project
This B2C web platform’s beta version has just been launched. The head of this B2C e-learning platform invited a few hundred testers (the most active users of the old platform) so we’ll be able to receive some metric data soon and complement this case study.
Before, the e-learning platform was just a WordPress website with a collection of videos. Today...
The web platform is an artists’ haven.
There are quality art instruction videos, tools, and other resources.
The web platform is a community.
For artists, instructors, animators, and students. The community platform is custom-made.
The web platform is a digital shop.
There is premium content inside courses and lessons that can be purchased.
This e-learning project is one that has put our skills to the test. We managed to create an educational project that is fresh, modern, easy-to-use, and attractive. Imagining ourselves in our clients' and users’ shoes, we gathered a result-oriented team with attention to every detail, which is very important during the development of a big project.
Currently, we are working on the e-learning mobile app and online streaming features. Looking forward to putting Stan’s new ideas into practice.
“Their organization and skill level are excellent. Shakuro hires very skilled developers who know what they’re doing so they don’t waste time.”