LooView UX/UI Design Guide
Design reference for the world’s first AI-powered toilet review platform
🎨 Brand Guidelines
Color Palette
#0074D9
Main brand color
#000000
Text & UI elements
#28A745
Positive reviews
#FFC107
Queue alerts
Typography
🧠 AI-Powered Unified Interface
Revolutionary Concept: One camera button that adapts to user intent automatically
Smart Camera Interface
Single “Capture Experience” button – AI detects photo type and adapts interface
🤳 Mirror Selfie Detected
Interface transforms to social mode with filters, captions, and Mirror Queen features
🚽 Toilet Photo Detected
Interface transforms to review mode with rating sliders and practical assessments
🔘 Button System
📝 Form Elements
👥 Account Type Differentiation
🕶️ Anonymous Users
Quick Access – Full Core Functionality
- Submit reviews with photos
- Search & discover toilets
- Real-time queue monitoring
- AI-powered photo detection
- No badges or progression
- No Mirror Queen features
- No community interaction
👑 Registered Users
Full Community Access + AI Power
- All anonymous features +
- Badge collection & levels
- Mirror Queen selfie features
- Leaderboard participation
- AI personalized recommendations
- Enhanced privacy controls
- Community likes & comments
🧭 Navigation System
Mobile Bottom Navigation
Anonymous User Adaptation: Community tab shows “Join to participate”, Profile becomes “Account” with sign-up prominence
🛡️ Safety & Accessibility Features
🚨 Emergency Features
Quick access emergency button, location sharing with friends, safety ratings for night use
♿ Accessibility Integration
Voice commands, screen reader optimization, high contrast modes, detailed mobility information
WCAG 2.1 AA Compliance Requirements
- Contrast ratio >4.5:1 for all text
- Font size minimum 14pt (16px) for body text
- Tap targets >44x44px for all interactive elements
- Alt text for all images, especially toilet photos
- Complete keyboard navigation support
🔔 Notification & Messaging
Thanks for making toilets better for everyone! 🚽✨
5 people waiting. Maybe grab a coffee first? ☕
Did it flush away? 🚽
Tone of Voice: Dutch Directness + Global Humor
DO: “This toilet is spotless! 🧼”, “AI detected: Perfect lighting for your Mirror Queen moment! ✨”
DON’T: Crude bathroom humor, shaming language, sarcasm about accessibility issues
⚙️ Technical Constraints
Performance
- Page load: <3 seconds on 3G
- AI processing: <2 seconds
- Image max: 2MB, auto-compress to 800px
- Review text: 500 character limit
Device Support
- Mobile: iOS 12+, Android 8+
- Web: Chrome, Safari, Firefox, Edge (last 2 versions)
- Screen sizes: 320px to 1920px
- Offline capability for core functions
Tech Stack
- Frontend: React Native/Flutter + React.js
- Backend: Firebase (Firestore, Auth, Storage)
- AI: TensorFlow.js + Google Cloud Vision
- Styling: Tailwind CSS / Styled Components
🎯 Implementation Priority
Phase 1: AI-First + Safety Foundation
Focus: Unified camera interface, AI detection, basic safety features, accessibility compliance
Phase 2: Community Features
Focus: Mirror Queen features, gamification, social interactions (registered users only)
Phase 3: Business Intelligence
Focus: Premium features, business partnerships, advanced analytics
🏁 Design Philosophy
“Transform the most complex UX challenge (serving different user needs) into the simplest user experience (one button that always works right). Using AI to eliminate user decisions rather than create more options.”