Case Study: Superhero Academy
Client Overview
Superhero Academy is the brainchild of Marc Angelo Coppola, a serial entrepreneur and all around amazing dude, based out of Montreal. Superhero Academy, though technically based out of the same city, runs almost all their educational platforms online, and therefore boasts an international student-base. Their mission is to mentor aspiring entrepreneurs and creatives, help them cultivate their talents, connect them to other students with similar goals, and provide the tools and accountability necessary to succeed in their ventures.
The Problem
We were approached in the Summer of 2018 to restructure and redesign the classroom portion of Superhero Academy. This presented significant challenges:
- There were custom taxonomies which weren't hierarchical. For easy navigation, a clear hierarchy needed to be created, where single classes were grouped into modules, and those modules were grouped into courses.
- The directions for the UI were...make it netlixy, where classes could be scanned like episodes, modules like seasons, and courses like entire shows.
The Solution
To address each of these problems, we had to proceed in a clearly sequential manner. That process started with the reorganization of data, so that we could create a loop within a loop within yet another loop, so that the main page would loop through the course, then the modules, and then finally the classes.
Next, we embarked on the UI challenges, which required a rewrite of the HTML, Sass, and JavaScript on the frontend, which had to integrate with PHP which pulled data from the backend. To make the UI extra responsive, and to take advantage of two way binding, we also used Vue.js to make the interface extra responsive to user input. The end product was just what the client wanted, and we were pretty proud of the work we did, ourselves.
