Designed and developed an art education platform

What do you do when your business outgrows its original magnitude and requires a major transformation? It happened to Proko — a web resource 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.
Stan’s 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 Proko in 2012, at that time still living in his parents’ house. Thanks to his dedication, Proko bloomed into an educational project that went beyond its limits, making Stan build a team of full-time employees and partners including other gifted educators like Marshall Vandruff and Court Jones, and buying some real estate for a full-fledged art studio.
Stan’s story is an amazing example of success and a real inspiration for any struggling artist. Having been in their shoes to the fullest, Stan has his audience really relate to him — he has nearly 2 million followers on YouTube alone.

Mission

Stan 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, Stan 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.

Challenge

Proko’s previous website was a simple WordPress platform, severely limited and not able to translate any of Stan’s ideas into reality. He needed something far more robust, advanced, customized, and personalized.
To continue using Proko as an educational resource, users were in need of social features to get the instructors’ 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 Proko website: more socially-oriented, technologically superior, more profitable.

Process

Projects for artists is one of our fortes. Apart from Proko, we have immense experience with CGSociety — a world-famous professional CG artist network, and Cubebrush — an online marketplace for artists. 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.
Proko 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 Stan, 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 given access to our project management tool to Stan to make the process transparent. Our experience with similar projects allowed us to make the process as efficient and organized as possible while keeping Stan informed on every stage.

Design

The Proko website that was before us was just a collection of videos about how to draw without any type of personalization. Stan 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 made research, studying similar educational platforms like Coursera to gather and make use of everything that was truest and best. We decided to make Proko 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 the user flows easier, for example, by making it possible for 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 for 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 the priority to the 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’s illustrations done in a vintage Walt Disney style that Stan likes, and made some animations of them.
After working with the desktop version of the website we moved to design 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 a mobile application for iOS.

Development

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 for a larger audience geographically. Proko’s 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 algorithms for data analytics, the possibility for users to get immediate basic feedback without interacting with human instructors, and search for other courses that match the user’s interests.

Technology stack

Front-end
Angular 7, TypeScript: 3, NgRx Store 6.1.0, nguniversal, fuse theme + material.
Back-end
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.

Key features

Social networking elements
Comments, following, feed, tagging, list of completed and upcoming lessons.
Use of smart algorithms
Data analytics, basic feedback, recommendations.
Personalization
A personalized news feed, a personal account, learning process tracking for better recommendations.
Gamification
Points for specific actions like watching videos, helping other users, and completing assignments.
Usability improvement
Improved search engine, extra payment options, responsiveness and mobile version, Akismet spam filter.
Versatility
The multitude of elements fitted into small screens remaining 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

Proko’s beta version has just been launched. Stan 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, Proko was just a WordPress website with a collection of videos. Today...
Proko is a haven for artists.
There are quality art instruction videos, tools, and other resources.
Proko is a community.
For artists, instructors, animators, and students. The community platform is custom-made.
Proko is a digital shop.
There is premium content inside courses and lessons that can be purchased.
The Proko 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 client’s and his 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 Proko’s mobile app and online streaming features. Looking forward to putting Stan’s new ideas into practice.
Stan Prokopenko - Proko
Stan Prokopenko
Founder, Proko
Their organization and skill level are excellent. Shakuro hires very skilled developers who know what they’re doing so they don’t waste time.
Show full review