# Skyeng/Skysmart Figma — Deep Analysis

## Summary: Your Skyeng Work Is a Perfect Match

Your Skyeng/Skysmart portfolio covers **exactly** the same problem space as the Novakid assignment:
- Kids education progress visualization
- Goal-setting for learning
- Gamification in educational dashboards
- Multi-skill progress tracking (vocabulary, grammar, GSE)
- Emotional design with character/mascot systems

---

## File 1: Kids Progress (Skysmart)

### Pages Analyzed
- УЧЕНИК (Student view) — main progress page
- ПРЕПОД (Teacher view) — teacher progress dashboard
- Analytics — data visualization logic
- Current States — character emotional states

### Key Design Patterns

#### 1. Sticker-Based Progress Cards
The progress page uses **playful "sticker" cards** instead of traditional charts:
- "Занимаешься на уроках отпадно!" (You're doing great in class!) — score: 8.5
- "Ошибочки в тестах. Поправим?" (Mistakes in tests. Shall we fix?) — score: 7.6
- "5 уроков пропущено. Догоняй!" (5 lessons missed. Catch up!)
- "Го сделаем домашки? Осталось 2" (Let's do homework? 2 left)

**Novakid application:** Replace clinical metrics with personality-driven cards. Teacher feedback as playful card, not formal report.

#### 2. Mascot as Progress Narrator (Эл)
- Blue robot character narrates progress emotionally
- "Пока не все гуд, но скоро нагоним" (Not everything's great yet, but we'll catch up)
- Mascot states map to data states (happy, encouraging, concerned)
- Progress bar integrated with mascot interaction

**Novakid application:** Could use Novakid's Game World characters to narrate progress to parents. "Alex says: Mia is getting more confident every week!"

#### 3. Analytics Logic
- Color coding only for homework and test quantities (not everything)
- Default → Hover → Expanded states for interactive data
- Mobile-responsive design (full mobile version exists)

**Novakid application:** Selective color coding — only color what requires attention. Progressive disclosure from card to detail.

#### 4. Character State System (30+ states)
- Emotional expressions for every progress scenario
- Separate character sets for different contexts
- Maps data to feelings, not just numbers

**Novakid application:** Teacher mood/feedback indicators. Instead of text-only feedback, add emotional context visuals.

### Screenshots
- `01-kids-progress-desktop.jpg` — Full progress page with sticker cards
- `02-kids-progress-analytics.jpg` — Analytics logic and states
- `03-kids-progress-current-states.jpg` — Character emotional state library

---

## File 2: Goal Setting (AD-173)

### Pages Analyzed
- DIAGNOSTICS — diagnostic flow
- STUDENTS CABINET — student dashboard with goal widget
- Prototype English Kids — interactive prototype

### Key Design Patterns

#### 1. Progress Widget with Goal
Dashboard shows:
- Current level: Elementary → Intermediate (visual arc)
- Score: 2000 баллов with progress indicator
- "Мой прогресс" section
- Goal selection CTA: "Выберите цель обучения"
- Quick stats: 16, 64%, 126
- Teacher card with schedule

**Novakid application:** DIRECT template for the Value Hub. Replace Skyeng metrics with Novakid's: CEFR level, lesson count, vocabulary, teacher info.

#### 2. Multi-State Goal Component (15+ states)
Complete component set showing:
- No goal set → flag icon + "Выбери цель обучения"
- Goal in progress → circular progress (7 из 12 шагов)
- Goal completed → specific goal display ("ЕГЭ на 80+ баллов")
- Color variants per subject (blue, cyan, yellow, orange, red, green)

**Novakid application:** "This Month's Learning Goal" widget. Parent sets goal → child works toward it → celebration when achieved. Circular progress indicator is proven pattern.

#### 3. Diagnostics Flow (CJM)
Full customer journey map for:
- New student onboarding
- Level assessment
- Goal setting
- Progress tracking

**Novakid application:** The CJM thinking demonstrates senior-level approach. Include a simplified user journey in the audit.

### Screenshots
- `04-goal-setting-progress-widget.jpg` — Dashboard with progress arc and goal widget
- `05-goal-setting-kids-goal-component.jpg` — Complete goal component state library

---

## File 3: Единый ЛК колледжа (Unified College Dashboard)

### Key Design Patterns

#### 1. Dashboard Architecture Sections
The file explores:
- "прикольные рефы" (cool references) — inspiration board
- "таск трекер" (task tracker)
- "виджеты прогресса" (PROGRESS WIDGETS)
- "подходы к структуре" (approaches to structure)
- "скиллсеты" (skillsets)
- "расписание — с привязкой ко времени или без?" (schedule — time-bound or not?)
- "геймификации" (gamification)

**Novakid application:** This file shows your process of exploring dashboard architecture — the SAME process Novakid expects. Reference your thinking about structure, widgets, and gamification.

### Screenshots
- `08-college-dashboard-drafts.jpg` — Full exploration board

---

## File 4: ЛК Английского (English Dashboard)

### Key Design Patterns

#### 1. Gamified Dark Dashboard
- Full gaming-style UI with dark theme
- Character/avatar system with levels
- Line charts showing progress over time
- Leaderboard integration
- Neon green/blue/red color scheme
- Multiple view modes: Stats, Leaderboard, Promotions

**Novakid application:** Shows you can do gamification well. For Novakid, adapt the game dashboard language into a lighter, parent-friendly version. Keep the data density and visual excitement, lose the dark theme.

#### 2. GSE Progress Charts
- "Научиться выводить динамический прогресс по лексике и грамматике GSE"
- Week-by-week area charts (w6, w21)
- Score with delta: "28 +8", "44 +4"
- Green gradient area fills
- Real data visualization

**Novakid application:** CEFR progress chart with week-by-week tracking. Show vocabulary growth as area chart with score deltas. This exact pattern adapted with Novakid's warm palette.

#### 3. Tooltips System
- Contextual information popups
- Rich content within compact UI elements

**Novakid application:** Progressive disclosure tooltips for the Value Hub — hover for detail without leaving the overview.

### Screenshots
- `06-lk-english-dashboard.jpg` — Full gamified dashboard with multiple views
- `07-lk-english-gse-stats.jpg` — GSE vocabulary/grammar progress charts

---

## File 5: English Avatar College

### Key Design Patterns
- Avatar/character system concepts
- Space and Alien themed visual directions
- Rich visual world-building for education

**Novakid application:** Shows experience with character-based educational design — relevant to Novakid's Game World.

---

## Cross-File Synthesis: What to Bring to Novakid

### Proven Patterns You've Already Built

| Your Skyeng Pattern | Novakid Application | Evidence |
|---|---|---|
| Sticker progress cards | Playful teacher feedback cards | Kids Progress |
| Mascot narrating progress | Character-driven progress story | Kids Progress (Эл) |
| Level progress arc | CEFR skill rings | Goal Setting widget |
| Multi-state goal component | Parent goal-setting widget | Goal Setting (15 states) |
| GSE weekly charts | Vocabulary/grammar trend charts | ЛК Английского |
| Gamified dashboard | "Wow spirit" data density | ЛК Английского |
| Character emotion states | Teacher mood indicators | Kids Progress (30+ states) |
| Dashboard architecture exploration | Value Hub IA process | Единый ЛК |
| Color-coded subjects | Color-coded skills | Goal Setting |
| Diagnostic CJM | Audit methodology | Goal Setting |

### Design Language to Adapt

**Skyeng Dark → Novakid Warm Light**
- Skyeng: #04121B (near-black), neon accents
- Novakid: White/cream backgrounds, purple #6d46fc, yellow #ffe606
- Keep: data density, card-based layouts, progressive disclosure
- Change: color palette, illustration style, brand voice

**StratosSkyeng → Mikado**
- Both are sans-serif with personality
- Mikado is rounder, more child-friendly
- Keep same typographic hierarchy patterns

### Your Competitive Advantage
You've already solved these problems at Skyeng — one of Russia's largest EdTech companies (similar scale to Novakid). Your submission should subtly demonstrate this depth WITHOUT copying Skyeng's visual language. Show that you've shipped real progress dashboards for real kids learning real languages.

---

## Additional Findings (Detailed Screenshots)

### Card Specification System (Kids Progress — "Карточки английского")
A complete UI spec document showing:
- **Metric Priority Order**: 1) Lesson completion (100% target), 2) Homework completion, 3) Average lesson score, 4) Average test score, 5) Average homework score, 6) Vocabulary words
- **Card Rules**: 3 lines per card, 2 cards per row, horizontal gap = 1 column, vertical gap = 54px
- **Responsive**: cards scale down 40% on smaller screens
- **Score Badges**: flower/star-shaped colored indicators for score ranges

**Novakid application:** This metric priority hierarchy is directly applicable. For parents: 1) CEFR progress, 2) Lesson consistency, 3) Teacher assessment, 4) Specific skills, 5) Vocabulary count. Card grid rules translate to Bento Grid.

### Kids English Full Product Flow
- ~20+ screen flow from onboarding through active learning
- Purple/magenta intro screens → white learning screens → green/dark achievement screens
- Shows complete journey architecture

**Novakid application:** Evidence of end-to-end product thinking. Reference this capability in the readme — shows you design systems, not just screens.

### Goal Widget State Variations (3 versions discovered)
- V1: Goal set, progress arc Elementary→target, chess illustration
- V2: Goal set, different progress state, donut illustration  
- V3: No goal set, CTA "Выберите цель обучения"
- All share: teacher card, schedule, stats (16, 64%, 126)

**Novakid application:** The "no goal" → "goal in progress" → "goal achieved" state machine is exactly what the Value Hub needs for CEFR level tracking.

---

## Total Assets Inventory

**39 screenshots** saved in `figma-analysis/screenshots/`:
- 01-08: Initial overview frames (all 6 files)
- 09-14: Kids Progress deep dive (mobile, onboarding, health/english, recommendations, analytics)
- 15-19: Goal Setting flows (CJM, first lesson, students cabin, components, kids english flow)
- 20-27: Goal Setting widgets (web widget, progress bars, goal components, level images, dashboards)
- 28-35: Goal Setting variations (prod, mobile, empty states, teacher profile, adults widget)
- 36-39: English Avatar College (alien concept, space concept, welcome, characters)

---

### What to Reference in the Readme
"My approach to the Value Hub is informed by years of designing educational dashboards where I learned that parents and students don't engage with raw metrics — they engage with stories, emotions, and clear goals. The progress narrative approach in this design draws on proven patterns in kids' education UX."