Project Overview- You are a product designer tasked with creating Wellnest, a mobile-first emotional wellness app built for Gen Z and Millennial university students.
- The app should empower users to reflect on their emotional state daily, track habits and moods, and receive meaningful AI-driven insights. It must feel personal, calming, and emotionally intelligent — without being clinical or overwhelming.
- Please design a high-fidelity, fully interactive mobile app prototype (with clickable screens, smooth transitions, and micro-interactions), grounded in best practices across the following UX planes:Purpose- Target Persona: Overwhelmed students balancing academics, finances, social pressures- Emotional Goal: Develop clarity and resilience through daily reflection- Experience Tone: Warm, encouraging, non-judgmental, like a trusted friend- Privacy: Ensure the emotional safety and privacy focus is felt in every interaction and design decisionFeaturesThe core features include:Mood Tracker: Emoji scale + intensity slider + optional note.- UX: Interactions must be quick, touch-friendly, and accessible for low-energy or distracted users. - Micro-interaction: Emoji animates responsively with slider drag to give immediate feedback and provide animated emoji feedback synced with slider movement.
Guided Journaling: CBT-based daily prompts such as “What helped you feel grounded today?”, increasing depth and frequent use- UX: Expandable text area; animated save confirmation; warning modal on exit with unsaved changes- Micro-interaction: Text-area focus animation; quick “entry saved” toast fades (~1s)
AI Insights: Weekly sentiment summaries, trend highlights, and word clouds.- UX: Visual charts with pinch-to-zoom, tappable data points for detail exploration- Presentation: Blend charts and gentle textual explanation- Enable interactive charts with pinch-to-zoom and tappable data points.- Micro-interactions: Animate graph lines on load, highlight tapped data points with enlargement and colour shift
Habit Check-ins: Track sleep, screen time, and movement with simple toggles or sliders.- UX: Avoid overwhelming with metrics; use clear toggles and sliders- Animation: Toggle switches slide smoothly with colour change on state change
Dashboard: - Combines mood trend line chart, streak counter, and keyword clouds.- UX: Colour highlights on positive streaks; pulsing animation on badges to celebrate achievements- Micro-interactions: Animated graph load, gentle badge pulses, subtle hover/press states
Privacy Controls: - Encryption, opt-in AI, data export options.- UX: Clearly communicate “You control your data” through toggle interactions.
Daily Nudges: - Customisable reminders (frequency/time)- UX: Let users customise frequency/time and disable easily- Animation: Toggle and notification preference changes animate smoothlyFlowsOnboarding:- Intro + mood baseline survey- goal selection (e.g., “better calm”) - Reminder configuration- App overview tour.- UX: Keep onboarding under 90 seconds with progress indicator.- Users should be able to revisit the onboarding flow at any time from the Profile screen, allowing them to reset goals, reminders, or mood tracking preferences.
Daily Flow: - Mood entry → guided journaling prompt → save → instant insight snippet.- UX: Use animated save buttons and friendly “Nice work” confirmations.
Weekly Flow: - Insights navigation → trends and AI summary → next prompt suggestion. - UX: Smooth page transitions; progressive disclosure unlocking after 3+ entries with subtle progress bars or messages like “2 entries to deeper insight”
Navigation:- Bottom tabs—Journal | Mood | Insights | Library - Nav bar — Wellnest logo | profile- UX: Always visible, tactile tap feedback, clear active state highlights- Animation: Tab transitions with subtle slide or fade effects to reinforce location context
Progressive disclosure:- Unlock AI insights after 3+ entries.- UX: Show subtle progress bars or “2 entries to deeper insight” messages.
Offline & Empty States:- Show encouraging prompt cards (“Start your first check-in”) when no data exists.- UX: Journal offline and sync later, with a “sync” icon overlaySkeleton- Mood Entry Screen:- Centred emoji slider- Intensity text label and optional note field- Save button with animated confirmation- UX: Large tap targets, keyboard-aware scrolling when notes active- Micro-interaction & Animation: Provide instant feedback on slider movement (e.g., emoji animates in sync with drag), and animate the save button (e.g., morph into a checkmark upon tap) to reassure users that their input was registered)
Journal Entry Screen:- Prompt header + full-screen text area- Save and back buttons fixed at bottom- UX: Expandable text area; unsaved warning modal when exiting.- Micro-interactions: Add subtle text-area focus animation, and show quick “entry saved” toast that fades out (~1s)—instant feedback builds trust
Dashboard Screen:- Line graph with tappable data points- Sentiment summary card- Streak badge and keyword cloud.- UX: Enable pinch-to-zoom on charts; colour-coded good/bad mood days- Micro-interaction & Animation: Animate graph lines when loaded, enlarge tapped data points, and gently pulse streak badge to emphasise achievements
Library View:- Scrollable cards with date, mood emoji, preview of entry- Filters (date, mood, keywords) at top- UX: Swipe-to-delete with undo support.- Micro-interactions: Animate card swipe with haptic feedback on deletion and show undo banner—combines feedback, reversal, and delight
Profile Screen:- Avatar and mood goal- Toggles for notification, privacy settings, AI opt-in- Export data button- UX: Include a button labeled “Restart Onboarding” or “Refresh My Goals.” Place it beneath goal selection. - Confirm before overwriting previous settings. - Clear logout/account deletion- Include a toggle for Light/Dark Mode. Use OS-level preferences as default, but allow manual override. Place it in the “Settings” section.- Micro-interaction & Animation: Toggles slide and colour-change smoothly; export button shows spinner then success tickUI and Design SystemColour Palette:- White (#FFFFFF) – Primary background.- Peach (Primary 500) – #FBB088 (cards, highlights, supportive UI zones).- Peach Light (Primary 300) – #FFD2B2 (backgrounds, overlays, hover states).- Peach Dark (Primary 700) – #E09470 (emphasis areas, secondary CTAs).- Teal (Secondary 500) – #16938B (primary buttons, active states, charts).- Teal Light (Secondary 300) – #D8EDEB (info banners, panel backgrounds).- Sunny Yellow (Success) – #FFD166 (streak badges, confetti).- Calm Coral (Alert) – #ECAC76 (soft alerts).- Neutrals: Grays from #F4F4FB to #1A1A1A for text and UI elements.
Dark mode:- Ensure all colour variables have accessible dark equivalents.- Use charcoal/midnight tones instead of pure black.- Maintain emotional warmth and brand personality in both modes.
Layout and grids- Use consistent padding: 16px top/bottom, 20px left/right. - Ensure minimum touch target of 44x44px. Apply auto layout for cards and field groups. - Text fields should have 8–12px padding between label, input, and helper text. - Use Figma auto layout” for all containers.- Wrap all text inputs in 8pt grid spacing
Typography:- Use Inter or Work Sans- Dynamic scaling between 16–24ptType Scale:- Body: clamp(1rem, 1vw + 0.75rem, 1.25rem)- Small text: 13–17px for labels- Buttons/CTAs: 19–24px- Sub-headers: 24–30px- Section titles: 29–36px- Main titles: 32–64px, scaling with screen size- UX: Support fluid resizing with accessibility in mind (browser zoom, device settings).
Line-height:- Body: 1.4–1.5- Headings: 1.2–1.3
Imagery: - Abstract line art shifting subtly with user tone (avoid clichés - use minimal, empowering visuals)- Use high-quality photographic placeholders or stock assets in screens like onboarding, profile, and dashboard. Suggested image themes: students journaling, stretching, meditating, studying in relaxed settings. Include image frames in the mockups with descriptive alt text if photography cannot be embedded directly.
Microcopy:- Friendly, varying daily (e.g., “Nice work logging today!”) with system-generated variation
Accessibility:- ≥4.5:1 colour contrast- voiceover labels- dynamic text- animation disable option.
Other Considerations- Use native iOS components where appropriate for performance and familiarity- Full offline journaling support with seamless sync on connectivity- AI powered by lightweight, privacy-first GPT models ensuring data security- GDPR compliance, optional login, no social auth to minimise friction- Prototype must be fully interactive, including:- All animations and micro-interactions described- Interactive charts and toggles- Responsive transitions and visual feedback on all user inputs- Accurate default, hover, focus, active states for all components- All features and buttons interact-able and navigations to their respective areas.- Prioritise emotional safety, privacy, and creating an effortless daily companion experience- Design style must resonate with Gen Z & Millennial students: soft UI, friendly copy, modern card layouts- Support system-level dark mode detection and seamless theme switching. Dark mode must retain emotional warmth, not become stark or techie. Reference visual polish from best-in-class apps like Clementine App, Headspace, and Balance.