MathYogi was a startup that I worked on with my friends. MathYogi, a virtual assistant for math teachers and a personal math mentor. MathYogi allows students to practice infinite math problems and creates in depth analysis reports of students weakness to assist teachers. On top of that MathYogi creates a social network of mentors, peers and parents to make math learning easy.


MathYogi's functionality was in place, it worked but the user experience was not very good. The buttons, layout and forms were not very friendly looking and also the color palette needed some work. MathYogi needed a rebranding and redesign of the layout.

My Contributions

Redesigned the app and coded the front end using Materialize CSS libray. Wrote media queries to make the website multiple device and browser friendly and created report cards and graphs using ChartJS data visualization library.

Quick Facts

My Role:
UI/UX Engineer
I was the UI/UX person in this team, redesign and rebranded the MathYogi app.

Vishal Bharam | Co-Founder, Frontend Developer

Siphamandla Simelane | Co-Founder, Backend Developer

Jan. 2015 - Jul. 2017

HTML, LESS, Bootstrap, MaterializeCSS

Adobe CC

MathYogi: Virtual Math Mentor

UI Design, Frontend development, Materialize CSS, Competitive analysis, Layout re-design, Mockups, Screenshots

Landing Page
Screenshots of the splash page of MathYogi app.
Competitive Analysis
I did a competitive analysis of existing Math Teaching Apps which included Khan Academy, Mathspace, Dreambox, Woothmath. Major focus was to analyze the features and functionality.
Version 1.0
For the version 1.0 of MathYogi the major focus of the app was functionality and once the backend and logic were in place, this is what I was handed to work on.
Version 2.0
For version 2.0, I pin pointed the problem with existing User Interface. Users used to get lost and confused while using the app. The target audience of this app were kids of elementary school and teachers and when I compared the aesthetics of MathYogi to other existing apps which were doing well. I noticed the branding colors, layout, typography, and workflow all were not working well. The app UI elements seemed busy and they was adding lot of cognitive load on users. I approached this problem by keeping my users in mind and designing a warm and friendly, simple experience for them. I designed the layout, picked the brand colors, typography and removed unncessary elements which minimized the cognitive load so the user can focus more on solving math problems. I used HTML, MaterializeCSS library to code the User interface and also added the 'Walk me through' tab on left, so users can learn the features of the app if needed.
Devices mockup
I wrote media-queries to make sure the app was responsive for multiple devices including big desktops and iPads.