AI-Tutor UI

Product Blueprint

App structure first: hierarchy, wireframes, design system, and the logic behind the mobile flow.

Blueprint

AI tutor product map

This screen documents the product before any real teaching logic gets attached.

Visual Thesis

Warm deep-blue learning companion with soft glass cards, one-thumb actions, and calm premium motion instead of gamified noise.

Content Plan

Hero with clear daily action and tutor identityFocused learning blocks for phrase, lesson, speaking, and recoveryDepth screens for lessons, practice, progress, and profile settingsBlueprint layer showing app map, wireframes, and design system

Interaction Thesis

1.Cards lift in with short spring motion and settle into a calm vertical rhythm.

2.Bottom navigation uses a soft sliding highlight to keep orientation obvious.

3.Primary CTA and progress bars animate gently so the product feels active, not noisy.

App Map

Splash

Onboarding

Language Selection

Goal Selection

Level Selection

Daily Time Selection

Home

Lessons

Lesson Detail

Lesson Session

Speak

Progress

Vocabulary

Review

Weekly Plan

Achievements

Profile

Settings

Screen Hierarchy

First Run

SplashOnboardingLanguage SelectionGoal SelectionLevel SelectionDaily Time Selection

Daily Learning Loop

HomeLesson DetailLesson SessionSpeakQuick Practice

Retention & Review

VocabularyReviewPhrase of the DayContinue Learning

Motivation & Meta

ProgressWeekly PlanAchievementsProfileSettings

Mobile Wireframes

Home

Greeting / streak / level

Phrase of the Day

Today Plan

Progress snapshot

Speaking mode

Continue learning

Weak areas

Words of the day

Quick practice

Weekly activity

Lesson Session

Compact header with progress

Explanation card

Practice task

Answer area

Hint / helper tools

Sticky next action

Speaking Mode

Topic card

Chat / Voice toggle

Correction mode

Prompt chips

Transcript stream

Large talk button

Progress

Level overview

Stats cards

Weekly / monthly trend

Strengths

Weak areas

Achievements teaser

Design System

Color System

Deep Tutor BlueSoft Progress GreenWarm Achievement AmberCloud Surface GrayInk Text Navy

Typography

Display headings with tight tracking

Readable 16–18px body

Small utility labels with wide tracking

Surfaces & Interaction

Rounded 28px cards

Soft inset borders

Layered glass gradients

Calm shadows and low-noise backgrounds