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.
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
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
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.
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
Login Page
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
Video page
Development
Collaborated with the development team to build the frontend of the home page from Figma to React.js while implementing the MUI library.
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.