🎨 MVP Design Principles¶
Core Principles¶
1. Mobile-First for Directors¶
- Directors check on phones
- Large touch targets
- Clear status indicators
- 5-minute interactions
2. Desktop-First for Management¶
- Management works on computers
- Data entry optimized
- Bulk actions available
- Keyboard shortcuts
3. Clarity Over Featurest¶
- Show what matters now
- Hide advanced options
- Progressive disclosure
- No feature creep
Visual Design¶
Color System¶
- Green: Compliant/Good
- Amber: Attention needed
- Red: Critical/Overdue
- Blue: Information/Actions
Typography¶
- System fonts (fast loading)
- Large, readable text
- Clear hierarchy
- Minimal font weights
Layout¶
- Single column mobile
- Two column desktop max
- Generous whitespace
- Logical grouping
Key Screens (MVP)¶
1. Director Dashboard¶
- Traffic light overview
- 3-5 key metrics
- Recent decisions
- Next actions
2. Essential Eight Assessment¶
- Current maturity visual
- Progress indicators
- Evidence status
- Action items
3. Board Report¶
- PDF-optimized layout
- Executive summary first
- Charts and graphs
- Professional styling
Design Constraints¶
Technical¶
- SvelteKit + Tailwind CSS
- No custom components initially
- shadcn-svelte when available
- Cloudflare Pages hosting
Performance¶
- < 3 second load time
- Works on 3G connections
- Minimal JavaScript
- Optimized images
What We're NOT Doing¶
- Custom design system
- Complex animations
- Multiple themes
- Native mobile apps
- Offline mode
- Real-time updates
Success Metrics¶
- Directors can check status in < 1 minute
- Management can complete tasks without training
- Board reports look professional
- Works on 5-year-old devices
- Accessible (WCAG 2.1 AA)
Keep it simple. Make it work. Make it clear.