JEWELLINK EDU – FULL UI WIREFRAME SYSTEM
🧭 APP STRUCTURE (Navigation)
Bottom Navigation (Mobile App):
[ Home ] [ Messages ] [ Transport ] [ Activities ] [ Profile ]
📱 1. HOME DASHBOARD (Main Screen)
🎯 Purpose:
Everything a parent needs in one glance
🧩 Wireframe Layout:
----------------------------------👦 EJ Hatten (Grade 6)📍 Katy Middle School🟢 STATUS CARD"On Bus • Bus #12"ETA: 5 minutes----------------------------------📅 TODAY- Math Homework Due- Science Quiz Tomorrow----------------------------------🔔 ALERTS⚠ Missing Assignment (ELA)📩 New Message from Teacher----------------------------------⚡ QUICK ACTIONS[ Change Pickup ][ Message Teacher ][ Report Absence ]----------------------------------
👉 This screen should feel like:
Uber (status clarity) 
Apple (clean + minimal) 
💬 2. MESSAGING SCREEN
🎯 Purpose:
Replace ALL school communication tools
🧩 Wireframe:
----------------------------------Messages👩‍🏫 Mrs. Johnson (Math)"EJ did great today!"🏫 School Admin"Early dismissal Friday"----------------------------------[ Tap Conversation ]----------------------------------CHAT VIEW:Mrs. Johnson:"Reminder: Homework due"[ 🤖 AI Summary Button ]Type message...----------------------------------
🔥 Feature:
“AI Summary” → shortens long teacher messages 
🚌 3. TRANSPORTATION (Live Tracking)
🎯 Purpose:
Compete directly with SMART Tag
🧩 Wireframe:
----------------------------------🚌 Bus #12📍 Live Map (Google Maps)📌 Current Location⏱ ETA: 4 minutes✔ EJ scanned ON at 3:05 PM----------------------------------🔔 Notify Me When Close----------------------------------
🚗 4. PICKUP / DISMISSAL
🎯 Purpose:
Eliminate school pickup chaos
🧩 Wireframe:
----------------------------------Today's Pickup Plan✅ Car Rider (You)Pickup Time: 3:30 PM----------------------------------[ Change Pickup Method ]Options:- Car Rider- Bus- Walker- Aftercare----------------------------------👤 Authorized Pickup:+ Add Person----------------------------------📍 You are 2 mins away----------------------------------
📚 5. ACTIVITIES (Homework + Behavior)
🎯 Purpose:
Keep parents informed daily
🧩 Wireframe:
----------------------------------📚 AssignmentsMath:"Fractions Worksheet"❌ Not CompletedScience:"Study for Quiz"✔ Completed----------------------------------📊 Behavior⭐ Rating: 4/5"Great participation today"----------------------------------🤖 AI Help:"Need help solving this problem?"----------------------------------
👤 6. PROFILE / SETTINGS
🎯 Purpose:
Control + personalization
🧩 Wireframe:
----------------------------------👤 ProfileParent: Jermaine HattenChildren:- EJ (Grade 6)----------------------------------⚙ Settings- Notifications- Pickup Preferences- Language----------------------------------🔐 Security- Change Password- Face ID / Biometrics----------------------------------
🏫 7. ADMIN PANEL (WEB WIREFRAME)
🎯 This is what schools will see
🧩 Dashboard:
----------------------------------📊 School OverviewStudents: 1,200Active Buses: 25Alerts: 3----------------------------------📍 Live Map (All Buses)----------------------------------📢 Quick Actions:[ Send Alert ][ Manage Pickup ][ View Messages ]----------------------------------
🧩 Pickup Control:
----------------------------------🚗 Pickup Queue (Live)Student Name | Status | Pickup Type----------------------------------EJ Hatten     Waiting   Car Rider----------------------------------[ Mark Picked Up ]----------------------------------
🔗 CLICKABLE FLOW (Prototype Logic)
When building in Figma, connect screens like this:
Login → DashboardDashboard →    Messages   Transport   Pickup   ActivitiesMessages → ChatTransport → Live MapPickup → Change MethodActivities → Homework Details
🎨 DESIGN STYLE GUIDE (Apply This)
Colors:
Navy: #1A3A6D 
Gold: #F0B540 
Light Gray: #F5F7FA 
White: #FFFFFF 
UI Style:
Rounded cards (modern) 
Soft shadows 
Minimal clutter 
Big readable text