A Personalized AI Math Tutoring Platform
Role
Lead Designer
Team
RazeMath
Timeline
Nov 2025 - Present
Tools
Figma
Cursor
PROBLEM
No design system and inefficient handoff.
Developers took too long turning my design into code.
Handing off my designs to developers at the beginning was inefficient. Even with a brand guide, it took extremely long to apply my designs to the main program.
SOLUTION
Expanding my skillset to solve problems.
Boosting post handoff productivity.
I reduced workload for developers and increased productivity by over 70%. I turned my designs directly into code for our developers. As a result developers could not only preview the interactions for themselves but also keep up with my design workflow.
DESIGN
A new workflow for design.
From Figma to code.
In order to bridge the gap between me and my developers, I took my designs in Figma and directly converted it into a working prototype in Cursor. I used the workflow for the rest of my designs and beyond.
Before:
developers had to translate designs into code
no working prototype
After:
developers no longer have to translate designs
interactive prototype
Building a design system from scratch.
The founders highlighted that their current UI didn't align with their business goals. After gaining valuable insight, I built a design system with reusable components that would be utilized throughout their app.
Before:
no brand identity
visually distracting
inconsistent design choices
After:
consistent styles (color, font, etc.)
expresses more brand identity
less cognitive load on student
Personalized math tutoring for every student.
Many math tutoring apps don't provide feedback and if they do, it's not personalized. I sought to convey that business goal through a design that causes the least amount of cognitive load for a student who studies long or short sessions.
Less eye strain when studying in darker environments.
Studies have shown that having a "dark mode" for a website where the colors are overall less bright is better for studying in lower light conditions. I implemented a darker color palette to let students tailor their study sessions to their work environment.
Catching a student's attention with a landing page.
To maximize the level of brand impression on the student, I created a math question input page. This lets the student get to work with the app, and learn about the brand and the value it could provide.
Elevating the student experience.
As a cherry on top, in order to build a pleasant user experience for the student, I built custom transition animations and interactions between elements on the app.
REFLECTION
I am constantly evolving.
What I've learned so far.
Working with RazeMath has taught me things I never could have learned on my own.
I adopted new skills to boost productivity not just for me but for my team.
Design isn't about iterations, it's about effective communication to minimize iterations.
Having frequent meetings that focus on keeping everyone on the goal will push things forward.
What's next?
I am continuing to learn and grow at RazeMath. As I finish up on the quality of life additions to the student tutoring process, I will expand to other features on the app as we continue to grow our user base.