Project Overview
vAutoStock Mobile App - Phase 1
A modern, AI-powered mobile application for automotive preparation workflow management.
Platform
React Native (iOS & Android)
Target Users
Technicians, Valeters, Managers
Key Features
- NFC Vehicle Identification
- Voice Input (AI-powered)
- Camera OCR Scanning
- GPS Parking Tracking
- Job Management
- Time Clock
Design Principles
- < 5 second vehicle identification
- Dark theme optimized
- Hands-free operation support
- Offline-first capabilities
- WCAG accessibility standards
Timeline & Milestones
Week 1-2: Design & Prototyping
UI/UX design, component library, interactive prototype
Week 3-4: Backend API Development
5 new PHP endpoints, AI middleware setup
Week 5-7: Alpha Development
Core features implementation, internal testing
Week 8-10: Beta Testing
User testing with 2-3 pilot sites, refinements
Week 11-12: Release Preparation
App Store submission, documentation, training
Brand Colors
Primary Color
Primary Green
#44ba82
Used for primary actions, branding, key UI elements
Neutral Colors
Black
#000000
Text, icons
White
#ffffff
Backgrounds, cards
UI Grays (Dark Theme)
Background
#121212
Surface
#1e1e1e
Elevated
#2d2d2d
Secondary Text
#8e8e93
Semantic Colors
Success
#34c759
Warning
#ff9500
Error
#ff3b30
Info
#0a84ff
Typography
System Font Stack
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif
Using native system fonts for optimal performance and familiarity across platforms.
Type Scale
Heading 1 - 32px Bold
Used for: Main screen titles
Heading 2 - 24px Semibold
Used for: Section headers, card titles
Heading 3 - 20px Semibold
Used for: Subsections, list headers
Body - 16px Regular
Used for: Main content, descriptions
Small - 14px Regular
Used for: Secondary info, timestamps
Caption - 12px Regular
Used for: Labels, hints, metadata
UI Components
Buttons
Input Fields
Cards
Vehicle Card
Stock: SD2323 • Reg: AB12CDE
In ProgressJob Card
£250.00 • 3.0 hours
PendingStatus Badges
App Screens
Review and approve each screen design below
0. Login Screen
Design Notes:
- Clean, professional login interface with dark theme
- OAuth2/OIDC integration with existing vAutoStock system
- Biometric authentication (Face ID/Touch ID) for quick re-login
- Password reset functionality via email
- Secure token storage using encrypted storage
- Auto-logout after 30 minutes of inactivity
- Large, accessible input fields for easy typing
1. Home / Dashboard
Welcome back, John
Today's Activity
Quick Actions
Design Notes:
- Dark theme for workshop lighting conditions
- Large touch targets for gloved hands
- Quick access to all identification methods
- Real-time activity stats
2. Vehicle Lookup
Find Vehicle
Ready to Scan
Hold your phone near the NFC tag
💡 Tap the tag located on the windscreen or door jamb
Design Notes:
- Tab-based navigation between identification methods
- Visual feedback for NFC scanning state
- < 2 second vehicle identification via NFC
- Contextual help messages
3. Vehicle Detail
AB12 CDE
BMW 3 Series
2020 • Black • Stock: SD2323
Workshop - In ProgressActive Jobs (3)
Design Notes:
- Vehicle info at top with current status
- Quick action buttons for common tasks
- Job list with status indicators
- Easy access to time tracking and job management
4. Voice Job Entry (AI-Powered)
Add Job (Voice)
Recording...
Tap to stop
"This car needs front bumper respray and new brake pads"
AI Matched Jobs
Design Notes:
- Visual feedback during voice recording
- Real-time transcription display
- AI matching with confidence scores
- User can review and select/deselect matched jobs
- < 5 second processing time (voice → matched jobs)
5. GPS Parking / Find Car
Park Vehicle
Current Location
Accuracy: 8m
Parking Location
Design Notes:
- In-app map view showing current location
- GPS coordinates captured automatically
- Optional notes and photo attachment
- Accuracy indicator to ensure reliable positioning
- Can be accessed via "Find Car" to navigate back
6. Time Clock
BMW 3 Series
Currently Clocked On
Started at 09:30 AM
Today's Activity
Design Notes:
- Live timer showing current session duration
- One-tap clock on/off for quick tracking
- Daily activity summary with all time entries
- Total hours tracked today prominently displayed
User Flows
Flow 1: Quick Vehicle Identification & Clock On (< 5 seconds)
Open App
User launches vAutoStock app
Tap "Scan NFC"
From home screen quick actions
Scan Tag
Hold phone near vehicle NFC tag
Vehicle Loaded
Vehicle details displayed (< 2s)
Clock On
Tap "Clock On" button
Flow 2: Voice Job Addition
Vehicle Detail Screen
User viewing vehicle info
Tap "Add Job"
Opens job entry methods
Choose Voice Input
Tap microphone button
Speak Description
"Front bumper respray and brake pads"
AI Matches Jobs
Shows matched jobs with confidence
Confirm & Add
User reviews and confirms
Flow 3: GPS Parking
Vehicle Detail
User on vehicle screen
Tap "Park Car"
Opens GPS parking screen
GPS Auto-Capture
Current location detected
Add Notes/Photo
Optional: "Bay 5, Customer area"
Save Location
Stored with vehicle record