UI Design and Web Development Intern
May 2022 - July 2022
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.
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.
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.
Sketches and basic user flow
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
Refined teacher user flow
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
Figma teacher portal mockup
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
Student Portal — explored methods of organizing visual clutter
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
Collaborated with other developers to translate the designs from Figma to React.js while implementing the MUI library.
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.