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


Branding

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

brand


Character Assets

brandbrandbrand

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.

Student portal prototype

Teacher portal prototype

Redesign

To prepare for user testing, we began to prototype 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

login

Student Portal — explored methods of organizing visual clutter

student portal

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

Assignment

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

Assignment

Video page

Assignment

Development

Collaborated with the development team to build the frontend of the home page 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 of how to utilize the React.js to work the frontend, I still have much to learn about all that the library offers.