STEMBlock.ai - Detailed Wireframe Descriptions
Version: 1.0 Date: October 25, 2025 Purpose: Comprehensive wireframe descriptions for UX Designer
Table of Contents
Common Elements
Top Navigation Bar (All Roles)
Desktop (1024px+):
┌────────────────────────────────────────────────────────────────┐
│ [Logo] [Nav Items centered or left] [🔔][👤 Menu] │
│ │
└────────────────────────────────────────────────────────────────┘
Components:
- Logo: 40px height, left-aligned, clickable (home link)
- Navigation Items: Horizontally aligned tabs/links
- Active state: Primary blue underline (3px) + bold text
- Hover: Background slate-100
- Notification Bell: Icon button with badge count
- User Menu: Avatar + dropdown
- Dropdown: Profile, Settings, Help, Logout
Mobile (< 640px):
┌────────────────────────────────┐
│ [☰] [Logo] [🔔][👤] │
└────────────────────────────────┘
- Hamburger menu opens sidebar overlay
- Simplified with icons only
Sidebar Navigation (Desktop - Coach/Admin)
┌─────────────────────┐
│ STEMBlock.ai │
│ │
│ [🏠] Dashboard │
│ [📋] Assessments │
│ [📤] Submissions │
│ [📊] Reports │
│ [💬] Forum │
│ [⚙️] Settings │
│ │
│ │
│ [❓] Help │
└─────────────────────┘
Specifications:
- Width: 256px
- Background: Slate-50
- Item height: 44px
- Active item: Primary blue background, white text, left border (4px)
- Icon size: 20px
- Font: Inter Medium 14px
Footer (All Pages)
┌────────────────────────────────────────────────────────────────┐
│ STEMBlock.ai © 2025 | Privacy | Terms | Help | Contact│
└────────────────────────────────────────────────────────────────┘
- Background: Slate-100
- Height: 80px
- Text: Centered, small font (12px)
- Links: Hover underline
Student Screens
1. Student Dashboard
Age Group: 6-10 (Younger Students)
┌──────────────────────────────────────────────────────────────────┐
│ Top Navigation Bar │
├──────────────────────────────────────────────────────────────────┤
│ │
│ 👋 Welcome back, Alex! │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ 🎯 Your Progress │ │
│ │ [====================80%=========> ] │ │
│ │ Level 4 - STEM Explorer! │ │
│ │ [⭐⭐⭐⭐⭐] 25 Stars Earned │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ 📚 Things to Do: │
│ ┌──────────────────────┐ ┌──────────────────────┐ │
│ │ 🤖 Robot Challenge │ │ 💻 Code Practice │ │
│ │ Due: Tomorrow │ │ Due: Friday │ │
│ │ [Start Now!] │ │ [Start Now!] │ │
│ └──────────────────────┘ └──────────────────────┘ │
│ │
│ 🏆 Your Achievements: │
│ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │
│ │ 🥇 │ │ 🎨 │ │ 💡 │ │ 🔧 │ │
│ │ Badge│ │ Badge│ │ Badge│ │ Badge│ │
│ └──────┘ └──────┘ └──────┘ └──────┘ │
│ │
│ 📊 Recent Scores: │
│ [Simple bar chart with smiley faces] │
│ │
└──────────────────────────────────────────────────────────────────┘
Design Notes:
- Large, friendly headings (Poppins Bold 36px)
- Bright colors (Primary blue, Purple accents)
- Big buttons (height: 52px)
- Icon-heavy design
- Gamification elements prominent
- Simple language
- Large touch targets
Age Group: 15-18 (Older Students)
┌──────────────────────────────────────────────────────────────────┐
│ Top Navigation Bar │
├──────────────────────────────────────────────────────────────────┤
│ │
│ Dashboard / Overview │
│ │
│ ┌────────────────────┐ ┌────────────────────┐ ┌─────────────┐│
│ │ Overall Score │ │ Assignments │ │ Ranking ││
│ │ │ │ │ │ ││
│ │ 85% │ │ 3 Active │ │ Top 15% ││
│ │ [Progress Ring] │ │ 1 Due Soon │ │ in Class ││
│ │ │ │ │ │ ││
│ │ ↗ +5% this week │ │ [View All] │ │ [Details] ││
│ └────────────────────┘ └────────────────────┘ └─────────────┘│
│ │
│ Current Assignments [+ New Submit] │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ VEX Robot Design Evaluation Due: Oct 28│ │
│ │ Status: In Progress [=========> ] 45% │ │
│ │ [Continue] [View Feedback] │ │
│ └──────────────────────────────────────────────────────────┘ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ Code Optimization Challenge Due: Oct 30│ │
│ │ Status: Not Started │ │
│ │ [Start] │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ Performance Analytics │
│ [Line chart showing score trends over time] │
│ - Programming: 88% │
│ - Engineering: 82% │
│ - Problem Solving: 90% │
│ │
└──────────────────────────────────────────────────────────────────┘
Design Notes:
- Clean, professional interface
- Data-focused
- Smaller text (16px body)
- More information density
- Subtle colors
- Analytics prominent
2. Student Assessment Page
┌──────────────────────────────────────────────────────────────────┐
│ Top Navigation Bar │
├──────────────────────────────────────────────────────────────────┤
│ │
│ ← Back to Dashboard │
│ │
│ VEX Robot Design Challenge │
│ Due: October 28, 2025 • Time Remaining: 2 days │
│ │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ Progress: Question 3 of 10 [====> ] │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Question 3: Multiple Choice │ │
│ │ │ │
│ │ Which VEX component is best for lifting heavy objects? │ │
│ │ │ │
│ │ ○ A. High-torque motor │ │
│ │ ○ B. Standard motor │ │
│ │ ○ C. Servo motor │ │
│ │ ○ D. Distance sensor │ │
│ │ │ │
│ │ [Need Help?] button │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ │
│ [← Previous] [Next →] │
│ [Save Draft] [Submit Answer] │
│ │
└──────────────────────────────────────────────────────────────────┘
Features:
- Large, clear question text
- Radio buttons for multiple choice (large touch targets)
- Progress indicator
- Help button with tooltip
- Save functionality
- Clear navigation
3. Student Submission Upload Page
┌──────────────────────────────────────────────────────────────────┐
│ Top Navigation Bar │
├──────────────────────────────────────────────────────────────────┤
│ │
│ Submit Your Work │
│ Assignment: Robot Design Evaluation │
│ │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ Step 1: Upload Robot Photos [✓] │ │
│ ├─────────────────────────────────────────────────────────────┤ │
│ │ Step 2: Upload Code Files [ ] │ │
│ ├─────────────────────────────────────────────────────────────┤ │
│ │ Step 3: Upload Engineering Notebook [ ] │ │
│ ├─────────────────────────────────────────────────────────────┤ │
│ │ Step 4: Review & Submit [ ] │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ │
│ Upload Code Files │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 📁 Drag & Drop Files Here │ │
│ │ or │ │
│ │ [Browse Files] │ │
│ │ │ │
│ │ Accepted: .py, .cpp, .c, .blocks (max 10MB each) │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ │
│ Uploaded Files: │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ 📄 main.py (2.3 KB) [X] │ │
│ └──────────────────────────────────────────────────────┘ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ 📄 motor_control.cpp (4.1 KB) [X] │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ [← Back] [Next Step →] │
│ │
└──────────────────────────────────────────────────────────────────┘
Features:
- Step-by-step wizard
- Large drag-and-drop zone
- File type indicators
- File size validation
- Remove file option
- Clear progress tracking
4. Student Report/Feedback Page
┌──────────────────────────────────────────────────────────────────┐
│ Top Navigation Bar │
├──────────────────────────────────────────────────────────────────┤
│ │
│ Your Evaluation Results │
│ Robot Design Challenge • Submitted: Oct 25, 2025 │
│ │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 🎉 Great Job! │ │
│ │ │ │
│ │ Overall Score: 85% │ │
│ │ │ │
│ │ [Circular Progress Ring: 85%] │ │
│ │ │ │
│ │ You're in the top 20% of your class! │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ │
│ Detailed Breakdown │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 🤖 Robot Design 92% [=================> ] │ │
│ │ Excellent mechanical structure and component selection │ │
│ └──────────────────────────────────────────────────────────┘ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 💻 Code Quality 78% [==============> ] │ │
│ │ Good logic flow. Consider optimizing your loops. │ │
│ │ [View Suggestions] │ │
│ └──────────────────────────────────────────────────────────┘ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 📓 Documentation 85% [===============> ] │ │
│ │ Well-organized notebook. Add more testing details. │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ What to Improve │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 💡 Try this: Add comments to explain complex code │ │
│ │ 💡 Next step: Explore sensor calibration techniques │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ [Download Report PDF] [Ask a Question] │
│ │
└──────────────────────────────────────────────────────────────────┘
For Younger Students (6-10):
- More emoji/icons
- Simpler language
- Celebration graphics
- "You did awesome!" tone
- Visual comparisons (stars, badges)
For Older Students (15-18):
- More detailed metrics
- Technical language
- Comparison to benchmarks
- Actionable insights
- Code-specific feedback with examples
5. Student Forum Page
┌──────────────────────────────────────────────────────────────────┐
│ Top Navigation Bar │
├──────────────────────────────────────────────────────────────────┤
│ │
│ Community Forum │
│ [Search...................................] [+ New Post] │
│ │
│ Filter: [All] [Questions] [Discussions] [Solved] [Unanswered] │
│ Sort by: [Hot] [New] [Top] [Active] │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ ⬆ 15 How do I make my robot turn faster? [VEX IQ]│ │
│ │ Asked by @sarah_robotics • 2 hours ago │ │
│ │ 💬 8 replies • ✓ Solved │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ ⬆ 23 Python vs C++ for VEX V5? [Code]│ │
│ │ Asked by @tech_student • 1 day ago │ │
│ │ 💬 12 replies │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ ⬆ 8 Best way to organize engineering notebook? [Docs] │ │
│ │ Asked by @organized_builder • 3 days ago │ │
│ │ 💬 5 replies • ✓ Solved │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ [Load More Posts] │
│ │
└──────────────────────────────────────────────────────────────────┘
Features:
- Upvote/downvote (left side)
- Tags for categorization
- Solved indicator
- Reply count
- Author and timestamp
- Search functionality
- Filter options
Parent Screens
1. Parent Dashboard
┌──────────────────────────────────────────────────────────────────┐
│ Top Navigation Bar │
├──────────────────────────────────────────────────────────────────┤
│ │
│ Welcome, Parent! │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ Your Children: [Alex ▼] [Emma ▼] │ │
│ │ Currently viewing: Alex │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ Quick Summary │
│ ┌──────────────────┐ ┌──────────────────┐ ┌───────────────┐ │
│ │ Overall Progress │ │ Recent Activity │ │ Next Steps │ │
│ │ │ │ │ │ │ │
│ │ 78% │ │ 5 assignments │ │ 2 upcoming │ │
│ │ Doing Well! ✓ │ │ completed this │ │ assignments │ │
│ │ │ │ month │ │ │ │
│ │ [View Details] │ │ [View All] │ │ [View] │ │
│ └──────────────────┘ └──────────────────┘ └───────────────┘ │
│ │
│ What This Means: │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ ℹ️ Alex is performing above average in STEM subjects. │ │
│ │ They show strong problem-solving skills and creativity.│ │
│ │ Current focus: Improving code documentation. │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ Recent Achievements │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ 🏆 Completed Robot Design Challenge Oct 25 │ │
│ │ Score: 85% - Great job! │ │
│ │ [View Report] │ │
│ └────────────────────────────────────────────────────────┘ │
│ │
│ Progress Over Time (Last 3 Months) │
│ [Simple line chart - easy to understand] │
│ 📈 Trend: Improving steadily │
│ │
│ Ways to Support Alex at Home: │
│ • Encourage daily 30-min coding practice │
│ • Ask about their robot design projects │
│ • Review engineering notebook together │
│ │
└──────────────────────────────────────────────────────────────────┘
Parent-Friendly Features:
- Multi-child selector
- Plain language explanations
- "What This Means" sections
- Actionable suggestions
- Simple visualizations
- Jargon-free interface
- Help tooltips everywhere
2. Parent - Child Report Page
┌──────────────────────────────────────────────────────────────────┐
│ Top Navigation Bar │
├──────────────────────────────────────────────────────────────────┤
│ │
│ Alex's Progress Report │
│ October 2025 [📥 Download PDF] │
│ │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ Overall STEM Performance │ │
│ │ │ │
│ │ 78% - Above Average │ │
│ │ │ │
│ │ This means Alex is doing better than most students │ │
│ │ in their grade level. │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ │
│ Skills Breakdown (explained simply) │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ Problem Solving 85% [=================> ] │ │
│ │ ⓘ How well they solve challenges and think creatively │ │
│ └──────────────────────────────────────────────────────────┘ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ Programming Skills 72% [==============> ] │ │
│ │ ⓘ Writing and understanding computer code │ │
│ └──────────────────────────────────────────────────────────┘ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ Engineering Design 80% [================> ] │ │
│ │ ⓘ Building and designing robots │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ Recent Activities │
│ ┌────────────────────────────────────────────────────┐ │
│ │ Oct 25: Completed Robot Design Challenge │ │
│ │ Score: 85% ✓ │ │
│ ├────────────────────────────────────────────────────┤ │
│ │ Oct 22: Code Optimization Exercise │ │
│ │ Score: 70% - Needs practice │ │
│ └────────────────────────────────────────────────────┘ │
│ │
│ What's Going Well: │
│ • Strong creative thinking │
│ • Excellent team collaboration │
│ • Consistent effort and engagement │
│ │
│ Areas to Focus On: │
│ • Code organization and comments │
│ • Testing and debugging skills │
│ │
│ [Contact Coach] [Schedule Parent Meeting] │
│ │
└──────────────────────────────────────────────────────────────────┘
Key Features:
- Non-technical language
- "What this means" explanations
- Simple progress indicators
- Clear strengths and areas to improve
- Easy coach contact
- PDF export option
Coach Screens
1. Coach Dashboard
┌──────────────────────────────────────────────────────────────────┐
│ Top Navigation Bar │
├─Sidebar─┬───────────────────────────────────────────────────────┤
│ │ Class Overview │
│ [🏠] │ Robotics 101 - Period 3 [▼ Switch Class] │
│ Dash. │ │
│ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ [📋] │ │ Students │ │ Avg Score│ │ At Risk │ │ Pending │ │
│ Assess. │ │ 24 │ │ 82% │ │ 3 │ │ 8 │ │
│ │ │ │ │ ↗ +5% │ │ [View] │ │ [Review] │ │
│ [📤] │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
│ Submit. │ │
│ │ Class Performance Matrix │
│ [📊] │ ┌────────────────────────────────────────────────┐ │
│ Reports │ │ Student Overall Program Design Last │ │
│ │ ├────────────────────────────────────────────────┤ │
│ [💬] │ │ Sarah Jones 88% 90% 86% 2d │ │
│ Forum │ │ Michael Chen 92% 95% 89% 1d │ │
│ │ │ Emma Williams ⚠️ 65% 60% 70% 5d │ │
│ [⚙️] │ │ David Kumar 78% 75% 82% 1d │ │
│ Settings│ │ Lisa Anderson 85% 88% 82% 3d │ │
│ │ │ ... │ │
│ │ └────────────────────────────────────────────────┘ │
│ [❓] │ [Export CSV] [Filter] [Sort] │
│ Help │ │
│ │ Recent Submissions (Pending Review) │
│ │ ┌──────────────────────────────────────────────┐ │
│ │ │ 🤖 Sarah Jones - Robot Design [Review] │ │
│ │ │ Submitted 2 hours ago │ │
│ │ ├──────────────────────────────────────────────┤ │
│ │ │ 💻 Michael Chen - Code Challenge [Review] │ │
│ │ │ Submitted 5 hours ago │ │
│ │ └──────────────────────────────────────────────┘ │
│ │ │
│ │ Quick Actions │
│ │ [+ Create Assignment] [📊 View Analytics] │
│ │ [✉️ Message Class] [📅 Schedule Assessment] │
│ │ │
└─────────┴───────────────────────────────────────────────────────┘
Features:
- Multi-class support
- At-a-glance metrics
- Student performance matrix
- At-risk student alerts
- Pending review queue
- Quick actions
- Data export
2. Coach - Student Detail View
┌──────────────────────────────────────────────────────────────────┐
│ Top Navigation Bar │
├─Sidebar─┬───────────────────────────────────────────────────────┤
│ │ ← Back to Class Overview │
│ [🏠] │ │
│ Dash. │ Student Profile: Sarah Jones │
│ │ Grade: 9 • Team: Lightning Bolts • ID: STU-00123 │
│ │ │
│ [📋] │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ Assess. │ │ Overall │ │ Program │ │ Design │ │ Problem │ │
│ │ │ 88% │ │ 90% │ │ 86% │ │ Solving │ │
│ [📤] │ │ ↗ +3% │ │ ↗ +5% │ │ ↗ +2% │ │ 91% │ │
│ Submit. │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
│ │ │
│ [📊] │ Performance Trend (Last 3 Months) │
│ Reports │ [Line chart showing improvement over time] │
│ │ │
│ [💬] │ Recent Submissions │
│ Forum │ ┌────────────────────────────────────────────────┐ │
│ │ │ Robot Design Challenge Oct 25 Score: 92% │ │
│ [⚙️] │ │ AI Feedback: Excellent design, great docs │ │
│ Settings│ │ [View Details] [Override Score] [Add Comment] │ │
│ │ ├────────────────────────────────────────────────┤ │
│ │ │ Code Optimization Oct 22 Score: 85% │ │
│ [❓] │ │ AI Feedback: Good logic, needs better comments │ │
│ Help │ │ [View Details] [Override Score] [Add Comment] │ │
│ │ └────────────────────────────────────────────────┘ │
│ │ │
│ │ Strengths: │
│ │ • Consistent high performance in design │
│ │ • Creative problem-solving approach │
│ │ • Good collaboration with team │
│ │ │
│ │ Areas for Improvement: │
│ │ ⚠️ Code documentation needs work │
│ │ • Testing and debugging skills │
│ │ │
│ │ Coach Notes (Private) │
│ │ ┌────────────────────────────────────────────────┐ │
│ │ │ [Add a note about this student...] │ │
│ │ │ │ │
│ │ └────────────────────────────────────────────────┘ │
│ │ [Save Note] │
│ │ │
│ │ [✉️ Email Student] [👨👩👧 Contact Parents] [📄 Full Report] │
│ │ │
└─────────┴───────────────────────────────────────────────────────┘
3. Coach - Review Submission Page
┌──────────────────────────────────────────────────────────────────┐
│ Top Navigation Bar │
├─Sidebar─┬───────────────────────────────────────────────────────┤
│ │ Review Submission │
│ [🏠] │ Student: Sarah Jones • Assignment: Robot Design │
│ Dash. │ Submitted: Oct 25, 2025 10:30 AM │
│ │ │
│ [📋] │ AI Evaluation Score: 92% │
│ Assess. │ Confidence: High (95%) │
│ │ [Accept AI Score] [Override Score] │
│ [📤] │ │
│ Submit. │ ┌──────────────────────────────────────────────────┐ │
│ │ │ Uploaded Files │ │
│ [📊] │ ├──────────────────────────────────────────────────┤ │
│ Reports │ │ 📷 robot_front.jpg [View Full Size] │ │
│ │ │ 📷 robot_side.jpg [View Full Size] │ │
│ [💬] │ │ 📄 main.py [View Code] │ │
│ Forum │ │ 📘 notebook.pdf [View PDF] │ │
│ │ └──────────────────────────────────────────────────┘ │
│ [⚙️] │ │
│ Settings│ AI-Generated Feedback │
│ │ ┌──────────────────────────────────────────────────┐ │
│ [❓] │ │ Robot Design (92%) │ │
│ Help │ │ Excellent mechanical structure with thoughtful │ │
│ │ │ component placement. The gear ratio chosen is │ │
│ │ │ optimal for the task. │ │
│ │ │ │ │
│ │ │ Suggestions: │ │
│ │ │ • Consider adding reinforcement to the lift arm │ │
│ │ │ • Wire management could be improved │ │
│ │ │ [Edit Feedback] │ │
│ │ └──────────────────────────────────────────────────┘ │
│ │ │
│ │ Coach Override (Optional) │
│ │ ┌────────────────────────────────────────────────┐ │
│ │ │ Adjusted Score: [92] % │ │
│ │ │ │ │
│ │ │ Additional Comments: │ │
│ │ │ [Add your comments here...] │ │
│ │ │ │ │
│ │ └────────────────────────────────────────────────┘ │
│ │ │
│ │ [Approve & Send to Student] [Request Re-submission] │
│ │ [Save Draft] │
│ │ │
└─────────┴───────────────────────────────────────────────────────┘
Features:
- AI score with confidence level
- File preview
- AI-generated feedback (editable)
- Coach override option
- Approval workflow
- Comments section
4. Coach - Class Analytics
┌──────────────────────────────────────────────────────────────────┐
│ Top Navigation Bar │
├─Sidebar─┬───────────────────────────────────────────────────────┤
│ │ Class Analytics │
│ [🏠] │ Robotics 101 - Period 3 │
│ Dash. │ Date Range: [Last 30 Days ▼] [📥 Export Report]│
│ │ │
│ [📋] │ Performance Overview │
│ Assess. │ ┌──────────────────────────────────────────────────┐ │
│ │ │ Class Average: 82% (↗ +5% vs last month) │ │
│ [📤] │ │ Top Performer: Michael Chen (92%) │ │
│ Submit. │ │ Needs Attention: 3 students below 70% │ │
│ │ └──────────────────────────────────────────────────┘ │
│ [📊] │ │
│ Reports │ Score Distribution │
│ │ [Bar chart: X-axis: Score ranges, Y-axis: # students]│
│ [💬] │ │
│ Forum │ Skill Breakdown (Class Average) │
│ │ ┌──────────────────────────────────────────────────┐ │
│ [⚙️] │ │ Programming 80% [===============> ] │ │
│ Settings│ │ Engineering Design 85% [=================> ] │ │
│ │ │ Problem Solving 82% [================> ] │ │
│ [❓] │ │ Documentation 78% [==============> ] │ │
│ Help │ └──────────────────────────────────────────────────┘ │
│ │ │
│ │ Engagement Metrics │
│ │ • Average submissions per week: 3.2 │
│ │ • Forum participation: 68% of students │
│ │ • On-time submission rate: 85% │
│ │ │
│ │ Trending Topics (Forum) │
│ │ 1. Motor control optimization │
│ │ 2. Sensor calibration │
│ │ 3. Engineering notebook tips │
│ │ │
│ │ At-Risk Students (Below 70%) │
│ │ ┌────────────────────────────────────────────────┐ │
│ │ │ Emma Williams 65% Last active: 5 days ago │ │
│ │ │ [View Profile] [Send Message] │ │
│ │ ├────────────────────────────────────────────────┤ │
│ │ │ Tom Bradley 68% Last active: 3 days ago │ │
│ │ │ [View Profile] [Send Message] │ │
│ │ └────────────────────────────────────────────────┘ │
│ │ │
│ │ Recommendations │
│ │ • Focus class sessions on documentation skills │
│ │ • Consider peer mentoring for at-risk students │
│ │ • Review programming concepts from Week 3 │
│ │ │
└─────────┴───────────────────────────────────────────────────────┘
Admin Screens
1. Admin Dashboard
┌──────────────────────────────────────────────────────────────────┐
│ Top Navigation Bar │
├─Sidebar─┬───────────────────────────────────────────────────────┤
│ │ System Overview │
│ [🏠] │ │
│ Dash. │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ │ Total │ │ Active │ │ Submis. │ │ AI Calls │ │
│ [👥] │ │ Users │ │ Users │ │ Today │ │ Today │ │
│ Users │ │ 1,247 │ │ 856 │ │ 342 │ │ 1,523 │ │
│ │ │ ↗ +52 │ │ ↗ +23 │ │ ↗ +18 │ │ ↗ +234 │ │
│ [🏫] │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
│ Org. │ │
│ │ System Health │
│ [📊] │ ┌────────────────────────────────────────────────┐ │
│ Analytics│ │ API Response Time: 145ms [Normal] │ │
│ │ │ Database Queries: 892/min [Normal] │ │
│ [🔧] │ │ Error Rate: 0.02% [Good] │ │
│ System │ │ Uptime: 99.8% [Excellent] │ │
│ │ └────────────────────────────────────────────────┘ │
│ [💰] │ │
│ Costs │ Cost Overview (This Month) │
│ │ ┌────────────────────────────────────────────────┐ │
│ [⚙️] │ │ Cloud Infrastructure: $1,850 │ │
│ Settings│ │ AI API (Vertex): $520 │ │
│ │ │ Storage: $95 │ │
│ [❓] │ │ Total: $2,465 │ │
│ Help │ │ Budget: $3,000 [====================> ] │ │
│ │ └────────────────────────────────────────────────┘ │
│ │ │
│ │ Recent Activity │
│ │ • New organization added: Lincoln High School │
│ │ • 52 new student registrations today │
│ │ • System update deployed successfully (v1.2.3) │
│ │ │
│ │ Alerts & Notifications │
│ │ ⚠️ AI API usage approaching 80% of budget │
│ │ ✓ All security scans passed │
│ │ ℹ️ Database backup completed successfully │
│ │ │
└─────────┴───────────────────────────────────────────────────────┘
2. Admin - User Management
┌──────────────────────────────────────────────────────────────────┐
│ Top Navigation Bar │
├─Sidebar─┬───────────────────────────────────────────────────────┤
│ │ User Management [+ Add User] │
│ [🏠] │ │
│ Dash. │ [Search users.....................] [🔍] │
│ │ Filter: [All Users ▼] [All Roles ▼] [All Orgs ▼] │
│ [👥] │ │
│ Users │ ┌────────────────────────────────────────────────────┐│
│ │ │ Name Email Role Org Status ││
│ [🏫] │ ├────────────────────────────────────────────────────┤│
│ Org. │ │ Sarah J. sarah@... Student Lin... ✓ ││
│ │ │ Mike Chen mike@... Student Lin... ✓ ││
│ [📊] │ │ Jane Doe jane@... Coach Lin... ✓ ││
│ Analytics│ │ Mary Parent mary@... Parent Lin... ✓ ││
│ │ │ Tom Bradley tom@... Student Lin... ⚠️ ││
│ [🔧] │ │ [More...] ││
│ System │ └────────────────────────────────────────────────────┘│
│ │ │
│ [💰] │ ⚠️ = Account suspended │
│ Costs │ │
│ │ Bulk Actions: [📥 Import CSV] [📤 Export Users] │
│ [⚙️] │ [✉️ Send Email] [🔒 Manage Permissions] │
│ Settings│ │
│ │ │
│ [❓] │ User Details Panel (click row to view) │
│ Help │ ┌────────────────────────────────────────────────┐ │
│ │ │ Select a user to view details │ │
│ │ └────────────────────────────────────────────────┘ │
│ │ │
└─────────┴───────────────────────────────────────────────────────┘
Shared Screens
1. Login Page
┌──────────────────────────────────────────────────────────────────┐
│ │
│ │
│ [STEMBlock.ai Logo] │
│ │
│ AI-Powered STEM Education Platform │
│ │
│ ┌────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Welcome Back! │ │
│ │ │ │
│ │ Email Address │ │
│ │ [_________________________________] │ │
│ │ │ │
│ │ Password │ │
│ │ [_________________________________] [👁️] │ │
│ │ │ │
│ │ ☐ Remember me Forgot password? │ │
│ │ │ │
│ │ [ Sign In ] │ │
│ │ │ │
│ │ ──────────── or ──────────── │ │
│ │ │ │
│ │ [🔵 Sign in with Google ] │ │
│ │ │ │
│ │ Don't have an account? Sign up │ │
│ │ │ │
│ └────────────────────────────────────────────────┘ │
│ │
│ │
│ Privacy Policy • Terms of Service • Help │
│ │
└──────────────────────────────────────────────────────────────────┘
Features:
- Centered card design
- Email/password fields
- Remember me checkbox
- Forgot password link
- Google OAuth button
- Sign up link
- Clean, simple layout
2. Registration Page (Student)
┌──────────────────────────────────────────────────────────────────┐
│ [STEMBlock.ai Logo] Step 1/3 │
├──────────────────────────────────────────────────────────────────┤
│ │
│ Create Your Account │
│ │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ Step 1: Basic Information [●───────────────] │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ │
│ First Name │
│ [_____________________________] │
│ │
│ Last Name │
│ [_____________________________] │
│ │
│ Email Address │
│ [_____________________________] │
│ This will be your username │
│ │
│ Password │
│ [_____________________________] [👁️] │
│ Must be at least 8 characters │
│ │
│ Confirm Password │
│ [_____________________________] [👁️] │
│ │
│ Age │
│ [__] years old │
│ │
│ ☐ I agree to the Terms of Service and Privacy Policy │
│ │
│ [Cancel] [Next Step →] │
│ │
└──────────────────────────────────────────────────────────────────┘
3. Settings Page
┌──────────────────────────────────────────────────────────────────┐
│ Top Navigation Bar │
├──────────────────────────────────────────────────────────────────┤
│ │
│ Settings │
│ │
│ Tabs: [Profile] [Account] [Notifications] [Privacy] [Help] │
│ │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ Profile Settings │ │
│ ├─────────────────────────────────────────────────────────────┤ │
│ │ │ │
│ │ Profile Picture │ │
│ │ [Avatar] [Change Photo] [Remove] │ │
│ │ │ │
│ │ Display Name │ │
│ │ [Alex Johnson_______________] │ │
│ │ │ │
│ │ Bio │ │
│ │ [______________________________] │ │
│ │ [______________________________] │ │
│ │ [______________________________] │ │
│ │ │ │
│ │ VEX Platform │ │
│ │ ( ) VEX IQ (●) VEX V5 ( ) Both │ │
│ │ │ │
│ │ Team Name │ │
│ │ [Lightning Bolts___________] │ │
│ │ │ │
│ │ [Cancel] [Save Changes] │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────────────────┘
4. Help Center / FAQ
┌──────────────────────────────────────────────────────────────────┐
│ Top Navigation Bar │
├──────────────────────────────────────────────────────────────────┤
│ │
│ Help Center │
│ │
│ [Search for help........................] [🔍] │
│ │
│ Popular Topics │
│ ┌──────────────────┐ ┌──────────────────┐ ┌───────────────┐ │
│ │ 📤 Submitting │ │ 📊 Understanding │ │ 💬 Forum │ │
│ │ Work │ │ Your Report │ │ Help │ │
│ │ │ │ │ │ │ │
│ └──────────────────┘ └──────────────────┘ └───────────────┘ │
│ │
│ Frequently Asked Questions │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ ▸ How do I upload my robot photos? │ │
│ ├─────────────────────────────────────────────────────────────┤ │
│ │ ▸ What file formats are supported? │ │
│ ├─────────────────────────────────────────────────────────────┤ │
│ │ ▸ How is my work evaluated? │ │
│ ├─────────────────────────────────────────────────────────────┤ │
│ │ ▸ Can I resubmit my assignment? │ │
│ ├─────────────────────────────────────────────────────────────┤ │
│ │ ▸ How do I invite my parents to view my progress? │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ │
│ Video Tutorials │
│ [Video thumbnail] [Video thumbnail] [Video thumbnail] │
│ Getting Started Submit Assignment Understand Reports │
│ │
│ Still need help? │
│ [Contact Support] [Live Chat] [Schedule Demo] │
│ │
└──────────────────────────────────────────────────────────────────┘
Mobile Considerations
Mobile Navigation Pattern
┌─────────────────────┐
│ Top Bar │
│ [☰] [Logo] [👤] │
├─────────────────────┤
│ │
│ │
│ Main Content │
│ (Full Width) │
│ │
│ │
│ │
│ │
│ │
├─────────────────────┤
│ Bottom Nav (Tabs) │
│ [🏠][📋][📤][📊][💬]│
└─────────────────────┘
Key Mobile Adaptations:
- Bottom tab navigation (5 main items)
- Hamburger menu for secondary items
- Full-width cards
- Larger touch targets (48px minimum)
- Simplified layouts (single column)
- Sticky headers
- Pull-to-refresh
- Swipe gestures for navigation
Responsive Breakpoints Summary
Mobile (< 640px)
- Single column layout
- Bottom tab navigation
- Hamburger menu
- Stacked cards
- Full-width buttons
- Larger text (18px base for young students)
Tablet (640px - 1023px)
- 2-column grid
- Collapsible sidebar
- Hybrid navigation
- Medium card sizes
- Optimized for touch
Desktop (1024px+)
- 3-4 column grid
- Persistent sidebar
- Top + side navigation
- Full feature set
- Data-rich displays
Accessibility Features
For All Screens:
- Keyboard Navigation: Tab order, skip links
- Screen Reader: ARIA labels, semantic HTML
- Focus Indicators: Visible 3px blue ring
- Color Contrast: WCAG AA compliant
- Text Scaling: Responsive to browser zoom
- Alt Text: All images and icons
- Error Messages: Clear, actionable
- Form Labels: Properly associated
For Young Students:
- Larger Targets: Minimum 48px
- Simple Language: Age-appropriate
- Visual Cues: Icons + text labels
- Audio Feedback: Optional for interactions
- Reduced Motion: Respect user preferences
Empty States
Empty Dashboard (New Student)
┌────────────────────────────────────┐
│ │
│ 🎒 │
│ │
│ Welcome to STEMBlock.ai! │
│ │
│ You don't have any assignments │
│ yet. Your coach will add them │
│ soon! │
│ │
│ [Explore Forum] [Watch Tutorial]│
│ │
└────────────────────────────────────┘
No Search Results
┌────────────────────────────────────┐
│ 🔍 │
│ │
│ No results found │
│ │
│ Try different keywords or │
│ check your spelling │
│ │
│ [Clear Search] │
│ │
└────────────────────────────────────┘
Loading States
Page Loading
┌────────────────────────────────────┐
│ │
│ [Spinner Animation] │
│ │
│ Loading... │
│ │
└────────────────────────────────────┘
Inline Loading (Submission Processing)
┌────────────────────────────────────┐
│ Processing your submission... │
│ [===================> ] 75% │
│ │
│ AI is analyzing your work │
│ This may take a few minutes │
└────────────────────────────────────┘
Error States
Generic Error
┌────────────────────────────────────┐
│ ⚠️ │
│ │
│ Something went wrong │
│ │
│ We couldn't load this page. │
│ Please try again. │
│ │
│ [Try Again] [Go Home] │
│ │
└────────────────────────────────────┘
Form Validation Error
Email Address
[student@example___________]
❌ Please enter a valid email address
Success States
Submission Success
┌────────────────────────────────────┐
│ ✅ │
│ │
│ Assignment Submitted! │
│ │
│ Your work has been submitted │
│ successfully. You'll receive │
│ feedback soon! │
│ │
│ [View Dashboard] [Submit More] │
│ │
└────────────────────────────────────┘
Design Deliverables Checklist
For the UX Designer to create in Figma:
Student Screens
- Dashboard (ages 6-10)
- Dashboard (ages 11-14)
- Dashboard (ages 15-18)
- Assessment/Quiz page
- Submission upload page (wizard)
- Report/Feedback page
- Forum list view
- Forum post detail view
- Profile page
- Settings page
Parent Screens
- Parent dashboard
- Child selector component
- Child report view
- Settings page
Coach Screens
- Coach dashboard
- Class overview
- Student detail view
- Submission review page
- Class analytics page
- Create assignment page
Admin Screens
- Admin dashboard
- User management
- Organization management
- System settings
Shared/Common
- Login page
- Registration flow (3 steps)
- Navigation components
- Empty states
- Loading states
- Error states
- Success states
- Modal dialogs
- Toast notifications
- Help center/FAQ
Responsive Views
- Mobile versions (all key screens)
- Tablet versions (all key screens)
- Desktop versions (all key screens)
Next Steps for Designer:
- Review UI/UX specification document
- Review design system documentation
- Create Figma file with proper organization
- Design components library first
- Apply components to screens
- Create prototypes for user testing
- Share with development team for feedback
Design Timeline Estimate:
- Component library: 1 week
- Core screens (MVP): 2 weeks
- Responsive variations: 1 week
- Prototyping & iterations: 1 week
- Total: ~5 weeks
Document Status: Ready for Design Phase Last Updated: October 25, 2025 Version: 1.0