Math2Shine Redesign

Role //

UI Design and Web Development Intern

Duration //

May 2022 - July 2022

Tools //

Figma, Illustrator, React.js, MUI Library

Math2Shine is an online learning platform that strives to teach students about the wonders of Vedic Maths. Working with the development team, I helped redesign and develop the Math2Shine website to reach out to more teachers, tutors, and students.

cover image


We designed the brand to feel both fun and serious; we incorporated elements to make the website seem playful to appeal to the students while also keeping the design serious when it came to work. Part-playful, part-serious, just like how learning should be.

Brand guide


Character Assets


Problem Space

As students develop their math skills, many of their hardships stem from a lack of confidence in their fundamental computing skills. Through our redesign, we wanted to bring more attention to Vedic math to be able to teach students skills and tricks to be able to do mathematics without second-guessing their answers.

Our team looked at pre-existing online learning platforms and identified gain points that helped provide a holistic approach to learning.

Wireframing and prototyping

Sketches and basic user flow

iteration 1iteration 1

After sketching out a general user flow guide to guide students and tutors through the platform, we began to build high-fidelity wireframes. We wanted to ensure that the website was intuitive, with all of the main functions easily accessible. What information is most important to help teachers run an online classroom? How can students most easily access resources to help them when they are stuck?

Refined student user flow

iteration 1

Refined teacher user flow

iteration 1

In addition, since we were redesigning the website we also wanted to make sure that all of the functions from the backend were still present in the page.

Figma student portal mockup

user flow

Figma teacher portal mockup

user flow


To prepare for user testing, we began to protoype the navigation and content of the website. We explored with color, type and layout, imagining different scenarios that students and teachers may have when navigating the page.

The original design of the page posed many problems, as the page was bombarded with information, and important tools were difficult to access. Users were confused as to how to navigate through the page, and My team worked on pinpointing the pain points and brainstormed a variety of methods to effectively help students and teachers navigate through the interface.

Color schemes tested

iteration 3
iteration 1iteration 2

Login Page


Student Portal — explored methods of organizing visual clutter

student portal

Assignment Page — designed a better way for students to recognize missing assignments


Student worksheet page — incorporated a better flow of how to best meet student learning goals


Video page



Collaborated with other developers to translate the designs from Figma to React.js while implementing the MUI library.

Development team

Project Reflection

Working on this internship heavily shaped my ability to design for multiple groups of people — I was forced to move past designing for one person and understand how to design a serious yet lighthearted platform for both teachers and students. More user testing will allow the design of the website to continue to evolve and improve.

I was also able to gain many unique insights by collaborating and communicating with a team of developers — both as a designer and a member of the team. Although I learned some of the basics to how to utilize the React.js to work the frontend, I still have much to learn about all that the library offers.