Designed and developed an art education platform
Proko, an educational web platform for artists by artists, outgrew its original magnitude and required a major transformation. Together with Shakuro, they turned into a full-scale e-learning and communication platform.
About
Proko is an e-learning platform created by artist Stan Prokopenko, offering high-quality video lessons and tutorials on drawing and painting, all presented in a clear and easy-to-follow format. Stan’s lessons are known for their engaging and humorous style, making learning enjoyable and accessible for artists of all levels.
The main goal of our collaboration was to enrich the e-learning platform, brush up on its technologies, and add a few more tricks to create an even larger community.
Story
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 to share his skills with the world.
He founded Proko in 2012. Thanks to his dedication, Proko bloomed into an educational project that went beyond its limits. Stan built a team full of gifted educators like Marshall Vandruff and Court Jones.
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 relate to him — he has millions of followers on YouTube alone.
Mission
Stan focuses on making his video tutorials engaging and believes that communication is key to the learning process. Together with Shakuro, he wanted to make his project more socially-oriented and feature-packed from a technical standpoint to cater to the needs of his growing audience.
Since the website had to become the primary marketing channel, we needed to expand its features to make it more attractive to both students and instructors.
Challenge
Proko’s previous website was a simple and severely limited WordPress platform. Stan needed something far more robust, advanced, customized, and technologically superior.
To continue using Proko as an educational resource, users required social features to get the instructors’ advice on their studies and communicate with peers to polish their skills.
Moreover, the educational platform had to be more advanced to offer additional payment options, use of Artificial Intelligence and gamification, online streaming, and an improved search engine.
Process
E-learning projects are 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.
Principles of operation
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 e-learning 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.
.png&w=2560&q=75)
Efficient and organized
We worked on the time and materials basis of the Scrum methodology, taking regular meetings.
Design
The Proko website was just a collection of videos about how to draw without any type of personalization. Stan’s idea was to create something similar to an e-learning platform with clear objectives, interactivity elements, and notable educators. Plus, both self-paced and peer-to-peer learning and feedback from instructors and simple yet engaging UI and UX.
Research
During the research, we explored similar educational platforms like Coursera to gather and make use of everything that was truest and best. We decided to give Proko’s users a different level of freedom. There would be no strict guidance throughout the process but the possibility to decide a lot of things by themselves.
Wireframes and prototypes
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.
UX-improving solutions
The idea was to prioritize the content — videos — and make it the primary and the most prominent element on any page. So we chose a simple scheme. A lot of elements resembled a thing familiar to and loved by any artist — an invitingly blank piece of paper.
Mobile version
After working with the desktop version of the website we moved to design the responsive mobile versions. The main challenge was to fit the multitude of elements into small screens so that the website remained functional and user-friendly.
Development
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 elements and make sure they do the job. Then watch for the new tools that perform better and incorporate them instead.
Challenge
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.
Gamification
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.
Expanding boundaries
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.
Technologies and tools
We also took pleasure in using some of the latest tools like 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.
Front-end
Back-end
Ruby code testing & code standards
Key features
Our team has implemented all the latest and most advanced solutions to improve the user experience and help people learn new skills.
Improved functionality
Proko’s education platform offers an interactive experience, featuring social networking elements such as comments, follow, and tagging to foster engagement and collaboration. Smart algorithms drive data analytics to track progress and provide personalized feedback and course recommendations based on individual interests. The personalized feed delivers the latest trends in art, while gamification encourages active learning through point systems.
We prioritized responsiveness and mobile compatibility, complemented by an improved search engine for effortless navigation. Looking towards the future, we ensure scalability and reliability by leveraging Amazon Web Services to support the expanding community and premium content offerings.
A new beginning for an amazing project
The Proko project is one that has put our skills to the test. Together with Stan, we created an educational platform that is fresh, modern, easy to use, and attractive to the target audience. 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.
.png&w=2560&q=75)
Customer Testimonial
Their organization and skill level are excellent. Shakuro hires very skilled developers who know what they’re doing so they don’t waste time.Stan ProkopenkoFounder, Proko
.png&w=2560&q=75)
Social networking elements
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.