https://www.mathgpt.ai/

Visual direction · AI behavior UX · Illustration system · 5.17M messages

MathGPT — Designing the visual language for an AI tutoring platform

Starting from an AI product with no visual identity, I defined the visual direction, UI theme, and illustration system — laying the foundation for a platform that scaled to hundreds of thousands of users worldwide.


📌 Company:

Got It (MathGPT)

📌 Role:

Senior UI Designer & Illustrator

📌 Scope:

Visual direction · UI theme · Illustration system

📌 Team:

Cross-functional, Vietnam + US

483,857

total interactions

→ 5.17M

messages exchanged

→ 33,155

registered users

→ 13,055

active learners


01 — Context & Problem

MathGPT is an AI tutoring platform aimed at K–12 students in the US — helping them solve problems step-by-step and personalize their learning path. When I joined, the product already had a working AI backend but no visual identity: no consistent color system, no illustration style, no clear UI patterns.

The challenge wasn't to "make it prettier" — it was to define what an AI education product should look like to earn trust from students, reassure parents, and get recommended by teachers.

<aside> 👉🏽

Callout: Users are students aged 10–17. Trust signals matter just as much as usability — the interface needs to communicate "I'm a serious learning tool," not a game or a casual chatbot.

</aside>


02 — Design Challenges

Challenge 1 — AI behavior UX AI responses aren't instant — there's streaming delay, occasional errors, and the need to regenerate. I had to design these states (loading, streaming, error, correction) so students wouldn't lose orientation or trust in the AI mid-session.

Challenge 2 — Visual identity from zero, while the product was already shipping No time to finish branding before starting UI. I had to build a visual system flexible enough to apply immediately within each sprint, while remaining adaptable as the product evolved.

Challenge 3 — Remote collaboration, 11-hour timezone gap Design decisions had to be clearly documented and justified inside Figma. I built design rationale directly into the files so US PMs and engineers could implement correctly without a sync.


03 — Approach

First step: establish visual personality before touching any UI screens. Competitive audit across Khan Academy, Photomath, and Wolfram Alpha to map positioning — MathGPT needed to feel "smarter than tutoring apps, friendlier than academic tools."