Brainingcamp EdTech Solution Transforms Math Learning
Product Development, Digital Marketing
The Challenge
EdTech and eLearning solutions offer teachers new tools to better communicate lessons to their students. In addition, these software products often enable remote learning, as well.
Our client created a browser-based education platform for teaching mathematics to middle-school students. The tool provides digital math models called “manipulatives” to help learners visualize math concepts.
The client designed the manipulatives around the National Council of Teachers of Mathematics focal points and state math standards for grades 6-8. These digital manipulatives help students learn how to add fractions, calculate increments of time, understand X and Y coordinates, and more by using shapes and images. The product is primarily being used by 6-8 graders and their teachers.
It is also being widely used in seminars and webinars across the teaching community. The client gives these webinars on a regular basis to show educators how to use the product and communicate its benefits.
The client built the first version of the product in a house with just a single developer and CanvasJS. However, to realize their full vision for the product, they needed to expand their development team.
Outsourcing their development needs proved to be the best option. After talking to several custom software development companies, the client chose Taazaa.
Taazaa recognized several challenges in expanding the product. Our team saw opportunities to improve the user interface (UI) and found underlying features we could build in to make the platform easier to use.
But the biggest challenge was the product architecture. With the product built entirely in CanvaJS, it lacked the ability to reuse components. In addition, because version one of the product had no Document Object Model (DOM), new code had to be replicated for each of the 16 manipulatives.
So, for each new function (for example, a new pen or drawing tool), the code needed to be rewritten up to 48 times. That meant a lot of unnecessary rework. So, we proposed moving the product to an object-oriented design with highly reusable components.
The client also wanted to enable the live use of their product to allow webinars and remote teaching. This functionality required the addition of a runtime environment, which our team would need to incorporate.
The Design
Both the application front-end and back-end needed development to reach the client’s product goals. Utilizing Vue, the team redesigned the UI to give it more functionality. Vue is a popular Javascript framework used to build web interfaces and was perfect for the interactive needs of this application.
We used Vue to improve the client’s pen tool and add several presentation and interactivity features. We also included a sharing feature so that teachers and students can pass assignments back and forth. On the back-end, we deployed SQLite, MongoDB, and Node to improve database functionality and speed. Node was designed as a runtime environment for real-time, push-based architectures, making it an excellent fit with the client’s application.
In the current phase of development, we are rebuilding the app on an object-oriented structure so that code can be reused instead of having to be manually rewritten dozens of times. This architectural change will allow the client to add more complex manipulatives to the product easily. It will also have the follow-on effect of increasing performance speed and making it easier to use overall.
The Taazaa team uses an Agile methodology to complete the work quickly and keep the client in the loop at all stages of the project. We utilize regular sprint reviews and demos to make sure our work stays aligned with the client’s goals and vision for the application.
The Solution
In the current release, the solution includes short lessons covering more than 50 math-related topics, using animations and narrations. Students can explore the manipulatives, answer questions, and play games based on real-world scenarios.
Teachers and parents can use the manipulatives to create activities that challenge students’ math knowledge. They can then access real-time progress reports that deliver detailed data showing what students have worked on and how they did.
The new front-end looks and works much like a teacher’s whiteboard, giving both teachers and students a familiar frame of reference. In addition to the browser-based application, Taazaa also created two types of mobile apps: One app for each manipulative and one app that includes all 16 manipulatives.
After opening a manipulative, teachers can drag and drop objects from a digital “bucket” or menu and combine them to build the lesson. They can type in text using the text entry tool or write on the screen with the pen tool. Using the highlighter tool, they can call attention to specific areas of the lesson.
Teachers can prepare a workspace in advance. Then, when it’s ready, they can share it with students via a link shared on screen, sent in an email, or downloaded. A unique code ensures students enter the correct workspace and prevents unauthorized users from entering.
Teachers can watch students’ work at the bottom of their view and drag a student’s window to the larger workspace. From there, they can share a student’s work with the class. They can also message students privately.
As a result of Taazaa’s help, the client is able to further their mission of helping educators make math more engaging through visual and hands-on learning.
Design System
More Success Stories
Product Development, Digital Marketing
Product Development, Support, Digital Marketing
