## Login & Sign Up Screen ### Overview The initial entry point where users choose to authenticate with an existing account or create a new one using phone, email, or third-party providers. ### UI Elements - **Header/Branding:** Tinder logo centered at the top. - **Primary Actions:** Two prominent buttons labeled "Log in" and "Create account". - **Social Authentication:** Buttons for "Continue with Google" and "Continue with Apple". - **Support & Legal Links:** Text links for "Trouble logging in?", "Terms of Service", "Privacy Policy", and "Cookie Policy" at the bottom. - **Overlays:** A full-screen loading spinner appears during network requests. Error modals display with a title "Oops" and message text like "Login failed" or "Error network missing", with a single "OK" button. ### Interactions - Tapping "Log in" or "Create account" transitions to the contact collection screen. - Tapping social buttons initiates OAuth flows in a secure web view or native prompt. - Tapping "Trouble logging in?" opens the Account Recovery screen. - Tapping legal links opens external web views in a new tab or in-app browser. - If the device loses connectivity during submission, a modal appears with "Login failed" and "Error network missing". Tapping "OK" dismisses it. - Successful authentication automatically redirects to the main swipe interface or onboarding flow. ### Sample Data - N/A (Primarily action-driven interface) --- ## Phone & Email Verification Screen ### Overview Collects the user's phone number or email address and verifies ownership via a one-time passcode (OTP). ### UI Elements - **Input Method Toggle:** Tabs or radio buttons to switch between "Phone" and "Email". - **Country Code Selector:** Dropdown for international dialing codes (e.g., "+1 US"). - **Contact Input Field:** Text field for phone number or email address. - **Action Button:** Primary button labeled "Continue". - **OTP Entry (Post-Submission):** Six individual digit input boxes, "Resend code" text link, and a countdown timer. - **Progress Indicator:** Subtle loading state while the code is being sent or verified. ### Interactions - User selects input method, enters contact info, and taps "Continue". - System sends a 6-digit code. The UI transitions to the OTP entry view. - User types the code. The screen auto-submits when all 6 digits are entered, or user taps a "Verify" button. - Tapping "Resend code" restarts the countdown and triggers a new message/email. - Invalid or expired codes show an inline error message below the input fields. - Successful verification proceeds to the next authentication step or main app. ### Sample Data - Country: `+1 (US)` - Phone: `(555) 012-3456` - Email: `alex.jordan@email.com` - OTP: `849201` --- ## Account Recovery Screen ### Overview Helps users regain access to an account they cannot log into by verifying their identity through a registered email or phone number. ### UI Elements - **Header:** Title "Trouble logging in?" with a back arrow. - **Input Field:** Text box for entering the email or phone number associated with the account. - **Action Button:** "Send recovery link" or "Send code". - **Instructional Text:** Brief explanation of the recovery process. - **Progress Overlay:** Loading spinner while the recovery request is processed. ### Interactions - User enters their contact information and taps the send button. - System validates the input and sends a secure recovery link or OTP. - User follows the link in their email or enters the OTP in the app. - Upon successful verification, the user is prompted to reset their password or confirm account ownership, then returned to the login screen. - If no account is found, an inline error prompts the user to check the spelling or create a new account. ### Sample Data - Input: `user.recovery@example.com` - Instruction: "We'll send a secure link to reset your password or verify your identity." --- ## Age Verification Screen ### Overview Ensures the user meets the minimum age requirement by capturing a live selfie or scanning a government-issued ID. ### UI Elements - **Camera Viewfinder:** Full-screen or large rectangular preview area. - **Face Guide Overlay:** Semi-transparent oval with alignment instructions. - **Instruction Text:** Dynamic prompts like "Frame Your Face In The Oval", "Neutral Expression, No Smiling", "Center Your Face", "Hold Steady". - **Action Buttons:** "Take Photo", "Retake", and "Continue". - **Status Messages:** "Securing Camera Feed", "Uploading…", "Success!". - **Error/Retry Prompts:** "We Need a Clearer Video Selfie" with guidance on lighting and positioning. ### Interactions - User grants camera permissions when prompted. - User aligns their face within the oval guide. The system provides real-time feedback ("Move Closer", "Hold Steady"). - Tapping "Take Photo" captures the image/video. The screen shows "Uploading…" while processing. - If successful, displays "Success!" and proceeds. If failed, shows "We Need a Clearer Video Selfie" and offers a "Retake" option. - Users can tap "Continue" to proceed to ID scanning if selfie verification is insufficient. ### Sample Data - Guidance: "Let's get you verified", "Make sure to frame your face in the oval!" - Status: "Securing Camera Feed", "Uploading…" - Feedback: "Success!", "We Need a Clearer Video Selfie" --- ## Account Suspension / Ban Screen ### Overview Informs users that their account has been restricted, explains the reason, and provides options to appeal or acknowledge the warning. ### UI Elements - **Warning Icon:** Prominent alert or shield icon at the top. - **Title & Description:** Clear heading (e.g., "Account Under Review") and detailed explanation text. - **Action Buttons:** "Appeal Decision" (primary) and "Acknowledge" (secondary). - **Support Link:** "Contact Support" for additional help. - **Modal Overlay:** Confirmation dialog asking "Are you sure?" before finalizing account deletion or suspension acknowledgment. ### Interactions - User reads the suspension reason and policy violation details. - Tapping "Appeal Decision" opens a web form or email client to submit a review request. - Tapping "Acknowledge" dismisses the screen and returns to the login screen, often with restricted functionality. - If the user attempts to delete the account from this flow, a confirmation modal appears with "Are you sure?" and options to proceed or cancel. - Network errors during appeal submission show a retry prompt. ### Sample Data - Title: "Account Under Review" - Body: "Your account is currently being reviewed for compliance with our Community Guidelines. This process may take up to 48 hours." - Buttons: "Appeal Decision", "Acknowledge" --- ## Terms & Privacy Consent Screen ### Overview Presents legal agreements and data privacy preferences that users must review and accept before using the app. ### UI Elements - **Scrollable Content Area:** Full text for Terms of Service, Privacy Policy, and Cookie Policy. - **Toggle Switches:** Options for "Allow personalized ads", "Share data with partners", and "Enable location tracking". - **Action Buttons:** "Agree & Continue" (primary) and "Decline" or "Back" (secondary). - **Progress Indicator:** Shows completion status if multiple consent steps are required. ### Interactions - User scrolls through the legal text. Toggles can be switched on/off based on preference. - Tapping "Agree & Continue" records consent and proceeds to the next onboarding step. - Tapping "Decline" may exit the app or limit features to a guest mode, depending on regional regulations. - Tapping policy links opens external web views for full documentation. ### Sample Data - Toggles: "Allow personalized ads", "Share data with partners" - Button: "Agree & Continue" --- ## Onboarding & Profile Setup Screen ### Overview Guides new users through initial profile creation, including personal details, photo uploads, and basic matching preferences. ### UI Elements - **Step Progress Bar:** Visual indicator (e.g., "Step 1 of 4") at the top. - **Photo Upload Grid:** 3-6 slots for profile pictures with "+" icons to add from gallery or camera. - **Input Fields:** Text inputs for First Name, Birthday picker, and Gender selector. - **Navigation Buttons:** "Next" and "Skip" (where applicable). - **Validation Messages:** Inline errors for missing required fields or invalid dates. ### Interactions - User fills out each step sequentially. Tapping "Next" validates inputs and advances. - Tapping photo slots opens the device's media picker or camera. - Tapping "Skip" bypasses optional steps (e.g., adding more photos). - Completing all steps triggers a final confirmation and redirects to the main swipe interface. - Users can edit any field before proceeding. ### Sample Data - Name: `Alex` - Birthday: `May 15, 1995` - Gender: `Woman` - Photos: `[Profile Pic 1, Profile Pic 2, Profile Pic 3]` --- ## Selfie Verification (Face Check) Screen ### Overview Verifies the user's identity by matching a live video selfie with their profile photos to prevent impersonation and ensure community safety. ### UI Elements - **Live Camera Preview:** Real-time video feed with face-tracking overlay. - **Instructional Prompts:** "Look Straight Ahead", "Hold Steady", "Neutral Expression, No Smiling". - **Capture Controls:** Large circular button to start/stop recording. - **Feedback Messages:** "Success!", "We Need a Clearer Video Selfie", "Uploading encrypted ID Scan". - **Retry Options:** "Retake" button and troubleshooting tips for lighting/positioning. ### Interactions - User follows on-screen prompts to position their face correctly. - Tapping the capture button records a short video clip. The system analyzes liveness and facial features. - If the match passes, displays "Success!" and adds a verification badge to the profile. - If it fails, shows "We Need a Clearer Video Selfie" with tips like "No Glare or Extreme Lighting" and "Too Blurry, Clean Your Camera". - User taps "Retake" to try again. Multiple failures may prompt ID document scanning. ### Sample Data - Prompts: "Let's get you verified", "Make sure to frame your face in the oval!" - Feedback: "Success!", "We Need a Clearer Video Selfie" - Tips: "No Glare or Extreme Lighting", "Too Blurry, Clean Your Camera" --- ## Home / Discovery (Card Stack) ### Overview The primary screen where users browse potential matches one at a time in a full-screen card stack, swiping right to express interest or left to pass. ### UI Elements - **Header Area**: App logo on the left, settings/profile icon on the right, and a tier badge (e.g., Gold/Platinum) if subscribed. - **Profile Card**: Dominant photo carousel with swipe indicators. Overlays show the person's first name, age, distance, and a short bio. Shared interests or lifestyle tags appear as small chips. - **Action Bar**: Five circular buttons at the bottom: Rewind (yellow), Dislike (red X), Super Like (blue star), Like (green heart), and Boost (purple lightning). - **Bottom Navigation**: Fixed tab bar with icons for Home (active), Explore, Likes, Chats, and Profile. - **Loading State**: A shimmering placeholder with the text "Loading Home" while cards are fetched. - **Surge Banner**: A pulsing notification strip at the top when a high-activity period is detected. ### Interactions - **Swipe Right**: Sends a Like to the current profile. The card flies off-screen to the right. - **Swipe Left**: Passes on the profile. The card flies off-screen to the left. - **Tap Action Buttons**: Performs the corresponding action without swiping (e.g., tapping the heart sends a Like). - **Tap Profile Photo**: Opens a full-screen photo viewer with zoom and pan gestures. - **Tap Bio/Interests**: Expands the profile details to show "About Me" and full lifestyle information. - **Tap Bottom Tabs**: Instantly switches to the corresponding main section (Explore, Likes, Chats, or Profile). ### Sample Data - **Name/Distance**: "Maya, 27 • 2 miles away" - **Bio**: "Architect by day, pottery enthusiast by night. Looking for someone who doesn't take themselves too seriously." - **Shared Tags**: "Coffee, Hiking, Indie Music" - **Banner**: "🔥 Swipe Surge is active! 3x more people online." --- ## Explore ### Overview A discovery hub that lets users browse potential matches filtered by specific interests, activities, or curated lifestyle categories. ### UI Elements - **Header**: "Explore" title with a search/filter icon on the right. - **Hero Tile**: A large, featured banner at the top promoting a trending category or local event. - **Category Grid**: A responsive grid of tiles representing different interests (e.g., Foodies, Travelers, Creatives). Each tile shows an icon, category name, and a liquidity counter (e.g., "120+ people here"). - **Carousel Tiles**: Horizontal scrolling cards for quick category previews. - **Loading State**: Shimmering placeholders with "Loading Explore" text. - **Bottom Navigation**: Standard app tabs. ### Interactions - **Tap Category Tile**: Opens a dedicated card stack filtered exclusively to that interest. - **Swipe on Filtered Cards**: Functions identically to the main discovery stack but scoped to the selected category. - **Tap Search/Filter Icon**: Opens a modal to adjust distance radius, activity level, or sort order. - **Tap Hero Banner**: Navigates to a detailed campaign or event page. ### Sample Data - **Hero Tile**: "Weekend Getaways • 450+ people planning trips" - **Grid Tile 1**: "🍕 Foodies • 85 people nearby" - **Grid Tile 2**: "📚 Bookworms • 32 people nearby" - **Grid Tile 3**: "🎸 Musicians • 60 people nearby" --- ## Likes You / Secret Admirer ### Overview A screen displaying users who have already liked your profile, allowing you to instantly match by liking them back. Free users see blurred previews, while subscribers see clear profiles. ### UI Elements - **Header**: "Likes You" title with a Gold/Platinum upsell banner for non-subscribers. - **Blurred Grid (Free Users)**: A mosaic of heavily blurred profile photos with a prominent count overlay (e.g., "14 Likes"). - **Clear Profile List (Subscribers)**: High-resolution profile cards showing name, age, distance, and a "Match" button. - **Upsell CTA**: A large button reading "See Who Likes You" that triggers a subscription paywall. - **Loading State**: "Loading Likes" shimmer effect. - **Bottom Navigation**: Standard app tabs. ### Interactions - **Tap Blurred Image**: Opens a paywall modal explaining the benefits of upgrading to see who liked you. - **Tap Clear Profile**: Opens the full profile view for detailed inspection. - **Tap Match/Like on Clear Profile**: Instantly creates a match and navigates to the chat screen. - **Tap Upsell CTA**: Launches the subscription purchase flow. ### Sample Data - **Count Overlay**: "14 Likes" - **Clear Profile**: "Jordan, 24 • 5 miles away • Loves dogs & hiking" - **Upsell Text**: "See who likes you and match instantly with Tinder Gold" --- ## Top Picks ### Overview A curated, daily-refreshing selection of profiles that the algorithm predicts you'll be most compatible with, based on your swiping history and preferences. ### UI Elements - **Header**: "Top Picks" title with a refresh indicator showing time until next daily reset. - **Card Carousel**: Horizontally scrollable, premium-styled profile cards. - **Category Tags**: Small badges on each card indicating why they were selected (e.g., "Foodie", "Creative", "Adventurer"). - **Action Buttons**: Like, Pass, and Super Like buttons positioned below each card. - **Bottom Navigation**: Standard app tabs. ### Interactions - **Swipe Left/Right on Cards**: Passes or Likes the curated profile. - **Tap Category Tag**: Filters the carousel to show only picks matching that specific tag. - **Tap Refresh**: Manually refreshes the daily selection (if quota allows). - **Tap Card**: Expands to full profile view with extended bio and photo gallery. ### Sample Data - **Card 1**: "Sam, 28 • Tags: Creative, Musician" - **Card 2**: "Taylor, 25 • Tags: Foodie, Traveler" - **Card 3**: "Casey, 30 • Tags: Adventurer, Fitness" - **Reset Timer**: "New picks in 04:12:30" --- ## Swipe Surge ### Overview A real-time, high-energy discovery mode activated during peak usage hours, showing a rapid influx of highly active users in your immediate area. ### UI Elements - **Header**: "Swipe Surge" title with a live activity indicator (pulsing green dot). - **Surge Status Banner**: Prominent text stating "Swipe Surge is active!" with a countdown timer. - **Fast-Paced Card Stack**: Optimized for quick decisions, with reduced animation delays. - **Haptic Feedback Indicators**: Visual cues that sync with swipe gestures. - **Bottom Navigation**: Temporarily hidden to maximize screen real estate for swiping. ### Interactions - **Swipe Rapidly**: Processes likes/passes instantly with minimal animation lag. - **Tap Status Banner**: Opens details about surge duration or offers a "Surge Boost" purchase. - **Wait for Timer**: Screen automatically transitions back to standard discovery when the surge ends. - **Tap Profile**: Opens standard profile view, but with an "Active Now" badge. ### Sample Data - **Status**: "🔥 Swipe Surge Active" - **Active Users**: "2,450 people online near you" - **Time Left**: "Ends in 14:32" - **Profile Badge**: "⚡ Active Now" --- ## Recs Intelligence / Chemistry ### Overview A compatibility-focused screen where users answer lifestyle and value-based questions to refine match recommendations and view alignment scores with potential partners. ### UI Elements - **Header**: "Chemistry" title with a progress indicator showing questionnaire completion. - **Question Cards**: Full-screen prompts with multiple-choice answers (e.g., "What's your ideal weekend?"). - **Compatibility Insights**: A dashboard showing percentage matches with existing profiles (e.g., "You and Alex share 85% compatibility on values"). - **Feedback Pills**: Quick-reaction buttons for passing on recommendations (e.g., "different values 🌎", "not my vibe 🌀"). - **Action Buttons**: "Answer Question", "Skip", and "See Results". ### Interactions - **Tap Answer Option**: Records the preference, updates the compatibility algorithm, and advances to the next question. - **Tap Skip**: Bypasses the current question without affecting the score. - **Tap Feedback Pill**: Logs why a recommendation wasn't a fit, training the algorithm for future suggestions. - **Tap See Results**: Navigates to a breakdown of how your answers align with your current matches. ### Sample Data - **Question**: "How important is astrology to you?" - **Options**: "Very important", "Somewhat", "Not at all" - **Insight**: "You and 12 matches share this value" - **Feedback Options**: "We have different values", "They seem too serious", "I'm not sure" --- ## Edit Profile ### Overview The main hub where users view, modify, and organize their public dating profile, including photos, personal details, prompts, and matching preferences. ### UI Elements - **Header/Toolbar**: Displays the title "Edit Profile" and a back/close icon to exit the screen. - **Profile Summary Card**: A compact preview showing the primary photo, name, age, and a short bio snippet. Tapping it opens the full preview mode. - **Media Grid Section**: A horizontal or grid layout of current profile photos and video loops. Includes an "Add" tile with a plus icon to upload new media. Shows a loading spinner overlay during uploads. - **Editable Information Rows**: A scrollable list of profile sections, each displaying the current value or a placeholder prompt. Sections include: - `about_me` (Bio text) - Job & Company - School & Degree - City & Distance - Gender & Pronouns - Sexual Orientation - Relationship Intent - Interests & Descriptors - Spotify Anthem - Instagram Connection - **Action Buttons**: - A primary "Save" or `confirm` button fixed at the bottom. - A secondary `cancel` or `done` button in the header. - **Progress Overlay**: A full-screen dimmed overlay with a circular progress indicator that appears while saving changes or uploading media. - **Error Banner**: A dismissible alert showing `something_went_wrong` or `failed_to_save` with a `retry` button if network requests fail. ### Interactions - **Tap Back/Close**: Returns to the previous screen. If unsaved changes exist, a confirmation dialog appears asking `Are you sure?` with `yes` and `no` options. - **Tap Media Grid Item**: Opens the Media & Photo Selector for that specific slot. - **Tap "Add" Tile**: Opens the device gallery or camera to select new photos/videos. - **Tap Any Information Row**: Navigates to the dedicated editor for that field (e.g., text input, location picker, or chip selector). - **Tap Save/Confirm**: Validates all inputs, triggers the progress overlay, sends updates to the server, and returns to the main profile view on success. - **Tap Retry on Error Banner**: Re-attempts the failed save or upload operation. - **Tap Premium-Locked Feature**: If a user attempts to add more than the free media limit or access advanced filters, a subscription paywall dialog appears. ### Sample Data - **Name/Age**: Jordan, 29 - **Bio**: "Architect by day, amateur chef by night. Looking for someone to explore new restaurants and weekend trails with." - **Media**: 4 photos uploaded, 1 video loop, 1 empty slot. - **Job**: "Senior Designer at Studio North" - **School**: "University of Washington" - **City**: "Seattle, WA" - **Interests**: "Coffee", "Hiking", "Indie Music", "Dogs" --- ## Profile Preview ### Overview A full-screen, swipeable simulation of how the profile appears to other users, allowing quick verification and direct editing of any section. ### UI Elements - **Full-Screen Media Carousel**: Displays profile photos and videos in a 1:1 or 4:5 aspect ratio. Includes play/pause controls for video loops. - **Profile Info Overlay**: Semi-transparent gradient at the bottom showing name, age, distance, `about_me` text, and selected interest chips. - **Section Edit Icons**: Small pencil icons positioned next to each info block (bio, job, school, interests) for quick access to editors. - **Navigation Dots**: Indicators at the bottom showing the current photo position. - **Bottom Action Bar**: Contains a `done` button to exit preview mode and return to the main editor. - **Loading State**: A shimmering placeholder or `loading_error` message if media fails to fetch. ### Interactions - **Swipe Left/Right**: Navigates through the photo and video carousel. - **Tap Play/Pause**: Starts or stops video loop playback. - **Tap Pencil Icon**: Immediately jumps to the corresponding edit screen for that section. - **Tap `done`**: Closes the preview and returns to the Edit Profile screen. - **Tap `loading_error`**: Shows a `retry` button to reload the profile assets. ### Sample Data - **Current Slide**: 2 of 5 - **Media**: High-resolution photo of user at a hiking trail. - **Overlay Text**: "Jordan, 29 • 3 miles away" - **Bio Snippet**: "Architect by day, amateur chef by night..." - **Chips**: 🌲 Hiking • ☕ Coffee • 🎸 Indie Music --- ## Media & Photo Selector ### Overview A dedicated interface for managing profile media, allowing users to upload, reorder, trim, and remove photos or video loops. ### UI Elements - **Header**: Title "Add Photos & Videos" with a close/back icon. - **Media Grid**: A 2x3 or 3x3 grid showing current profile media. Each tile displays a thumbnail, a drag handle for reordering, and an "X" remove button. - **Add Tile**: A dashed-border tile with a camera/gallery icon labeled `photo` or `video`. - **Upload Progress Bars**: Thin progress indicators overlaid on tiles during upload. - **Error States**: Tiles with a red warning icon and `failed_to_save` text, accompanied by a `retry` button. - **Bottom Action Bar**: - Media counter (e.g., "4/6") - `confirm` or `done` button to apply changes. - **Empty State**: If no media exists, shows a large illustration with `oops` and a prompt to `try_again` or add media. ### Interactions - **Tap Add Tile**: Opens the system media picker or camera. - **Long Press & Drag**: Reorders media tiles. The grid animates to show the new position. - **Tap "X" on Tile**: Removes the media from the profile. A confirmation dialog appears with `delete` and `cancel` options. - **Tap Media Tile**: Opens a full-screen viewer with crop/trim tools for videos. - **Tap `retry` on Failed Tile**: Re-uploads the specific media file. - **Tap `confirm`/`done`**: Saves the new media order and uploads pending files. Shows a progress overlay. - **Tap `try_again` on Empty State**: Refreshes the media picker or checks network connectivity. ### Sample Data - **Grid Layout**: - Tile 1: Beach sunset photo (drag handle visible) - Tile 2: Coffee shop selfie - Tile 3: 15-second video loop (trim icon visible) - Tile 4: Uploading... (45% progress) - Tile 5: `failed_to_save` with `retry` button - Tile 6: Empty "Add `photo`" tile - **Counter**: "5/6 selected" --- ## Interests & Descriptors Editor ### Overview A categorized selection screen where users choose lifestyle tags, personality traits, and visual interests to improve match compatibility. ### UI Elements - **Header**: Title "Interests & Descriptors" with a back arrow. - **Category Tabs**: Horizontal scrollable tabs for filtering chips: "Lifestyle", "Personality", "Dating Intent", "Visual Interests". - **Search Bar**: Text input field to filter available tags by keyword. - **Chip Grid**: A responsive grid of selectable tags. Unselected chips show a light outline; selected chips fill with the app's accent color and display a checkmark. - **Selection Counter**: Text showing "X selected" with a limit indicator (e.g., "5/10"). - **Premium Upsell Banner**: Appears when the free selection limit is reached, showing `learn_more` and a button to unlock more slots. - **Bottom Action Bar**: `confirm` button to save selections, and `cancel` to discard changes. - **Error/Empty State**: `check_connection_try_again` message if tags fail to load, with a `reload` button. ### Interactions - **Tap Category Tab**: Filters the chip grid to show only tags from that category. - **Tap Search Bar**: Opens keyboard and dynamically filters chips as the user types. - **Tap Chip**: Toggles selection state. Updates the selection counter in real-time. - **Tap Premium Upsell Banner**: Opens the subscription paywall dialog. - **Tap `confirm`**: Saves selected tags to the profile and returns to the Edit Profile screen. - **Tap `cancel`**: Discards changes and returns to the previous screen. - **Tap `reload`**: Re-fetches the tag list from the server. ### Sample Data - **Active Tab**: "Lifestyle" - **Selected Chips**: "Coffee", "Hiking", "Dog person", "Non-smoker", "Weekend traveler" - **Available Chips**: "Gym", "Cooking", "Board games", "Live music", "Yoga", "Photography" - **Counter**: "5/10 selected" - **Search Query**: "out" → Filters to "Outdoor activities", "Outdoorsy", "Country music" --- ## Conversation Screen ### Overview The primary messaging interface where users view their ongoing chat history, send text, media, and interactive content, and manage conversation safety settings. ### UI Elements - **Header/Toolbar**: Displays the match's profile photo, display name, and a back arrow to return to the inbox. Includes an overflow menu (⋮) for additional options and a shield icon for safety tools. - **Message Feed**: A vertically scrollable list of conversation bubbles. Inbound messages align left with a white background; outbound messages align right with a gradient background. Supports text, photos, short video loops, GIFs, stickers, and system notifications (e.g., match date). - **Message Status Indicators**: Small icons or text beneath outbound messages showing delivery state: `chat_message_sent`, `chat_message_not_delivered`, or a retry icon for failed sends. - **Typing Indicator**: A subtle animated bubble that appears at the bottom of the feed when the match is actively typing. - **Input Bar**: A text field with placeholder `chat_input_hint`, a clear (X) button, a GIF selector button (`chat_input_gif`), a sticker button, and a send arrow (`chat_input_send`). - **Hidden Message Overlay**: Blurred or masked messages with a `chat_dtby_tap_to_view` prompt for content filtered by safety systems. ### Interactions - **Tap back arrow**: Exits the conversation and returns to the main matches/inbox list. - **Tap profile photo/name**: Opens the match's full profile view. - **Tap overflow menu**: Opens a dropdown with options to report, unmatch, or adjust chat settings. - **Type & tap send**: Posts the message to the feed, clears the input field, and updates the status to "Sent". - **Tap GIF/Sticker button**: Opens the respective media picker overlay. - **Tap hidden message overlay**: Reveals the filtered content after confirming intent to view. - **Long-press any message**: Opens a context menu to copy text, react with an emoji, or delete (for outbound messages). ### Sample Data - **Header**: "Alex, 26" - **System Message**: "You matched on Oct 12" - **Inbound**: "Hey! How's your week going? 😊" - **Outbound**: "Pretty good! Just got back from a hike. You?" (Status: `chat_message_sent`) - **Hidden Message**: `[Filtered]` → Tap to reveal: "Actually, I'm not really into hiking..." --- ## GIF Search & Picker ### Overview A full-screen overlay for searching, browsing, and selecting animated GIFs to insert into the active conversation. ### UI Elements - **Search Header**: A text input field with a back/close button on the left and a clear (X) button on the right. - **Trending Grid**: A horizontally scrollable row of popular GIFs displayed when the search field is empty. - **Search Results Grid**: A vertically scrollable grid of GIF thumbnails that updates in real-time as the user types. - **Empty State**: Displays `no_gif_matches_found` when a search yields no results. - **Attribution Footer**: A subtle `found_on_giphy` label at the bottom of the screen. - **Loading State**: Shimmer placeholders or a circular progress indicator while fetching results. ### Interactions - **Tap search field**: Activates the keyboard and begins filtering results as characters are entered. - **Tap clear (X)**: Clears the search query and returns to the trending GIF row. - **Tap a GIF**: Closes the picker and inserts the selected GIF into the chat input field for preview before sending. - **Tap back/close**: Dismisses the picker and returns to the conversation screen without making a selection. ### Sample Data - **Search Query**: "hello" - **Results**: Animated waving hand, "Hi there!" text animation, cat waving, cartoon character greeting. - **Footer**: `found_on_giphy` - **Empty State**: `no_gif_matches_found` --- ## Empty Chat & Icebreaker Suggestions ### Overview The initial state of a new conversation, designed to reduce friction by offering contextual conversation starters based on shared profile elements. ### UI Elements - **Match Header**: Centered profile avatar with a subtle gradient background, display name, and match date. - **Contextual Prompt Cards**: Horizontally scrollable cards highlighting shared interests or profile elements, labeled with strings like `empty_chat_contextual_like_bio`, `empty_chat_contextual_like_photo`, or `empty_chat_contextual_like_prompt`. - **Suggested Messages**: A row of pre-written openers tailored to the match's profile (e.g., "Hey! 👋", "That photo looks amazing!"). - **Shuffle Button**: A refresh icon (`message_suggestion_shuffle_icon`) to generate a new set of suggestions. - **First Move Prompt**: A banner displaying `firstmove_its_your_move` when the conversation is waiting for the user to initiate. ### Interactions - **Tap a suggested message**: Copies the text into the chat input field, allowing the user to edit before sending. - **Tap shuffle icon**: Replaces the current suggestions with a fresh set of openers. - **Tap a contextual prompt card**: Navigates to the specific section of the match's profile (photo, bio, or prompt) that inspired the suggestion. - **Tap "First Move" banner**: Scrolls the input field into focus and highlights the send button. ### Sample Data - **Header**: "Jordan, 24 • Matched 2 hours ago" - **Prompt Card**: `empty_chat_contextual_like_prompt` → "My simple pleasure is..." - **Suggestions**: "What's your favorite simple pleasure?", "I love that answer! Have you tried it recently?", "Hey Jordan! 👋" - **Banner**: `firstmove_its_your_move` --- ## Message Consent & AI Suggestions Banner ### Overview An inline banner or modal that appears when AI-powered message suggestions are active, ensuring transparency and user consent before the feature is used. ### UI Elements - **Banner Container**: A slim, dismissible card positioned above the chat input. - **Icon & Title**: A lightbulb or sparkle icon with the title `message_suggestion_chat_title`. - **Description Text**: Explains how suggestions are generated and clarifies that users retain full control over sending. - **Action Buttons**: `message_suggestion_confirm_button` to accept, and a close (X) icon to dismiss. - **Consent Link**: `message_suggestion_chat_consent_bubble` that opens a detailed privacy explanation. ### Interactions - **Tap confirm button**: Acknowledges the feature, dismisses the banner, and enables AI suggestions for the conversation. - **Tap close (X)**: Dismisses the banner without enabling suggestions. - **Tap consent link**: Opens a full-screen dialog or web view detailing data usage, AI limitations, and opt-out instructions. - **Dismiss & return later**: The banner reappears on the next new match until explicitly accepted or disabled in settings. ### Sample Data - **Title**: `message_suggestion_chat_title` - **Body**: "Get conversation starters tailored to your match's profile. You can edit or ignore any suggestion before sending." - **Button**: `message_suggestion_confirm_button` ("Got it") - **Link**: `message_suggestion_chat_consent_bubble` ("Learn how suggestions work") --- ## Safety Toolkit & Unmatch Options ### Overview A bottom sheet accessed from the chat overflow menu, providing users with tools to manage uncomfortable interactions, report violations, or end a match. ### UI Elements - **Header**: "Safety Toolkit" or "Chat Options" with a close (X) button. - **Option 1**: `safety_toolkit_unmatch_only_option` - Ends the match and removes the conversation from both users' inboxes. - **Option 2**: `safety_toolkit_report_and_unmatch_option` - Flags the profile for review by the safety team and immediately ends the match. - **Option 3**: "Block User" - Prevents the user from viewing your profile or matching with you in the future. - **Cancel Button**: Dismisses the sheet without taking action. ### Interactions - **Tap "Unmatch only"**: Triggers a confirmation dialog. Confirming permanently deletes the chat and removes the match. - **Tap "Report and unmatch"**: Opens a multi-step reporting flow where the user selects a reason (e.g., spam, harassment, fake profile) and optionally adds details before unmatching. - **Tap "Block User"**: Immediately blocks the profile, closes the chat, and returns to the inbox. - **Tap Cancel**: Closes the bottom sheet and returns to the active conversation. ### Sample Data - **Header**: "Safety Toolkit" - **Options**: - `safety_toolkit_unmatch_only_option` - `safety_toolkit_report_and_unmatch_option` - "Block User" - **Confirmation Dialog**: "Are you sure you want to unmatch? This action cannot be undone." --- ## Sponsored Message View ### Overview A distinct message type in the chat feed that displays brand promotions or partner content, clearly labeled as sponsored to maintain transparency. ### UI Elements - **Sponsored Header**: Displays `sponsored_by` followed by the brand name, accompanied by a small "Ad" badge. - **Content Card**: Contains the brand's avatar, a promotional image or short video, and a concise marketing message. - **Call-to-Action Button**: A prominent button (e.g., "Learn More", "Shop Now", "Listen") that opens an external link or in-app landing page. - **Footer Actions**: `view_ad_message_preferences` link to manage ad settings, and a `delete_sponsored_message` option to remove the ad from the feed. - **Timestamp**: Standard message delivery time aligned to the right. ### Interactions - **Tap CTA button**: Opens the sponsor's landing page in an in-app browser or external app. - **Tap "View ad preferences"**: Navigates to the ad settings screen where users can toggle personalized ads or reset their ad ID. - **Tap "Delete"**: Removes the sponsored message from the conversation feed without affecting the match or chat history. - **Long-press ad card**: Opens standard message options (copy text, report ad, hide). ### Sample Data - **Header**: `sponsored_by` Spotify - **Content**: "Discover your next favorite playlist. Tap to explore curated mixes for your vibe." - **CTA**: "Listen Now" - **Footer**: `view_ad_message_preferences` • `delete_sponsored_message` - **Timestamp**: "Oct 15, 2:30 PM" --- ## Inbox / Messages List ### Overview A scrollable, reverse-chronological feed of recent conversations and system notifications. Users can quickly scan their latest inbound messages, view image previews, tap into full conversations, or manage their inbox and subscription settings via the header menu. ### UI Elements - **Header/Toolbar** - **Back Navigation:** Left-aligned arrow icon to return to the previous screen (typically the main swipe/discovery feed). - **Screen Title:** Centered or left-aligned text reading "Messages". - **Overflow Menu:** Right-aligned three-dot icon that opens a dropdown menu. - **Message List** - **Section Anchors/Headers:** Visual dividers that group messages by context (e.g., "New Matches", "Recent Activity"). - **Message Cards:** Individual rows representing inbound messages. Each card contains: - **Sender Avatar:** Circular profile image, displayed only for the first message in a time batch to reduce visual clutter. - **Message Content:** - *Text:* Rendered inside a rounded bubble. The background style changes slightly if it's the first message in a consecutive batch from the same sender. - *Image:* Full-width or constrained-width photo preview with a loading spinner overlay while fetching. Includes accessible alt text for screen readers. - **Timestamp:** Small, muted text showing when the message was received (e.g., "2:30 PM", "Yesterday"). Hidden for messages that fall within the same time batch as the previous item. - **Loading State:** Centered circular progress indicator displayed while the message list is initially fetching data. Automatically hides once the list populates. - **Empty State:** (Implicit) Clean placeholder view shown when no messages exist, typically with an illustration and prompt to start swiping. ### Interactions - **Tap Message Card:** Navigates to the full Chat screen for that specific match, preserving scroll position and message history. - **Tap Image Message:** Opens the associated URL in a new browser tab or in-app webview. Tracks analytics for link engagement. - **Tap Overflow Menu (⋮):** Opens a dropdown with two options: - **Delete Messages:** Triggers a confirmation-less clear of all local and remote inbox messages, then automatically closes the inbox screen and returns to the previous view. - **Manage Subscription:** Navigates to the account billing/subscription management screen. - **Tap Back Arrow / System Back:** Closes the inbox and returns to the main app navigation. Tracks session closure analytics. - **Scroll Down:** Loads older messages dynamically. The list is reverse-ordered, so the newest messages always appear at the top. - **View Tracking:** As message cards scroll into the viewport, the app silently logs view analytics for engagement tracking. ### Sample Data - **Section Header:** `New Matches` - **Message 1 (Text):** - Avatar: `Profile photo of Jordan, 26` - Content: `"Hey! I saw you're into rock climbing too. Have you tried the new gym downtown?"` - Timestamp: `Today, 4:15 PM` - **Message 2 (Text, same batch):** - Avatar: *(Hidden)* - Content: `"We should totally go this weekend if you're free!"` - Timestamp: *(Hidden)* - **Message 3 (Image):** - Avatar: `Profile photo of Sam, 24` - Content: `Photo of a golden retriever sitting on a hiking trail` - Timestamp: `Yesterday, 7:30 PM` - **Message 4 (System/Anchor):** - Content: `You matched with Alex!` - Timestamp: `2 days ago` --- ## Subscription Paywall & Purchase Screen ### Overview A full-screen, edge-to-edge purchase interface that presents available premium subscription tiers, pricing, and feature benefits. It guides the user through plan selection, initiates the platform billing flow, validates the transaction, and automatically returns to the main app upon successful activation. ### UI Elements - **Header Area**: - Dismiss/Close button (top corner) to exit the purchase flow - Optional promotional banner or countdown timer for limited-time discounts - **Plan Selector**: Horizontal toggle or carousel allowing users to switch between subscription tiers (e.g., Plus, Gold, Platinum) and billing cycles (monthly, 6-month, annual) - **Feature Breakdown**: Scrollable list of premium benefits with icons and short descriptions (e.g., unlimited likes, profile visibility boosts, advanced filters) - **Pricing Display**: Prominent price label showing the selected plan cost, billing frequency, and any applied discount percentage - **Primary Action Button**: Large, high-contrast button labeled with the purchase action (e.g., "Subscribe", "Continue", "Get [Tier]") - **Secondary Links**: - "Restore Purchases" text link for account recovery - "Terms of Service" and "Privacy Policy" legal links - **State Overlays & Feedback**: - **Processing State**: Full-screen or inline loading indicator with status text during validation and billing - **Success State**: Brief confirmation message or animation upon activation - **Error State**: Inline banner or dialog displaying failure reason with a retry option - **Platform Payment Dialog**: System-level billing sheet that appears over the app for credential entry and payment confirmation ### Interactions - **Tap Plan Selector**: Instantly updates the pricing display, feature list, and primary button label to reflect the chosen tier and billing cycle - **Tap Primary Action Button**: - Button disables and shows a loading spinner - App validates eligibility and billing availability - System payment dialog slides up for user confirmation - **Complete Platform Payment**: - Dialog closes; app shows "Verifying purchase..." state - Receipt is validated with the server - On success: Brief confirmation appears, screen dismisses automatically, and user is returned to the main app feed - On failure/cancellation: Error message displays ("Purchase failed", "Billing unavailable", or "Transaction canceled"); user can tap "Retry" or dismiss - **Tap Restore Purchases**: Triggers background receipt validation; if an active subscription is found, UI updates to show "Subscription Restored" and closes; if none found, shows "No active purchases found" - **Tap Dismiss/Close**: Safely cancels any pending validation, dismisses the screen, and returns to the previous app context without charging - **System Back Gesture**: Disabled during active billing to prevent accidental transaction interruption; enabled only when idle or in error state ### Sample Data - **Selected Tier**: Tinder Platinum - **Billing Cycle**: 6 Months - **Price Display**: $119.94 ($19.99/month) • Save 33% - **Feature List**: - Message Before Matching - See Who Likes You - Priority Likes - Unlimited Rewinds - Travel Mode - **Processing Text**: "Securing your subscription..." → "Verifying payment..." → "Activating benefits..." - **Success Message**: "Welcome to Platinum! Your premium features are now active." - **Error Message**: "We couldn't complete your purchase. Please check your payment method and try again." --- ## Explore Home ### Overview The primary discovery hub where users browse curated experiences, local events, and interactive features. The screen presents a dynamic, scrollable catalog of tiles, promotional banners, and category filters, updating in real-time as new content becomes available. ### UI Elements - **Header & Navigation:** Top app bar with a "Navigate home" back action and a title area. Announces "Loading Explore" during initial fetch and "Explore loaded" once content is ready. - **Category Filter & Search Bar:** Horizontal row of selectable chips for filtering content by interest or type. Includes a search input field with a visible clear button to reset the query. - **Promotional Banner:** A dismissible banner at the top of the feed highlighting active challenges, rewards, or new features. Displays an icon (e.g., gift box or checkmark) and a short call-to-action. - **Content Grid/Carousel:** Mixed layout of interactive tiles representing experiences. Each tile contains a hero image, title, subtitle, and optional live participant counters or status badges. - **Subscription & Upgrade Cards:** Interspersed promotional cards offering feature upgrades (e.g., Boost Wallet, Platinum perks, discount offers) with clear pricing and action buttons. - **Loading & Error States:** Shimmer placeholders while content loads. If the catalog fails to fetch, an error banner appears with a retry prompt. - **Pull-to-Refresh Indicator:** Standard swipe-down gesture area at the top of the scrollable list. ### Interactions - **Tap a tile:** Opens the detailed view for that specific experience or event. - **Tap a filter chip:** Instantly filters the visible catalog to match the selected category. - **Type in search:** Dynamically narrows down tiles based on keyword matches. Tapping the clear button resets the filter. - **Tap banner:** Navigates to the challenge details or reward redemption screen. - **Pull down to refresh:** Reloads the entire catalog, updates live counters, and fetches new promotional content. - **Scroll down:** Automatically loads additional tiles as the user reaches the bottom of the feed. - **State changes:** Live participant counts update without requiring a manual refresh. The error banner disappears and content reappears upon successful retry. ### Sample Data - **Filter Chips:** "Live Events", "Virtual Classes", "Outdoor Activities", "Speed Dating" - **Banner Text:** "Complete 3 profile prompts to unlock a free Boost!" - **Tile Titles:** "Sunset Yoga at the Pier", "Virtual Mixology Masterclass", "Weekend Hiking Group", "Local Art Gallery Opening" - **Upgrade Card:** "Get 5 Super Likes for $4.99 • Unlock Unlimited Likes with Tinder Gold" --- ## Explore Intro Modal ### Overview A full-screen overlay that introduces the Explore feature to first-time users or explains specific catalog items before engagement. It provides context, sets expectations, and offers clear entry or exit paths. ### UI Elements - **Header:** Feature title (e.g., "Discover Experiences") with a close/dismiss icon in the top-right corner. - **Illustration/Visual:** Centered graphic or icon representing the Explore theme. - **Body Text:** Concise explanation of how the feature works, what users can expect, and how to interact with tiles. - **Primary Action Button:** Labeled "Get Started" or "Submit" to proceed into the catalog. - **Secondary Action Button:** Labeled "Maybe Later" or "Exit" to dismiss and return to the main feed. - **Background Dim:** Semi-transparent overlay behind the modal to focus attention on the content. ### Interactions - **Tap "Get Started"/"Submit":** Closes the modal, records the user's acceptance, and may automatically launch a highlighted catalog item if a specific deeplink is attached. - **Tap "Maybe Later"/"Exit":** Closes the modal, records the dismissal, and returns the user to the Explore Home screen without launching additional content. - **Tap close icon or outside modal:** Dismisses the overlay and returns to the previous screen. - **State changes:** The modal tracks whether it has been shown to prevent repeated interruptions. Analytics events fire on open, submit, and exit actions. ### Sample Data - **Title:** "Welcome to Explore" - **Body:** "Discover new ways to connect through shared interests, local events, and interactive experiences. Tap any tile to dive in and see who's joining!" - **Buttons:** "Start Exploring", "Skip for Now" --- ## Experience Detail Page ### Overview The dedicated view for a selected explore item, providing comprehensive details, media, and participation options. Users can review event information, register, or share the experience with others. ### UI Elements - **Header:** Back navigation button, experience title, and a share icon. - **Hero Media:** Full-width image or looping video showcasing the event or activity. - **Details Section:** Structured text blocks for description, date/time, location, host profile, and current participant count. - **Action Buttons:** Primary button (e.g., "Join", "RSVP", "Learn More") and secondary options like "Save" or "Share". - **Related Experiences:** Horizontal scrollable list of similar or recommended tiles at the bottom. - **Loading/Confirmation States:** Skeleton loaders during initial fetch. Success animation or confirmation banner appears after registration. ### Interactions - **Tap Back:** Returns to the Explore Home screen, preserving scroll position and filter state. - **Tap Join/RSVP:** Registers the user for the event. The button updates to a confirmed state (e.g., "You're In!"), and a success confirmation appears. - **Tap Share:** Opens the device's native share sheet with a pre-formatted link and description for the experience. - **Tap Related Tile:** Navigates directly to that item's detail page without returning to the home feed. - **State changes:** Participant count increments in real-time after successful registration. If the event reaches capacity, the primary button disables and changes to "Waitlist" or "Full". ### Sample Data - **Title:** "Sunset Yoga at the Pier" - **Description:** "Join a relaxing 60-minute yoga session overlooking the ocean. All levels welcome. Mats and water provided." - **Details:** "Saturday, 5:00 PM • Santa Monica Pier • Hosted by @ZenWithSarah" - **Participants:** "24/30 spots filled" - **Button States:** "Reserve My Spot" → "You're Registered ✓" --- ## Safety Center ### Overview A centralized hub where users can access safety guides, reporting tools, and external resources to ensure a secure dating experience. The screen greets the user by name, displays their profile picture, and organizes safety information into three easily navigable categories. ### UI Elements - **Header/Toolbar**: A close/back button positioned at the top to exit the screen and return to the previous view. - **Welcome Section**: Displays the user's first name alongside their current profile image in a circular avatar. - **Tab Navigation**: Three horizontally aligned tabs labeled "Guides", "Tools", and "Resources". The active tab is visually highlighted. - **Content Area**: A scrollable, swipeable panel that displays articles, interactive features, or external links corresponding to the selected tab. - **Loading State**: A centered progress indicator displayed while safety content is being fetched. - **Error State**: A fallback view showing an error message and a "Try Again" button if the content fails to load. ### Interactions - Tapping the close button immediately dismisses the Safety Center and returns the user to the screen they came from (e.g., Settings, Chat, or Match List). - Tapping a tab instantly switches the content area to display the corresponding safety information without reloading the entire screen. - Swiping left or right on the content area navigates between the Guides, Tools, and Resources sections. - Tapping "Try Again" on the error state triggers a fresh network request to load the safety content. - If the user arrives via a direct link (e.g., from a safety prompt or external campaign), the corresponding tab is automatically pre-selected and scrolled into view. ### Sample Data - **User Name**: "Jordan" - **Profile Image**: Circular avatar showing a clear, recent photo of the user. - **Guides Tab Content**: - "How to stay safe on first dates" - "Recognizing suspicious behavior online" - "Tips for secure messaging and sharing contact info" - **Tools Tab Content**: - "Report a profile" - "Block contacts from your phone" - "Verify your identity with a selfie" - "Enable safety check-in for dates" - **Resources Tab Content**: - Links to local emergency services - Mental health and support hotlines - External dating safety organizations --- ## Verification Under Review ### Overview A full-screen status screen that informs users their selfie verification is currently being reviewed by the safety team. It prominently displays the submitted profile photo and provides a simple way to dismiss the screen while waiting for approval. ### UI Elements - **Full-Screen Layout**: Occupies the entire display with edge-to-edge padding for a focused, distraction-free experience. - **Profile Image Display**: A large, centered preview of the user's submitted verification selfie. - **Status Indicator**: A clear text label or badge indicating the current state (e.g., "Under Review"). - **Close/Back Control**: A discreet button or gesture area at the top or bottom to exit the screen. ### Interactions - Tapping the close button or using the system back gesture dismisses the screen and returns the user to the previous flow (e.g., Settings or Onboarding). - The screen is strictly informational; users cannot modify or resubmit their verification photo while it is under review. - If the user navigates away and later reopens the verification flow, the screen automatically refreshes to check if the review status has changed to "Approved" or "Rejected". - The screen gracefully handles orientation changes and adapts to different screen sizes while keeping the profile image centered. ### Sample Data - **Profile Image**: User's uploaded selfie used for identity verification, displayed at high resolution. - **Status Text**: "Your verification is under review. We'll notify you once it's complete." - **Entry Context**: Triggered after successfully capturing a verification selfie in the Settings > Verification flow. - **Visual State**: Clean, minimal background with a subtle loading spinner or checkmark icon next to the status text. --- ## Verification Intro Screen ### Overview The entry point for the identity verification process, explaining the purpose of the feature and prompting the user to begin the selfie capture flow. ### UI Elements - **Header**: Displays a two-line title reading "Let's get you verified" - **Instructional Text**: Subtitle reading "Make sure to frame your face in the oval!" - **Primary Action Button**: Labeled "Continue" or "I'm Ready" - **Info/Help Icon**: Located in the top corner, opens additional guidance - **Background**: Clean, branded gradient or solid color matching the app theme ### Interactions - Tapping the primary action button navigates to the Data & Privacy Disclaimer screen - Tapping the info icon opens the Verification Info modal - Pressing the system back button or tapping outside the flow triggers an exit confirmation dialog - The screen remains static until user interaction ### Sample Data - Title: "Let's get you verified" - Subtitle: "Make sure to frame your face in the oval!" - Button: "Continue" --- ## Data & Privacy Disclaimer Screen ### Overview A compliance screen that informs the user how their biometric data will be processed, stored, and used before they proceed to camera capture. ### UI Elements - **Title**: "Privacy & Data Usage" - **Body Text**: Scrollable legal disclaimer explaining encryption, retention periods, and third-party processing - **Primary Action Button**: Labeled "Continue" - **Secondary Action Button**: Labeled "Cancel" - **Scroll Indicator**: Visual cue that more content exists below the fold ### Interactions - Tapping "Continue" advances to the Pose Capture screen - Tapping "Cancel" dismisses the flow and returns to the previous app screen - Scrolling reveals the full disclaimer text - The screen blocks further navigation until the user explicitly accepts or cancels ### Sample Data - Body: "Your selfie data is encrypted and processed securely to verify your identity. We do not store raw biometric templates. By continuing, you agree to our Privacy Policy and Terms of Service." - Buttons: "Continue", "Cancel" --- ## Pose Capture Screen ### Overview The core verification screen that guides the user through a series of facial poses while capturing selfies using the device camera. ### UI Elements - **Camera Preview**: Full-screen live camera feed - **Alignment Guide**: Semi-transparent oval overlay centered on the screen - **Pose Instruction Text**: Dynamic text at the top (e.g., "Center Your Face", "Hold Steady") - **Pose Counter**: Displays current step (e.g., "1 of 3") - **Capture Button**: Large circular button labeled "Take Photo" - **Info/Help Icon**: Opens pose guidance tips - **Flash Toggle**: Button to enable/disable camera flash - **Permission Prompt Overlay**: Appears if camera access is denied, showing "Enable Camera" header and "Please click the button below to enable your selfie camera." message with an "Enable Camera" button ### Interactions - The camera feed activates immediately upon screen load - Real-time feedback updates the instruction text based on face position - Tapping "Take Photo" captures the current frame and transitions to the Photo Review screen - Tapping the info icon displays a modal with alignment tips - If camera permission is denied, the permission overlay appears; tapping "Enable Camera" opens device settings - Pressing back triggers the exit confirmation dialog ### Sample Data - Pose 1: "Center Your Face" - Pose 2: "Hold Steady" - Pose 3: "Look Straight Ahead" - Counter: "2 of 3" - Permission Overlay: "Enable Camera" / "Please click the button below to enable your selfie camera." --- ## Photo Review Screen ### Overview Allows the user to inspect the captured selfie for quality before confirming it or retaking the shot. ### UI Elements - **Captured Image Preview**: Full-screen or large card displaying the taken photo - **Pose Label**: Text indicating which pose was captured (e.g., "Your Selfie") - **Retake Button**: Labeled "Retake" - **Confirm Button**: Labeled "Accept" or "Confirm Info" - **Progress Indicator**: Shows how many poses remain ### Interactions - Tapping "Retake" returns to the Pose Capture screen for the current step - Tapping "Accept" saves the image locally and either advances to the next pose or completes the flow - The screen prevents navigation away until a choice is made - If it's the final pose, the confirm button triggers the upload and saving state ### Sample Data - Label: "Your Selfie" - Buttons: "Retake", "Accept" - Progress: "3 of 3" --- ## Profile Update Prompt Screen ### Overview Appears after successful verification, offering the user the option to replace their current profile picture with the newly verified image. ### UI Elements - **Success Header**: Displays "Success!" - **Verified Photo Preview**: Circular or rounded preview of the verified selfie - **Primary Action Button**: Labeled "Add Photos" - **Secondary Action Button**: Labeled "Cancel" - **Loading Overlay**: Appears briefly while the app syncs the new image ("Uploading…") ### Interactions - Tapping "Add Photos" opens the profile editor with the verified image pre-selected - Tapping "Cancel" dismisses the prompt and returns to the main app feed - The screen auto-dismisses after a short timeout if no action is taken - Network errors during upload trigger the Verification Error screen ### Sample Data - Header: "Success!" - Buttons: "Add Photos", "Cancel" - Loading Text: "Uploading…" --- ## Verification Error Screen ### Overview Displays when the verification process fails due to poor image quality, network issues, or system errors, providing clear next steps. ### UI Elements - **Error Title**: "Let's Try That Again" - **Error Subtitle**: "We Need a Clearer Video Selfie" - **Guidance List**: Bullet points with tips: - "Neutral Expression, No Smiling" - "No Glare or Extreme Lighting" - "Too Blurry, Clean Your Camera" - **Retry Button**: Labeled "Retry" - **Support Link**: Text button opening a help article ("Contact Support") ### Interactions - Tapping "Retry" restarts the verification flow from the intro or pose capture - Tapping "Contact Support" opens the Tinder Help Center in a browser tab - The screen remains visible until the user chooses to retry or exit - System back button triggers the exit confirmation dialog ### Sample Data - Title: "Let's Try That Again" - Subtitle: "We Need a Clearer Video Selfie" - Tips: "Neutral Expression, No Smiling", "No Glare or Extreme Lighting", "Too Blurry, Clean Your Camera" - Buttons: "Retry", "Contact Support" --- ## Exit Confirmation Dialog ### Overview A modal dialog that appears when the user attempts to leave the verification flow prematurely, preventing accidental data loss. ### UI Elements - **Title**: "Leave Verification?" - **Description**: "Are you sure you want to exit? Your progress will not be saved." - **Cancel Button**: Labeled "Cancel" - **Confirm Button**: Labeled "Exit" or "Leave" ### Interactions - Tapping "Cancel" dismisses the dialog and keeps the user on the current screen - Tapping "Exit" closes the verification flow and returns to the previous app screen - Tapping outside the dialog dismisses it (unless configured as modal-only) ### Sample Data - Title: "Leave Verification?" - Description: "Are you sure you want to exit? Your progress will not be saved." - Buttons: "Cancel", "Exit" --- ## Main Settings Hub ### Overview The central navigation screen where users manage all account preferences, discovery controls, privacy settings, subscriptions, and legal information. ### UI Elements - **Header/Toolbar**: Displays "Settings" with a back arrow to return to the previous screen. - **Scrollable Menu List**: Grouped rows/cards for quick access to sub-settings: - Discovery Preferences (Age, Distance, Location, Interested In) - Account Settings (Phone, Email, Connected Accounts, Security) - Privacy & Safety (Privacy Preferences, Safety Center, Message Controls, Active Status) - Notifications (Push & Email preferences) - Subscription & Payment (Manage Plan, Payment Methods, Restore Purchases) - App Features (Theme, Autoplay, Tinder U, Swipe Surge, Matchmaker) - Legal & Support (Terms of Service, Privacy Policy, Contact Us, Open Source Licenses) - Share App - Log Out - Delete My Account > (visually distinct, often highlighted in warning color) ### Interactions - Tapping any menu row navigates to the corresponding dedicated settings screen. - Tapping "Log Out" triggers a confirmation dialog before signing the user out and returning to the login screen. - Tapping "Delete My Account >" opens the account deletion and exit survey flow. - The screen automatically saves any inline toggle changes and syncs them to the backend. ### Sample Data - **Header**: Settings - **Menu Rows**: Discovery Preferences, Account Settings, Privacy & Safety, Notifications, Subscription & Payment, App Features, Legal & Support, Share App, Log Out, Delete My Account > --- ## Discovery Preferences ### Overview Controls who appears in the user's card stack, including gender preferences, age range, maximum distance, and location settings. ### UI Elements - **Header**: "Discovery Preferences" or "Show Me" - **Interested In Selector**: Multi-select chips for gender options (Man, Woman, Non-binary, Trans, etc.) - **Age Range Slider**: Dual-thumb slider showing minimum and maximum age (e.g., 18–35) - **Maximum Distance Slider**: Single-thumb slider for radius (e.g., 50 mi / 80 km) - **Global / Passport Toggle**: Switch to enable location changing (Premium feature) - **Location Picker**: Displays current city with a "Change Location" button - **Show Me on Tinder Toggle**: Hides profile from other users while keeping matches/messages intact - **Premium Discovery Controls**: Upsell cards for features like "See Who Likes You" or "Top Picks" ### Interactions - Dragging sliders updates the displayed values in real-time and saves automatically. - Tapping gender chips toggles selection; at least one must remain selected. - Tapping "Change Location" opens a search/map interface to select a new city. - Toggling "Show Me on Tinder" off immediately removes the profile from discovery queues. - Attempting to use Passport without a subscription opens a paywall screen. ### Sample Data - **Interested In**: Women, Non-binary - **Age Range**: 21 – 30 - **Maximum Distance**: 25 mi - **Location**: Austin, TX - **Show Me on Tinder**: On --- ## Privacy & Safety Center ### Overview A dedicated hub for managing safety tools, reporting mechanisms, message filtering, and profile visibility controls. ### UI Elements - **Header**: "Safety Center" - **Message Controls Section**: - "Allow messages before matching" toggle - "Filter inappropriate messages" toggle - **Profile Visibility Section**: - "Active Status" toggle (Show when you're online) - "Profile Badges" row (Manage activity/verification badges) - **Safety Tools Section**: - "Photo Verification" row (Start or manage verification) - "Block & Report" row (View blocked users, report someone) - "Safety Resources" row (Links to safety guides, Noonlight integration, safety quiz) - **Privacy Preferences Row**: Navigates to data consent settings ### Interactions - Toggles for message controls and active status update instantly. - Tapping "Photo Verification" launches the camera-based identity verification flow. - Tapping "Block & Report" opens a searchable list of recent matches/users to block or report. - Tapping "Safety Resources" opens in-app articles or external webviews with safety guidelines. - All changes are saved automatically and reflected across the app. ### Sample Data - **Allow messages before matching**: Off - **Filter inappropriate messages**: On - **Active Status**: Visible to matches - **Photo Verification**: Verified ✓ - **Blocked Users**: 3 --- ## Consent & Data Privacy Preferences ### Overview Manages user consent for data collection, personalized advertising, and third-party partner data sharing in compliance with privacy regulations. ### UI Elements - **Header**: "Privacy Preferences" - **Consent Categories List**: - "Personalized Ads" toggle - "Data Sharing with Partners" toggle - "Location Data for Matching" toggle - "Analytics & Performance" toggle - **Partner/Vendor Management**: "View Partner List" button - **Action Buttons**: "Accept All", "Reject All", "Save Preferences" - **Legal Disclaimer**: Text explaining how data is used and stored ### Interactions - Toggling categories updates consent state locally and queues a backend sync. - Tapping "View Partner List" opens a searchable list of third-party vendors with individual consent toggles. - "Accept All" enables all categories; "Reject All" disables non-essential tracking. - Tapping "Save Preferences" shows a confirmation toast and closes the screen. - Changes take effect immediately for ad targeting and data sharing. ### Sample Data - **Personalized Ads**: On - **Data Sharing with Partners**: Off - **Location Data for Matching**: On - **Analytics & Performance**: On - **Partner List**: Google Analytics, AppsFlyer, Facebook Ads, Tenor --- ## Account Deletion & Exit Survey ### Overview Guides users through permanently deleting or temporarily pausing their account, collecting feedback before finalizing the action. ### UI Elements - **Header**: "Delete Account" - **Warning Text**: "If you delete your account, you will permanently lose your profile, messages, photos, and matches. This cannot be undone." - **Action Buttons**: "Delete my account", "Deactivate" (Pause) - **Exit Survey** (appears after selecting Delete): - "Please let us know the reason you are leaving" - Radio/Chip options: "I met someone on Tinder", "I have had a poor experience on Tinder", "I need a break from Tinder", "I prefer other dating apps", "Something is broken", "I want a fresh start" - "Other type here" text input - **Final Confirmation Dialog**: "Are you sure you want to delete your account?" with "Delete my account" and "Cancel" buttons ### Interactions - Selecting a reason enables the "Continue to Account Deletion" button. - Tapping "Deactivate" opens a duration picker (e.g., 1 week, 1 month) and pauses the profile. - Tapping "Delete my account" in the final dialog triggers a loading spinner, then shows a "Congratulations!" success screen. - The app logs the user out and redirects to the login screen after deletion. ### Sample Data - **Selected Reason**: I need a break from Tinder - **Other Feedback**: App crashes too much - **Confirmation**: Are you sure you want to delete your account? --- ## Biometric & Passkey Security ### Overview Manages secure, passwordless login methods using device biometrics (Face ID/Fingerprint) or cryptographic passkeys. ### UI Elements - **Header**: "Security & Login" - **Passkeys Section**: - Status indicator (Enabled/Disabled) - "Set up Passkey" button - "Disable Passkey" option - **Biometric Login Toggle**: Switch to enable Face ID or Fingerprint authentication - **Data Management**: "Delete Biometric Data" button - **Info Text**: "Use your device's secure authentication to log in faster and more securely." ### Interactions - Toggling biometric login prompts the device's native authentication prompt. - Tapping "Set up Passkey" opens the OS passkey creation flow. - Tapping "Delete Biometric Data" shows a confirmation dialog warning that saved credentials will be removed. - All security changes require re-authentication before applying. ### Sample Data - **Passkeys**: Enabled on this device - **Biometric Login**: On - **Last Authenticated**: Today at 2:14 PM - **Delete Biometric Data**: [Button] --- ## Notification Preferences ### Overview Controls which push and email notifications the user receives for matches, messages, promotions, and account alerts. ### UI Elements - **Header**: "Notifications" - **Global Toggle**: "Allow Notifications" (master switch) - **Push Notifications Section**: - "New Matches" - "Messages" - "Super Likes" - "Boosts & Promotions" - "Safety & Account Alerts" - **Email Notifications Section**: - "Weekly Digest" - "Match Suggestions" - "Account Updates" - **Footer**: "Notification settings may be overridden by your device settings." ### Interactions - Toggling the master switch disables/enables all sub-toggles. - Individual toggles update instantly and sync to the server. - Safety & Account Alerts cannot be disabled for compliance reasons (toggle is locked or hidden). - Changes are reflected immediately in the app's notification behavior. ### Sample Data - **Allow Notifications**: On - **New Matches**: On - **Messages**: On - **Super Likes**: Off - **Weekly Digest**: Off - **Safety & Account Alerts**: On (Locked) --- ## Connected Accounts & Contact Info ### Overview Manages linked social accounts, phone number, and email address used for login, recovery, and profile syncing. ### UI Elements - **Header**: "Account Settings" - **Contact Information**: - "Phone Number": Displays current number with "Update" button - "Email Address": Displays current email with "Update" button - **Connected Accounts List**: - Google, Apple, Facebook, Spotify rows - Each shows "Connected" or "Connect" status with a toggle/button - **Security Options**: - "Log Out of All Devices" - "Two-Factor Authentication" (if enabled) ### Interactions - Tapping "Update" for phone/email opens an input field followed by an OTP verification screen. - Tapping "Connect" initiates an OAuth flow for the selected service. - Tapping "Disconnect" shows a confirmation dialog warning about lost sync features. - "Log Out of All Devices" invalidates active sessions on other devices and shows a success toast. ### Sample Data - **Phone Number**: +1 (555) 012-3456 - **Email Address**: alex.tinder@email.com - **Connected**: Google (Connected), Spotify (Connected), Facebook (Not Connected) - **Log Out of All Devices**: [Button] --- ## Spotify Connection Screen ### Overview A dedicated authentication interface that securely links your Tinder profile to your Spotify account, enabling music sharing, anthem selection, and shared music discovery features. ### UI Elements - **Header/Navigation**: Standard app navigation bar with a back/close icon to cancel the connection process. - **Loading State**: Centered circular progress indicator with a brief status message while the app prepares the secure connection request. - **External Authorization View**: Seamlessly transitions to the official Spotify mobile app or a secure in-app web browser for login and permission granting. - **Success State**: Brief visual confirmation before automatically closing and returning to the previous screen. - **Error Modal**: Triggers a system dialog if the connection fails, is interrupted, or permissions are denied. ### Interactions - **Initiation**: Screen opens automatically when selecting "Connect Spotify" from profile settings or onboarding. - **Authorization Flow**: Immediately redirects to the Spotify app or web login. User enters credentials and taps "Agree" or "Allow" to grant Tinder access to their public profile and top artists. - **Completion**: Upon successful authorization, the screen processes the secure token in the background, displays a brief success state, and automatically closes. The user's profile updates to show their connected Spotify status. - **Cancellation/Back**: Tapping the back button or closing the external Spotify view cancels the flow and returns the user to their profile without changes. - **Error Handling**: If the connection fails, the screen displays an error dialog. Dismissing it closes the connection screen and returns to the profile. ### Sample Data - Loading Message: "Connecting to Spotify..." - Success Message: "Connected successfully" - External Prompt: "Allow Tinder to access your Spotify account?" --- ## Connection Error Dialog ### Overview A modal alert that appears when the Spotify authentication process fails, network issues occur, or the user denies permissions, providing clear feedback and a way to dismiss the error. ### UI Elements - **Title**: Displays "Error Loading" - **Message Body**: Displays "Spotify connection error" - **Action Button**: Single "OK" button to acknowledge and dismiss the dialog. - **Overlay**: Semi-transparent background dimming the underlying screen to focus attention on the alert. ### Interactions - **Trigger**: Automatically appears if the Spotify app returns an error code, the network drops during token exchange, or the authorization request is malformed. - **Dismissal**: Tapping "OK" closes the dialog and the underlying connection screen, returning the user to their profile settings. - **State Reset**: Clears any pending authentication states, allowing the user to retry the connection process later without residual loading states. ### Sample Data - Title: "Error Loading" - Body: "Spotify connection error" - Button: "OK" --- ## Chemistry Home / My Insights ### Overview The central dashboard for smart matching features, where users can track their profile optimization progress, access personalized questionnaires, and manage photo insights. ### UI Elements - **Header/Toolbar**: Title reading "My Insights" with a back/close navigation icon. - **Description Text**: Brief explanatory text about how insights improve match quality. - **Insight Cards**: Two primary interactive tiles: - "Questions" card with a progress indicator and a "Start" or "Continue" button. - "Photo Insights" card with a thumbnail preview and a "View" or "Select" button. - **Empty State**: Placeholder illustration and text when no insights are available yet. - **Bottom Navigation/Actions**: Optional "Explore My Insights" link for deeper settings. ### Interactions - Tapping the back/close icon returns the user to the main app feed. - Tapping the "Questions" card navigates to the questionnaire flow. - Tapping the "Photo Insights" card opens the camera roll selection interface. - Tapping "Explore My Insights" opens a detailed breakdown of compatibility metrics. ### Sample Data - Header: `recs_intelligence_chemistry_home_my_insights_title` - Description: `recs_intelligence_chemistry_home_my_insights_description` - Card Labels: `recs_intelligence_chemistry_home_my_insights_questions`, `recs_intelligence_chemistry_home_my_insights_photo_insights` - Empty State: `recs_intelligence_chemistry_home_my_insights_empty` --- ## Feature Onboarding ### Overview An introductory walkthrough that explains how smart recommendations work, highlighting the benefits of participating before the user begins the setup flow. ### UI Elements - **Illustration Area**: Full-width graphic or animation demonstrating match curation. - **Title & Subtitle**: Clear, concise text explaining the feature's purpose. - **Pagination Indicators**: Dots showing current slide position. - **Primary Button**: "Get Started" to begin the setup. - **Secondary Button**: "Dismiss" to skip the onboarding. - **Beta Badge**: Optional label indicating the feature is in testing. ### Interactions - Swiping left/right or tapping the screen advances through slides. - Tapping "Get Started" closes the onboarding and launches the first setup step (Camera Roll Consent or Questionnaire). - Tapping "Dismiss" closes the modal and returns to the previous screen. ### Sample Data - Title: `recs_intelligence_intro_title_1` - Subtitle: `recs_intelligence_intro_subtext_1` - Primary Button: `recs_intelligence_intro_get_started` - Secondary Button: `recs_intelligence_intro_dismiss` - Badge: `recs_intelligence_intro_beta_badge_text` --- ## Camera Roll Consent & Photo Selection ### Overview A permission request and photo selection interface that allows the app to analyze the user's device photos to suggest optimal profile pictures. ### UI Elements - **Title & Description**: Explains why camera access is needed and how photos will be used. - **Benefit List**: Bullet points highlighting advantages (e.g., better photo suggestions, improved match quality). - **Action Buttons**: "Accept" and "Decline" prominently placed. - **Permission Fallback**: If previously denied, shows a "Go to Settings" button and a "Not This Time" option. - **Photo Grid**: Appears after consent, displaying selectable thumbnails from the device library. ### Interactions - Tapping "Accept" triggers the system camera roll permission dialog. If granted, the photo grid loads. - Tapping "Decline" skips the feature and returns to the previous step. - Tapping "Go to Settings" opens the device's app settings to manually enable permissions. - Selecting photos in the grid highlights them; a "Confirm" or "Continue" button finalizes the selection. ### Sample Data - Title: `recs_intelligence_camera_tagging_consent_content_title` - Description: `recs_intelligence_camera_tagging_consent_content_description_1` - Buttons: `recs_intelligence_camera_tagging_consent_content_accept`, `recs_intelligence_camera_tagging_consent_content_decline` - Fallback: `recs_intelligence_camera_tagging_consent_permission_go_to_settings`, `recs_intelligence_camera_tagging_consent_permission_not_this_time` --- ## Questionnaire & Topic Curation ### Overview An interactive form where users answer lifestyle, values, and preference questions to tailor future match recommendations. ### UI Elements - **Top Bar**: Title reading "Questions" or "Topic Curation" with a back/close icon. - **Question Prompt**: Large, readable text displaying the current question. - **Answer Options**: Horizontally scrollable chips or vertically stacked cards for multiple-choice answers. - **Progress Indicator**: Visual bar or step counter showing completion status. - **Action Buttons**: "Next" to save and proceed, "Skip" to bypass the current question. - **Optional Text Input**: Field for open-ended answers with a character limit counter. ### Interactions - Tapping an answer chip highlights it and enables the "Next" button. - Tapping "Next" saves the response and loads the next question. - Tapping "Skip" records no answer for the current question and advances. - Tapping the back icon triggers an exit confirmation dialog to prevent accidental data loss. ### Sample Data - Title: `recs_intelligence_topic_curation_title` - Subtitle: `recs_intelligence_topic_curation_sub_title` - Buttons: `recs_intelligence_next`, `recs_intelligence_skip` - Text Input Hint: `recs_intelligence_rec_drop_feedback_textfield_hint` - Character Limit: `recs_intelligence_rec_drop_feedback_character_limit` --- ## Smart Drop / Recommendation ### Overview The core recommendation screen displaying a curated profile match with compatibility insights, swipe/like actions, and optional feedback collection. ### UI Elements - **Profile Card**: Full-bleed photo with name, age, and distance overlay. - **Compatibility Tags**: Small badges showing shared interests or values (e.g., "Loves hiking", "Coffee enthusiast"). - **Action Buttons**: "Like" (heart/swipe right) and "Nope" (X/swipe left) prominently placed at the bottom. - **View Profile Button**: Secondary action to open the full profile details. - **Optional Message Input**: Text field to send a personalized note with a like. - **Feedback Chips**: Appears after tapping "Nope", offering quick reasons for passing. ### Interactions - Swiping right or tapping "Like" sends a match request. A success confirmation appears. - Swiping left or tapping "Nope" passes the profile and reveals feedback chips. - Tapping a feedback chip records the reason and advances to the next recommendation. - Tapping "View Profile" opens a detailed overlay with full bio, photos, and prompts. - Tapping the back icon triggers an exit confirmation dialog. ### Sample Data - Labels: `recs_intelligence_rec_drop_you`, `recs_intelligence_rec_drop_them_content_description` - Buttons: `recs_intelligence_rec_drop_send_like_cta_button`, `recs_intelligence_rec_drop_view_profile` - Feedback Title: `recs_intelligence_rec_drop_feedback_title` - Feedback Send: `recs_intelligence_rec_drop_feedback_send_button` - Success Message: `recs_intelligence_rec_drop_ian_like_sent_success_title` --- ## Waiting / Processing ### Overview An interstitial screen displayed while the recommendation engine prepares the next curated profile or processes user input. ### UI Elements - **Loading Animation**: Subtle, branded motion graphic or pulsing illustration. - **Primary Status Message**: Text indicating the system is working. - **Secondary Wait Time**: Estimated duration until the next recommendation is ready. - **Background**: Soft gradient or translucent overlay to maintain visual continuity. ### Interactions - Automatically transitions to the next recommendation screen when data is ready. - Tapping the back icon returns the user to the main app feed. - No interactive buttons are present to prevent interrupting the process. ### Sample Data - Primary Message: `recs_intelligence_waiting_drop_message1` - Wait Time: `recs_intelligence_waiting_drop_message2_with_hours` - Shortened Variant: `recs_intelligence_waiting_drop_message_shorten` --- ## Error & Exit Confirmation ### Overview Fallback screens for handling network/loading failures and preventing accidental navigation away from the active recommendation flow. ### UI Elements - **Error State**: - Illustration indicating a loading failure. - Title and description explaining the issue. - "Retry" and "Dismiss" buttons. - **Exit Confirmation Dialog**: - Modal overlay with a title and descriptive text. - "Stay" (primary) and "Leave" (secondary) buttons. ### Interactions - **Error State**: Tapping "Retry" attempts to reload the recommendation data. Tapping "Dismiss" closes the error and returns to the previous screen. - **Exit Dialog**: Tapping "Stay" keeps the user on the current screen. Tapping "Leave" closes the feature and returns to the main app feed. - Both dialogs block background interaction until a choice is made. ### Sample Data - Error Title: `recs_intelligence_processing_error_awkward_title` - Error Buttons: `recs_intelligence_processing_error_awkward_retry`, `recs_intelligence_processing_error_awkward_dismiss` - Exit Title: `recs_intelligence_exit_confirm_title` - Exit Description: `recs_intelligence_exit_confirm_description` - Exit Buttons: `recs_intelligence_exit_confirm_stay`, `recs_intelligence_exit_confirm_leave` --- ## Music Onboarding ### Overview A setup screen that guides users through connecting their Spotify account, browsing or searching for tracks, and selecting their favorite songs to display on their Tinder profile before entering Music Mode. ### UI Elements - **Top Navigation Bar**: Close icon (top-left) to exit the flow, and a screen title ("Add Music to Your Profile"). - **Spotify Connection Card**: Displays the current connection status. If disconnected, shows a "Connect Spotify" button. If connected, shows a "Sync Top Tracks" button alongside a connected status indicator. - **Selected Songs Grid**: A scrollable grid of chosen tracks. Each card displays the album artwork, song title, artist name, and a remove (X) icon. - **Search Trigger**: A prominent "Search for songs" button or icon that opens the song search interface. - **Primary Action Button**: "Continue" button anchored at the bottom. Displays a loading spinner while saving selections and remains disabled until at least one song is selected. - **Error State Banner**: Appears when content fails to load. Displays the text "Something went wrong" and "Please try again" alongside a "Retry" button. - **Loading Placeholders**: Shimmering gray skeleton cards appear in the song grid while initial data or Spotify tracks are being fetched. ### Interactions - **Tap Close**: Exits the onboarding flow without saving changes and returns to the previous screen. - **Tap Connect Spotify**: Launches the Spotify authentication screen. Upon successful login, the app automatically fetches the user's top tracks and populates the song grid. - **Tap Sync Top Tracks**: Refreshes the song list with the latest listening data from the connected Spotify account. - **Tap Search Trigger**: Opens the Song Search Bottom Sheet overlay. - **Tap Remove (X)**: Immediately removes the tapped song from the selected list and updates the grid. - **Tap Continue**: Saves the selected songs to the user's profile. The button enters a loading state during the save process. Once complete, the user is automatically navigated to the Music Mode discovery feed or back to the main swipe feed, depending on how they entered the flow. - **Tap Retry**: Re-attempts the data fetch, clears the error banner, and restores the loading placeholders until content loads successfully. ### Sample Data - **Song 1**: "Cruel Summer" – Taylor Swift - **Song 2**: "Flowers" – Miley Cyrus - **Song 3**: "Anti-Hero" – Taylor Swift - **Error Message**: "Something went wrong. Please try again." - **Button States**: "Continue" (disabled), "Continue" (loading spinner), "Continue" (enabled) --- ## Song Search Bottom Sheet ### Overview A modal overlay that allows users to search the Spotify music catalog and quickly add specific tracks to their profile selection. ### UI Elements - **Header**: Search input field with placeholder text ("Search for a song or artist"), a clear (X) button to reset the query, and a drag handle for dismissal. - **Results List**: A vertically scrollable list of matching tracks. Each row displays album artwork, song title, artist name, and an "Add" (+) button. - **Empty State**: A centered message and icon displayed when the search query returns no matches. - **Loading Indicator**: A small spinner appears below the search bar while network results are being fetched. ### Interactions - **Type in Search Field**: Triggers live search results as the user types. Results update dynamically with each keystroke after a short debounce. - **Tap Clear (X)**: Empties the search field, hides the keyboard, and resets the results list to its initial state. - **Tap Add (+)**: Immediately adds the selected track to the main onboarding screen's song grid, closes the bottom sheet, and returns focus to the main screen. - **Swipe Down / Tap Outside**: Dismisses the bottom sheet and returns to the main onboarding screen without making changes. - **View Empty State**: Displays when no tracks match the query, prompting the user to try a different search term. ### Sample Data - **Search Query**: "vampire" - **Result 1**: "vampire" – Olivia Rodrigo - **Result 2**: "Vampire" – The Weeknd - **Result 3**: "Vampire State Building" – The National - **Empty State Text**: "No songs found. Try a different search." --- ## Account Status & Ban Notice ### Overview A full-screen notification that informs the user their account has been suspended, banned, or placed under review, explains the reason or policy violation, and provides actionable next steps like appealing the decision or reviewing community guidelines. ### UI Elements - **Header/Title:** Displays the current account status (e.g., "Account Suspended", "Under Review", or "Account Restricted"). - **Status Icon/Graphic:** Visual indicator matching the ban type (e.g., shield for review, warning triangle for suspension). - **Primary Message Area:** Explains why the account is restricted. For custom bans, shows a specific reason. For suspensions, displays the violation policy and remaining time. - **Countdown/Timer (Conditional):** Shows remaining days until permanent deletion or suspension lift (e.g., "14 days remaining"). - **Action Buttons:** - "Appeal Decision" (Visible only when an appeal token is available) - "View Community Guidelines" (Policy link) - "Verify Identity" (Visible for underage/age-flagged accounts) - **Loading State:** Centered progress spinner while fetching account status. ### Interactions - **Tap "Appeal Decision":** Opens an external browser window to the official appeal center where the user can submit a review request. - **Tap "View Community Guidelines":** Opens an external browser to Tinder's policy documentation. - **Tap "Verify Identity":** Navigates to the Age & Identity Verification screen. - **State Changes:** If the server returns a suspension policy, the countdown timer and appeal button dynamically appear. If the ban is under review, action buttons are disabled and replaced with a "We're reviewing your account" message. ### Sample Data **Title:** Account Suspended **Message:** Your account has been temporarily suspended for violating our Community Guidelines regarding respectful communication. You have 7 days remaining before this suspension becomes permanent. **Buttons:** [Appeal Decision] [View Community Guidelines] --- ## Security Verification (CAPTCHA) ### Overview A security checkpoint that requires the user to complete a human verification challenge to restore access to their account after suspicious activity or automated behavior detection. ### UI Elements - **Header:** "Verify You're Human" - **Instruction Text:** "Please complete the security check below to continue using Tinder." - **CAPTCHA Widget Area:** Embedded interactive challenge (image selection, puzzle, or checkbox). - **Processing Overlay:** Dimmed background with a circular loader and "Verifying..." text. - **Error State (Conditional):** Red warning banner with "Verification failed. Please try again." and a "Retry" button. ### Interactions - **Complete CAPTCHA:** Triggers the processing overlay. On success, the screen automatically closes and returns the user to the main app experience. - **Tap "Retry" (on failure):** Resets the CAPTCHA widget and clears the error banner, allowing a new attempt. - **State Changes:** Transitions from `Ready` → `Processing` → `Success/Failure`. If failed, the error state persists until the user retries. ### Sample Data **Header:** Verify You're Human **Instruction:** Please complete the security check below to continue using Tinder. **Error Message:** Verification failed. Please try again. **Button:** [Retry] --- ## Age & Identity Verification ### Overview Guides users who have been flagged for age verification through the process of uploading a government-issued ID to confirm their age and restore full account access. ### UI Elements - **Status Header:** Dynamic text based on verification stage: - "Verify Your Age" (Not Started) - "Verification In Review" (Submitted) - "Verification Unsuccessful" (Failed) - "Verification Error" (System/Network issue) - **Countdown Timer:** Prominent display showing days remaining to complete verification (e.g., "12 days left to verify"). - **Instructional Text:** Contextual guidance (e.g., "Upload a clear photo of your government-issued ID to verify your age and restore access.") - **Primary Action Button:** "Start ID Verification" (Visible when not started or on error). - **Hidden/Disabled State:** Button is hidden when verification is in review or successfully completed. ### Interactions - **Tap "Start ID Verification":** Launches a secure, third-party ID scanning flow that guides the user through capturing their ID document and taking a live selfie. - **On Success:** Screen closes automatically, and the user is returned to the main app with full access restored. - **On Rate Limit Exceeded:** Triggers the Verification Attempt Limit Dialog. - **State Changes:** - `Not Started` → Shows button and countdown. - `In Review` → Hides button, shows "We're reviewing your documents. This usually takes 24-48 hours." - `Unsuccessful/Error` → Shows retry button and updated instructions. ### Sample Data **Header:** Verify Your Age **Timer:** 14 days remaining **Instructions:** We need to verify your age to continue. Upload a clear, well-lit photo of your government-issued ID. Make sure all text is visible and the document is not expired. **Button:** [Start ID Verification] --- ## Connection Error ### Overview A fallback screen displayed when the app cannot reach the server to retrieve the user's account status or ban details. ### UI Elements - **Error Icon:** Large warning or disconnected plug graphic. - **Title:** "Connection Error" - **Message:** "Unable to load account status. Please check your internet connection and try again." - **Action Button:** "Retry" ### Interactions - **Tap "Retry":** Re-initiates the network request to fetch account status. If successful, the screen transitions to the appropriate ban/verification state. If it fails again, the error screen remains. - **State Changes:** Replaces the main ban screen entirely until a successful connection is established. ### Sample Data **Title:** Connection Error **Message:** Unable to load account status. Please check your internet connection and try again. **Button:** [Retry] --- ## Verification Attempt Limit Dialog ### Overview A modal alert that appears when a user has exceeded the allowed number of ID verification attempts within a specific timeframe, preventing further submissions until the limit resets. ### UI Elements - **Title:** `id_verification_rate_limit_error_title` - **Message:** `id_verification_rate_limit_error_description` - **Action Button:** `okay` (Centered, primary style) ### Interactions - **Tap "Okay":** Dismisses the dialog and returns the user to the Age & Identity Verification screen. The "Start ID Verification" button remains disabled or hidden until the rate limit period expires. - **State Changes:** Blocks further ID upload attempts. The dialog is non-dismissable via outside tap to ensure the user acknowledges the limit. ### Sample Data **Title:** Too Many Attempts **Message:** You've reached the limit for ID verification attempts. Please wait 24 hours before trying again to ensure your documents are processed correctly. **Button:** [Okay] --- ## Wrapped Intro Screen ### Overview The entry point to the Year in Review experience, presenting a visually engaging splash screen that invites the user to explore their personalized annual dating statistics and milestones. ### UI Elements - Full-screen branded background featuring a vibrant, animated gradient and the "Year in Review" or "Wrapped" logo. - Prominent headline text introducing the feature. - Subtitle text briefly explaining what the user will see. - Primary call-to-action button labeled "Get Started" or "View My Wrapped". - Secondary close/dismiss icon (typically an "X" or back arrow) in the top corner. - Optional subtle animation or particle effects to draw attention to the center content. ### Interactions - Tapping the primary button smoothly transitions the user to the first story slide of the recap. - Tapping the close icon immediately exits the experience and returns the user to the main app feed. - The screen may feature a brief auto-play animation that pauses until the user interacts, ensuring they are ready before proceeding. ### Sample Data - Headline: "Your 2023 Wrapped" - Subtitle: "See who you matched with, where you traveled, and your top moments of the year." - Button: "Let's Go" ## Wrapped Story Viewer ### Overview A full-screen, immersive carousel that presents personalized yearly statistics, achievements, and highlights in a sequential, story-like format, similar to social media stories. ### UI Elements - Top progress bar divided into segments, visually indicating the current slide's position relative to the total number of slides. - Large, dynamic typography displaying key metrics (e.g., swipe counts, match totals, travel locations). - Thematic background colors or gradients that shift to match the mood of each specific stat. - Animated icons or illustrations representing each category (e.g., a globe for travel, a flame for streaks, a heart for matches). - Navigation hint text at the bottom (e.g., "Tap to continue" or swipe arrows). - Share icon button positioned in the top-right or bottom-center corner. - Optional "Replay" or "Previous" indicator on the left side of the screen. ### Interactions - Tapping the right half of the screen advances to the next slide; tapping the left half returns to the previous slide. - Swiping up or down can also navigate forward or backward through the slides. - The progress bar fills in real-time as the user moves through the sequence. - Tapping the share icon generates a snapshot of the current slide and opens the device's native share sheet for posting to social media or messaging apps. - If the user reaches the final slide, the experience automatically transitions to the summary screen. ### Sample Data - Slide 1: "You swiped right 1,240 times this year. That's 3.4 swipes a day!" - Slide 2: "Your top match was with someone who loves hiking and specialty coffee." - Slide 3: "You traveled to 5 new cities while using Tinder Passport." - Slide 4: "Your longest conversation streak lasted 14 days." ## Wrapped Summary & Share Screen ### Overview The concluding screen of the Year in Review experience, aggregating the user's top highlights into a single, shareable recap card while providing clear exit options. ### UI Elements - Celebratory header text (e.g., "That's a Wrap!" or "Your Year in a Nutshell"). - A visually distinct summary card or grid displaying the top 3-4 personalized stats side-by-side. - Prominent "Share My Wrapped" button featuring recognizable social media logos (Instagram, Twitter/X, etc.). - Secondary "Download Image" button for saving the recap locally. - Primary exit button labeled "Back to Swiping" or "Done". - Optional "Replay Wrapped" link to restart the story viewer from the beginning. ### Interactions - Tapping "Share My Wrapped" compiles the summary stats into a vertical image and triggers the system share dialog. - Tapping "Download Image" saves the generated recap card directly to the device's photo gallery. - Tapping "Back to Swiping" closes the Year in Review module and seamlessly returns the user to the main discovery feed. - Tapping "Replay Wrapped" resets the story viewer to the first slide and begins playback again. ### Sample Data - Header: "That's a Wrap! 🎉" - Summary Stats: "87 Matches • 3 Continents • 12 Super Likes • Top Month: July" - Share Button: "Share on Instagram" - Exit Button: "Back to Tinder" --- Based on the provided source code for the **Other** feature area, there are **no user-facing screens** to specify. The code batch consists entirely of internal infrastructure, third-party dependencies, and development tooling: * **Debug & Design System Tools**: `ShowkaseBrowserActivity` and its associated metadata models are part of Airbnb's Showkase library, used internally by developers and designers to preview, test, and document Jetpack Compose components. Per your instructions, debug/design tools are skipped. * **Third-Party Media Libraries**: `TtmlNode`, `Cue`, `Util`, `Assertions`, and `Bundleable` are core utility and subtitle rendering classes from Google's ExoPlayer media playback library. These handle background media parsing and do not expose direct UI. * **Internal Data Models**: `SponsoredInterestNativeFormatAdAssetKeys` contains string constants for mapping ad network payloads and has no UI representation. * **Compiler-Generated Utilities**: `a/a.java` is a synthetic Kotlin helper class containing string/list manipulation utilities. Since all provided files fall under internal utilities, third-party frameworks, or debug tooling, no user-facing screen specifications are generated for this feature area.