https://www.mathgpt.ai/

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

MathGPT — Designing the visual language for an AI tutoring platform

Từ một AI product chưa có identity, tôi xác định visual direction, UI theme, và illustration system — tạo nền tảng cho sản phẩm scale lên hàng trăm nghìn người dùng toàn cầu.


📌 Company:

Got It (MathGPT)

📌 Role:

Senior UI Designer & Illustrator

📌 Scope:

Visual direction · UI theme · Illustration system

📌 Team:

Cross-functional, Vietnam + US


01 — Context & Problem

MathGPT là nền tảng AI tutoring nhắm đến học sinh K–12 tại Mỹ. Tôi tham gia xây dựng sản phẩm từ con số 0, product đã có backend AI nhưng chưa có visual identity: không màu sắc nhất quán, không illustration style, không UI pattern rõ ràng, không có design system.

Challenge không phải là "làm đẹp hơn" — mà là định nghĩa: sản phẩm AI giáo dục này trông như thế nào để học sinh tin tưởng, phụ huynh yên tâm, và giáo viên muốn recommend?

<aside> 👉🏽

Callout: Người dùng là học sinh 10–17 tuổi. Trust signal quan trọng không kém usability — giao diện phải truyền đạt "tôi là công cụ học tập nghiêm túc", không phải game hay chatbot ngẫu hứng.

</aside>


02 — Design Challenges

Challenge 1 — AI behavior UX AI trả lời không tức thì: có streaming delay, có lúc sai, có lúc cần regenerate. Phải thiết kế các trạng thái này (loading, streaming, error, correction) sao cho học sinh không mất orientation hoặc mất tin tưởng vào AI.

Challenge 2 — Visual identity từ zero, trong khi product đang chạy Không có thời gian làm branding xong mới làm UI. Phải xây visual system áp dụng được ngay trong sprint, đồng thời đủ linh hoạt để evolve.

Challenge 3 — Remote collaboration, lệch 11 tiếng Design decision phải documented và justified rõ trong Figma. Phải build design rationale vào trong file để US PM và engineer tự đọc và implement đúng.


03 — Approach

Xác định visual personality trước khi làm bất kỳ UI nào. Dùng competitive audit (Khan Academy, Photomath, Wolfram Alpha) để map vị trí: MathGPT cần cảm giác "smarter than tutoring apps, friendlier than academic tools".

Visual direction: clean + confident. Blue/white làm nền trust. Accent màu highlight AI response. Illustration style geometric-friendly nhưng không childish.