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.

Redesign

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.

Development

Collaborated with other developers to translate the designs 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 to how to utilize the React.js to work the frontend, I still have much to learn about all that the library offers.