Our Experience Making a Gamification App for Skillshare

We are a multidisciplinary team of developers passionate about the intersection of education, technology and art. Skillshare is an online learning platform for creatives so it was the perfect opportunity to use our diverse backgrounds to solve a technical problem that required that we learned our knowledge about front-end and back-end development use of databases and data visualization libraries. As a final project for our training as full-stack software developers at Holberton School, we were faced with the challenge of using gamification strategies to increase user engagement and user retention for Skillshare over a period of six weeks. The first three weeks were for Research, Development of the proposal and planning and the rest for writing and deploying the app.

One of the most important elements of motivation theory used in gamification is appealing to the human need for accomplishment and development. This happens to be the main drive for learning too so we focused on it. We decided to use data visualization charts similar to the ones used in video games dashboards to provide feedback. The charts show information about the time spent on the platform, the number of lessons and classes completed and the current streak. Based on these stats, a general score and a skill-specific score is calculated and these scores are used as the input for the charts.

Architecture

Front end: React is an open-source JavaScript library used for building user UI components for this project. However, React is only concerned with rendering data to the DOM, so creating React applications usually requires the use of additional libraries for state management and routing. React Router is a navigational component that synchronizes each personalized URLs with user id and every endpoint for the visualization features in the web app. Axios library provides really simple HTTP requests to get information from the API for each frontend component, and these components were developed using D3 (Data-Driven Documents) which is a JavaScript library for manipulating documents based on data. D3 brings data using HTML, SVG, and CSS for the user’s statistical visualization. Finally, this JavaScript web app is responsive and multiplatform.

Technical Challenges

Just reaching the end of the project our team was making some tests with the “final” deployment of the app, we were checking that the data visualization components were showing the right information for the user, and we were also checking for the responsiveness of the web page on mobile devices when suddenly one of our team members saw that in one of those DataViz, more exactly in the Bubble Chart, we had added a Hover functionality in order to have an interactive feature for the user (back when we added this we didn’t realize that this would never work on mobile). We needed to solve that as quickly as possible, so we started to make deeper tests. We were working on three different kinds of machines in our team (Linux, MAC, and Windows) with different browsers (Firefox, Safari, and Chromium-based ones such as Google Chrome, and Brave). We also tested on different mobile devices and a lot of browsers. Quickly enough we noticed that the problem could easily be solved by adding a click function besides the hover function but this didn’t solve the incompatibility with Apple devices. Finally and thanks to a pretty awesome platform that we found, BrowserStack (https://www.browserstack.com/) we implemented some minor fixes on the code and in a couple of hours we could make a new “final” deploy.

Lessons Learned

We were advised to have the MVP ready as soon as possible so that we had enough time to iterate and make it better. This really helped relieve the pressure of meeting deadlines and allowed us to enjoy the process of making several small improvements beyond the MVP. Another good decision we made was to assign a person as responsible for a specific feature but work collaboratively to learn all the processes involved in creating a full app from scratch.

Authors:

Robinson Montes Gómez

Bioengineer and Software developer with an M.Sc in Basic Biomedical Science emphasis in Tissue Engineer and Regenerative Medicine. A proactive and recursive person, with a large experience in research projects about biomaterials surface modification and biomechanics. In the last 5 years had been working in Computer Science projects focused on data analysis as Bioinformatics, data cleaning, data visualization, SQL databases, and software development with Python, JavaScript, C, Matlab, and R programming languages.

An engineer who works for good interpersonal relationships and excellent communication with colleagues, all aimed at achieving objectives focused on science, technology, and innovation working with multidisciplinary groups to enhance the world. Rugby, bass guitar, and animal lover.

Linkedin: https://www.linkedin.com/in/robinson-montes

Github: https://github.com/mecomonteshbtn

Carlos Andres Murcia Muñoz

Linkedin: https://www.linkedin.com/in/carlos-andres-murcia-munoz

Github: https://github.com/charliemur2

Luis Miguel Vargas Guevara

Designer and entrepreneur passionate about the transversality of technology and the application of design-thinking to the inherent aspects of human life. Building a career in the IT industry thanks to many work and life experiences but primarily to satisfy the never-ending needs to learn.

Linkedin: https://www.linkedin.com/in/luismvargasg

Github: https://github.com/luismvargasg

Juan Camilo Acevedo

Psychologist and Software Development Student, entrepreneur by vocation, with experience in Group Management, Selection, Research, Administration and Management; who thinks about his work from a Cognitive Constructivist paradigm, seeking the transformation of the environment from the well-being and integral development of individuals. A professional with a high critical and purposeful sense, recognizes the values of honesty, respect and commitment as pillars of interaction.

Linkedin: https://www.linkedin.com/in/camilo-acevedo-v

Github: https://github.com/acamilojuan

Sandra Macías Alvarez

Philosopher and educator. Interested in using technology to improve the quality of education and its accessibility and contribute to social progress in general.

Linkedin: https://www.linkedin.com/in/sandra-macias

Github: https://github.com/s-macias

Links:

Landing page: https://charliemur2.github.io/gamification-landing_page/

Web app: https://holberton-gamification.herokuapp.com/

Software developer, philosopher and educator.