Score Gradebook (Mosachi)
What is Score Gradebook (Mosachi)?
Score Gradebook (later rebranded as Mosachi) is a custom gradebook viewer for Bellevue High School students. The school district's existing interface (Synergy StudentVue) was slow, unresponsive, and lacked basic functionality such as grade and GPA calculation. I set out to create a better solution for students, and co-founded the project with two friends. I focused on designing and implementing the user interface, while the two friends focused on backend development and API integration.
Application UI
The initial gradebook UI, called Score, was built using Webflow. This allowed me to quickly prototype and build a proof of concept using tools I was already familiar with. I scaffolded multiple components that would render conditionally, depending on the user's grade data.
When deployed, the production site would dynamically update the frontend based on grade data retrieved from the backend API.
Overview View
The overview is the first view that users see upon login. It shows a high level summary of their classes, assignments, and GPA. It also has a placeholder for a planned advertisement feature, where we would monetize the site by selling ad space to students. For example, if someone was doing poorly in their math class, they could be shown highly relevant advertisement from a different student offering tutoring services.
The most important information, the student's overall GPA, is displayed prominently in this view. We also implemented a Share your GPA feature for users to post their GPA achievement to social media. This feature helped massively with viral marketing and student engagement.
Class View
The class view showed a detailed overview of a student's grade in a specific class. The most important information, the student's grade in the class, was displayed prominently in the view. Below the grade, pertinent information would be displayed conditionally based on the data.
For example, if the student was missing assignments, they would be shown a list of their missing assignments. If the student had assignments below 60%, they would be shown a list of those assignments. In both of these cases, the application would calculate a "what-if" score based on if the student could work with the teacher to improve their grade on those assignments.
Mosachi Rebrand/Rewrite
When the Score MVP launched, we realized that the automated "what-if" grade calculations in the class view's conditional components were incredibly popular and useful. Users were requesting this functionality to be implemented across the entire application, allowing for users to manually update assignment scores and see realtime "what-if" grade calculations.
Implementing this functionality was outside the scope of what we could do efficiently in Webflow, so we rewrote the application in React to handle dynamic realtime calculations on the client-side.
Landing Page
Since we were rewriting the application, we took the opportunity to rebrand the application. We renamed the application to "Mosachi" and created a new landing page that effectively communicated the application's purpose and features.
Results
The project was massively popular and a huge success overall, with over half the school using the application regularly. Our penetration in the senior class alone was over 90%. Personally, the application helped me achieve the best semester grade I have ever had in my high school career during my senior year.
Final Design
