aerainsight

byMuhammad Niyas

Build a responsive, premium mobile-first web app concept called AeraInsight. PRODUCT DEFINITION AeraInsight is a non-diagnostic Skin Decision Intelligence system designed for UAE and GCC skincare users. Its core question is: “What can my skin safely handle today?” AeraInsight is not: - a skin-diagnosis app - a generic skincare recommendation app - a beauty-content platform - a product marketplace - an ingredient encyclopedia - a replacement for a dermatologist The product combines the user’s latest weekly skin read with environmental pressure, skin sensitivity, routine load, saved products, and recent skin responses to help the user make safer cosmetic skincare decisions. CORE EXPERIENCE PRINCIPLE One decision. One reason. One next step. Details only when needed. The interface must never feel like a clinical report, analytics dashboard, or long assessment. It should feel like a calm, intelligent skincare companion that immediately understands the user and tells them what matters. PRIMARY USER Design for skincare users aged 18–40 who: - experience sensitivity, breakouts, dryness, redness, congestion, or barrier discomfort - feel confused by conflicting skincare advice - use several products or active ingredients - are affected by UAE heat, UV, humidity, dust, sweat, and indoor air conditioning - want clear decisions without needing to understand skincare science DESIGN DIRECTION Create a calm, premium, emotionally reassuring experience. Visual style: - sophisticated and futuristic, but warm and human - deep charcoal or near-black background - warm ivory and soft beige surfaces - muted aqua as the primary accent - subtle coral or amber only for caution - soft gradients and restrained ambient glow - generous spacing - rounded premium cards - elegant typography - minimal icons - clear hierarchy - smooth, subtle interactions Avoid: - medical imagery - harsh red warning screens - excessive charts - dense text - grids full of metrics - beauty-store aesthetics - gamification - social feeds - overwhelming dashboards - generic AI chatbot styling - large sections of explanatory copy The user should understand the main decision within five seconds. APP STRUCTURE Use a fixed mobile bottom navigation with five destinations: 1. Today 2. Routine 3. Product 4. Insights 5. Profile For desktop, adapt this into a clean side navigation or spacious centered app shell. SCREEN 1 — TODAY Today is the primary command centre and the most important screen. It must answer immediately: “What can my skin safely handle today?” Top area: - Personal greeting, such as “Good morning, Maya” - Small contextual line showing that the guidance uses the latest skin read and today’s conditions - Do not make the scan feel live if it is based on a previous weekly read Primary decision card: - Status example: “Keep today gentle” - One clear reason: “Your latest read showed barrier pressure, and today’s heat may add more stress.” - One next step: “Use a simple routine and pause strong actives tonight.” - Primary action: “See today’s routine” Skin Stress Index: - Display one calm, easy-to-understand level such as Low, Balanced, Elevated, or High - Example: “Elevated” - Include a small information button explaining that this estimates how much combined pressure the skin may be handling - Do not present it as a diagnosis or precise medical measurement Main focus: - Example: “Protect your skin barrier” - One short explanation of why this is the current priority Skin outlook: - Show what the latest read noticed in plain language - Example: - “Some dryness around the cheeks” - “Mild visible redness” - “A little congestion around the T-zone” - Clearly distinguish observations from diagnoses - Use wording such as “noticed,” “appears,” and “may” Compact use/avoid guidance: - Use today: gentle cleanser, moisturiser, sunscreen - Pause today: exfoliating acids and retinoids - Keep this section short; detailed execution belongs in Routine Optional user control: - “Is something else bothering you today?” - Allow the user to choose an optional focus such as dryness, breakouts, redness, sensitivity, dark circles, or no change - Do not force daily questions Secondary context: - Latest skin read age - Today’s weather or environmental pressure - Next scan eligibility - These details should remain visually secondary SCREEN 2 — ROUTINE This screen turns today’s decision into action. Show: - Morning routine - Evening routine - What to use - What to pause - Saved products that fit today - A short reason beside every changed or paused step Example morning routine: 1. Gentle cleanser 2. Barrier-support moisturiser 3. Broad-spectrum sunscreen Example evening routine: 1. Gentle cleanser 2. Hydrating serum 3. Moisturiser 4. Retinoid — paused tonight Use clear statuses: - Suitable today - Use with care - Pause today A product should influence this routine only if the user has intentionally saved it to “My Products.” Do not turn the Routine screen into a product-shopping page. SCREEN 3 — PRODUCT This is an independent Product Check experience. Main question: “Can I use this today?” Allow the user to: - Search for a product - Scan or upload its label - Paste the product name - View recently checked products Product result should provide: - A clear outcome: Suitable today, Use with care, or Better to pause - One reason based on the user’s current context - One practical next step - Product role - Important ingredient considerations in plain language - “Worth adding?” guidance for products the user does not own - “Add to My Products” action Example: “Use with care” “Your skin currently appears more sensitive, and this exfoliating formula may add unnecessary pressure.” “Wait until your skin stress returns to a more balanced level.” Avoid declaring products universally good, bad, safe, or unsafe. SCREEN 4 — INSIGHTS Help the user understand their skin without presenting a long report. Sections: - What we noticed - Current main focus - What may be changing - Also watching - Comparison with the previous weekly read - Simple timeline of recent skin reads - Relevant skin-response patterns Example: “Your cheek dryness appears calmer than last week, while redness remains similar.” Use small visual indicators and concise comparisons. Avoid complex graphs and scores without explanations. SCREEN 5 — PROFILE Include: - My Products - Skin history - Latest and previous scans - Skin preferences - Sensitivity information - Recent skin responses - Notifications - Privacy and permissions - Help and safety information - Sign out WEEKLY SCAN FLOW Create a guided camera flow that feels calm and trustworthy. Steps: 1. Explain what the scan can and cannot do 2. Confirm the user is 18 or older 3. Request camera permission 4. Provide lighting and positioning guidance 5. Capture the skin read 6. Show a thoughtful processing experience 7. Present the new Today decision The scan normally happens every seven days. Do not design the product as though a new facial scan happens every day. PROCESSING EXPERIENCE Avoid a technical loading screen. Use short progressive messages such as: - “Reading visible skin signals” - “Considering your recent skin responses” - “Checking today’s environmental pressure” - “Preparing your clearest next step” Add subtle, premium motion. Do not make unrealistic claims about what is being measured. SAFETY AND TRUST Use calm non-diagnostic language throughout. Include an unobtrusive safety boundary: “AeraInsight provides cosmetic skincare guidance and does not diagnose or treat medical conditions.” When potentially concerning symptoms are reported, advise the user to stop irritating products and seek appropriate professional care. Do not diagnose the condition. PROTOTYPE REQUIREMENTS Create a polished clickable prototype using realistic mock user data. Include: - complete Today screen - morning and evening Routine states - Product Check search and result - Insights comparison - Profile and My Products - weekly scan and processing flow - light and dark modes - mobile and desktop responsiveness - empty, loading, error, and stale-read states - subtle transitions and micro-interactions Build reusable components with a consistent design system. If code is generated, use: - Next.js - TypeScript - Tailwind CSS - accessible semantic components - responsive layouts - mock data separated from UI components Do not create real diagnostic algorithms or medical scoring logic. Use clearly labelled mock data for the prototype. SUCCESS CRITERIA A new user should understand within five seconds: 1. What their skin appears to be experiencing 2. What AeraInsight wants them to do today 3. Why that decision was made 4. What action to take next The final experience should feel calm, personal, useful, premium, and worth returning to—not like a report the user reads once and leaves.