Meditation
UI Design Proposal — Guided Meditation, Daily Schedule & AI-Powered Mindfulness
Guided Meditations
Daily Schedule
Media Categories
AI Assistant
Meditation Player
Personalized Tags
Meditation uses a deep midnight navy base derived directly from the brand design files — a calm, immersive dark environment that disappears into the background and lets the content breathe. A single teal (#2EC4B6) accent carries action and life. AI surfaces retain their distinct purple to stay recognizable at a glance.
The platform integrates cutting-edge therapeutic methodologies drawn from three traditions: the contemplative wisdom of Tibetan Buddhism and Eastern philosophy, the somatic and mindfulness-based approaches of modern Western psychology, and the structured frameworks of European and American psychoanalysis. This fusion ensures every session is grounded in both ancient inner science and evidence-based clinical practice.
Deep #1A1A2E background creates an immersive nighttime feel — ideal for bedtime and focus sessions. Low blue-light emission supports healthy melatonin cycles.
#2EC4B6 — the single action color. Calm and focused, not stimulating. Used only for interactive elements, progress, and confirmation states.
Generous padding and subtle card borders. The interface should feel as quiet as the content. No visual noise, no competing signals.
All AI surfaces retain purple gradient. The AI assistant is a distinct, intelligent layer — visually separated from the meditation content itself.
Morning slots use warm amber tones, afternoon uses teal (default), evening uses soft purple. The interface reflects the time of day naturally.
Touch-optimized controls, minimum 44px tap targets, thumb-reachable media player controls. The app lives on the phone, used in bed, on a mat, in quiet spaces.
Meditation is a structured, personalized mindfulness platform. Users discover curated audio and video meditation content organized by categories and tags, build a daily three-session practice schedule, and receive AI-powered guidance to find and generate new meditations suited to their current state of mind.
A curated library of audio and video sessions organized into categories. Each category carries media tags — the user's personal filter for their daily schedule.
Three configurable time slots — Morning, Afternoon, Evening — each linked to a preferred media tag. The server auto-assigns matching meditations at the right time of day.
An always-available AI companion that recommends meditations from the library, generates new personalized sessions, and explains techniques based on the user's history and mood.
Age: 28–45, health-conscious professional
Starts every day with a 10–15 min morning meditation before work. Values consistency and a clean, distraction-free interface that loads fast and plays immediately.
Key need: reliable morning schedule, quick-play, no friction.
Age: 30–55, high-load work environment
Uses meditation reactively during stressful workdays. Wants a "Stress Relief" category always one tap away, short sessions (5–10 min) with breathing exercises.
Key need: fast access to stress/anxiety category, short formats.
Age: 22–50, sleep quality issues
Uses guided sleep meditations nightly. Needs a dark-adapted interface, a gentle timer, auto-stop after session ends, and evening schedule pre-loaded with Sleep content.
Key need: sleep timer, auto-stop, dark comfort UI, evening slot.
Age: 18–35, curious and variety-seeking
Wants to try new techniques — body scan, visualization, mantra, nature sounds. Relies on the AI assistant to surface fresh content and explain unfamiliar practices.
Key need: AI recommendations, diverse library, tag browsing.
Download, Splash, Onboarding, Register / Sign In
Set 3 schedule slots, pick media tags per slot
First scheduled meditation, explore categories
AI suggests personalized session based on usage
Habit formed, streak tracked, premium offer shown
The core meditation library and schedule are available for free. Premium unlocks unlimited AI sessions, the full content catalog, advanced player features, and sleep tools — the strongest triggers to upgrade because they directly impact daily wellbeing.
| Feature | Free | Premium | Category |
|---|---|---|---|
| Browse meditation categories | Content | ||
| Play meditations (up to 5/day) | unlimited | Player | |
| Daily schedule (3 time slots) | Schedule | ||
| 1 media tag per schedule slot | multiple tags | Schedule | |
| AI recommendations (3/day) | unlimited | AI | |
| AI meditation generation | — | Premium | AI |
| Full content library | — | Premium | Content |
| Download for offline play | — | Premium | Player |
| Sleep timer & auto-stop | — | Premium | Player |
| Background play (lock screen) | — | Premium | Player |
| Practice streak tracking | — | Premium | Progress |
| Session history & stats | — | Premium | Progress |
| Multiple tag selections per slot | — | Premium | Schedule |
| AI conversation history | — | Premium | AI |
The onboarding uses the midnight navy + teal palette from the brand design SVG. Splash screen 3-step onboarding carousel Login or Register. The auth forms follow the same field structure and validation logic as the admin panel (email + password, Google Sign-In, email confirmation flow), adapted for the mobile-first dark UI.
Introduces the app mission. Full-screen dark background with centered meditation figure and app tagline. "Get Started" CTA button + "Sign In" link.
Explains the three-slot schedule concept with a simple illustration of Morning/Afternoon/Evening blocks. Sets expectation of personalized delivery.
Introduces the AI assistant with the purple panel visual. Explains it will learn preferences and generate new sessions. Leads to registration.
The home screen has two zones: the Daily Schedule panel at the top shows the user's three time slots with today's assigned meditations. Below it the Content Categories grid lists all available meditation categories with their media tags. The AI FAB is always visible in the bottom nav.
GET /user/schedule/content). The client calls this endpoint when the schedule panel is opened or refreshed. Each slot is matched by the user's configured media tag and the time-of-day context.
The schedule screen lets users configure exactly when each meditation slot fires and — critically — which media tag is assigned to that slot. The server uses the user's tag preference (PUT /user/media/tag) and the slot time (PUT /user/schedule) to serve the matching content at delivery time via GET /user/schedule/content.
slot_time (HH:MM), media_tag_id (reference to the user's preferred tag), and enabled boolean. GET /user/schedule/content returns the resolved session (title, duration, category, media URL) for each enabled slot.
The meditation player is full-screen, immersive, and minimal. A pulsing breathing-ring animation fills the center during audio sessions. Controls are large and thumb-friendly. The ambient background gradient shifts slowly to match the session's mood (sleep = deep purple, morning = warm amber, focus = cool teal).
The AI assistant is a persistent, conversational meditation guide. It recommends sessions from the existing library based on current mood, recent history, and time of day. For Premium users it also generates custom guided meditations on demand — producing a unique script, narration plan, or audio session aligned to the user's stated need.
service_ai backend module. Free tier: 3 recommendation requests/day. Premium: unlimited recommendations + meditation generation. Session context (last 5 conversations) is maintained server-side per user.
The web layout uses a three-column structure: a fixed left sidebar for navigation, the main content area for categories and the schedule panel, and a right AI assistant panel that can be toggled open. The dark midnight theme carries over from mobile seamlessly.
MeditationBuilt on a modern microservice architecture following industry best practices — each domain is independently deployable, scalable, and observable. The platform integrates cutting-edge therapeutic methodologies drawn from three traditions: the contemplative wisdom of Tibetan Buddhism and Eastern philosophy, the somatic and mindfulness-based approaches of modern Western psychology, and the structured frameworks of European and American psychoanalysis. This fusion ensures every session is grounded in both ancient inner science and evidence-based clinical practice.
localStorage via authStorage utilityAuthorization: Bearer <token>auth.service.ts refreshToken()<ProtectedRoute> redirects to /login if no tokenSplash 3 onboarding slides
Register or Sign In (email / Google / Apple)
Set 3 schedule slots + pick media tag each
Today schedule at top, categories below
Open player, breathing ring, sleep timer
Recommend or generate custom session
Unlock unlimited AI, sleep timer, downloads