# Instagram Messaging & Direct — Screen Specifications --- ## Direct Inbox (DMs Home) ### Overview The user sees a list of all their direct message conversations — individual chats, group chats, and AI-assisted threads — and can tap into any conversation or start a new one. ### UI Elements **Header / Top Bar** - Left: Instagram wordmark or back arrow (when navigated from another section) - Center: Title — "Messages" - Right: Compose/new message icon (pencil or edit icon) **Conversation List** Each row in the list shows: - Circular profile photo (or group avatar mosaic for group chats) - **Name**: Username or full name (e.g., "alejandra_writes", "Marco Bellini") - **Preview text**: Last message snippet, truncated — e.g., "Liked a photo", "You: Looking fire today!", "Sent a reel" - **Timestamp**: Relative time — "2m", "1h", "3d" - **Unread indicator**: Bold name + filled colored dot on the right for unread messages - **AI/Meta AI thread badge**: Threads with Meta AI or an AI agent may show a distinctive AI avatar or badge (e.g., sparkle icon) **Request Folder** (if applicable) - A separate tappable row labeled "Message requests" with a count badge (e.g., "Message requests · 4") **Empty State** - If no messages exist: "No photos or videos yet" (analogous empty state) — or more accurately a message like "Start a conversation" with a CTA button **Bottom Navigation** - Standard Instagram bottom tab bar (Home, Search, Reels, Shop, Profile) ### Interactions - **Tap a conversation row** → Opens the Chat Thread screen for that conversation - **Tap compose icon** → Opens the New Message / Recipient Picker screen - **Tap "Message requests"** → Opens a filtered list of pending message requests - **Swipe left on a conversation row** → Reveals options: Mute, Delete - **Long-press on a conversation row** → Contextual action sheet with: Mute, Delete, Mark as Read/Unread - Conversations auto-update with new message previews and timestamps in real time ### Sample Data ``` ● alejandra_writes "You: Looking fire today! 🔥" 2m Marco Bellini "Liked your message" 1h ● surf_crew_🌊 👥 "Jenna: Are we still on for Sat?" 3h Meta AI ✨ "Here's your recipe summary…" Yesterday travel.diaries "Sent a reel" Mon ``` --- ## Chat Thread ### Overview The user reads and sends messages in a one-on-one or group conversation, and can send text, media, reactions, voice notes, and other rich content. ### UI Elements **Header / Top Bar** - Back arrow (left) - Center: Recipient avatar(s) + name/username (e.g., "alejandra_writes") — tappable to open profile - Right side icons: Video call icon, Phone call icon, Info/details icon (ℹ️) - For group chats: Group name is shown; count of members below it (e.g., "surf_crew 🌊 · 6 members") **Message List (scrollable, newest at bottom)** Each message bubble shows: - **Sent messages**: Right-aligned, filled color bubble (default purple/gradient), no avatar - **Received messages**: Left-aligned, grey bubble, with sender avatar on the left - **Text content**: Message text, link previews (with thumbnail, title, URL) - **Media messages**: Photo/video thumbnail inline, tappable to expand - **Reel/post shares**: Card with thumbnail + caption snippet + "View on Instagram" button - **Reactions**: Emoji reactions displayed as a small floating chip below the message bubble (e.g., ❤️ 2) - **Reply previews**: A quoted mini-bubble above the message showing what's being replied to - **Timestamp**: Shown on long-press or as a section separator (e.g., "Today 2:14 PM", "Monday") - **Seen indicator**: "Seen" with a tiny avatar appears below the last read message in a 1:1 chat - **Voice messages**: Waveform bar with play button and duration (e.g., "0:08") - **Like/heart button**: Appears on long-press of any message **"Sharing Live Location"** — appears as a special card when someone shares their live location (label: "Sharing Live Location") **Vanish Mode indicator** (if active): Background changes with a visual cue that messages will disappear **Message Input Bar (bottom)** - Camera icon (left) → opens camera for in-chat photo/video - Text input field: Placeholder varies — "Message…" or contextually "Add a comment for @username" / "Start the conversation…" / "What do you think of this?" - Microphone icon: Hold to record a voice note - Photo/gallery icon: Open media picker - Emoji/sticker icon - Right side: "Like" button (heart icon) when the text field is empty; Send arrow when text is entered - When text is typed, the send arrow appears and the like/other icons collapse **Reaction Picker** (appears on long-press of a message) - Row of 6 quick emoji reactions (❤️ 😂 😮 😢 😡 👍) - "+" button to open full emoji picker - Below reactions: action options — "Reply", "Forward", "Unsend", "Copy", "Report" ### Interactions - **Tap send arrow** → Sends message; bubble appears immediately on the right - **Tap camera icon** → Opens in-app camera; photo/video captured goes directly into the message input - **Tap gallery icon** → Opens media picker; selected images/videos are attached to the message - **Hold microphone** → Records a voice note; release to send, swipe left to cancel - **Long-press any message bubble** → Shows reaction emoji row + action sheet (Reply, Unsend, Copy, Report) - **Tap a reaction emoji** → Adds that reaction to the message; tapping again removes it - **Tap "Reply"** on a message → Attaches a quote of that message to the input bar; tap × to remove - **Tap a photo/video bubble** → Opens full-screen media viewer - **Tap a shared reel/post card** → Navigates to that reel or post - **Tap the header name/avatar** → Opens the recipient's profile or group info panel - **Tap info icon** → Opens Thread Details / Settings (see below) - **Tap a link preview** → Opens in Instagram's in-app browser - **Swipe right on a message bubble** → Quick reply (quotes that message) - **Scroll up** → Loads older messages (pagination) ### Sample Data ``` [Monday 9:41 AM] alejandra_writes: Did you see the new café on 5th? ☕ [Reel card: @coffeeworldtours · "Best hidden cafés in NYC" ▶] You: omg yes I walked by it yesterday! We need to go 🙌 Seen ✓ alejandra_writes: This weekend? 🥐 ❤️ 1 [Voice message] ▶ ~~~~~~ 0:06 You: 👍 ``` --- ## New Message / Recipient Picker ### Overview The user searches for and selects one or more people to start a new direct message conversation with. ### UI Elements **Header** - Back arrow or "×" close button (left) - Title: "New message" (center) - Right: "Next" button (greyed out until at least one recipient is selected) **Search Bar** - Full-width search field: Placeholder — "Search…" - Displays a keyboard immediately on screen open **Selected Recipients Chips** (appears above search when selections are made) - Horizontally scrollable row of pill/chip badges showing selected usernames - Each chip has an "×" button to remove that recipient - Example: `alejandra_writes ×` `surf.marco ×` **Suggested Contacts List** (shown before/during search) - Section header: "Suggested" - Each row contains: - Circular profile photo - Username (bold) - Display name (below, lighter text) - Verified badge (✓) if applicable - Checkbox or circular select indicator on the right (filled when selected) **Search Results List** - Live-filtered list matching the search query - Same row format as Suggested list - Results include accounts the user follows + others **"Create group chat"** option (appears at top or as a distinct row): - Icon + label "Create group chat" ### Interactions - **Type in search bar** → List filters in real time to matching users - **Tap a user row** → Adds that user as a chip in the selected recipients area; row shows as selected - **Tap ×** on a chip → Removes that recipient from selection - **Tap "Next"** (when ≥1 recipient selected) → If one recipient: opens the Chat Thread directly. If multiple: may show a "Name your group" prompt or open the group chat thread - **Tap back/close** → Returns to Direct Inbox without creating a conversation ### Sample Data ``` To: [alejandra_writes ×] 🔍 Search… Suggested 👤 marco.b Marco Bellini 👤 surf_jenna Jenna Park 👤 traveldiaries Sofia Andrade 👤 coffe_crew Coffee Crew 👥 (group) ``` --- ## Thread Details / Info ### Overview The user sees metadata and settings for a specific conversation — participants, shared media, notification preferences, and moderation options. ### UI Elements **Header** - Back arrow (left) - Title: "Details" (center) **Conversation Identity Section** - For 1:1 chats: - Large circular profile photo - Username (bold, large) - Full name (below) - "View Profile" button - For group chats: - Group avatar mosaic (up to 4 member photos) - Group name (editable, tap to rename) - Member count: "6 members" **Action Buttons Row** (icon + label, horizontally arranged) - "Voice call" (phone icon) - "Video chat" (video icon) - "Mute" (bell icon) - "Search" (magnifier, searches within thread) **Members Section** (group chats) - "Members" with a count - Each member row: avatar + username + "Admin" badge if applicable - "Add people" row at top with a "+" icon **Shared Media Section** - "Photos & videos" row with a thumbnail grid preview (e.g., 3–4 small squares) - Tapping → opens full shared media grid **Shared Links Section** - "Links" row listing URLs shared in the thread **Settings / Options** - "Mute messages" toggle — mutes push notifications for this thread - "Mute story reposts" toggle - "Restrict" option — limits the user's interactions - "Block" option - "Report" option (label: "Report") - "Delete chat" option (label: "DELETE") — confirmation dialog shown **Leave Group** (group chats only) - "Leave chat" red-text button ### Interactions - **Tap "View Profile"** → Navigates to that user's profile - **Tap group name** → Enters edit mode; on-screen keyboard to rename - **Tap "Add people"** → Opens Recipient Picker in "add to group" mode - **Tap a member row** → Opens that member's profile or shows action sheet (Message, Remove from group) - **Tap "Photos & videos"** → Opens a grid of all shared media in this thread - **Toggle "Mute messages"** → Immediately mutes/unmutes push notifications; label updates - **Tap "Block"** → Confirmation dialog appears ("Block [username]? They won't be able to message you." — buttons: "Block", "Cancel") - **Tap "Delete chat"** → Confirmation dialog: "Delete this item?" with buttons "DELETE" / "CANCEL" - **Tap "Leave chat"** → Confirmation dialog before removing the user from the group ### Sample Data ``` Details [Avatar] alejandra_writes Alejandra García [View Profile] 📞 Voice 📹 Video 🔔 Mute 🔍 Search ─── Photos & Videos ───────────────────── [img] [img] [img] [img] > ─── Notifications ──────────────────────── Mute messages ○ (toggle off) Mute story reposts ○ (toggle off) ─── Privacy ────────────────────────────── Restrict Block Report Delete chat ``` --- ## Meta AI / AI Agent Chat Thread ### Overview The user interacts with Meta AI or a branded AI agent in a dedicated chat thread that resembles a standard DM but with AI-specific affordances like suggested prompts and a distinct AI avatar. ### UI Elements **Header / Top Bar** - Back arrow (left) - Center: AI name + avatar (e.g., "Meta AI" with a circular gradient/sparkle icon) - Subtitle (below name): "AI by Meta" or the agent's tagline - Info icon (right) **Welcome / Interstitial State** (first open) - Illustrated card or banner with the AI's avatar - Headline: e.g., "Hi! I'm Meta AI" - Short description of what the AI can help with - Suggested prompt chips displayed horizontally or in a grid: - Example prompts from the "me" / "imagine me" identifiers: "Imagine me as…", "Help me write…", "What should I cook tonight?" **Message List** (same structure as Chat Thread) - AI messages: Left-aligned, with the AI avatar on the left; bubble styled differently (e.g., lighter color or gradient border) - User messages: Right-aligned, standard bubble - AI responses may include: - Long-form text with formatting (bold, bullet points) - Generated images (tappable to expand) - Action cards with buttons (e.g., "Try again", "Share") - **Loading indicator**: Three animated dots while the AI is generating a response **"Sharing Live Location" card** (if relevant to the context) **Message Input Bar** - Same as standard Chat Thread - Placeholder: "Message Meta AI…" or "Ask anything…" - Additional "✨ Imagine" button or similar AI-specific shortcut (for image generation) - Send button **Suggested Replies** (appears above input bar after AI sends a message) - 2–3 short tappable prompt chips: e.g., "Tell me more", "Try a different style", "Share this" ### Interactions - **Tap a suggested prompt chip** (welcome screen or reply suggestions) → Pre-fills the input with that prompt text; user can edit or send directly - **Type and send a message** → AI response begins generating (loading dots appear); full response populates once ready - **Tap a generated image** → Opens full-screen image viewer with option to save or share - **Tap "Share" on an AI response** → Opens the standard Instagram share sheet (share to story, send in DM, copy link) - **Tap "Try again"** on an AI response → Regenerates the previous AI response - **Tap info icon** → Opens thread details panel for the AI thread (with options to mute, report, clear conversation) - **Long-press an AI message** → Action sheet: "Copy", "Report", "Like" (heart reaction) - **Tap back** → Returns to Direct Inbox; the AI conversation is saved and appears in the conversation list with the last AI message preview ### Sample Data ``` Meta AI ✨ AI by Meta ───────────────────────────────── Meta AI: Hey! What can I help you with today? 🙌 [Imagine me as an astronaut] [Help me write a caption] [What's a quick dinner recipe?] You: What should I cook tonight? I have chicken and lemon 🍋 Meta AI: Great combo! Here's a simple idea: **Lemon Herb Roasted Chicken** • Season chicken with salt, pepper, garlic • Squeeze lemon over the top • Roast at 400°F for 35–40 min Want the full recipe or a different option? [Tell me more] [Different recipe] [Share] ───────────────────────────────── 💬 Message Meta AI… ➤ ``` --- # AI & Creative Tools — Screen Specifications --- ## Meta AI Home ### Overview The main hub for Instagram's built-in Meta AI assistant, where users can start conversations, browse AI-suggested topics, and access focused sections of the AI experience. ### UI Elements **Header/Toolbar** - Title: "Meta AI" (or contextual header depending on entry point) - Back/close button (top-left) to return to the previous screen **Main Content Area** - AI conversation feed or landing surface, displaying previous exchanges or an empty-state prompt if no prior conversation exists - Sectioned content areas (sections navigable by `section_id` and `focused_section` parameters), e.g., suggested prompts, image generation, search-style queries - "Imagine me" / "me" prompt shortcuts (from `meta_ai_image_memu_input_prompt_identifiers` string array) — tappable chips that pre-fill the input field **Text Input** - Large, multi-line text input field at the bottom of the screen - Placeholder text (e.g., "Ask Meta AI anything…") - Send/submit button (arrow icon) to the right of the input - Attachment or media button (for image-based prompts) to the left of the input **Contextual Prompt Chips** - Horizontally scrollable row of quick-action chips above the input bar - Examples: "me", "imagine me", trending topics, or recent suggestions **Error/Loading States** - "Loading…" indicator while AI response is being generated - "Something went wrong." message with a "Try again" button on failure - "No network connection" banner with "Check your device's network connection and try again." and a "Try again" button ### Interactions - Tapping a prompt chip pre-fills the text input with that prompt text - Typing in the input field and tapping Send submits the message; the AI response appears inline in the conversation feed - Tapping a section card or focused section scrolls to or opens that content area - Tapping Back navigates back to the originating surface (feed, Explore, profile, etc.) - Deep-linking with `entry_point=deeplink` opens this screen directly; `section_id` scrolls to a specific section; `focused_section` highlights a particular content block ### Sample Data > User types: "What should I cook tonight?" > Meta AI responds: "Here are 5 quick dinner ideas based on what's trending: Pasta e Fagioli, Sheet Pan Lemon Chicken, Miso-glazed Salmon…" > Prompt chips: "imagine me", "me", "Summarize this", "Help me write a caption" --- ## Meta AI Chat Thread ### Overview A one-on-one conversation interface between the user and a specific Meta AI persona or agent, accessible via deep link or from a Direct message thread. ### UI Elements **Header/Toolbar** - AI persona name (e.g., a named AI character or "Meta AI") displayed as the title - Avatar/profile image of the AI persona (left of title) - Back arrow (top-left) to return to the previous screen - Optional overflow menu (three dots, top-right) with options such as "Report" and AI settings **Conversation Thread** - Vertically scrollable list of chat bubbles - User messages: right-aligned bubble, white or brand-colored background - AI messages: left-aligned bubble, neutral background, AI avatar shown to the left - Timestamps shown between message groups (e.g., "Today 2:14 PM") - AI responses may include formatted text, bullet lists, or embedded image suggestions - "Typing…" animated indicator while AI is generating a response **Input Area (bottom)** - Text input field with placeholder: "Message" (from strings: "Message") - Send button (paper-plane icon), active only when text is present - Microphone/voice input button (if voice is supported) - Image/media attachment button **Interstitial Banner (agent_interstitial)** - Shown on first open or after a reset: an introductory card describing the AI agent's capabilities - "Continue" button to dismiss and begin chatting **Empty State** - If no prior conversation: centered illustration with a brief description of what the AI can help with, and a prompt chip row to get started ### Interactions - Tapping Send (or pressing Enter) submits the typed message; the AI responds in the thread - Tapping the AI's avatar or name opens the AI persona's profile/settings screen - Tapping the overflow menu → "Report" opens the report flow - Tapping the overflow menu → AI settings (if available) opens the AI Settings screen for this persona - Long-pressing a message bubble shows copy / react options - Tapping "Continue" on the interstitial dismisses it and focuses the input field - Swiping back or tapping Back returns to the Direct inbox or previous screen ### Sample Data > **Meta AI** — "Hi! I'm Meta AI. Ask me anything or tap a suggestion below." > **User** — "Write a funny birthday caption for my friend Sara." > **Meta AI** — "🎂 Happy Birthday, Sara! May your day be as lit as my training data — which is very, very lit. 🎉 #BirthdayVibes" --- ## AI Studio ### Overview A creator-facing portal (accessible via `https://aistudio.instagram.com/ai/`) where users can view, manage, or interact with a specific AI persona they've created or are exploring, launched from a deep link. ### UI Elements **Loading/Transition State** - Full-screen loading overlay with "Loading…" text while the AI Studio session is being established - Progress indicator (spinner or animated bar) centered on screen **Header/Toolbar** - "AI Studio" title or the name of the specific AI being viewed - Back/close button (top-left) **Main Content (AI Persona Card)** - Large hero image or avatar for the AI persona - AI persona name (bold, prominent) - Short description/bio text below the name - Creator/owner username with a small avatar - "Chat" or "Message" primary CTA button — launches a direct chat thread with this AI - Secondary actions: "Share", "Save" (bookmark) **Feature Unavailable State (for ineligible users)** - Informational banner or dialog explaining that AI Studio is not available for the current account - Link styled as underlined text: "Learn more" linking to relevant help documentation - "OK" button to dismiss **Error State** - "Something went wrong and we are working to get it fixed." message - "Try again" button ### Interactions - Tapping "Chat" / "Message" navigates to the AI Chat Thread screen for this persona - Tapping "Share" opens the native share sheet with a link to the AI Studio page - Tapping "Learn more" (in the unavailable state) opens the in-app browser to the help article - Tapping Back or the close button dismisses the screen and returns to the originating surface - Deep link format: `https://aistudio.instagram.com/ai/{persona_id}` or `https://aistudio.instagram.com/chat?id={chat_id}` ### Sample Data > **Persona Name:** Aria — Your Creative Muse > **Bio:** "I help you brainstorm ideas, write captions, and spark creativity. Made by @creativestudio_official." > **CTA:** [Message Aria] > **Ineligible state message:** "AI Studio is only available to eligible creator accounts. Learn more about how to get access." --- ## AI Settings (Persona) ### Overview A settings screen where the user can view and adjust configuration options for a specific AI persona, typically reached from within an AI chat thread via an admin text link or deep link. ### UI Elements **Header/Toolbar** - Title: "AI Settings" or the persona's name + "Settings" - Back/close button (top-left) - "Done" button (top-right) to save and close **Persona Info Section** - AI persona avatar (circular, medium size) - Persona name (bold text) - Short description/tagline - Creator username with a tap-to-view-profile affordance **Settings Rows (list)** Each row has a label on the left and a control (toggle or chevron) on the right: - **Response style** — dropdown or selector (e.g., "Friendly", "Formal", "Concise") - **Language** — currently selected language, tapping opens a language picker - **Notifications** — toggle for receiving notifications from this AI - **Blocked topics** — list of topics the AI will avoid; tap to edit - **Clear conversation history** — destructive action, triggers a confirmation dialog **Confirmation Dialog (for destructive actions)** - Title: "Delete this item?" (or "Clear conversation history?") - Body: Explanation of what will be deleted and that it cannot be undone - Buttons: "CANCEL" (left) and "DELETE" (right, in a warning color) **Destination-specific UI** - When opened from an in-thread admin text link (`destination=in_thread_admin_text`), a contextual banner is shown at the top: "You're editing settings for this AI conversation" with a brief explanation ### Interactions - Tapping "Done" saves all changes and dismisses the screen - Tapping Back without saving prompts a discard-changes dialog if unsaved changes exist - Toggling Notifications immediately changes the notification preference - Tapping "Response style" opens a bottom sheet with style options (e.g., Friendly, Formal, Concise) and a "Confirm" button - Tapping "Blocked topics" opens an editable list; user can add or remove topics - Tapping "Clear conversation history" shows the confirmation dialog; tapping "DELETE" clears history and shows a brief success toast; tapping "CANCEL" dismisses the dialog ### Sample Data > **Persona:** Aria — Your Creative Muse > **Response style:** Friendly ✓ > **Language:** English (US) > **Notifications:** On (toggle enabled) > **Blocked topics:** Violence, Politics > **Clear conversation history** → dialog: "This will permanently delete your conversation history with Aria. This can't be undone." [CANCEL] [DELETE] --- ## AI Imagine Canvas ### Overview An interactive full-screen canvas where users can generate AI-created images by typing descriptive prompts, including prompts that reference themselves ("imagine me"). ### UI Elements **Header/Toolbar** - Back/close button (top-left) - Title: "Imagine" or "Create with AI" - "Share" icon (top-right) to share the generated image **Canvas Area (center/top half)** - Large square or full-bleed image display area - Initially shows a placeholder gradient or animated shimmer while idle - Generated image fills the area once created; multiple results may appear as a horizontal swipeable carousel - Each image card has: - The generated image - A small "Download" or "Save" icon (bottom-right of image) - A "Remix" or "Vary" button to generate variations **Prompt Input (bottom)** - Multi-line text input with placeholder: "Describe what you want to imagine…" - Quick-fill chips above the input: "me", "imagine me" (from `meta_ai_imagine_canvas_memu_input_prompt_identifiers`) - "Generate" button — primary CTA, disabled until text is entered - Character counter (e.g., "0/2200") **Style Selector (optional row above input)** - Horizontally scrollable style chips: "Photorealistic", "Anime", "Oil Painting", "Watercolor", "Sketch" - Selected style chip is highlighted **Loading State** - Animated progress indicator overlaid on the canvas area - Text: "Creating your image…" **Error State** - "Something went wrong." inline message below the canvas - "Try again" button **Safety/Content Note** - Small disclaimer text below the canvas: "Images generated by Meta AI. May not always be accurate." ### Interactions - Tapping a quick-fill chip ("imagine me", "me") inserts the prompt phrase into the input field - Tapping "Generate" submits the prompt; canvas shows loading animation then displays the result image(s) - Swiping left/right on the result carousel browses alternative generations - Tapping "Save" downloads the image to the camera roll and shows "Link copied" toast or a save confirmation - Tapping "Remix" opens a new generation with the same base prompt, allowing edits - Tapping "Share" opens the native share sheet or Instagram's share flow (to Stories, Feed, DM) - Tapping a style chip updates the active style and re-enables the Generate button - Tapping Back confirms discard if a generation is in progress ### Sample Data > **Prompt input:** "imagine me as an astronaut floating above Earth at sunset" > **Style selected:** Photorealistic > **Generated result:** Full-color photorealistic image of the user's likeness in an astronaut suit, Earth visible below, warm golden-hour lighting > **Chips shown:** "me", "imagine me", "as a superhero", "in a fantasy forest" --- # Profile & Account — UI Specification --- ## User Profile ### Overview The user sees a profile page for any Instagram user (themselves or another user), displaying their photos, bio, stats, and available actions such as following, messaging, or visiting their website. ### UI Elements **Header / Toolbar** - Back navigation arrow (top left) — navigates back to the previous screen - Username displayed in the toolbar title (e.g., `@natgeo`) - Overflow / options menu icon (top right) — opens a contextual menu **Profile Header Section** (above the content grid) - **Profile photo**: circular avatar image - **Stats row**: three columns — Posts count, Followers count, Following count (each displayed as a number above its label) - **Full name**: displayed in bold below the avatar - **Bio text**: up to ~150 characters of freeform text; may contain @mentions, #hashtags, and clickable URLs - **Website link**: tappable hyperlink shown below the bio - **Category label** (for business/creator accounts): e.g., "Musician/Band", "Public Figure" - **Contact buttons** (business accounts): "Email", "Call", "Directions" — small pill buttons below the category - **Profile action buttons**: - Own profile: "Edit profile" button + "Share profile" icon button - Other user (not following): "Follow" button + "Message" button + dropdown arrow (↓) for more options - Other user (following): "Following" dropdown button + "Message" button - Other user (blocked/restricted): appropriate button states - **Story highlight row**: horizontal scrollable list of circular story highlight thumbnails, each labeled below (e.g., "Travel", "Food", "2023") - **Music section** (if user has set a profile song): shows song title, artist name, and a play/pause button - **Featured links / banners** (if configured): shows linked social accounts or web links as cards (e.g., a Facebook page link, WhatsApp link) **Content Tab Bar** Three tabs displayed with icon-only buttons: - Grid icon (Posts) — default selected - Reels icon - Tagged icon (photos the user is tagged in) **Media Grid** - 3-column square thumbnail grid of posts - Video posts show a brief video icon overlay (play triangle) in the corner - Reel posts show a Reels icon overlay - Carousel posts show a stacked pages icon overlay **Blocked/Private Account State** - If account is private and user is not following: grid area is replaced with a lock icon and text: "This Account is Private — Follow to see their photos and videos." ### Interactions - Tapping **Follow**: sends a follow request (or follows immediately if public); button label changes to "Following" - Tapping **Following** (dropdown): opens a sheet with options — "Unfollow", "Add to Close Friends", "Add to Favorites", "Mute" - Tapping **Message**: navigates to Direct Message thread with that user - Tapping **Edit profile** (own profile): navigates to Edit Profile screen - Tapping a **stat** (Posts / Followers / Following): tapping Followers or Following navigates to a searchable list of followers/following - Tapping a **story highlight**: opens the story highlight viewer full screen - Tapping a **post thumbnail**: opens the post detail view (full image/video with likes, comments) - Tapping the **website link**: opens the URL in the in-app browser - Tapping the **music section**: plays/pauses the profile song preview - Tapping a **featured link card**: opens that linked profile or URL - Scrolling down: the content grid scrolls; the profile header collapses after a threshold, leaving only the username in the toolbar ### Sample Data ``` Username: @chefmarcella Full name: Marcella Fontaine Bio: 🍝 Chef & food storyteller | NYC New cookbook out now ↓ Website: chefmarcella.com Posts: 847 Followers: 128.4K Following: 312 Category: Chef Story Highlights: "Recipes" | "Italy Trip" | "NYC Eats" | "Q&A" Profile song: "Bella Ciao" – Traditional Italian Folk ``` --- ## Edit Profile ### Overview The logged-in user edits their public profile information including name, username, bio, website, and links. ### UI Elements **Header / Toolbar** - "Cancel" or back arrow button (top left) — discards changes and goes back - Title: "Edit profile" - "Done" or checkmark button (top right) — saves changes **Profile Photo Section** - Circular profile photo centered at top - "Edit" label or camera icon overlaid on the photo — tappable to change photo - Tapping opens a sheet with options: "New profile photo", "Remove current photo", optionally "Import from Facebook" **Form Fields** (each is a labeled text input row): 1. **Name** — single-line text input, placeholder "Name" 2. **Username** — single-line text input, placeholder shows current username (e.g., `chefmarcella`); real-time availability check 3. **Pronouns** — tappable row opens a pronoun selector screen 4. **Bio** — multi-line text input, character counter shown (e.g., "45/150"), placeholder text hints to describe yourself 5. **Links** — tappable row showing the count of external links added (e.g., "2 links"); navigates to Edit Links screen 6. **Gender** — tappable row, opens a gender input sheet with text input and "Prefer not to say" option 7. **Date of birth** — tappable row, opens a date picker 8. **Show account suggestions** toggle — when enabled, your account may be shown as a suggestion; subtitle explains this **Professional Account Section** (if applicable) - "Switch to professional account" row with chevron - "Category" row (e.g., "Chef") with current value shown; tappable **Account Privacy Section** - "Private account" toggle — if on, only approved followers see posts; if off, posts are public ### Interactions - Tapping any field: opens keyboard or appropriate picker - Editing **Username**: shows a ✓ / ✗ availability indicator inline after a short delay - Tapping **Links** row: navigates to the Edit Profile Links screen - Tapping **Done**: validates all fields (username availability, bio length ≤ 150 chars), then saves and returns to the profile - If username is taken: an inline error appears under the username field — "This username isn't available. Please try another." - Tapping **Cancel**: shows a confirmation if unsaved changes exist ("Discard changes?") with "Discard" and "Keep Editing" options ### Sample Data ``` Name: Marcella Fontaine Username: chefmarcella Bio: 🍝 Chef & food storyteller | NYC New cookbook out now ↓ (44/150) Links: 1 link (chefmarcella.com) Gender: (not specified) Date of birth: March 12, 1988 ``` --- ## Edit Bio ### Overview A focused single-screen editor for the user's profile biography text, opened directly when the user deep-links to bio editing. ### UI Elements **Header / Toolbar** - Back arrow (top left) - Title: "Bio" - "Done" / save button (top right) **Bio Input Area** - Large multi-line text field, pre-filled with the existing bio - Character counter below the field (e.g., "72/150") - Placeholder text: "Describe yourself" - Keyboard auto-shown on entry **Suggestions / Formatting Tips** (optional inline hint) - Small info text: "You can @mention people, use #hashtags, and add emoji." ### Interactions - Typing in the field updates the character counter in real time - At 150 characters, further input is blocked; counter turns red - Tapping **Done**: saves the bio and navigates back to Edit Profile - Tapping **back arrow**: discards changes (may confirm if changes exist) ### Sample Data ``` Current bio: "🍝 Chef & food storyteller | NYC New cookbook out now ↓" Character count: 44/150 ``` --- ## Edit Profile Links ### Overview The user manages the external links (URLs) shown on their profile, including adding, reordering, and removing links, as well as optionally linking their Facebook Page. ### UI Elements **Header / Toolbar** - Back arrow (top left) - Title: "Links" - "Done" button (top right) **Links List** - Each saved link is shown as a card row containing: - Drag handle icon (left side) for reordering - Site favicon / icon thumbnail - Link title (e.g., "My Website") or the URL host (e.g., "chefmarcella.com") - Full URL shown smaller below the title - Delete (×) button on the right - Empty state: "No links added yet" with descriptive text **"Add link" button** - Prominent button or row at the bottom of the list labeled "Add link" with a "+" icon - Tapping opens the Add Link sheet **Featured Banners Section** (below personal links) - Sub-section header: "Social" or "Featured" - Rows for linkable social accounts (if connected or available to add): - Facebook profile / Facebook Page link card — shows Facebook logo, account name, "Add" or "Remove" action - WhatsApp link card — shows WhatsApp logo, phone number hint, "Add" or "Remove" action - Each existing connected banner shows the linked account name with a "Remove" option **Add Link Bottom Sheet** (triggered by "Add link") - Title: "Add link" - Text input: "URL" — e.g., `https://` - Text input: "Link title" (optional) - "Done" / "Add" button ### Interactions - Tapping **Add link**: opens the Add Link sheet - Entering a URL and tapping **Add**: validates the URL (shows "Enter a valid URL" if invalid), then adds it to the list - Tapping the **delete (×)** on a link: immediately removes it from the list (with undo snackbar: "Undo") - **Dragging** a link row: reorders links (drag-and-drop) - Tapping **Facebook Page link row**: initiates Facebook Page connection or shows a dialog to confirm linking; on success, the card appears in the featured banners section - Tapping **Remove** on a Facebook/WhatsApp banner: shows a confirmation dialog — "Remove [Facebook/WhatsApp] from your profile?" with "Remove" and "Cancel" buttons - Tapping **Done**: saves all changes and returns to Edit Profile ### Sample Data ``` Links: 1. chefmarcella.com → https://chefmarcella.com 2. My Cookbook → https://amazon.com/chef-marcella-book Social / Featured: Facebook: Marcella's Kitchen Page [Remove] WhatsApp: [Add] ``` --- ## Edit Featured / Profile Banners ### Overview The user manages the set of featured content banners displayed on their profile, including reordering existing banners and adding new ones (Facebook links, WhatsApp links, and other social content cards). ### UI Elements **Header / Toolbar** - Back arrow (top left) - Title: "Edit featured" - "Done" button (top right) — enabled only when there are unsaved ordering changes **Featured Banners Section** - Sub-header: "Featured" (with item count, e.g., "2") - Vertically scrollable, drag-reorderable list of banner cards; each card shows: - A thumbnail or logo image - Banner title (e.g., "Follow on Facebook", "Chat on WhatsApp") - Sub-title/description (e.g., Facebook page name, WhatsApp number) - Remove button (× or trash icon) - When the list is empty: shows an empty-state illustration and text: - "No featured content yet" - Sub-text: "Add links to your social accounts to let people connect with you." **Available Banners to Add Section** - Sub-header: "Add to profile" - List of available banner types the user has not yet added: - Facebook profile link - Facebook Page link (if user manages a Page) - WhatsApp link - Each row shows the service logo, name, and an "Add" button or "+" icon **Drag-Reorder Interaction** - While dragging a banner card: card lifts with a shadow/elevation animation and slight opacity change; other cards shift to make room ### Interactions - Tapping **Add** next to an available banner: adds that banner to the featured list (may trigger a platform-specific auth or confirmation dialog for Facebook/WhatsApp) - Tapping **Remove (×)** on a banner: immediately removes it; shows "Undo" snackbar - **Dragging** a card: reorders it within the featured list - Tapping **Done**: saves the new order and returns to Edit Profile Links - If Facebook Page connection is triggered via deep link with `show_fb_page_link_dialog=true`: a dialog auto-appears asking the user to link their Facebook Page ### Sample Data ``` Featured (2): 1. [Facebook logo] Follow me on Facebook — Marcella's Kitchen Page [×] 2. [WhatsApp logo] Chat on WhatsApp — +1 (917) 555-0182 [×] Add to profile: [Instagram logo] Share your Instagram profile [Add] ``` --- ## View Another User's Profile (External / Deep Link Entry) ### Overview When arriving via an external link (e.g., `instagram.com/username`), the user is taken directly to the target user's profile with the same layout as the standard profile screen, but with deep-link-specific behaviors such as auto-opening comments or scrolling to a specific post. ### UI Elements Identical to the **User Profile** screen above, with the following additions/differences: **If the session is not logged in:** - A bottom banner or interstitial is shown: "You must log in before you can share on Instagram" with a "Log In" button - Profile content may be partially visible (public accounts) or hidden (private accounts) **If arriving with `open_comments` parameter:** - The comments sheet for the specified post automatically slides up on entry **If arriving with `open_like_count` parameter:** - The likes list for the specified post automatically opens **No-Network Error State** - If network is unavailable: full-screen error state with icon, heading "No network connection", body "Check your device's network connection and try again.", and a "Try again" button **Generic Error State** - Heading: "Something went wrong." with a "Try again" button ### Interactions - All interactions mirror the **User Profile** screen - Tapping **back**: returns to the previous app/screen, or if this was the entry point to the app from an external source, navigates to the home feed or closes the activity - Tapping **Try again**: retries the profile data fetch ### Sample Data ``` URL: instagram.com/chefmarcella Auto-action on entry: open comments on post #1234567 ``` --- # Stories & Notes — UI Screen Specifications --- ## Stories Viewer ### Overview The user watches full-screen photo or video Stories from accounts they follow, swiping between stories and tapping to advance. ### UI Elements **Full-Screen Media Area** - Full-screen photo or video content filling the entire screen - Gradient overlays: semi-transparent dark gradient at top and bottom for legibility - Progress bars row at the top — one thin bar per story segment, filling left-to-right to indicate progress through the current story **Top Bar (overlaid on media)** - User avatar (circular, ~32–40px) on the left - Username label next to the avatar (e.g., "zoeybaker") - Time since posted (e.g., "3h") in muted text next to username - "Follow" button (text, shown only when viewing a non-followed account) - Mute/unmute icon button on the right (speaker icon) - Close/back button ("✕") on the far right to exit stories **Bottom Action Bar (overlaid on media)** - Text input field with placeholder: one of — "Add a comment for [username]", "Start the conversation…", "What do you think of this?", or "Join the conversation…" (rotates per variant from string arrays) - "Like" icon button (heart) — tappable - "Remind me" icon button — for upcoming events/lives - "Reply" button or send icon to reply to the story - "Share" icon — share the story to DMs or externally **Sticker/Interactive Elements (within media, context-dependent)** - Quiz sticker: question text + up to 4 answer options labeled A, B, C, D with hint text "Option 1" / "Option 2" / "Option 3" / "Option 4" - Poll sticker: two answer options - Countdown sticker - Location/hashtag sticker tappable links **Tap Zones** - Left ~30% of screen: tap to go to previous story segment - Right ~70% of screen: tap to advance to next segment - Press and hold: pauses the story ### Interactions - Tap right side → advance to next story segment or next user's story - Tap left side → go back to previous segment; if at first segment, go to previous user's story - Swipe left → skip to next user's stories - Swipe right → go back to previous user's stories - Swipe down → close stories viewer, return to feed - Tap avatar or username → navigate to that user's profile - Tap "Like" (heart) → heart animates, story is liked - Tap "Reply" / message field → keyboard opens, input bar expands for composing a reply; sending opens DM thread with that user - Tap "Share" → bottom sheet with share options (Send to DMs, Copy link, Share to…) - Tap quiz option → option highlights with result, correct answer revealed with animation - Tap "✕" or swipe down → exits stories viewer ### Sample Data - Username: **marinacohen** · **2h** - Progress bar: 3 segments total, currently on segment 2 (about 40% filled) - Comment input placeholder: "Add a comment for marinacohen" - Quiz sticker: "What's my favorite city?" — A: Paris, B: Tokyo, C: New York, D: Lisbon --- ## Stories Camera (Story Creation) ### Overview The user opens the camera to capture or upload a photo or video for their Story, with controls for modes and effects. ### UI Elements **Camera Viewfinder** - Full-screen live camera preview - Gradient vignette at top and bottom for UI legibility **Top Controls Row** - "✕" close button (top-left) — exits camera - Flash toggle icon (top-center-left) - Camera settings icon → opens "Camera settings" screen - Flip camera icon (top-right) — switches front/rear camera **Camera Mode Selector (bottom strip above capture button)** - Horizontal scrollable mode tabs: - **PHOTO** (default) - **VIDEO** - **Boomerang** - **Cinematic** - **Dual** - **Portrait** - **Slow motion** - **Timer** - Active mode highlighted/underlined **Capture Button** - Large circular button in center-bottom - Tap = photo; hold = video recording (in VIDEO mode) **Bottom Controls** - Gallery/media picker icon (bottom-left) — opens device photo library - Effect/filter carousel or sticker tray button (bottom-right) **Permission Prompt (if camera not granted)** - Illustration of permission screen - Title: "Allow Instagram to access your camera and microphone" - Body: "This lets you share photos, record videos and preview effects. You can change this anytime in your device settings." - Button: "Allow Permissions" - Secondary link: "Open Settings" ### Interactions - Tap mode tab → switches camera mode; mode becomes active - Tap capture button → takes photo; transitions to Story Editor - Hold capture button (video mode) → starts recording; release to stop; transitions to Story Editor - Tap gallery icon → opens media picker to select existing photo/video - Tap flip icon → toggles front/back camera - Tap "✕" → closes camera, returns to previous screen - Tap "Allow Permissions" → triggers system camera/microphone permission dialog - If permission denied previously → shows "Open Settings" to go to device app settings ### Sample Data - Active mode: **PHOTO** - Camera facing: rear - Flash: off --- ## Camera Settings ### Overview The user configures default camera behavior, such as which mode opens by default when launching the Story camera. ### UI Elements **Header** - Title: "Camera settings" - Back arrow (top-left) **Settings List** - **Default Camera Mode** section - Description: "Choose which camera mode to start with when launching the camera next time" - Radio/toggle options: - **PHOTO** (radio button) - **VIDEO** (radio button) - Currently selected mode is highlighted/checked - **[Internal] Type of Video Recorder** (visible only in debug/internal builds) - Description: "Debug only option. Pick which recorder you want to use. Requires app restart" - Options: **CustomRecorder**, **MediaRecorder** ### Interactions - Tap "PHOTO" → selects Photo as the default camera mode on next launch; radio button fills - Tap "VIDEO" → selects Video as the default camera mode; radio button fills - Tap back → returns to Stories Camera ### Sample Data - Currently selected: **PHOTO** --- ## Story Editor (Post-Capture) ### Overview After capturing or selecting media, the user decorates their Story with stickers, text, and drawing tools before sharing. ### UI Elements **Full-Screen Media Preview** - Photo or video fills the screen (can be pinched to zoom/reposition) **Top Toolbar** - Close/back button (top-left) — discards edits - Undo button (if drawing/text applied) labeled "Undo" **Creative Tool Icons (right side vertical strip or top bar)** - Text tool (Aa) — add text overlay - Drawing/pen tool - Sticker/GIF picker button - Link sticker button - Quiz sticker button - Poll sticker button **Sticker Tray (opened via sticker button)** - Search bar for stickers - Tabs: GIF, Emoji, Location, Mention, Hashtag, Quiz, Poll, Countdown, etc. - Grid of sticker options **Quiz Sticker Editor (when quiz sticker is placed)** - Question text field: placeholder "Ask a question…" - Four answer rows with placeholders: "Option 1", "Option 2", "Option 3", "Option 4" - Answer option labels: A, B, C, D - Tap an answer to mark it as correct (highlighted) **Bottom Controls** - "Your Story" button (primary, left) — shares to the user's own Story - "Close Friends" button (green, option to share only to close friends list) - "Send To" button (right) — share to specific people's DMs or other destinations ### Interactions - Tap text tool → keyboard opens, user types text; can drag to reposition on screen - Tap sticker icon → sticker tray opens from bottom - Place sticker → pinch to resize, drag to move - Tap "Undo" → removes the last applied edit - Tap "Your Story" → publishes Story to the user's Story ring; confirmation shown briefly - Tap "Close Friends" → publishes only to close friends list - Tap "Send To" → opens recipient selection screen for DMs - Tap close (✕) → shows discard confirmation: "Cancel" / "Discard" ### Sample Data - Media: a selfie photo from front camera - Applied sticker: 🎉 emoji placed in top-right corner - Text overlay: "Friday vibes" in white bold font --- ## Stories Archive ### Overview The user browses their previously posted Stories that are no longer publicly visible, organized into tabs for Stories, Live, Posts, and Videos. ### UI Elements **Header / Action Bar** - Title reflecting the current tab (e.g., "Stories Archive", "Posts Archive") - Left icon: back arrow - Right icon: three-dot menu or settings/gear icon → opens archive settings - Secondary right icon: calendar icon (appears for Stories tab to filter by date) **Tab Bar** - Horizontal tabs at top or below header: - **Stories** (archive of past stories) - **Live** (past live videos) - **Posts** (archived posts hidden from profile) - **Videos** (archived video posts) - Active tab underlined/highlighted **Stories Tab Content — Grid** - 3-column grid of story thumbnail cards - Each card shows: - Thumbnail image/video preview - Date label (e.g., "March 12") - If a "Recap" is available, a Recap badge - Tap on any card → plays the archived story in the Stories Viewer **Empty State (Stories tab, no archived stories)** - Illustration or placeholder graphic - Message: "No photos or videos yet" (or contextual empty message) - Optional prompt to enable story archiving **Overflow Menu (three-dot on archive item)** - "Share to Story" - "Save to device" - "Delete" → triggers confirmation dialog **Delete Confirmation Dialog** - Title: "Delete this item?" - Buttons: "CANCEL" | "DELETE" **Archive Settings (gear icon)** - Options to control what gets archived (stories auto-archive toggle, etc.) ### Interactions - Tap tab → switches between Stories, Live, Posts, Videos archive views - Tap story thumbnail → opens Stories Viewer in archive mode (full-screen playback) - Tap calendar icon → opens a date picker (months: January–December) to filter stories by month/year - Tap three-dot on a story → shows contextual menu (Share, Save, Delete) - Tap "DELETE" in confirmation → removes item from archive permanently - Tap "CANCEL" → dismisses dialog, no change - Tap back → returns to the profile or previous screen ### Sample Data - Tab: **Stories** (active) - Thumbnails: stories from the past 90 days - "March 15" — beach sunset photo - "March 14" — selfie with text overlay "Good morning" - "March 12" — video clip from a concert --- ## Notes (Notes on Profile / Inbox) ### Overview The user reads and composes short text "Notes" — brief messages (up to 60 characters) that appear above their profile avatar in the DM inbox, visible to mutual followers for 24 hours. ### UI Elements **Notes Entry Point (DM Inbox — top avatar strip)** - Row of circular avatars at the top of the Direct Messages inbox - Each avatar has a small speech-bubble above it showing the person's current Note text (e.g., "heading to the gym 🏋️") - The user's own avatar appears first with either: - Their active note text in the bubble - Or a "+" icon bubble with text "Leave a note" if no note is set **Note Composer (sheet/modal, opens on tap)** - Title: "New note" or "Edit note" - Text input field — single line, max 60 characters - Character counter (e.g., "48" remaining, counting down) - Audience selector: "Followers you follow back" or "Close friends" — shown as a dropdown or segmented control - "Share" / "Post" button (active when text is entered) — posts the note - "Done" button or dismiss gesture to close without saving **Viewing Someone Else's Note** - Tapping another user's note bubble opens a bottom sheet or inline reply - Shows: - Their avatar + username - Their note text (e.g., "obsessed with this song rn 🎵") - "Reply" text input field with placeholder: "Reply…" - Send button **Notes Blocked Words / Birthday Detection** - If the note text contains birthday trigger words ("happy birthday", "hbd", "🎂", "🥳", "🎉", etc.), the note may be styled with a birthday theme - If the note text contains blocked words ("rest in peace", "passed away", "💔", "😭", etc.), the birthday styling is suppressed ### Interactions - Tap own avatar bubble ("Leave a note" or existing note) → opens Note Composer sheet - Type note text → character counter updates live; "Share" button activates - Tap audience selector → toggles between "Followers you follow back" and "Close friends" - Tap "Share" / post → note is posted; bubble above avatar updates immediately with new text; sheet dismisses - Tap "Done" without posting → sheet dismisses, no note posted - Tap another user's note bubble → opens reply sheet - Type reply in reply field → tap send → sends a DM reply to that user - After 24 hours, note disappears automatically from the avatar strip ### Sample Data - Own note bubble: "can't stop listening to Charli xcx 🎵" - Audience: "Followers you follow back" - Character count: 38 / 60 - Friend's note: "@alex.moreno · just got back from Tokyo 🇯🇵" - Reply input placeholder: "Reply…" --- # Shopping & Payments — Screen Specifications --- ## Add New Card ### Overview The user enters their payment card details to save a new card for use with Meta Pay / Instagram Checkout. ### UI Elements **Header/Toolbar** - Title: "Add card" - Back/close button (top-left) **Form Fields** (stacked vertically) - **Card Number** — text input, labeled "Card Number", placeholder text "Card Number"; accepts 16-digit card numbers; numeric keyboard - **Expiration Date** — text input, placeholder "MM/YY" - **Security Code** — text input, labeled "CVV" or "Security code"; masked entry; numeric keyboard - **Checkbox/Toggle** — "Save CVV for future use." — toggles whether the CVV is saved encrypted on-device - **Billing address same as shipping** — checkbox row; when unchecked, expands billing address fields below **Billing Address Fields** (shown when "Billing address same as shipping" is unchecked, or always for "Add billing address" flow) - Street address input — placeholder "Street address" - Unit/Apt/Suite input — placeholder "Apt/ste (optional)" - City input — placeholder "City" - State input — placeholder "State"; tapping opens a dropdown/picker with all 50 US states (Alabama … Wyoming) - Country input — placeholder "Country" **Footer Legal Text** - Small text: "By tapping Save, you agree to Meta's payment [Terms] and [Policies]." (Terms and Policies are tappable links) - Or variant: "By tapping Save, this information, including your CVV, will be saved and synced with Meta Pay, where it can be managed. Meta's payment [Terms] and [Policies] apply." **Primary Action Button** - Label: "Save" (or "Save securely") - Disabled until required fields are valid **Autofill Prompt** (optional bottom sheet, shown when autofill is available) - Title: "Autofill with card from your ad account?" - Body text: "Turn on autofill and use your saved info to complete this form." - Buttons: "Save and Autofill" / "Update and Autofill" / "Not now" ### Interactions - Tapping **Save** / **Save securely**: validates all fields; if invalid, shows inline error messages: - "Enter valid credit card number" - "Enter valid expiration" - "Enter valid CVV" - "Please enter a valid email" - "Please enter a valid phone number" - On success: card is saved; screen closes and user returns to previous screen - Tapping **Terms** or **Policies** links: opens the respective Meta payment policy page in the in-app browser - Tapping **"Billing address same as shipping"** checkbox: toggles the billing address section open/closed - Tapping **State** field: opens a picker list of all 50 US states ### Sample Data - Card Number: `4111 1111 1111 1111` - Expiry: `12/27` - CVV: `•••` - Street: `123 Main Street` - Apt: `Apt 4B` - City: `San Francisco` - State: `California` - Country: `United States` --- ## Confirm Card Details ### Overview An extra security verification step where the user confirms their saved card details — CVV or full card number — before completing a purchase or autofill action. ### UI Elements **Header/Toolbar** - Title: "Confirm Card Details" - Back button (top-left) **Card Identifier Row** - Displays masked card: e.g., "Visa ••• 4242" (format: `%1$s ••• %2$s`) - Expiration status shown if expired: "Expired 12/24" **Instruction Text** (one of the following depending on context) - "Enter the 3- or 4-digit security code on your Visa • 4242 to autofill this form." - "As an extra security check please enter details for your card ending with 4242." - "As an extra security check, please enter the full card number for the card ending in 4242." - "Add the Full Card Number for Visa • 4242." - "Confirm the Security Code for Visa • 4242" **Input Field** - For CVV: labeled "CVV" or "Security code", masked entry, numeric keyboard - For full card number: labeled "Card number", numeric keyboard **Error State** - Inline error message: "Incorrect CVV" or "Enter valid CVV" **Primary Button** - Label: "Confirm" **Secondary / Cancel** - Label: "Cancel" or "Not now" ### Interactions - Tapping **Confirm** with a valid entry: proceeds with the purchase or autofill; closes this screen - Tapping **Confirm** with an incorrect CVV: shows error "Incorrect CVV" inline below the input - Tapping **Cancel** / **Not now**: dismisses this screen and returns the user to the prior screen without completing the action - On successful card confirmation: navigates forward to checkout or autofills the form ### Sample Data - Card shown: "Visa ••• 4242 — Expires 08/27" - Instruction: "Enter the 3- or 4-digit security code on your Visa • 4242 to autofill this form." - CVV field: empty initially, accepts 3–4 digits --- ## Save Info for Next Time (Autofill Prompt) ### Overview A bottom sheet that appears after the user fills out a payment or contact form, asking whether to save and autofill their information via Meta Pay in the future. ### UI Elements **Bottom Sheet** - Title: "Save info for next time?" - Body text (one of several variants based on context): - "Turn on autofill and save this info for future use." - "Your autofill activity is used to improve ads and other parts of the Instagram experience. Your payment information will never be used for these purposes. [Learn more]" - "Your CVV will be saved, encrypted and only available for autofill when on this device. Manage in Browser settings. [Learn more]" - "This information will be saved with Meta Pay and synced in Accounts Center, where it can be managed." - **[Learn more]** — tappable link within body text **Action Buttons** (stacked or side-by-side) - Primary: "Save and Autofill" (or "Turn on autofill" / "Save securely") - Secondary: "Not now" **Footer note** - "Checkout provided by Meta." - Small linked text: "How your info is used and managed" ### Interactions - Tapping **Save and Autofill** / **Turn on autofill**: saves the entered information to Meta Pay; enables autofill for future sessions; sheet dismisses - Tapping **Not now**: dismisses the sheet without saving; user continues without autofill - Tapping **[Learn more]**: opens Meta Help Center URL (`https://www.meta.com/help/meta-pay/1896636927418202/`) in the in-app browser - Tapping **"How your info is used and managed"**: opens a detail page or help article about Meta Pay data usage ### Sample Data - Context: User just entered name, email, and shipping address on a merchant checkout form - Body shown: "Turn on autofill and save this info for future use." - Bottom note: "Checkout provided by Meta." --- ## Autofill with Saved Info (Autofill Offer Prompt) ### Overview A bottom sheet offering to autofill a payment or contact form using previously saved Meta Pay information. ### UI Elements **Bottom Sheet** - Title: "Autofill with saved info?" - Body text: "Turn on autofill and use your saved info to complete this form." - Variant: "By tapping Autofill, this information will be saved and synced with Meta Pay, where it can be managed. Meta's payment [Terms] and [Policies] apply." **Saved Info Preview** (card row) - Card brand + masked number: e.g., "Visa ••• 4242" - Expiration: "Expires 12/27" (or "Expired 12/24 CVV •••" for expired card) **Action Buttons** - Primary: "Autofill" (or "Update and Autofill") - Secondary: "Not now" **Additional Options** - "Enter information manually" — tappable link/button that dismisses the sheet **Bottom Note** - "Manage the contact and payment information that you save with Meta Pay in Accounts Center. [Learn more]" ### Interactions - Tapping **Autofill**: fills all applicable form fields with the saved data; sheet dismisses; user sees form pre-populated - Tapping **Not now**: dismisses sheet; form remains empty for manual entry - Tapping **Enter information manually**: dismisses sheet; user fills form manually - Tapping **[Learn more]**: opens `https://www.meta.com/help/meta-pay/315696271061805/` in the in-app browser ### Sample Data - Saved card shown: "Visa ••• 4242 — Expires 08/27" - Saved name: "Sarah Johnson" - Saved address: "123 Main Street, San Francisco, CA 94105" --- ## Control Your Autofill Settings ### Overview A bottom sheet or informational panel that explains how autofill works and gives users access to manage autofill preferences. ### UI Elements **Sheet / Panel** - Title: "Control your autofill settings" - Alternate title: "Manage your saved info" **Body Text** (one or more of these) - "Your autofill activity is used to improve ads and other parts of the Instagram experience. [Learn more]" - "Depending on your Ad preferences, we may use some of your autofill activity to improve ads. [Learn more]" - "Your CVV is encrypted and only available for autofill on this device. You can turn off autofill, manage your stored CVVs and change additional autofill settings any time in [Browser settings]." - "You can turn off autofill and change additional autofill settings any time in [Browser settings]." - "Manage the contact and payment information that you save with Meta Pay in Accounts Center. [Learn more]" **Tappable Links within text** - "[Learn more]" → opens Meta Pay help article - "[Browser settings]" → deep link `browser-settings://` to the in-app browser settings **Action Buttons** - "Get better recommendations" (primary, if applicable) - "OK" or "Done" to dismiss ### Interactions - Tapping **[Browser settings]**: navigates to the in-app browser settings where autofill can be toggled on/off and saved CVVs can be managed - Tapping **[Learn more]**: opens the Meta Pay help center URL in the in-app browser - Tapping **OK** / **Done**: dismisses the sheet ### Sample Data - Body: "Your CVV is encrypted and only available for autofill on this device. You can turn off autofill, manage your stored CVVs and change additional autofill settings any time in Browser settings." --- ## Checkout WebView ### Overview A full-screen in-app web browser that loads a merchant or Meta Pay checkout page for the user to complete a purchase. ### UI Elements **Header / Browser Bar** - "Header" label (accessible label) - Back navigation button — labeled "Navigate back" / "Go back" - URL/title area (not necessarily editable) - "More options" overflow menu button (⋯) - "Minimize browser" button - "Close browser" button **Overflow Menu Options** (when "More options" is tapped) - "Share" — share the current URL - "Link copied" feedback toast - "Report website" - "View in reader mode" / "Exit reader mode" - "Translate to %1$s" (e.g., "Translate to English") / "Show original language" - "Open in %1$s" (e.g., "Open in Chrome") - "Open with …" **Main Content Area** - Full-screen web view rendering the checkout page - Bottom footer bar: "Checkout provided by Meta." with a small info icon or link **Loading State** - Shows "Loading…" indicator while the page loads **Error States** - **No network:** Title "No network connection", body "Check your device's network connection and try again.", button "Try again" - **Page unavailable:** Title "Page isn't available right now", body "This may be because of a technical error that we're working to get fixed. Try reloading this page.", button "Refresh" - **Page can't be loaded:** Title "Page can't be loaded", button "Refresh" - **Security error:** Title "Security error", body "There are problems with the security certificate for this site", button "Go back" **Exit Confirmation Dialog** (when user tries to leave mid-checkout) - Title: "You're leaving our app" - Body: "The website you're viewing is attempting to open an external app. Would you like to continue?" - Buttons: "Continue" / "Cancel" **Permission Dialogs** (if checkout page requests device access) - Camera + Microphone: "'[site] wants to use your device's camera and microphone.'" — buttons: "Allow" / "Block" - Camera only: "'[site] wants to use your device's camera.'" — buttons: "Allow" / "Block" - Microphone only: "'[site] wants to use your device's microphone.'" — buttons: "Allow" / "Block" - Location: "'[site] wants to use your device's location.'" — buttons: "Allow" / "Block" **Language Setup Banner** (if locale setup fails) - "We're having trouble setting up [language] in [app] right now. You can try again, or use [app] in English (US) for now." - Buttons: "Try again" / "Continue in English (US)" - Loading state: "Just a moment while we set up [language]…" ### Interactions - Tapping **Go back / Navigate back**: navigates back to the previous page in browser history, or closes the WebView if no history - Tapping **Close browser**: closes the entire checkout WebView and returns user to Instagram - Tapping **Minimize browser**: minimizes the browser overlay without fully closing it - Tapping **Share**: opens system share sheet with the current URL - Tapping **Report website**: opens a reporting flow for the current URL - Tapping **View in reader mode**: reformats the page into a simplified reading view; button changes to "Exit reader mode" - Tapping **Translate to [language]**: translates the page; shows toast "Web page translated [original language] to [target language]"; button changes to "Show original language" - Tapping **Try again** / **Refresh** on error: reloads the current URL - Tapping **Allow** on permission dialog: grants the requested device permission for the web page - Tapping **Block**: denies the permission ### Sample Data - Page title: "Checkout — Acme Store" - Footer: "Checkout provided by Meta." - Error example: "No network connection — Check your device's network connection and try again." - Translation toast: "Web page translated — Spanish to English" --- ## Shipping & Fulfillment Selection ### Overview A selection screen where the user chooses how they want their order fulfilled — standard shipping, express shipping, or in-store pickup — before completing checkout. ### UI Elements **Header** - Title (implied by context: "Shipping" or "Fulfillment") - Back button **Fulfillment Options List** Each row shows: - Option label (e.g., "Priority USPS", "Overnight FedEx", "In-store Pickup") - Price: e.g., "$19.99" / "$29.99" - Delivery date range: e.g., "Dec 30 – Dec 31" (when available) - Selection radio button / checkmark - For pickup options: store address, distance from user (e.g., "2.3 miles"), availability indicator ("In stock" or similar) **Selected State** - Currently selected option is highlighted with a filled radio button or checkmark **Primary Action Button** - Label: "Continue" or "Confirm" - Enabled only when an option is selected ### Interactions - Tapping a **fulfillment option row**: selects it; previously selected option deselects; row highlights - Tapping **Continue / Confirm**: saves the selected fulfillment option and advances to the next checkout step (payment confirmation or review order) - Tapping **Back**: returns to the previous checkout step without changing the selection ### Sample Data - Option 1: "Priority USPS — $19.99 — Arrives Dec 30 – Dec 31" - Option 2: "Overnight FedEx — $29.99 — Arrives tomorrow" (no date range provided) - Pre-selected: "Priority USPS" (first option selected by default) --- # Professional & Creator Tools — Screen Specifications --- ## Professional Dashboard (Entry Point) ### Overview The Professional Dashboard is the central hub where creators and business account holders view their account performance, access professional tools, and manage their presence on Instagram. ### UI Elements **Header / Toolbar** - Title: "Instagram" (app name) or profile username displayed at top - Back/close button (top-left) — navigates back or dismisses the dashboard - A close or navigation action button (top-right) rendered via the ActionButton component, which shows either an icon or a spinning loading indicator while loading **Performance Summary Section** - Headline text component showing a summary label (e.g., "Your professional tools") - Subheading or body text with contextual description - Optional circular profile image or icon associated with the account **Metrics / Insights Cards** - A scrollable vertical list of insight cards, each showing: - A metric name (e.g., "Accounts reached", "Accounts engaged", "Total followers") - A numeric value or chart thumbnail - A change indicator (e.g., up/down trend arrow with percentage) - Tapping a card navigates deeper into that metric's detail view **Professional Tools Section** - A list of quick-action rows, each with: - An icon on the left - A label describing the tool (e.g., "Ad tools", "Branded content", "Promotions") - A right-facing chevron indicating navigation **Promotions / Boost Button** - A primary call-to-action button labeled something like "Create promotion" or "Boost post" - Styled as a full-width or prominent pill button **Navigation Bar (BusinessNavBar)** - Bottom bar containing: - A primary action button (text set dynamically, e.g., "Get started" or "Continue") - An optional secondary text link button (e.g., "Learn more" or "Skip") - Optional footer terms text with a hyperlink to Facebook's page guidelines (`https://www.facebook.com/page_guidelines.php`) - While the primary action is processing, the button shows a spinner and becomes disabled ### Interactions - Tapping a metric card → navigates to an expanded insights detail screen for that metric - Tapping a tool row → opens the corresponding professional tool (e.g., ad creation, branded content manager) - Tapping "Create promotion" / "Boost" → opens the promotions/ad creation flow - Tapping the primary nav bar button → proceeds to the next step or main action - Tapping the secondary nav bar link → performs a secondary navigation (e.g., "Learn more" opens a help article) - Tapping the back button → pops back to the previous screen (profile or feed) - If entry is via deep link (`origin = "deep_link"`), the user lands directly on this screen without prior navigation context ### Sample Data - Account: @urbanphotography (Creator account) - Accounts reached this week: **12,400** (+18%) - Accounts engaged: **3,210** (+7%) - Total followers: **48,900** - Tool rows: "Ad tools", "Branded content", "Creator marketplace", "Live badges" - Primary button: "Create promotion" - Footer: "Checkout provided by Meta." --- ## Professional Onboarding Checklist ### Overview A step-by-step checklist screen that guides new professional or business account holders through the setup tasks they need to complete to get the most out of their professional account. ### UI Elements **Header / Toolbar** - Back button (top-left) — behavior depends on entry point: - If entered from the profile tab, hides the bottom tab bar on exit - If entered during a conversion flow, navigates back within that flow - A close button (top-right) rendered as an ActionButton icon, with a content description (accessibility label) indicating its purpose **Headline Component (IgdsHeadline)** - Large headline text at the top of the screen (e.g., "Set up your professional account") - Optional body/subheading text beneath the headline - Initially hidden (visibility toggled once data loads) **Progress Indicator** - A horizontal ProgressBar displayed while the checklist data is loading from the server - Hidden once checklist items are loaded and content is shown **Steps Completed Counter** - A text label below the headline showing how many steps are done, e.g., "2 of 5 completed" **Checklist RecyclerView** - A vertical scrolling list of checklist item cards, each showing: - A step title (e.g., "Add a profile photo", "Write your bio", "Connect to Facebook") - A completion status indicator (e.g., checkmark icon if done, empty circle if not) - A short description of what the step involves - Tapping an incomplete item navigates to that setup step - Completed items appear visually distinct (e.g., muted color, strikethrough, or filled checkmark) **Confetti Animation View** - A full-screen or overlay image view that plays a confetti animation when all checklist steps are completed - Hidden by default; appears and animates upon 100% completion **Bottom Navigation Bar (BusinessNavBar)** - Primary button (e.g., "Done" or "Go to profile") — visible when appropriate, navigates the user forward - Optional secondary text link button ### Interactions - Tapping a checklist item → navigates to the corresponding setup screen (e.g., profile photo editor, bio editor, Facebook connect screen) - Returning from a setup screen → checklist refreshes to reflect new completion status - Completing all items → confetti animation plays, primary button label may change to "Done" or "Go to dashboard" - Tapping the primary bottom button → navigates forward (e.g., to Professional Dashboard) - Tapping the back button → behavior varies by entry point: - From profile: shows tab bar again and exits - From conversion flow: steps back in the conversion flow - From deep link: pops back or exits to main app - While loading: ProgressBar is visible; checklist content is hidden - After data loads: ProgressBar hides; checklist content animates in ### Sample Data Checklist items for @cafebakery_official (Business account): 1. ✅ Add a profile photo 2. ✅ Write your bio 3. ⬜ Connect to Facebook Page — "Link your Facebook Page to access more tools" 4. ⬜ Add contact info — "Let customers call, email, or find directions" 5. ⬜ Create your first promotion — "Reach new customers by boosting a post" Progress label: **2 of 5 completed** Primary button: "Continue" --- ## Professional Account Conversion Flow (Multi-Step) ### Overview A guided multi-step modal flow that walks a personal account user through converting their account to a Professional (Business or Creator) account, collecting necessary information at each step. ### UI Elements **Shared Navigation Bar (BusinessNavBar)** - Present on all steps - Primary button: text changes per step (e.g., "Next", "Continue", "Done") - Secondary button/link: text changes per step (e.g., "Not now", "Skip", "Go back") - While a step is submitting, the primary button shows a loading spinner and is disabled - Optional footer terms text with links to Meta's payment Terms and Policies where relevant **Step 1 — Introduction (INTRO)** - IgdsHeadline with title: e.g., "Get professional tools" - Body text explaining the benefits of a professional account - Illustrative image or icon - Primary button: "Continue" - Secondary link: "Not now" **Step 2 — Account Type Selection (ACCOUNT_TYPE_SELECTION_V2)** - IgdsHeadline: "Choose your account type" - Two selectable cards: - **Creator** — "For public figures, content producers, artists, and influencers" - **Business** — "For retailers, local businesses, brands, organizations, and service providers" - Selected card is highlighted; other is dimmed - Primary button: "Next" (enabled only when a type is selected) **Step 3 — Creator Account Description (CREATOR_ACCOUNT_DESCRIPTION)** *(shown only when Creator is selected)* - IgdsHeadline: "What best describes you?" - A scrollable list of creator category options (e.g., "Artist", "Blogger", "Digital creator", "Musician/Band", "Photographer") - Tapping a category selects it (highlighted state) - Primary button: "Next" **Step 4 — Choose Category (CHOOSE_CATEGORY)** *(shown for Business path)* - IgdsHeadline: "Choose your business category" - Searchable list of business categories (e.g., "Restaurant", "Clothing store", "Health/beauty", "Local business") - Search bar at top to filter categories - Primary button: "Done" **Step 5 — Edit Contact Info (EDIT_CONTACT)** - IgdsHeadline: "How can people contact you?" - Toggle row: "Display contact info" (on/off) - Input fields (shown when toggle is on): - Email address field — placeholder: "Email" - Phone number field — placeholder: "Phone" - Street address field — placeholder: "Street address" - Primary button: "Next" - Secondary link: "Skip" **Step 6 — Connect to Facebook Page (FACEBOOK_CONNECT)** - IgdsHeadline: "Connect your Facebook Page" - Body text explaining the benefits of linking a Facebook Page - Button: "Connect Facebook Page" — opens Facebook OAuth/login flow - Secondary link: "Skip" **Step 7 — Page Selection (PAGE_SELECTION)** *(shown if user has multiple Facebook Pages)* - IgdsHeadline: "Select a Facebook Page" - List of the user's existing Facebook Pages, each showing: - Page profile picture (circular) - Page name - Page category - "Create a new Facebook Page" option at the bottom - Primary button: "Next" (enabled once a page is selected) **Step 8 — Suggest Business (SUGGEST_BUSINESS)** *(optional upsell step)* - IgdsHeadline encouraging upgrade or additional features - Description text - Primary button: "Turn on" - Secondary link: "Not now" **Step 9 — WhatsApp Linking (WHATS_APP_LINKING)** - IgdsHeadline: "Add a WhatsApp number to your profile" - Phone number input field - Primary button: "Add WhatsApp number" - Secondary link: "Skip" **Step 10 — Opt-in Email (OPT_IN_EMAIL)** - IgdsHeadline: "Get updates and tips for your business" - Email input field pre-filled with account email - Checkbox: "Send me updates about my business account" - Primary button: "Next" **Step 11 — Onboarding Checklist (ONBOARDING_CHECKLIST)** - Transitions to the Professional Onboarding Checklist screen (see above) **Step 12 — Professional Dashboard (PROFESSIONAL_DASHBOARD)** - Transitions to the Professional Dashboard screen (see above) ### Interactions - Tapping primary button on each step → validates inputs and proceeds to the next step; shows spinner while processing - Tapping secondary link → skips the current step and moves to the next - Tapping back → returns to the previous step in the flow - Tapping "Connect Facebook Page" → launches Facebook OAuth web flow; on return, either selects the connected page or shows the Page Selection step - Selecting a category/account type → updates visual selection state immediately - On the final step (PROFESSIONAL_DASHBOARD), the flow completes and the user is taken to their new Professional Dashboard ### Sample Data - User: @mariasdesigns (converting from personal to Creator) - Selected type: Creator - Selected category: "Photographer" - Contact: maria.designs@email.com, (555) 867-5309 - Facebook Page connected: "Maria's Designs Photography" (Photography) - WhatsApp: +1 (555) 867-5309 --- # Settings & Privacy — Screen Specifications --- ## Settings Home ### Overview The main Settings entry point where users access all account, privacy, and app configuration options organized into navigable sections. ### UI Elements - **Header/Toolbar:** Title bar displaying "Settings" (inferred from app context). No subtitle. Back arrow to return to the profile screen. - **Section: Account** - Row: "Content preferences" — navigates to content filtering and topic preferences - Row: "Muted accounts" — navigates to list of muted users - Row: "Saved" — navigates to saved posts collection - Row: "Your activity" — navigates to activity center - **Section: Privacy** - Row: "Privacy center" — opens Instagram's Privacy Center (web or native Bloks screen) - **Section: Help & Support** - Row: "Help" — navigates to help center - Row: "About" — navigates to About screen - **Section: Connected Accounts** - Row: "Accounts Center" — opens Meta Accounts Center (Bloks screen) - Row: "Family Center" — opens supervision/family oversight onboarding - **Section: Camera** - Row: "Camera settings" — navigates to camera configuration - Row: "Default Camera Mode" — sub-option showing "PHOTO" or "VIDEO" as current selection - **Dividers** between each section group ### Interactions - Tapping **"Content preferences"** → opens Content Preferences screen (Bloks-rendered) - Tapping **"Muted accounts"** → opens list screen titled with "Muted accounts" showing accounts the user has muted - Tapping **"Saved"** → opens the Saved Posts collection screen - Tapping **"Your activity"** → opens Activity Center screen - Tapping **"Privacy center"** → opens Privacy Center home (Bloks screen with `entry_point: instagram_settings`) - Tapping **"Help"** → opens Help Center (Bloks or web screen, `entry_point: SETTINGS`) - Tapping **"About"** → opens About Instagram screen - Tapping **"Accounts Center"** → opens Meta Accounts Center (Bloks: `com.bloks.www.fxcal.settings.async`, `entrypoint: app_settings`) - Tapping **"Family Center"** → opens family supervision onboarding (Bloks: `com.bloks.www.yp.supervision_onboarding.async`, `entrypoint: app_settings`) - Tapping **"Camera settings"** → opens Camera Settings screen - Tapping **Back** → returns user to their Profile screen ### Sample Data ``` Settings Account Content preferences Muted accounts Saved Your activity Privacy Privacy center Help & Support Help About Instagram Connected Accounts Accounts Center Family Center Camera Camera settings Default Camera Mode PHOTO ``` --- ## Privacy Center ### Overview A multi-section hub where users review and manage Instagram's privacy practices, policies, and their personal data controls. ### UI Elements - **Header/Toolbar:** Back arrow. Title: "Privacy Center" - **Home section (default landing view):** - Introductory text explaining privacy controls - Navigation tiles or rows for sub-sections such as: - **Privacy Policy** — opens the full privacy policy (web view at `privacycenter.instagram.com/policy/`) - **Your data** / **Ad controls** / **Account privacy** — sub-pages rendered via Bloks - **Entry parameters** passed in (not shown to user but affect which sub-page opens): - Sub-page variants: `home`, `privacy_policy`, plus guide-specific pages via `guide_id`, `subguide_type`, `guide_section_id` - **Loading indicator:** Spinner shown while Bloks content fetches from server ### Interactions - Tapping **"Privacy Policy"** → opens `privacycenter.instagram.com/policy/` in an in-app browser or web view, with optional `version_id` and `subpage` query parameters - Tapping any other sub-section → navigates within the Privacy Center Bloks screen to the specified `subpage` or `guide_id` - Tapping **Back** → returns to Settings Home - If opened from a push notification deep link, the specific sub-page or guide is opened directly ### Sample Data ``` Privacy Center 📋 Privacy Policy 🔒 Data from Instagram 🎯 Ad preferences 👤 Account privacy settings [Learn more about how Instagram uses your data] ``` --- ## Content Preferences ### Overview A screen where users configure what types of content appear in their feed, Explore, and Reels based on topics and sensitivity filters. ### UI Elements - **Header/Toolbar:** Back arrow. Title: "Content preferences" - **Topic sections** (Bloks-rendered list): - Rows for content categories the user can adjust (e.g., suggested topics, sensitive content controls) - Toggle or disclosure row per category - **"Not interested" / content filter controls** (if applicable) - **Description text** under section headers explaining how preferences affect content ### Interactions - Tapping a category row → opens sub-screen for that topic preference - Toggling a switch → immediately updates content filter state - Tapping **Back** → returns to Settings Home ### Sample Data ``` Content preferences Suggested Content Sensitive content control Standard › Topics you've indicated interest in Travel Remove Food Remove Music Remove [Add topics] ``` --- ## Muted Accounts ### Overview A list of all accounts the user has muted, with the ability to unmute them. ### UI Elements - **Header/Toolbar:** Back arrow. Title: "Muted accounts" - **Account list** (scrollable): - Each row shows: - **Profile photo** (circular avatar, ~40px) - **Username** (bold, e.g., `@janedoe`) - **Full name** (secondary text below username) - **"Unmute" button** (text button or outlined button on the right) - **Empty state:** Message shown if no accounts are muted — e.g., "You haven't muted any accounts." ### Interactions - Tapping **"Unmute"** on a row → removes the account from the muted list; row disappears with animation; account's posts and stories reappear in feed - Tapping a **profile photo or username** → navigates to that user's profile - Tapping **Back** → returns to Settings Home ### Sample Data ``` Muted accounts ● @travelblogger_mike Mike Johnson [Unmute] ● @fitness_daily Sarah Thompson [Unmute] ● @news_updates_24 News Updates [Unmute] ``` --- ## Saved Posts ### Overview A collection screen showing all posts, Reels, and audio the user has bookmarked, organized into the default collection and any custom collections they've created. ### UI Elements - **Header/Toolbar:** Back arrow. Title: "Saved." Gear/options icon (top right) for managing collections - **All Posts grid** (default tab or first collection): - 3-column grid of saved media thumbnails - Video posts show a small play icon overlay - Carousel posts show a multi-image icon - **Collections list** (below or in a separate tab): - Each collection shows: - Collection cover (mosaic of 4 thumbnails or single image) - Collection name (e.g., "Travel inspo", "Recipes") - Post count (e.g., "12 posts") - **"+" button** to create a new collection - **Empty state:** "Save photos and videos that you want to see again. No one is notified, and only you can see what you've saved." with a bookmark icon ### Interactions - Tapping a **thumbnail** → opens the post in full-screen viewer - Tapping a **collection** → opens that collection's grid of saved posts - Tapping **"+"** → prompts user to name a new collection - Tapping the **gear icon** → opens options to manage or delete collections - Tapping **Back** → returns to Settings Home ### Sample Data ``` Saved. ⚙ [img] [img] [img] [img] [img] [img] [img] [img] [img] Collections [mosaic] Travel inspo 8 posts [mosaic] Recipes to try 14 posts [mosaic] Outfit ideas 5 posts [+ New collection] ``` --- ## Your Activity ### Overview A dashboard showing the user's Instagram activity history — time spent, interactions, and content engagement — with controls to manage or limit usage. ### UI Elements - **Header/Toolbar:** Back arrow. Title: "Your activity" (screen is rendered via the Activity Center Bloks screen) - **Time spent section:** - Bar chart or summary showing average daily time on the app (e.g., "2h 14m today") - "Set daily reminder" option with a time picker - **Interactions section:** - Rows for: Posts liked, Comments posted, Stories reactions, Accounts followed/unfollowed - Each row shows a count and a "Manage" or disclosure arrow - **Content section:** - "Recently deleted" — posts in trash - "Archive" — archived posts - **"Manage your time" / Usage tools:** - "Take a break" reminders toggle - "Daily time limit" option ### Interactions - Tapping any **Interactions row** → opens a filtered list of that activity type with the option to bulk unlike/delete comments - Tapping **"Set daily reminder"** → shows a time picker (e.g., "Remind me when I've been on Instagram for 30 minutes") - Tapping **"Recently deleted"** → opens the Recently Deleted screen showing posts deleted in the last 30 days - Tapping **"Archive"** → opens the user's archived posts grid - Tapping **Back** → returns to Settings Home ### Sample Data ``` Your activity Time on Instagram Today 2h 14m 7-day average 1h 47m [Set daily reminder] Interactions Posts you've liked 348 › Comments 42 › Story reactions 17 › Follows this week 3 › Content Recently deleted › Archive › Manage your time Take a break reminders Off › Daily time limit None › ``` --- ## Help Center ### Overview An in-app web-based help center where users can search for answers, browse help topics, or contact Instagram support. ### UI Elements - **Header/Toolbar:** Back arrow. Title: "Help" or "Instagram Help Center". "More options" (⋮) menu with options such as "Report website", "Share", "Open in browser" - **Search bar** at the top: placeholder "Search help topics" - **Topic categories** (grid or list): - Managing your account - Privacy and safety - Photos and videos - Login and password - Technical issues - **"Contact us"** or "Get more help" button at the bottom - **Loading state:** "Loading…" spinner while the help web content loads ### Interactions - Typing in **search bar** → shows suggested help articles in real time - Tapping a **category** → navigates to that help topic list - Tapping a **help article** → loads article in the same web view - Tapping **"More options"** → shows a bottom sheet with: "Share", "Report website", "Open in [browser]", "Copy link" - Tapping **Back** → returns to Settings Home ### Sample Data ``` Help Center ⋮ [🔍 Search help topics ] Managing your account Privacy and safety Photos and videos Login and password Technical issues Payments and purchases [Get more help] → Contact support form ``` --- ## About Instagram ### Overview A screen displaying app version information, legal links, and Instagram's ownership under Meta. ### UI Elements - **Header/Toolbar:** Back arrow. Title: "About" - **App icon** centered at top (Instagram gradient camera logo) - **App name:** "Instagram" - **Version number:** e.g., "Version 315.0.0.0.119" - **Links list:** - "Privacy Policy" — opens in-app browser - "Terms of Use" — opens in-app browser - "Open Source Licenses" — opens list or text screen - "Cookies Policy" — opens in-app browser - "Data Policy" — opens in-app browser - **"Managed account" indicator** (shown if user's account is enterprise/managed) - **Footer text:** "© Meta" with current year ### Interactions - Tapping any **link row** → opens the corresponding legal page in the in-app browser - Tapping **Back** → returns to Settings Home ### Sample Data ``` About [Instagram logo] Instagram Version 315.0.0.0.119 Privacy Policy › Terms of Use › Open Source Licenses › Cookies Policy › Data Policy › © Meta 2025 ``` --- ## Accounts Center ### Overview A Meta-wide account management hub where users link Instagram, Facebook, and other Meta accounts, manage profile information, and control cross-app settings. ### UI Elements - **Header/Toolbar:** Back arrow. Title: "Accounts Center" (rendered via Bloks) - **Connected accounts section:** - Row per connected account (e.g., Instagram, Facebook) with: - Platform icon - Username - Account status badge (e.g., "Active") - "Add account" option - **Settings sections:** - "Personal details" — name, email, phone - "Password and security" - "Ad preferences" - "Your information and permissions" - "Meta Pay" — payment methods and transaction history - **Footer:** "Accounts Center helps you manage your connected experiences across Meta technologies" ### Interactions - Tapping a **connected account row** → shows options to manage or disconnect that account - Tapping **"Personal details"** → opens a form to edit name, email, birthday - Tapping **"Password and security"** → opens security settings (2FA, login activity) - Tapping **"Ad preferences"** → opens ad interest and data settings - Tapping **"Meta Pay"** → opens payment methods, transaction history, and autofill card settings - Tapping **Back** → returns to Settings Home ### Sample Data ``` Accounts Center Connected accounts [ig] @alex_martinez Instagram Active [fb] Alex Martinez Facebook Active [+ Add account] Account settings Personal details › Password and security › Ad preferences › Your information and permissions › Meta Pay › Accounts Center helps you manage your connected experiences across Meta technologies. ``` --- ## Family Center (Supervision Onboarding) ### Overview An onboarding flow for parents and teens to set up supervised accounts, enabling parents to monitor and set limits on a teen's Instagram use. ### UI Elements - **Header/Toolbar:** Back arrow. Title: "Family Center" or "Supervision" - **Illustration** at top (graphic showing parent + teen/phone icon) - **Headline:** e.g., "Stay connected with the people you care about" - **Body text:** Explanation of supervision features — parents can set time limits, see who their teen follows, and review what their teen sees - **Role selection:** - "I'm a parent or guardian" (primary CTA button) - "I'm a teen" (secondary option) - **"Learn more"** link to help article - **Already have supervision set up?** → link to manage existing supervision ### Interactions - Tapping **"I'm a parent or guardian"** → begins the parent onboarding flow (link account, invite teen, set permissions) - Tapping **"I'm a teen"** → begins the teen flow (accept parent's invite or request supervision) - Tapping **"Learn more"** → opens help article about Family Center in in-app browser - Tapping **Back** → returns to Settings Home ### Sample Data ``` Family Center [Illustration: adult & teen with phone] Supervision on Instagram Parents can set limits and stay connected to their teen's Instagram experience, including time limits, who can message them, and more. [Set up supervision as a parent] I'm a teen — accept an invite Learn more about Family Center › ``` --- ## Camera Settings ### Overview A settings screen where users configure default camera behavior when launching the Instagram camera. ### UI Elements - **Header/Toolbar:** Back arrow. Title: "Camera settings" (string: "Camera settings") - **Default Camera Mode row:** - Label: "Default Camera Mode" - Description: "Choose which camera mode to start with when launching the camera next time" - Current value displayed inline: "PHOTO" or "VIDEO" - Tapping opens a selection dialog or bottom sheet - **Mode selection dialog/bottom sheet** (triggered by tapping Default Camera Mode): - Title: "Default Camera Mode" - Options listed: - "PHOTO" (with radio button or checkmark if selected) - "VIDEO" - Cancel/dismiss option - **Camera Modes section** (informational, listing available modes): - Boomerang - Cinematic - Dual - Portrait - Slow motion - Timer - **Permissions row:** - "Allow Instagram to access your camera and microphone" → links to device settings - Description: "This lets you share photos, record videos and preview effects. You can change this anytime in your device settings." ### Interactions - Tapping **"Default Camera Mode"** → opens a bottom sheet or inline selector showing "PHOTO" and "VIDEO" - Selecting **"PHOTO"** or **"VIDEO"** → updates the stored preference; next time the camera is launched it opens in that mode - Tapping **"Allow Instagram to access your camera and microphone"** (if permission denied) → navigates to device app settings - Tapping **Back** → returns to Settings Home ### Sample Data ``` Camera settings Default Camera Mode Choose which camera mode to start with when launching the camera next time PHOTO › Available modes Boomerang Cinematic Dual Portrait Slow motion Timer Permissions Allow Instagram to access your camera and microphone → Open Settings ``` --- # Social & Discovery — UI Screen Specifications --- ## Search ### Overview The user types a query to search for people, hashtags, places, and popular topics across Instagram. ### UI Elements **Header/Toolbar** - Search input field at the top, full-width text input with placeholder (e.g., "Search") - Back/cancel button ("Cancel") on the left or right of the search bar to dismiss search - The search bar is focused and keyboard appears immediately on entry **Search Results Area (while typing)** - Live-updating list of result rows as the user types - Each row shows one of: - **Account result:** circular profile photo, username (bold), full name (secondary text below), optional "Follow" button on the right - **Hashtag result:** hashtag icon, hashtag text (e.g., `#travel`), post count (e.g., "14.2M posts") - **Place result:** location pin icon, place name, city/region label below - **Popular topic/search result:** magnifying glass icon, search term text **Recent Searches (before typing)** - Section header "Recent" (text label) - List of previously searched items, each showing: - Circular profile thumbnail (for accounts) or icon (for hashtags/places) - Search term or username - "X" (remove) button on the right of each row - "Clear all" link at the top right of the recent searches list **Popular / Suggested Searches (when search field is empty or minimal input)** - Section header "Suggested" or "Popular searches" - List of trending search terms with a magnifying glass icon ### Interactions - **Typing in search field:** Results list updates in real time below the search bar - **Tap a result row:** Navigates to the corresponding profile, hashtag feed, or place page - **Tap "X" on a recent search row:** Removes that item from recent searches; list updates - **Tap "Clear all":** Removes all recent searches; replaces list with popular/suggested searches - **Tap "Cancel" / back button:** Dismisses the search screen and returns to the previous screen (e.g., Explore or Feed) - **Tap a hashtag result:** Opens the hashtag feed screen showing posts tagged with that hashtag - **Tap a place result:** Opens the Places feed screen showing posts tagged at that location ### Sample Data - Recent searches: `@cristiano`, `#sunsetphotography`, `New York City` - Account result: profile photo + `natgeo` / `National Geographic` / "Follow" button - Hashtag result: `#travel` / "532M posts" - Place result: `Eiffel Tower` / `Paris, France` - Popular search: `#reels`, `Selena Gomez`, `#foodphotography` --- ## Recent Searches ### Overview A dedicated view showing the user's full history of recent search terms, accounts, hashtags, and places, with the ability to clear individual items or all history. ### UI Elements **Header** - Title: "Recent" or "Recent searches" (displayed at top) - "Edit" or "Clear all" action button in the header (top right) **Search History List** - Vertically scrollable list of recent search entries - Each row contains: - **For accounts:** circular avatar thumbnail, username (bold), display name (gray, below username) - **For hashtags:** hashtag symbol `#` in a gray circle icon, hashtag name, post count - **For places:** location pin icon in a gray circle, place name, location detail - Remove ("X") button on the far right of every row **Empty State** - Centered message when no recent searches exist: no specific string confirmed, but shows a placeholder indicating no history ### Interactions - **Tap any row:** Opens the corresponding profile, hashtag feed, or place page - **Tap "X" on a row:** Instantly removes that item from the list - **Tap "Clear all" / "Edit":** Removes all recent search history; list becomes empty - **Back/cancel:** Returns the user to the search bar or previous screen ### Sample Data - `@zendaya` / `Zendaya` (account) - `#aestheticphotography` / "8.4M posts" (hashtag) - `Santorini, Greece` (place) - `coffee shops` (keyword) --- ## Popular Search Results ### Overview A filtered search results page that opens when the user arrives via a popular or trending search topic, showing posts and content matching that keyword or topic. ### UI Elements **Header** - Back arrow (navigate back to search or previous screen) - Search bar showing the active search term (e.g., "autumn fashion"), pre-filled and non-editable in this view, or editable to refine **Results Area** - Grid of posts (3-column thumbnail grid, similar to Explore) - Each cell shows a square media thumbnail (photo or video) - Video thumbnails may display a play icon or Reel icon overlay - Carousel/album posts may display a stacked-layers icon **Filter Tabs (optional row below search bar)** - Horizontal scrollable tab row: "Top", "Accounts", "Tags", "Places" - Active tab is highlighted/underlined **Loading State** - Spinner or skeleton placeholders while results load ### Interactions - **Tap a post thumbnail:** Opens the post in full-screen viewer - **Tap a filter tab ("Accounts", "Tags", "Places"):** Switches the results to show only that content type - **Edit the search bar text:** Triggers a new search with updated query, results refresh - **Scroll down:** Loads more results (infinite scroll / pagination) - **Back button:** Returns to the search screen ### Sample Data - Search query: "autumn fashion" - Results grid: 18+ post thumbnails — clothing flat-lays, outdoor portraits in warm-toned lighting, styled lookbook photos - Filter tabs active: "Top" --- ## Places Feed ### Overview The user views a location page showing all public posts tagged at a specific place, along with a map pin and place details. ### UI Elements **Header** - Back arrow - Place name as the page title (e.g., "Central Park") - Options menu (⋮) for reporting or sharing **Place Hero Section** - Place name (large heading text) - Location detail: city and region (e.g., "New York, NY, United States") - Optional map thumbnail or map pin graphic - "Follow" button to follow the place tag (optional) **Content Tabs** - Tab row: "Top" and "Recent" - Active tab underlined **Posts Grid** - 3-column thumbnail grid of all posts tagged at this place - Each cell is a square crop of the photo/video - Video posts show a play/Reel icon overlay **Loading/Empty State** - If no posts: "No posts yet" centered message ### Interactions - **Tap "Top" / "Recent" tabs:** Switches between most-liked posts and chronological posts - **Tap a post thumbnail:** Opens the full post viewer - **Scroll down:** Loads more posts - **Tap back:** Returns to the previous screen (search results, profile, or feed) - **Tap "Follow" (place):** Subscribes to posts tagged at this location; button changes to "Following" ### Sample Data - Place: "Eiffel Tower" - Subtitle: "Paris, Île-de-France, France" - Post grid: Travel selfies, night shots of the tower, aerial photos, food photos from nearby cafés --- ## Friend Map ### Overview The user views a real-time map showing the locations of friends who have opted in to location sharing, and can manage their own sharing settings. ### UI Elements **Header** - Back arrow or close button - Title: "Friends Map" or left blank (full-screen map experience) - Settings/gear icon (top right) to open audience settings **Map View** - Full-screen interactive map (satellite or standard style) - Friend avatars (circular profile thumbnails) pinned at their last-known location - Tapping a pin shows a small popup with: - Friend's profile photo - Username - Time since last location update (e.g., "2 hours ago") - "Message" shortcut button **My Location** - User's own avatar pinned on the map - "Sharing Live Location" indicator label (from strings: "Sharing Live Location") when active **Bottom Sheet / Info Panel** - Appears when tapping a friend's pin (partially visible): - Friend's profile photo (large) - Username and full name - Location description or address - Time since last update - "Message" and "View Profile" action buttons **Settings Entry Points** - Gear icon or "Audience Settings" option to control who can see your location - "Custom places" option to label personal locations ### Interactions - **Tap a friend's avatar pin:** Expands a bottom sheet with that friend's location details and actions - **Tap "Message" in popup:** Opens a Direct Message thread with that friend - **Tap gear/settings icon:** Opens the Friend Map audience settings or privacy settings screen - **Drag/pinch map:** Pan and zoom the map - **Tap "View Profile":** Navigates to the friend's Instagram profile - **Tap back:** Exits the friend map, returns to previous screen - **Tap "Sharing Live Location" indicator:** May toggle or open sharing options ### Sample Data - Friends visible on map: `@maya_travels` (Paris, 1 hour ago), `@jakethephoto` (Tokyo, 3 hours ago) - My location: New York, NY - Status: "Sharing Live Location" badge visible --- ## Broadcast Channel ### Overview The user views a creator's Broadcast Channel — a one-to-many messaging feed where a creator posts updates, polls, and voice messages to their subscribed followers. ### UI Elements **Header** - Back arrow - Channel name (creator's name + "Channel" label, e.g., "Taylor's Channel") - Creator's circular avatar thumbnail (small, in header or as a prominent hero) - Members/subscriber count (e.g., "1.2M members") - "Join" button if the user is not yet a member (prominent, colored button) **Channel Feed (scrollable)** - Vertically scrollable list of message bubbles from the creator: - **Text messages:** Bubble with message text, timestamp - **Photo messages:** Image preview with caption - **Video messages:** Video thumbnail with play button, duration - **Poll messages:** Poll question text, answer options as tappable rows, percentage bars, total vote count - **Reaction counts:** Emoji reaction bar below each message (e.g., ❤️ 4.5K 🔥 2.1K) **Pinned / Featured Section (top of feed)** - Optional pinned message or featured event card at the top **Subscriber Actions (bottom bar)** - Reaction button (emoji quick-pick) to react to messages - If not joined: only "Join" CTA visible; no reaction bar **Featured Events Banner (when applicable)** - Event card with title, date/time, and a "Remind me" button (from strings: "Remind me") ### Interactions - **Tap "Join":** Subscribes user to the channel; button changes to "Joined"; reaction bar becomes available - **Tap an emoji reaction:** Adds the user's reaction to a message; count updates - **Tap a poll option:** Casts a vote; percentage bars update to reflect current results - **Tap an image/video:** Opens it in full-screen viewer - **Tap "Remind me" on an event:** Sets a reminder notification for the event; button text changes to "Reminded" - **Tap creator's avatar or name in header:** Navigates to the creator's profile - **Scroll up:** Loads older channel messages - **Back button:** Returns to the previous screen (inbox, profile, or feed) ### Sample Data - Channel: "Selena Gomez's Channel" / 3.4M members / Joined - Messages: - Text: "Can't believe we hit 1 million — thank you 🥹" — ❤️ 62K 🙌 28K - Poll: "Which album era is your favorite?" — "Revival" 42% / "Rare" 58% — 210K votes - Image: Behind-the-scenes studio photo — 🔥 91K reactions - Featured event: "Livestream Q&A — March 15, 7PM ET" / "Remind me" button --- ## Broadcast Channel Controls (Manage Channel) ### Overview A creator or admin accesses controls for managing their Broadcast Channel — including subscriber lists, moderation settings, and channel configuration. ### UI Elements **Header** - Back arrow - Title: "Channel settings" or "Manage channel" **Subscriber Management Section** - Row: "Subscriber list" → shows total subscriber count (e.g., "1.2M subscribers"), tappable - Row: "Subscription settings" → tappable, leads to subscription configuration **Moderation & Privacy** - Toggle: Allow replies / comments (on/off) - Row: "Audience settings" → tappable **Channel Identity** - Row: "Channel name" → current name shown, tappable to edit - Row: "Channel photo" → thumbnail of current photo, tappable to change **Danger Zone** - Row: "Delete channel" (shown in red or with a warning style) ### Interactions - **Tap "Subscriber list":** Opens a list of all subscribers with follow/message options - **Tap "Subscription settings":** Opens settings for subscriber-only access, pricing, or tiers - **Tap "Audience settings":** Controls who can join (everyone, followers only, etc.) - **Tap "Channel name":** Opens a text-edit field to rename the channel - **Tap "Channel photo":** Opens the media picker to update the channel's avatar - **Tap "Delete channel":** Shows a confirmation dialog before permanently deleting - **Back button:** Returns to the channel feed ### Sample Data - Channel name: "My Official Channel" - Subscriber count: "847K subscribers" - Subscription settings: "Free — Open to all followers" --- ## Fan Club (Subscriptions) ### Overview The user views or manages a creator's exclusive "Close Friends"-style subscription tier (Fan Club / Instagram Subscriptions), which grants access to exclusive content, subscriber-only Stories, and subscriber badges. ### UI Elements **Header** - Back arrow - Title: "Subscriptions" or creator's name - Creator's profile photo and username **Hero Section** - Creator's profile photo (circular, large) - Creator name and username - Subscriber badge preview (e.g., a purple crown badge) - Subscription price per month (e.g., "$0.99/month") - "Subscribe" button (prominent, colored CTA) - Brief description of what's included (e.g., "Get access to exclusive Stories, subscriber-only Lives, and a badge next to your name") **Benefits List** - Bullet list of subscriber perks: - "Exclusive subscriber Stories" - "Subscriber-only Lives" - "Supporter badge in comments and DMs" - "Exclusive content" (if applicable) **Subscriber Content Preview (if already subscribed)** - Horizontal row of Stories ring thumbnails labeled "Subscriber Stories" - Button: "See subscriber content" **Subscriber List Section (creator view only)** - Row: "Subscriber list" — shows subscriber count, tappable - Row: "Content preview picker" — for selecting which posts to show as subscriber previews **Details / Pricing Page** - Option to "View details" showing full terms ### Interactions - **Tap "Subscribe":** Initiates the in-app subscription purchase flow (payment sheet) - **Tap a subscriber Story thumbnail:** Opens that Story in the Stories viewer (subscribers only) - **Tap "Subscriber list" (creator):** Opens the subscriber list management screen - **Tap "Content preview picker" (creator):** Opens a media selector to choose preview posts - **Tap "View details":** Opens a detail sheet explaining the subscription terms - **Back button:** Returns to the creator's profile ### Sample Data - Creator: `@mrbeast` / MrBeast - Price: `$4.99/month` - Benefits: Exclusive subscriber Stories, supporter badge 👑, subscriber-only Q&A Lives - Subscriber count (creator view): "12,430 subscribers" --- ## Follow & Invite Friends ### Overview The user sees a list of suggested contacts from their phone's address book and social connections to follow on Instagram or invite to join the platform. ### UI Elements **Header** - Back arrow or "X" close button - Title: "Follow and Invite Friends" or "Connect Friends" **Permissions Prompt (if contacts not yet granted)** - Illustration or icon - Text: "Find friends from your contacts" (descriptive paragraph) - Button: "Connect Contacts" - Secondary link: "Not now" **Suggested People to Follow (contacts already on Instagram)** - Section header: "Contacts on Instagram" or "Suggested for you" - List rows, each showing: - Circular profile photo - Username (bold) - Full name or "Follows you" / "Mutual followers: X" label (gray, smaller text) - "Follow" button (outlined) or "Following" (filled/gray, if already following) **People to Invite (contacts not on Instagram)** - Section header: "Invite to Instagram" - List rows, each showing: - Contact initials avatar (gray circle with initials) or phone contact photo - Contact name (bold) - Phone number or email (gray, below name) - "Invite" button (outlined) — tapping opens native SMS/email share sheet **Empty State** - If no contacts found: "No contacts found. Check back later." ### Interactions - **Tap "Connect Contacts":** Requests device contacts permission; if granted, loads the contact list - **Tap "Follow":** Follows the account; button changes to "Following" - **Tap "Invite":** Opens native share sheet (SMS or email) pre-populated with an Instagram invite message - **Tap a profile row:** Opens that user's Instagram profile - **Scroll down:** Loads more suggested contacts - **Back/close button:** Returns to the previous screen (profile, onboarding, or settings) ### Sample Data - Contacts on Instagram: `@sarah_smith` / Sarah Smith / "Follows you" / [Follow] - Invite: `James Rivera` / +1 (555) 234-7891 / [Invite] - Suggested: `@travelwithlena` / Lena Park / "3 mutual followers" / [Follow] --- ## Invite from Instagram ### Overview A targeted invite flow where the user sends a personalized Instagram invitation to a specific person via a deep link or share mechanism. ### UI Elements **Header** - Back or close button - Title: "Invite a Friend" or similar **Invite Card** - Recipient's name or contact info displayed prominently - Instagram logo / branding - Custom invite message or caption (e.g., "Join me on Instagram!") - Preview of the invite link or QR code **Action Buttons** - "Send Invite" (primary CTA) - "Copy Link" secondary option - "Cancel" / "Not now" ### Interactions - **Tap "Send Invite":** Opens the native share sheet or sends the invite via the pre-selected channel (SMS, WhatsApp, etc.) - **Tap "Copy Link":** Copies the invite URL to the clipboard; toast notification: "Link copied" - **Tap "Cancel" / "Not now":** Dismisses the screen and returns to the previous screen ### Sample Data - Recipient: "Maria Lopez" (from contacts) - Invite message: "Hey Maria, join me on Instagram! Here's my link: instagram.com/yourname/?r=nametag" --- # Browser & Web Tools — Screen Specifications --- ## In-App Browser (Web Viewer) ### Overview The in-app browser lets users view external websites without leaving Instagram, with a full-featured toolbar, navigation controls, and contextual options. ### UI Elements **Header / Top Chrome Bar** - Back arrow button ("Navigate back") — navigates to the previous page in history or closes the browser - Page title — single-line, ellipsized; displays the current webpage title (e.g., "Shop | Nike") - Progress bar — thin horizontal bar below the toolbar; shows page load progress (0–100%) - More options button ("More options") — opens a contextual menu (three-dot or kebab menu) **Contextual / Overflow Menu (triggered by "More options")** - "Share" — shares the current page URL - "View in reader mode" — strips formatting for a clean reading experience - "Exit reader mode" — returns to normal view (shown only when reader mode is active) - "Report website" — lets the user flag problematic content - "Translate to [Language]" (e.g., "Translate to English") — translates the current page - "Show original language" — reverts translation - "Open in …" — opens a system chooser to view in another browser app - "Open in [App Name]" (e.g., "Open in Chrome") — direct shortcut to a specific external browser - "Report" — alternate report option - "Close browser" — dismisses the browser and returns to Instagram **WebView Content Area** - Full-screen web content rendered in a WebView - Supports scrolling, zooming, and embedded media (video, audio) - Full-screen video overlay (expands video to fill the screen) **Bottom Navigation Bar (when visible)** - Back button — navigates back within the page history - Forward button — navigates forward if history exists - Link history button ("Link history. Double tap for a list of links to websites you previously visited.") **Footer / Status Bar** - "Checkout provided by Meta." — appears during shopping/checkout flows - Loading indicator ("Loading…") — shown while page is fetching content ### Interactions - **Tapping back arrow or device back button**: Navigates to the previous page in the WebView history; if no history remains, closes the browser and returns to Instagram - **Tapping "Close browser"**: Immediately closes the browser and returns the user to the previous Instagram screen - **Tapping "Minimize browser"**: Collapses the browser to a minimized state (PiP-style or bottom bar) - **Tapping "Share"**: Opens Android share sheet with the current page URL - **Tapping "View in reader mode"**: Reloads the page content in a stripped, typography-only view; toolbar shows "Viewing in reader mode" confirmation; menu item changes to "Exit reader mode" - **Tapping "Translate to [Language]"**: Translates the entire page in-place; shows toast "Web page translated" with translation direction (e.g., "Spanish to English"); menu item changes to "Show original language" - **Tapping "Open in [App]"**: Exits the in-app browser and opens the URL in the selected external app - **Tapping "Report website"**: Opens a report flow for the current URL - **Tapping full-screen video**: Expands video to fill the device screen; a close/exit gesture or tap exits full-screen ("You're now viewing full screen. Swipe left or tap back button to exit.") - **Tapping forward button**: Navigates forward in page history (button is disabled if no forward history exists) - **Page load progress**: Progress bar fills left-to-right and disappears when load completes - **State changes**: Title updates as page loads; progress bar appears/disappears; back and forward buttons enable/disable based on navigation history ### Sample Data - **Page title**: "Air Force 1 '07 Men's Shoes – Nike" - **URL being loaded**: https://www.nike.com/t/air-force-1-07-mens-shoes-jBrhbr - **Translated message**: "Spanish to English" - **Reader mode toast**: "Viewing in reader mode" --- ## Security Error Screen ### Overview Shown when the website the user is trying to visit has an invalid or untrusted SSL certificate; the user must decide whether to go back or acknowledge the risk. ### UI Elements **Header** - Title: "Security error" - Back arrow button ("Go back") **Body** - Warning icon (visual indicator of error state) - Primary message: "There are problems with the security certificate for this site" - Secondary description explaining the risk **Action Buttons** - "Go back" (primary) — navigates away from the unsafe page - Option to proceed anyway (secondary, if available) ### Interactions - **Tapping "Go back"**: Returns the user to the previous safe page or closes the browser - **Proceeding anyway** (if unlocked): Continues to the page despite the certificate error; the browser loads the content ### Sample Data - **Affected URL**: http://oldshop.example.com - **Error message**: "There are problems with the security certificate for this site" --- ## Page Error / Unavailable Screen ### Overview Displayed when a webpage fails to load due to a network error, server error, or the page being unavailable, with options to retry or go back. ### UI Elements **Header** - Browser chrome remains visible (title, back button, more options) **Error Content Area** - Headline: "Page isn't available right now" or "Page can't be loaded" - Supporting text: "This may be because of a technical error that we're working to get fixed. Try reloading this page." - "Refresh" button — reloads the current URL - Back arrow / "Go back" — returns to the previous page **Network-Specific Variant** - Headline: "No network connection" - Supporting text: "Check your device's network connection and try again." - "Try again" button ### Interactions - **Tapping "Refresh"**: Attempts to reload the failed URL - **Tapping "Try again"**: Re-initiates the network request for the page - **Tapping "Go back"**: Navigates to the previous page in the browser history or closes the browser - **Connection restored**: If the network comes back, tapping "Try again" loads the page successfully ### Sample Data - **Page not available headline**: "Page isn't available right now" - **Detail text**: "This may be because of a technical error that we're working to get fixed. Try reloading this page." - **Network error headline**: "No network connection" - **Network detail**: "Check your device's network connection and try again." --- ## Camera & Microphone Permission Request Dialog ### Overview A permission dialog shown when a website within the in-app browser requests access to the device camera, microphone, or both; the user approves or blocks access. ### UI Elements **Dialog Box** (modal, overlaid on the browser) - Message text — one of: - ""[site.com] wants to use your device's camera and microphone."" - ""[site.com] wants to use your device's camera."" - ""[site.com] wants to use your device's microphone."" - "Allow" button (positive action) - "Block" button (negative action) - Dialog can be dismissed by tapping outside (treated as denial) ### Interactions - **Tapping "Allow"**: Grants the website access to the requested hardware (camera and/or microphone); browser continues to the feature (e.g., video call, photo upload) - **Tapping "Block"**: Denies the request; the website is informed of the denial; no hardware access is granted - **Dismissing**: Equivalent to "Block"; permission denied ### Sample Data - **Origin**: "meet.google.com" - **Message**: ""meet.google.com wants to use your device's camera and microphone."" --- ## Geolocation Permission Request Dialog ### Overview A modal dialog shown when a website requests the user's device location within the in-app browser. ### UI Elements **Dialog Box** - Message text: ""[hostname] wants to use your device's location."" (e.g., ""maps.example.com wants to use your device's location."") - "Allow" button - "Block" button ### Interactions - **Tapping "Allow"**: Grants the site access to the device's location; the browser passes location data to the page - **Tapping "Block"**: Denies location access; the website is notified of the denial - **Dismissing**: Treated as "Block" ### Sample Data - **Message**: ""maps.example.com wants to use your device's location."" --- ## External App Launch Confirmation Dialog ### Overview A confirmation dialog shown when a link inside the in-app browser attempts to open a third-party external application; the user chooses to continue or stay in Instagram. ### UI Elements **Dialog Box** - Title: "You're leaving our app" - Body: "The website you're viewing is attempting to open an external app. Would you like to continue?" - "Continue" button — opens the external app - "Cancel" button — stays in the in-app browser ### Interactions - **Tapping "Continue"**: Leaves the in-app browser and launches the external app (e.g., WhatsApp, Spotify, Maps) - **Tapping "Cancel"**: Dismisses the dialog; the user remains on the current page in the in-app browser ### Sample Data - **Scenario**: A link tries to open the Spotify app - **Message**: "The website you're viewing is attempting to open an external app. Would you like to continue?" --- ## Autofill Prompt — Save Info ### Overview A bottom sheet or banner asking the user if they want to save contact or payment information detected on a form for future autofill use. ### UI Elements **Bottom Sheet / Prompt Card** - Title: "Save info for next time?" - Body: "Turn on autofill and save this info for future use." - "Save and Autofill" button (primary) - "Not now" button (dismiss) - "How your info is used and managed" — expandable link to privacy details **Privacy Detail Section (expanded)** - Text: "By tapping Save, this information, including your CVV, will be saved and synced with Meta Pay, where it can be managed. Meta's payment Terms and Policies apply." - Hyperlinks: "Terms", "Policies", "Learn more" ### Interactions - **Tapping "Save and Autofill"**: Saves the detected form data (name, email, address, card details) to Meta Pay; enables autofill for future sessions - **Tapping "Not now"**: Dismisses the prompt without saving; autofill is not enabled - **Tapping "Learn more"**: Opens a Meta help article about autofill and ad usage - **Tapping "Terms" / "Policies"**: Opens the respective Facebook Payments legal pages in the browser ### Sample Data - **Detected info**: First name: "Maria", Last name: "Lopez", Email: "maria.lopez@email.com" - **Prompt text**: "Save info for next time?" --- ## Autofill Prompt — Use Saved Info ### Overview A bottom sheet or banner offering to fill in a form using previously saved payment or contact information. ### UI Elements **Bottom Sheet / Prompt Card** - Title: "Autofill with saved info?" - Body: "Turn on autofill and use your saved info to complete this form." - Saved card preview: "[Card brand] ••• [last 4 digits]" (e.g., "Visa ••• 4242"), with expiry "Expires MM/YY" - "Autofill" button (primary) - "Not now" button (dismiss) - "Enter information manually" option **Alternate Variant (card from ad account)** - Title: "Autofill with card from your ad account?" ### Interactions - **Tapping "Autofill"**: Fills detected form fields with saved data; shows inline confirmation - **Tapping "Not now"**: Dismisses without filling; user fills the form manually - **Tapping "Enter information manually"**: Dismisses the sheet and focuses the first form field for manual entry ### Sample Data - **Saved card**: "Visa ••• 4242, Expires 09/26" - **Prompt title**: "Autofill with saved info?" --- ## CVV Confirmation Dialog ### Overview A security challenge dialog asking the user to enter their card's CVV (or full card number) before completing an autofill action, as an extra verification step. ### UI Elements **Dialog / Bottom Sheet** - Title: "Confirm Card Details" or "Confirm the Security Code for [Card Brand] • [Last 4]" - Body: "Enter the 3- or 4-digit security code on your [Card Brand] • [Last 4] to autofill this form." - Alternative: "As an extra security check please enter details for your card ending with [Last 4]." - CVV input field — labeled "CVV" or "Security code", masked input - Card number input field (when full number is required) — labeled "Card number" - Expiry field — labeled "MM/YY" - "Confirm" button (primary) - "Cancel" button **Inline Error States** - "Incorrect CVV" - "Enter valid CVV" - "Enter valid expiration" - "Enter valid credit card number" **Save CVV toggle/option** - Checkbox or toggle: "Save CVV for future use." - Supporting text: "Your CVV will be saved, encrypted and only available for autofill when on this device." ### Interactions - **Tapping "Confirm"**: Validates the entered CVV; if correct, proceeds with autofill; if incorrect, shows "Incorrect CVV" inline error - **Tapping "Cancel"**: Dismisses the dialog without filling the form - **Enabling "Save CVV"**: Encrypts and stores the CVV locally for future autofill; shows privacy disclosure ### Sample Data - **Dialog title**: "Confirm the Security Code for Mastercard • 1234" - **Body text**: "Enter the 3- or 4-digit security code on your Mastercard • 1234 to autofill this form." - **Error**: "Incorrect CVV" --- ## Add / Save Payment Card Screen ### Overview A form screen where the user enters credit or debit card details to save with Meta Pay for use in Instagram Checkout and autofill flows. ### UI Elements **Header** - Title: "Add card" or "Confirm details to save card" - "Cancel" button (left) - "Save" or "Save securely" button (right, disabled until form is valid) **Form Fields** - "Card Number" — numeric input, formats automatically with spaces - "MM/YY" — expiry date field - "CVV" — 3- or 4-digit security code; masked - "Save CVV for future use." — checkbox **Billing Address Section** (collapsible or separate section) - "Billing address same as shipping" — checkbox - "Billing address (optional)" — section label - "Street address" — text input - "Apt/ste (optional)" — secondary address line - "City" — text input - "State" — dropdown (all 50 US states listed) - "Country" — dropdown - "Zip code" / postal code — numeric input **Scan Card Option** - "Take a photo" button — prompts camera permission and scans card details **Legal Disclosure** - "By tapping Save, you agree to Meta's payment Terms and Policies." - Hyperlinks: "Terms", "Policies" - "Checkout provided by Meta." **Inline Validation Errors** - "Enter valid credit card number" - "Enter valid expiration" - "Enter valid CVV" - "Please enter a valid email" - "Please enter a valid phone number" ### Interactions - **Filling card number**: Auto-formats as user types (e.g., 4242 4242 4242 4242); validates on blur - **Filling MM/YY**: Validates month (01–12) and year; shows "Enter valid expiration" if invalid - **Filling CVV**: 3- or 4-digit masked field; shows "Enter valid CVV" if wrong length - **Tapping "Take a photo"**: Requests camera permission; if denied, shows "Allow Instagram to access your camera"; if granted, opens camera viewfinder to scan card; detected values auto-populate fields - **Checking "Billing address same as shipping"**: Hides the billing address form - **Tapping "Save" / "Save securely"**: Submits form to Meta Pay; if successful, dismisses screen with a success toast; if network error, shows retry option - **Tapping "Terms" / "Policies"**: Opens respective Meta legal pages in the in-app browser ### Sample Data - **Card number**: 4111 1111 1111 1111 - **Expiry**: 12/27 - **CVV**: 123 - **Street address**: 123 Market St - **City**: San Francisco - **State**: California - **Country**: United States --- ## Camera Permission Explainer Screen (Browser Camera Access) ### Overview An educational interstitial screen shown before the system camera permission dialog, explaining why Instagram's in-app browser needs camera access for features like card scanning. ### UI Elements **Illustration** - Image showing the permission screen context ("Image of the permission screen") **Text Content** - Headline: "Allow Instagram to access your camera" - Body: "Then you'll be able to scan your card. You can change this in your settings any time." - Alternative general body: "Enable access to your camera to do things like take and share photos, record videos and use visual effects. You can change your choice at any time in your device settings." **Buttons** - "Allow camera access" (primary) — proceeds to the system permission dialog - ""Don't allow camera access"" (secondary) — skips and dismisses **Settings Redirect (if permission previously denied)** - "Open Settings" button — deep-links to app settings so the user can manually enable camera - Body: "This feature requires camera access. Change the permissions in your device's application settings." ### Interactions - **Tapping "Allow camera access"**: Triggers the Android system camera permission dialog; if granted, proceeds to the card-scanning camera view - **Tapping "Don't allow camera access"**: Dismisses the screen; camera-dependent features remain unavailable - **Tapping "Open Settings"**: Opens Android app settings for Instagram so the user can enable camera permission manually ### Sample Data - **Headline**: "Allow Instagram to access your camera" - **Body**: "Then you'll be able to scan your card. You can change this in your settings anyytime." --- # External Integrations – Screen Specifications --- ## Spotify Account Connection Screen ### Overview The user sees a web-based authorization page inside Instagram that allows them to connect their Spotify account, enabling Spotify music to appear in their Instagram Notes or Stories. ### UI Elements - **Full-screen WebView**: Displays Spotify's own OAuth/login web page. No Instagram chrome surrounds the content—the entire screen is the Spotify authorization page. - **Spotify Login Page content** (rendered by Spotify's servers): Typically includes Spotify logo, a prompt to log in or authorize Instagram access, email/username and password fields, and an "Agree" or "Authorize" button. - **No visible navigation bar or back button** within the screen itself; the user uses the system back gesture or button to exit. ### Interactions - **Tapping "Authorize" / "Agree"**: Spotify redirects back to Instagram with an authorization code or token. Instagram processes the result and closes this screen, returning the user to whatever surface triggered the connection (e.g., Notes music picker). - **Tapping "Cancel" / "Not Now"** on Spotify's page: The authorization is rejected, the screen closes, and the user returns to the previous Instagram screen with no account linked. - **System back gesture**: Cancels the flow and returns the user to the previous screen with no changes. - **Error state**: If the URL or callback parameters are missing or invalid, the screen closes immediately and returns to the previous screen. ### Sample Data - Spotify page title: "Log in to Spotify" - Prompt text (from Spotify): "Instagram wants to access your Spotify account. This includes your Spotify username and profile picture." - Button: "Agree" / "Cancel" --- ## Spotify Audio Browser ### Overview Instagram opens the Spotify audio browser so the user can search for and select a song to attach to their Note or other Instagram content. ### UI Elements - **Spotify Audio Picker UI**: A React Native or WebView-based interface for browsing Spotify's music catalog. Shown as a bottom sheet or full-screen overlay within Instagram. - **Search bar** at the top: Labeled with a placeholder like "Search songs, artists…" - **Recommendations section**: Displays a horizontally or vertically scrollable list of suggested tracks, labeled "instagram_recommendations" — titles, artist names, and album art thumbnails for each track. - **Track list items**: Each row shows: - Album artwork (small square thumbnail) - Song title (e.g., "Flowers") - Artist name (e.g., "Miley Cyrus") - Duration or other metadata (optional) - **Close / Back button**: Top-left or top-right corner to dismiss without selecting. ### Interactions - **Tapping a track**: Selects that song and returns the user to the previous screen (e.g., Notes composer) with the selected track attached. - **Searching**: Filters the track list in real time based on the user's query. - **Tapping Close / Back**: Dismisses the picker and returns to the previous screen with no track selected. - **Returning from Spotify auth** (if not yet connected): The screen navigates to the Spotify Connection Screen first, then returns here upon success. ### Sample Data - Recommended tracks: "As It Was – Harry Styles", "Cruel Summer – Taylor Swift", "Flowers – Miley Cyrus" - Search placeholder: "Search songs, artists…" --- ## Amazon Account Linking Screen ### Overview The user is prompted (or redirected) to link their Amazon account to Instagram, enabling a connected shopping or purchase experience. ### UI Elements - **Header / Title**: "Amazon account successfully linked" shown as a confirmation, or a consent/authorization prompt screen is displayed if the user hasn't yet linked. - **Consent Flow UI**: A full-screen or overlay consent screen presented by Instagram's partnership consent flow. Includes: - Partnership branding (Amazon + Instagram logos or name) - Description of what will be shared/linked - **"Allow"** / **"Authorize"** primary button - **"Cancel"** or **"Not now"** secondary button - **Error / fallback state**: If the user is not logged in or the flow fails, the browser opens an external Amazon authorization URL instead. - **Success toast / confirmation**: After linking, a brief confirmation message appears: "Amazon account successfully linked." - **Cancel confirmation dialog**: If the user declines, a message reads: "We won't link your Amazon account. You can still make a purchase." with an **"OK"** button. ### Interactions - **Tapping "Allow" / "Authorize"**: Links the Amazon account, shows the success message, and returns the user to the surface that initiated the link (e.g., a shopping checkout flow). - **Tapping "Cancel" / "Not now"**: Displays the cancellation message ("We won't link your Amazon account.") and closes the screen. - **Unauthenticated fallback**: If no logged-in session is found, the app opens the Amazon authorization URL in the device browser and closes this screen. - **Back gesture**: Exits the flow and returns to the previous screen. ### Sample Data - Success message: "Amazon account successfully linked" - Decline message: "We won't link your Amazon account. You can still make a purchase." - Cancel dialog: "We won't link your Amazon account." --- ## WhatsApp Redirect Screen ### Overview A transitional screen that handles deep links or shared URLs pointing to WhatsApp, redirecting the user to join a WhatsApp group or open a WhatsApp conversation, optionally passing campaign/source context. ### UI Elements This screen has **no visible UI** — it is a transparent redirect/handler. The user briefly sees Instagram's loading state, then: - **WhatsApp opens** (if installed) with the appropriate group link or invite URL. - **If WhatsApp is not installed**: A system app chooser or browser opens, showing the WhatsApp web page for the group. - **If a QR code invite is detected**: Instagram opens WhatsApp directly to the invite via QR code scanning flow. If an error occurs (bad URL format, security exception), the screen simply closes silently. ### Interactions - **Arrival via deep link**: Instagram intercepts a WhatsApp link (e.g., `https://chat.whatsapp.com/...`), parses campaign parameters, and immediately launches WhatsApp with the correct URL. - **WhatsApp installed**: Opens WhatsApp directly to the group/conversation. - **WhatsApp not installed**: Opens the link in a browser or app chooser dialog. - **QR code invite link** (detected by `qr_code` query parameter and `mode=ig`): Navigates directly to WhatsApp's QR code invite flow. - **After redirect**: This screen closes; the user is now in WhatsApp or the browser. ### Sample Data - Example deep link handled: `https://chat.whatsapp.com/ABC123GroupCode` - Campaign parameter: `wa_invite_via_ig_test` - Source surface: `ig_stories` (passed as `source_surface` query param) --- ## Shop Pay Checkout Flow ### Overview A full-screen in-app checkout experience, powered by Meta Pay and optionally Shopify's Shop Pay, allowing users to complete a purchase without leaving Instagram. ### UI Elements - **Checkout header**: "Checkout provided by Meta." with a small info link icon. Tapping the link icon shows a sheet explaining how the checkout works and linking to Meta's privacy policy. - **Product list / order summary**: One or more rows, each showing: - Product image thumbnail - Product name (e.g., "Blue Linen Shirt – Size M") - Quantity and price (e.g., "×1 — $49.99") - **Payment method section**: - Saved card row: displays card brand + last 4 digits (e.g., "Visa ••• 4242"), expiration date (e.g., "Expires 12/26") - "Add new card" option if no card saved - **Billing address section** (optional): Shows saved address or "Add billing address" prompt - **CVV confirmation dialog** (when required): "Confirm the Security Code for Visa • 4242" with a CVV input field labeled "Security code", and an **"OK"** button - **"Place Order"** / **"Pay"** primary CTA button at the bottom - **"Cancel"** button or back navigation to dismiss ### Interactions - **Tapping "Pay" / "Place Order"**: Initiates payment processing. On success, triggers the payment success state (see below). - **Payment success**: - Confirmation animation or screen - Option button: **"Share Purchase to Story"** — opens Instagram Stories composer with the purchased product pre-populated as a sticker or share card - **Tapping "Share Purchase to Story"**: Navigates to Instagram Stories creation screen with the product card inserted - **Tapping "Add new card"**: Opens the card entry form (see Add Payment Card screen) - **Tapping the checkout info link**: Opens a sheet/modal: "Checkout provided by Meta." with links to Meta's payment Terms and Policies - **CVV prompt**: Appears as a dialog over the checkout; user enters 3- or 4-digit code and taps "OK" to continue - **Tapping "Cancel" / back**: Dismisses the checkout and returns to the originating feed/product page ### Sample Data - Product: "Floral Wrap Dress – Size S — $89.00" - Card: "Visa ••• 4242 — Expires 08/27" - CVV dialog: "Confirm the Security Code for Visa • 4242" - Share prompt: "Share this purchase to your Story?" --- ## Add Payment Card Screen ### Overview The user enters their credit or debit card details to save a new payment method for use in Instagram's in-app checkout. ### UI Elements - **Screen title**: "Add card" - **Card number field**: Labeled "Card Number", placeholder shows card icon; formats as user types (e.g., `4242 4242 4242 4242`) - **Expiration date field**: Labeled "MM/YY" - **Security code field**: Labeled "Security code" (CVV), with a helper hint showing card back icon - **Billing address toggle**: "Billing address same as shipping" — checkbox/toggle; if unchecked, expands address fields: - "Street address" - "Apt/ste (optional)" - "City" - "State" (dropdown with all 50 US states) - "Country" - **"Billing address (optional)"** section header - **Save CVV toggle**: "Save CVV for future use." checkbox - **Meta Pay disclaimer text**: "By tapping Save, this information, including your CVV, will be saved and synced with Meta Pay, where it can be managed. Meta's payment Terms and Policies apply." (with tappable links for Terms and Policies) - **Primary button**: "Save" or "Save and Autofill" - **Secondary button**: "Cancel" - **Card scan option** (if camera permission granted): Camera icon to scan card - **Inline validation errors**: - "Enter valid credit card number" - "Enter valid expiration" - "Enter valid CVV" ### Interactions - **Typing in Card Number**: Auto-formats with spaces; shows card brand logo (Visa, Mastercard, etc.) in the field - **Tapping "Save" / "Save and Autofill"**: Validates all fields; on success, saves the card to Meta Pay and returns to checkout with the new card selected - **Tapping "Cancel"**: Discards changes and returns to checkout - **Tapping Terms / Policies links**: Opens Meta's payment terms page in the in-app browser - **Tapping the camera icon**: Requests camera permission; if granted, opens card scanner to auto-fill card number, expiration, and name - **Camera permission prompt**: "Allow Instagram to access your camera" with "Allow" and "Don't allow camera access" options - **Validation error**: Inline error text appears below the relevant field on failed save attempt ### Sample Data - Card number: `4111 1111 1111 1111` - Expiration: `09/27` - CVV: `123` - Street address: `123 Main Street` - City: `Austin`, State: `Texas`, Country: `United States` --- ## Autofill Saved Info Prompt ### Overview A bottom sheet that appears when the user is filling out a form (e.g., checkout) and Instagram detects previously saved autofill information is available. ### UI Elements - **Sheet title**: "Autofill with saved info?" or "Save info for next time?" - **Body text** (varies by context): - First-time save: "Turn on autofill and save this info for future use." - Returning use: "Turn on autofill and use your saved info to complete this form." - **Autofill info disclaimer**: "Your autofill activity is used to improve ads and other parts of the Instagram experience. Your payment information will never be used for these purposes." with a "Learn more" link - **Primary button**: "Save and Autofill" or "Autofill" or "Turn on autofill" - **Secondary button**: "Not now" - **Manage info link**: "Manage your saved info" — links to Accounts Center ### Interactions - **Tapping "Save and Autofill" / "Autofill"**: Saves the detected form data to Meta Pay and auto-fills the current form fields; sheet dismisses - **Tapping "Not now"**: Dismisses the sheet; form is not auto-filled and info is not saved - **Tapping "Learn more"**: Opens Meta's autofill help page in the in-app browser - **Tapping "Manage your saved info"**: Opens Meta Pay / Accounts Center in the in-app browser - **Tapping "Browser settings" link** (shown in some variants): Opens in-app browser settings to manage autofill preferences ### Sample Data - Detected info: Name "Jordan Smith", Email "jordan@example.com", saved Visa ••• 4242 - Learn more URL: meta.com/help/meta-pay/… --- # Safety & Family Feature — UI Screen Specifications --- ## Family Center Dashboard ### Overview The main hub where a parent (supervisor) views and manages their supervised teen's account activity and restrictions on Instagram. ### UI Elements **Header/Toolbar:** - Title: "Family Center" (or "Supervision") - Back navigation arrow (top left) - Optional overflow menu (top right) with additional settings **Main Content Area:** - A card or section showing the supervised teen's profile — avatar, username, and account status (e.g., "Managed" indicator) - Section: **Account Supervision** — toggle or status showing supervision is active - Section: **Content Settings** — options to restrict what content the teen can see - Section: **Time Management** — daily time limit controls, usage summary - Section: **Interactions** — controls over who can message or interact with the teen - Section: **Activity Reports** — summary of time spent, content viewed - A "Share Supervision" button or link — sends a pairing invite to another guardian **Bottom Navigation:** - Standard Instagram bottom bar (Home, Search, Reels, Shop, Profile) remains accessible ### Interactions - Tapping the teen's profile card navigates to a detail view of their account - Tapping "Share Supervision" opens a share sheet or generates a supervision pairing link - Tapping any settings section (Content, Time, Interactions) navigates to that specific settings screen - Tapping Activity Reports opens a detailed usage breakdown screen - Back arrow returns to the main Instagram feed/home screen ### Sample Data - Teen's name: **@alex_teen22**, profile photo shown as a circular avatar - Supervision status: **Active** - Today's usage: **1h 42m** - Daily limit set: **2 hours** - Content filter: **Standard** --- ## Guardian Pairing / Supervision Setup ### Overview A flow where a parent scans or enters a code to link their Instagram account to their teen's account for supervision purposes. ### UI Elements **Header/Toolbar:** - Title: "Set Up Supervision" - Close (✕) button top right to dismiss **Step 1 — Eligibility Check:** - Explanatory text: e.g., "Supervision lets you manage [teen's username]'s Instagram experience" - Illustration or graphic representing parental oversight - "Continue" primary button - "Not now" secondary text link **Step 2 — Pairing Method:** - Option A: **QR Code / Link** — a generated code or link the teen must approve on their device - Option B: **Enter Code Manually** — text input field for a pairing code - Helper text explaining what the teen needs to do **Step 3 — Confirmation:** - Confirmation message: e.g., "Your account has been successfully linked." - Button: "Go to Family Center" **Error States:** - If pairing fails: inline error message below the code field - If supervision is not enabled on the teen's account: informational dialog explaining the requirement ### Interactions - Tapping "Continue" advances to the next step - Tapping "Not now" or the close button dismisses the flow and returns the user to wherever they launched from - Successfully entering a valid pairing code triggers a loading state, then shows the success confirmation - Tapping "Go to Family Center" navigates to the Family Center Dashboard ### Sample Data - Pairing code displayed: **IG-48291-XZ** - Teen account: **@alex_teen22** - Success message: "Your account has been successfully linked." --- ## Parental Access Education ### Overview An educational interstitial screen that explains to a parent or teen what the Parental Supervision / Family Center feature does and how their data is used. ### UI Elements **Header:** - Back arrow (top left) or close (✕) button - No title text (full-screen illustrative layout) **Content:** - Illustration or icon representing family/safety - Headline text: e.g., "Understand how supervision works" - Body paragraphs explaining: - What information parents can see (time spent, content categories, account settings) - What teens can see parents are doing - Privacy implications and data handling - Expandable sections or bullet points for each topic - Link: "Learn more" — opens a help article in the in-app browser **Footer:** - Primary button: "Got it" or "Continue" - Secondary text link: "Not now" ### Interactions - Tapping "Learn more" opens Instagram's help center article in the embedded browser - Tapping "Got it" / "Continue" dismisses the screen and proceeds to the next step in the supervision flow (e.g., pairing or dashboard) - Tapping "Not now" or Back dismisses without taking further action - Back navigation returns to the previous screen ### Sample Data - Headline: "Here's what supervision means for your account" - Bullet: "Parents can see how much time you spend on Instagram" - Bullet: "Parents can set daily time limits" - Bullet: "Your messages remain private" --- ## Parent Approval Interstitial ### Overview A screen prompting a parent to approve or review a specific action or content interaction initiated by their supervised teen (e.g., a teen's first post, a like, or a follow request). ### UI Elements **Header:** - Close (✕) button top right **Content:** - Icon or avatar of the teen's account - Headline: e.g., "Review [teen's username]'s request" - Description text explaining what the teen wants to do (e.g., make their first post, follow a new account) - Preview of the content or action if applicable (thumbnail for a post, profile card for a follow) **Action Buttons:** - Primary button: "Approve" - Secondary button (outlined or text): "Decline" - Tertiary text link: "Learn more about this setting" **Bottom disclaimer:** - Small text: e.g., "You can change approval settings anytime in Family Center" ### Interactions - Tapping "Approve" confirms the teen's action, shows a brief success toast or confirmation, then dismisses the screen - Tapping "Decline" cancels the teen's pending action, shows a brief confirmation, then dismisses - Tapping "Learn more" opens the relevant help center page in the in-app browser - Close (✕) dismisses without taking action (treated as "decide later") ### Sample Data - Teen: **@alex_teen22** - Action: "wants to publish their first post" - Post preview: thumbnail of a photo with caption "First post! 🎉" - Approval text: "Once approved, this post will be visible to their followers." --- ## Limited Interactions Reminder ### Overview A reminder screen informing a teen (or surfaced to their parent) that privacy/interaction limits are currently active on the teen's account, explaining what is restricted. ### UI Elements **Header:** - Back arrow (top left) - No toolbar title (full-screen modal style) **Content:** - Icon: shield or lock graphic - Headline: e.g., "Your interactions are limited" - Body text listing what is currently restricted, for example: - "People you don't follow can't send you message requests" - "Comments on your posts are limited to people you follow" - "You won't appear in suggested accounts for people you don't know" - Entry point label visible (e.g., "Privacy Limits" badge) **Footer:** - Primary button: "Got it" - Secondary text link: "Manage settings" — navigates to privacy/interaction settings - Step indicator if part of a multi-step onboarding (e.g., "Step 3 of 3") ### Interactions - Tapping "Got it" dismisses the screen; the app returns to the previous screen with a slide-out animation - Tapping "Manage settings" navigates to the Privacy & Interaction settings section - Back button dismisses the screen (same behavior as "Got it") - Screen enters from the right with a slide-in animation; exits with a slide-out animation ### Sample Data - Headline: "Your interactions are limited" - Restriction 1: "Only your followers can comment on your posts" - Restriction 2: "Message requests from strangers are turned off" - Button label: "Got it" --- ## Safety Check (Evergreen Safety Check) ### Overview A periodic safety check-in screen presented to the user to review and confirm their current account safety and security settings. ### UI Elements **Header:** - Title: "Security Checkup" or "Safety Check" - Close (✕) button top right **Content:** - Illustration or safety-themed graphic - Headline: e.g., "Let's make sure your account is secure" - A checklist of safety items, each shown as a row with: - Icon (checkmark ✓ = done, warning ⚠ = needs attention) - Title: e.g., "Two-factor authentication", "Saved login info", "Connected apps" - Status label: "On" / "Off" / "Review" - Chevron (›) if tappable to go deeper **Trigger Parameter:** - The screen receives a `trigger` parameter (e.g., `"periodic"`, `"login"`, `"post_recovery"`) which may affect the headline or specific items shown **Footer:** - Primary button: "Done" (when all items are reviewed) or "Continue" (to step through items) - Secondary text: "Remind me later" ### Interactions - Tapping any checklist row with a chevron navigates to the relevant settings page (e.g., two-factor authentication settings) - Tapping "Done" dismisses the safety check screen - Tapping "Remind me later" snoozes the check and dismisses - Close (✕) dismisses without completing the check ### Sample Data - Item 1: ✓ "Two-factor authentication" — **On** - Item 2: ⚠ "Saved passwords" — **Review** (tap to manage) - Item 3: ✓ "Recent login activity" — **No unusual activity** - Item 4: ⚠ "Connected apps" — **3 apps connected** (tap to review) --- # Sharing & Utilities: Screen Specifications --- ## Share Sheet (Direct Share) ### Overview The user sees a bottom sheet for sharing a post, Reel, or story directly to one or more Instagram Direct conversations, with a search bar to find recipients. ### UI Elements **Bottom Sheet Container** - Slides up from the bottom of the screen, covering approximately 75% of the screen height - Semi-transparent scrim behind it dims the rest of the app **Header** - Title: "Messages" (from strings.xml) - No explicit close button; tapping outside or swiping down dismisses the sheet **Search Bar** - Text input field at the top of the sheet - Placeholder hint text: e.g., "Search" (for finding specific people or groups to send to) - Live-filters the recipient list as the user types **Recipient List** - Scrollable vertical list of suggested contacts and recent conversations - Each row shows: - Circular profile photo (avatar) - Username or full name (e.g., "sarah.jones", "Alex Chen") - Subtitle: relationship indicator or group name (e.g., "Follows you", "Group chat") - A circular selection indicator on the right (unchecked by default, checkmark fills when selected) **Selected Recipient Chips (optional, appears after selection)** - Horizontal row of circular avatars near the top of the recipient list, representing currently selected recipients - Each chip is removable by tapping the "×" on it **Send / Reply Button** - Primary action button: "Reply" (from strings.xml) when one recipient is selected, or a labeled send button when multiple are selected - Disabled until at least one recipient is selected - Full-width at the bottom of the sheet **Message Preview (optional)** - Small thumbnail or link card of the content being shared is shown above the recipient list (e.g., a small post thumbnail or Reel frame) ### Interactions - **Tapping a recipient row**: Selects that contact, adds a checkmark and adds an avatar chip to the selection row; tapping again deselects - **Typing in search bar**: Filters the recipient list in real time; clears the filter when the search bar is emptied - **Tapping "Reply" / send button**: Sends the shared content to all selected recipients and dismisses the sheet; navigates to the relevant Direct thread if only one recipient was chosen - **Swiping down or tapping the scrim**: Dismisses the sheet without sending ### Sample Data - Recipient list: - "maya_travels" — Follows you - "Jordan K." — Group chat · 4 members - "Carlos & Maria" — Group chat · 2 members - "priya.designs" — Follows you - "liam_codes" — Your follower --- ## External Link Handler (In-App Browser Redirect) ### Overview When the user taps a link inside Instagram that leads to an external website, they briefly see a transition or confirmation screen before being redirected either within the in-app browser or to an external app. ### UI Elements **Alert / Confirmation Dialog** (shown when an external app would be opened) - Title: "You're leaving our app" (from strings.xml) - Body: "The website you're viewing is attempting to open an external app. Would you like to continue?" (from strings.xml) - Two buttons: - **"Continue"** — confirms leaving - **"Cancel"** — stays in Instagram **Security Error Screen** (shown if the destination site has a certificate problem) - Title: "Security error" (from strings.xml) - Body message: "There are problems with the security certificate for this site" (from strings.xml) - Two buttons: - **"Go back"** — returns the user to where they came from - An option to proceed anyway (implied by the back navigation) **Loading / Transition State** - A brief full-screen loading indicator labeled "Loading…" (from strings.xml) while the destination resolves **"No Network" Error State** - Title: "No network connection" (from strings.xml) - Body: "Check your device's network connection and try again." (from strings.xml) - Button: "Try again" (from strings.xml) **"Page Unavailable" Error State** - Title: "Page isn't available right now" (from strings.xml) or "Page can't be loaded" (from strings.xml) - Body: "This may be because of a technical error that we're working to get fixed. Try reloading this page." (from strings.xml) - Button: "Refresh" (from strings.xml) ### Interactions - **"Continue"**: Proceeds with opening the external app or URL; app exits the Instagram context for that link - **"Cancel"**: Dismisses the dialog; user stays on their current Instagram screen - **"Go back"**: Returns to the previous screen - **"Try again" / "Refresh"**: Retries loading the URL - **Back gesture**: Returns to the previous screen in all error states ### Sample Data - External app scenario: A shoppable post link tries to open the Amazon app - Security error scenario: A seller's website with an expired SSL certificate - Unavailable page: A promotional link to a brand's temporary landing page that has since gone down --- ## Media Post Viewer (External Deep Link) ### Overview When the user opens Instagram from an external link pointing to a specific post or Reel, this screen loads and displays that media with its full details and interaction controls. ### UI Elements **Top Bar** - Back / close button (arrow or "×") on the left — labeled "Navigate back" (from strings.xml) - Post author's username (e.g., "natgeo") as the title - Overflow menu button ("⋯") on the right for more options **Media Area (center, full-width)** - Photo: full-width image filling the card - Video / Reel: inline video player with playback controls - Carousel: swipeable images with dot indicators **Action Bar (below media)** - Heart icon — "Like" (from strings.xml); tapping toggles the like, double-tapping the image also likes - Comment bubble icon — "Reply" (from strings.xml) or comment; opens the comment input - Paper-plane icon — Share / send - Bookmark icon — Save to collection - Like count (e.g., "4,821 likes") **Caption Area** - Author username in bold followed by the caption text - Hashtags and @mentions rendered as tappable links - Truncated after a few lines with a "more" expansion link **Comments Section** - Top-level comment count link (e.g., "View all 312 comments") - Sorting options available: "Top comments" / "Newest first" (from arrays.xml) - Comment input bar at the bottom with placeholder: "Add a comment for @natgeo" (from arrays.xml) **"Remind Me" Option** (for scheduled Live or event posts) - "Remind me" button (from strings.xml) ### Interactions - **Tapping the like button**: Toggles between liked (filled red heart) and unliked; counter updates immediately - **Double-tapping the media**: Triggers a like with a heart animation - **Tapping the comment icon**: Focuses the comment input bar at the bottom; keyboard slides up - **Tapping "View all comments"**: Expands the full comment thread - **Tapping the share (paper-plane) icon**: Opens the Direct Share Sheet - **Tapping the bookmark icon**: Saves the post; icon fills to indicate saved state - **Tapping the author's username**: Navigates to the author's profile - **Tapping a hashtag**: Navigates to the hashtag's explore page - **Tapping back**: Returns the user to their previous screen (feed, search results, etc.) or exits the app if launched from outside ### Sample Data - Author: "natgeo" - Caption: "The Amazon river at dawn, captured by @bertiegregoryphoto. 🌿 #Nature #Wildlife #Amazon" - Likes: "12,048 likes" - Comment prompt: "Add a comment for natgeo" - Top comment: "Absolutely stunning 😍" — by user "adventurejunkie22" · 2h ago --- ## In-App Browser ### Overview Instagram's built-in browser opens when the user taps an external link within the app (e.g., a link in a bio, story, or ad), keeping them inside Instagram rather than switching to their phone's browser. ### UI Elements **Top Bar (Header)** - Back arrow ("Navigate back" — from strings.xml) on the left - Current page URL or domain name displayed as a truncated title in the center (e.g., "nytimes.com") - "More options" overflow button (⋯) on the right — labeled "More options" (from strings.xml) **Overflow Menu Options** (accessed via "More options") - "Share" — shares the current URL (from strings.xml) - "Open in [Chrome / default browser]" — e.g., "Open in Chrome" (from strings.xml: "Open in %1$s") - "Copy link" — copies URL to clipboard; toast confirms "Link copied" (from strings.xml) - "Translate to [language]" — e.g., "Translate to English" (from strings.xml: "Translate to %1$s") - "Show original language" — reverts translated page (from strings.xml) - "View in reader mode" — simplified reading layout (from strings.xml) - "Report website" (from strings.xml) - "Minimize browser" (from strings.xml) - "Close browser" (from strings.xml) **Web Content Area** - Full-width, full-height WebView rendering the destination web page - Pull-to-refresh gesture supported - Scroll indicators on top and bottom edges when content is scrollable **Reader Mode Banner** (when active) - Banner or indicator: "Viewing in reader mode" (from strings.xml) - Option to "Exit reader mode" (from strings.xml) **Translation Banner** (when translation is active) - Banner: "Web page translated" with "%1$s to %2$s" format (from strings.xml, e.g., "Spanish to English") - Option to "Show original language" (from strings.xml) **Loading Bar** - Thin horizontal progress bar beneath the top bar, visible while the page is loading; disappears when fully loaded - If loading fails: "Loading…" spinner (from strings.xml) **Security Error Overlay** (if the page has SSL issues) - Title: "Security error" (from strings.xml) - Message: "There are problems with the security certificate for this site" (from strings.xml) - Buttons: "Go back" and option to continue anyway **Permission Request Dialogs** (if a site requests device access) - Camera + microphone: "'[site] wants to use your device's camera and microphone.'" (from strings.xml) - Location: "'[site] wants to use your device's location.'" (from strings.xml) - Microphone only: "'[site] wants to use your device's microphone.'" (from strings.xml) - Buttons: "Allow" / "Block" (from strings.xml) **External App Launch Dialog** (if a site tries to open another app) - Title: "You're leaving our app" (from strings.xml) - Message: "The website you're viewing is attempting to open an external app. Would you like to continue?" (from strings.xml) - Buttons: "Continue" / "Cancel" (from strings.xml) **Link History Button** - An icon or control at the bottom or in the toolbar: "Link history. Double tap for a list of links to websites you previously visited." (accessibility label, from strings.xml) ### Interactions - **Tapping back arrow**: Navigates back in browser history; if no history, closes the in-app browser and returns to Instagram - **Tapping "Share"**: Opens the native system share sheet with the current URL - **Tapping "Open in [browser name]"**: Opens the URL in the device's default external browser and closes the in-app browser - **Tapping "Copy link"**: Copies the URL to clipboard; brief toast "Link copied" appears - **Tapping "View in reader mode"**: Reformats the page with cleaned-up text, hiding ads and clutter - **Tapping "Minimize browser"**: Collapses the browser to a small floating element or returns to the Instagram feed while keeping the page in background - **Tapping "Close browser"**: Fully dismisses the browser and returns to Instagram - **Tapping "Translate to [language]"**: Translates the page in-place; translation banner appears at the top - **Allowing / blocking permissions**: Grants or denies the website access to the requested device feature - **Tapping "Continue" in external app dialog**: Opens the external app - **Full-screen gesture**: Swiping left or tapping back exits full screen; toast shown: "You're now viewing full screen. Swipe left or tap back button to exit." (from strings.xml) ### Sample Data - Page being browsed: "vogue.com/article/summer-fashion-trends" - Translation scenario: Page originally in French, translated to English - Permission scenario: A video call web app on "meet.jit.si" requests camera and microphone access - Reader mode on: A long-form article from "theatlantic.com" --- ## Meta Pay / Checkout (Payment Methods) ### Overview The user sees a payment methods management screen when checking out through Instagram Shopping, where they can view saved cards, add new ones, and configure billing details — all powered by Meta Pay. ### UI Elements **Top Bar** - Back arrow on the left - Title: implied to be payment/checkout related (checkout context) - Footer attribution: "Checkout provided by Meta." (from strings.xml) with a small link icon linking to Meta Pay's privacy info **Saved Payment Methods List** - Each card row shows: - Card network logo (Visa, Mastercard, etc.) - Masked card number: e.g., "Visa ••• 4242" (from strings.xml format: "%1$s ••• %2$s") - Expiry status: - Active: "Expires 08/27" (from strings.xml: "Expires %1$s/%2$s") - Expired: "Expired 03/24" (from strings.xml: "Expired %1$s/%2$s") or "Expired 03/24 CVV •••" (from strings.xml) - Radio button or selection indicator on the right **"Add New" / "Add Card" Button** - Labeled "Add New" (from strings.xml) or "Add card" (from strings.xml) - Tapping opens the Add Card form **Add Card Form** (inline or as a separate sheet) - Field: "Card Number" (from strings.xml) — numeric input, 16-digit formatted - Field: "MM/YY" (from strings.xml) — expiry date - Field: "Security code" / "CVV" (from strings.xml) — 3- or 4-digit code - Checkbox: "Billing address same as shipping" (from strings.xml) - Optional section: "Billing address (optional)" (from strings.xml) — expands to show: - "First name" (from strings.xml) - "Last name" (from strings.xml) - "Address" / "Street address" (from strings.xml) - "Apt/ste (optional)" (from strings.xml) - "City" (from strings.xml) - "State" (from strings.xml) — dropdown with all 50 US states (from arrays.xml) - "Country" (from strings.xml) - Camera scan shortcut: "Take a photo" to scan card with camera (from strings.xml) - Button: "Add billing address" (from strings.xml) **Autofill Prompt** (shown when saved card info is detected) - Title: "Save info for next time?" (from strings.xml) or "Autofill with saved info?" (from strings.xml) - Body: "Turn on autofill and save this info for future use." (from strings.xml) or "Turn on autofill and use your saved info to complete this form." (from strings.xml) - Buttons: - "Save and Autofill" (from strings.xml) - "Not now" (from strings.xml) **"Autofill with card from your ad account?" Banner** - Prompt: "Autofill with card from your ad account?" (from strings.xml) - Buttons: "Autofill" / "Not now" **CVV Confirmation Dialog** (extra security check when using a saved card) - Title: "Confirm the Security Code for [CardType] • [LastFour]" (from strings.xml: "Confirm the Security Code for %1$s • %2$s") - Body: "Enter the 3- or 4-digit security code on your [CardType] • [LastFour] to autofill this form." (from strings.xml) - Input: CVV field - Error states: - "Incorrect CVV" (from strings.xml) - "Enter valid CVV" (from strings.xml) **Full Card Number Confirmation** (when full card number is needed) - Title: "Confirm Card Details" (from strings.xml) - Body: "Add the Full Card Number for [CardType] • [LastFour]." (from strings.xml) **Privacy / Terms Info Section** - Link text: "How your info is used and managed" (from strings.xml) - Disclosure: "By tapping Save, you agree to Meta's payment Terms and Policies." (from strings.xml, rendered with tappable links) - Manage info link: "Manage your saved info" (from strings.xml) — links to Accounts Center **Action Buttons** - Primary: "Save" (from strings.xml), "Save securely" (from strings.xml), or "Update and Autofill" (from strings.xml) - Secondary: "Not now" (from strings.xml) or "Cancel" (from strings.xml) ### Interactions - **Tapping a saved card**: Selects it as the payment method for the current checkout - **Tapping "Add New" / "Add card"**: Expands or navigates to the card entry form - **Tapping "Take a photo"**: Opens the device camera with a card scanning overlay to auto-fill card fields - **Entering card details**: Real-time validation; error messages shown inline: - "Enter valid credit card number" (from strings.xml) - "Enter valid expiration" (from strings.xml) - "Enter valid CVV" (from strings.xml) - "Please enter a valid email" (from strings.xml) - **Tapping "Save" / "Save and Autofill"**: Saves the card to Meta Pay; confirmation snackbar or screen update - **Tapping "Not now"**: Dismisses the autofill prompt without saving - **Tapping "Terms" or "Policies" links**: Opens those pages in the in-app browser - **Tapping "Manage your saved info"**: Opens the Accounts Center payment management page in the in-app browser ### Sample Data - Saved card 1: "Visa ••• 4242" — Expires 11/26 - Saved card 2: "Mastercard ••• 8891" — Expired 02/24 - New card entry: Card Number: "4111 1111 1111 1111", Expiry: "09/27", CVV: "123" - Billing address: "Jane Smith, 350 Fifth Avenue, New York, NY 10118" --- # Meta Devices & VR — Screen Specifications --- ## Horizon Worlds Launcher (Loading Transition) ### Overview A transparent, transient pass-through screen the user sees briefly while Instagram resolves a Horizon Worlds deep link and launches the Meta VR experience. ### UI Elements - **Background:** Fully transparent (no visible chrome, no toolbar, no navigation bar styling — the screen is visually invisible to the user while routing occurs) - **No interactive controls:** The screen performs its work silently and immediately closes itself - **Error state (implicit):** If the URL is malformed or missing, the screen closes without showing any UI; no error message is displayed to the user ### Interactions - **Triggered by:** Tapping a Horizon Worlds link inside Instagram (e.g., from a post, ad, or story linking to a Horizon World) - **Automatic routing:** - Extracts the world ID, referral source, session linking ID, and target destination from the link - Passes all parameters to the Horizon Worlds launcher controller - Immediately closes itself after routing is complete - **No user action required:** The screen never waits for user input; it either navigates forward or closes ### Sample Data - Link tapped: `https://www.meta.com/play/worlds/6031501710219577/?referral_source=instagram_post&world_id=6031501710219577` - World ID extracted: `6031501710219577` - Referral source: `instagram_post` --- ## Horizon App Launcher (Loading Transition) ### Overview A brief, transparent pass-through screen shown while Instagram resolves a Horizon (Meta Quest/VR platform) deep link and hands off control to the Horizon app or the Twilight/QuickSilver VR client. ### UI Elements - **Background:** Fully transparent window; no visible UI content - **No user-facing controls:** The screen performs silent routing - **Error logging only:** Errors are logged internally; the user sees nothing — the screen simply closes ### Interactions - **Triggered by:** Tapping a Horizon-branded link inside Instagram (e.g., links from VR-related content or notifications) - **Automatic routing:** - If the URL contains a `payload` parameter: validates the user session and launches the Horizon app with the payload - If the URL contains a `tw_deeplink_url` parameter and the target is "eclipse": launches the Twilight VR client with the resolved URL - Otherwise: logs an error ("Invalid payload. Neither twilight nor QS is launched.") and closes - **Navigation:** After routing, the screen always closes itself (calls `finish()`) ### Sample Data - Incoming URL: `instagram://horizon?payload=eyJ3b3JsZF9pZCI6IjEyMzQ1In0=` - Routing result: Horizon app opens with encoded payload --- ## Horizon Loading Screen ### Overview A full-screen loading indicator shown to the user while a Horizon or VR experience is initializing in the background. ### UI Elements - **Background:** Solid color fill (dark/branded color — the app sets a specific background color that matches the Horizon brand palette) - **Spinner icon (center of screen):** - A continuously rotating circular loading icon - Rotates 360° on a repeating linear animation at approximately 850ms per rotation - Centered both horizontally and vertically - Padded evenly on all sides - **Loading label text (below spinner):** - A text label displayed below the spinner - Font size: 18sp - Centered horizontally - Content is dynamic (set at runtime; may show a loading phrase or status) - **Bottom bar (optional/conditional):** - A stub area anchored to the bottom of the screen - May display additional contextual UI (e.g., a progress bar or status strip) — rendered only if content is injected ### Interactions - **Automatic dismissal:** The screen calls `finish()` on pause — meaning as soon as the VR experience becomes active and this screen is backgrounded, it dismisses itself automatically - **No user controls:** There are no buttons, back navigation, or tappable elements - **Session awareness:** If the user's session ends while this screen is showing, the screen handles cleanup gracefully and closes ### State Changes - Spinner begins animating immediately on screen display - Spinner stops animating when the screen is detached from the window (VR experience has launched) - If the screen is paused (e.g., Horizon app opens on top), it self-destructs immediately ### Sample Data - Loading label: "Just a moment while we set up Horizon Worlds…" *(dynamically set at runtime)* - Spinner: Instagram/Meta branded circular loading indicator (white or light-colored ring on dark background) --- ## Horizon Web Link Handler (In-App VR Ad / Web Redirect) ### Overview An invisible routing screen that intercepts web links pointing to Horizon Worlds content — particularly from paid Instagram ads — and redirects the user into the appropriate VR experience or web destination. ### UI Elements - **No visible UI:** This screen is entirely transparent and non-interactive - The user never sees any interface element; they only see the destination they are launched into ### Interactions - **Triggered by:** Tapping a link in an Instagram ad or post that points to a Horizon Worlds URL (e.g., `https://www.meta.com/play/worlds/...`) - **Routing logic:** - If the link is a paid Meta ad (`utm_medium=paid`, `utm_source=ig`) pointing to a Horizon World: - Extracts the World ID from the URL path - Builds a special `instagram://hzw_launcher` deep link containing the world ID, ad session info, and platform type (Twilight or QuickSilver) - Logs an analytics event for the VR ad entrypoint click - Launches the Horizon Worlds launcher with this enriched link - If the link is a short URL (e.g., `bit.ly`, `ihr.fm`, `meta.me`): - Follows the redirect to resolve the final destination URL before launching - Checks if the resolved URL is a valid Horizon redirect before proceeding - For all other links: passes the URL directly to the standard Horizon web handler - **After routing:** The screen always closes itself immediately ### Sample Data - Ad link tapped: `https://www.meta.com/play/worlds/4567890123/?utm_medium=paid&utm_source=ig` - World ID resolved: `4567890123` - Platform: `TWILIGHT` (Meta Quest headset client) - Analytics event: VR ad entrypoint click logged with world ID, session hash, and player type --- # Calling & RTC Screen Specifications ## Incoming Call Screen ### Overview The user sees a full-screen notification/activity presenting an incoming video or voice call from another Instagram user, with options to accept or decline. ### UI Elements **Header / Caller Info Area** - Caller's profile photo — large circular avatar, centered in the upper portion of the screen - Caller's display name — prominent text below the avatar (e.g., "Jamie Rivera") - Call type label — secondary text indicating the call type (e.g., "Instagram Video Call" or "Instagram Voice Call") - Animated pulsing ring around the avatar to signal incoming call **Action Buttons** - **Decline** button — circular red button with a phone-down icon, labeled or iconographic; tapping ends the call before answering - **Accept** button — circular green button with a phone/video icon; tapping connects the call and opens the Active Call screen **Status Text** - "Incoming call…" or similar text beneath the caller name while the call is ringing **Notification-style Controls** (when displayed over lock screen) - The screen may appear over a locked device; user may need to swipe or unlock to interact ### Interactions - Tapping **Accept** → transitions to the Active Call screen, camera/mic become active - Tapping **Decline** → dismisses the screen, call is rejected, caller hears busy signal - Pressing the back button → triggers the same behavior as Decline (call is rejected) - If the user leaves the app (home button) → call moves to Picture-in-Picture or remains in notification tray ### Sample Data - Caller: **Priya Mehta** — profile photo shown - Subtitle: "Instagram Video Call" - Ringing animation active --- ## Active Call Screen ### Overview The user is in a live video or audio call with one or more other Instagram users, seeing video feeds and call control buttons. ### UI Elements **Video Feeds** - **Remote video** (other participant) — fills the majority of the screen; shows the other person's live camera feed, or a placeholder avatar if their camera is off - **Local self-view** — small picture-in-picture thumbnail in one corner (e.g., bottom-right), showing the user's own camera feed; draggable to different corners - If the other participant's camera is off: their profile photo and username are displayed over a dark background **Top Bar** - Call duration timer — displays elapsed time, e.g., "02:34" - Participant name or username — e.g., "Jamie Rivera" - Optional: connection quality indicator (signal bars icon) **Bottom Control Bar** — row of circular icon buttons: - **Mute / Unmute** — microphone icon; toggling mutes/unmutes the local microphone; icon changes to a crossed-out mic when muted - **Camera On/Off** — camera icon; toggles the local camera on or off; icon changes to a crossed-out camera when off - **Flip Camera** — rotate/flip icon; switches between front-facing and rear-facing camera - **Speaker / Audio Output** — speaker icon; toggles between earpiece and speakerphone (or headphones if connected) - **End Call** — red circular button with a phone-down icon; ends the call for the local user **Picture-in-Picture (PiP) Mode** - When the user presses the home button or leaves the app, the call collapses into a small floating PiP window showing the remote video feed - PiP window is dismissible or tappable to return to the full call screen **Overlays / Toasts** - "Sharing Live Location" banner — appears if location sharing is active during the call - Network issue banner: "No network connection — Check your device's network connection and try again." with a **Try again** button - "Unable to start camera. Please try again." — toast shown if camera fails to initialize ### Interactions - Tapping **Mute** → microphone icon updates to crossed-out; other participants can no longer hear the user - Tapping **Camera Off** → local self-view goes dark or shows avatar; remote participant sees a placeholder - Tapping **Flip Camera** → switches between front and rear camera seamlessly - Tapping **Speaker** → audio routes to speakerphone; icon updates - Tapping **End Call** → call terminates, screen dismisses; user is returned to the previous screen (e.g., Direct inbox or home feed) - Tapping the remote video area (full screen) → toggles visibility of the control bar (auto-hide after a few seconds of inactivity) - Tapping the self-view thumbnail → no action by default, but may be draggable - Pressing the back button → triggers PiP mode (call continues in floating window) rather than ending the call - Pressing the home button → triggers PiP mode - Tapping the PiP window → expands back to full-screen call - Rotating the device → layout adapts; video feeds reflow for landscape/portrait orientation ### Sample Data - Remote participant: **Jamie Rivera** — live video feed showing their face - Local user: self-view in bottom-right corner - Timer: "04:17" - Microphone: active (not muted) - Camera: on - Audio: speakerphone --- ## Call Ended / Post-Call Screen ### Overview A brief transitional screen shown after a call ends, confirming the call has concluded and offering a path back to messaging. ### UI Elements - **Call ended message** — e.g., "Call ended" displayed in the center of the screen - **Call duration summary** — e.g., "04:17" shown beneath the message - **Caller/participant info** — profile photo and username of the person the call was with - **Message button** — a button or tap target labeled "Message" to open a Direct conversation with that participant - The screen auto-dismisses after a few seconds, returning the user to where they were before the call ### Interactions - Tapping **Message** → opens the Direct thread with that participant - Tapping the back button or waiting → dismisses this screen, returning to the prior context (e.g., Direct inbox, home feed) ### Sample Data - Participant: **Priya Mehta** - Duration: "04:17" - Auto-dismiss after ~3 seconds --- ## Camera Permission Request Screen (Call Context) ### Overview If the user has not granted camera and microphone access, this screen appears before a call can connect, prompting the user to enable these permissions. ### UI Elements - **Illustration or icon** — image representing the camera/microphone permission (described in strings as "Image of the permission screen") - **Title** — "Allow Instagram to access your camera and microphone" - **Body text** — "This lets you share photos, record videos and preview effects. You can change this anytime in your device settings." - **Primary button** — "Allow Permissions" — opens the system permission dialog - **Secondary button / link** — "Open Settings" — deep-links to the device's app settings if permission was previously denied - **Dismiss option** — "Not now" or back navigation ### Interactions - Tapping **Allow Permissions** → system OS permission dialog appears; if granted, the call proceeds; if denied, user stays on this screen or sees an error - Tapping **Open Settings** → navigates to the device's application settings page for Instagram - Tapping **Not now** / back → call is declined/cancelled, user returns to prior screen - If only camera (no mic) was blocked: title reads "Allow Instagram to access your camera" with adjusted body text ### Sample Data - Title: "Allow Instagram to access your camera and microphone" - Body: "This lets you share photos, record videos and preview effects. You can change this anytime in your device settings." - Buttons: "Allow Permissions" (primary), "Open Settings" (secondary) --- # Instagram "Other" Screens — UI Specification --- ## Bottom Sheet ### Overview A modal panel that slides up from the bottom of the screen, used throughout the app to present contextual actions, settings forms, and multi-step flows without leaving the current context. ### UI Elements **Header / Navigation Bar** - **Drag handle** — a small horizontal pill/indicator at the very top center of the sheet; tappable to dismiss the sheet (accessibility: acts as a close button) - **Title text** — centered heading text; single line, centered horizontally - **Subtitle text** — optional secondary line below the title; hidden when no subtitle is provided - **Element above title** — optional custom view slot that appears above the title (e.g., an icon or avatar) - **Left navigation button** — appears as either an icon or a text label (e.g., "Cancel", "Back", "Close"); positioned at the leading edge of the nav bar - **Right navigation button** — appears as either an icon or a text label (e.g., "Done", "Save", "Next"); positioned at the trailing edge of the nav bar - **Secondary right navigation button** — an optional additional icon button to the left of the right nav button - **Right loading spinner** — replaces the right nav button while an async action is in progress - **Nav bar divider** — a thin horizontal rule between the nav bar and content area; shown only when the nav bar has visible elements and a title is present **Content Area** - Scrollable region below the nav bar that hosts the embedded screen/fragment - Adapts its height dynamically; can be draggable to expand or collapse **Bottom Button Bar** (optional) - **Primary action button** — full-width button with a text label (e.g., "Continue", "Confirm", "Save") - **Secondary action button** — optional second button below or alongside the primary (e.g., "Not now", "Cancel") - **Footer text** — small caption text below the buttons (e.g., legal disclaimers, helper copy) - **Divider** above the button bar, configurable **Background / Container** - Rounded top corners on the sheet container - Scrim/dim overlay behind the sheet (tapping it may dismiss the sheet depending on configuration) ### Interactions - **Drag handle tap or swipe down** — dismisses the bottom sheet; returns to the underlying screen - **Left nav button tap** — context-dependent: typically "go back" to the previous step within the sheet (if in a multi-step flow) or dismiss the sheet entirely - **Back gesture / hardware back** — navigates back one step in the sheet's internal back stack; if at the root step, dismisses the sheet - **Right nav button tap** — context-dependent: typically confirms or advances to the next step (e.g., "Next", "Done") - **Right loading spinner** — non-interactive; shown while a network or async operation is running; replaces the right nav button - **Primary action button tap** — triggers the main action for the current step (e.g., submits a form, confirms a selection) - **Secondary action button tap** — triggers a secondary action (e.g., dismiss, skip, cancel) - **Scrim tap** — may dismiss the sheet (configurable per use case) - **Multi-step navigation** — the content area can host a stack of sub-screens; each push adds a new screen; "back" pops to the previous one; the nav bar title and buttons update to reflect the current step ### State Changes - When a step is pushed onto the back stack, the title, subtitle, and nav buttons animate to reflect the new step - When an async action is triggered via the right nav button, the button is replaced by the loading spinner until the operation completes - When the keyboard is shown (e.g., user taps an input inside the sheet), the sheet adjusts its height upward so that the focused field remains visible above the keyboard - The sheet background color, corner radius, and drag behavior can vary by context ### Sample Data **Example 1 — Comment Sorting** - Title: "Sort comments" - Left nav: "Cancel" - List items: "Top comments", "Newest first" - No bottom button **Example 2 — Save Post Confirmation** - Title: "Save to collection" - Subtitle: "Choose a collection or create a new one" - Right nav: "Done" - Primary button: "Create new collection" **Example 3 — Payment / Billing Address** - Title: "Add billing address" - Left nav button: "Cancel" - Right nav button: "Save" - Content: form fields for Street address, Apt/ste (optional), City, State, Country - Primary button: "Save" - Footer text: "This information will be saved with Meta Pay and synced in Accounts Center, where it can be managed." --- ## Deep Link Handler (Transparent Routing Screen) ### Overview An invisible, zero-UI transition screen that intercepts incoming deep links (URLs and app links) from outside the app or from other apps and routes the user to the correct destination screen inside Instagram without displaying any visible interface of its own. ### UI Elements - **No visible UI** — this screen renders nothing to the user - No toolbar, no content, no buttons - The screen appears as a brief blank moment (typically less than one frame) before the destination screen loads ### Interactions - **Incoming deep link** (e.g., `https://www.instagram.com/username/`, a post URL, a story URL, or an in-app navigation route) — the handler inspects the URL, resolves it to an in-app destination, and immediately opens that destination screen - If the link requires a specific result to be returned to the calling app (e.g., OAuth flow), the handler forwards the result back before closing - If the link cannot be resolved, the handler closes immediately with no visible error (the user sees nothing) - On "New Intent" (app already open and a new deep link arrives), the same routing logic runs again ### State Changes - The screen is never visible to the user; it appears and disappears in the same frame - No state is retained on this screen ### Sample Data - Incoming URL: `https://www.instagram.com/natgeo/?r=nametag` → opens the @natgeo profile screen - Incoming URL: `https://www.facebook.com/stories/username/mediaId` → opens a Stories viewer - Incoming URL: `https://aistudio.instagram.com/ai/` → opens the AI Studio screen - Incoming URL: `https://chat.whatsapp.com?source_surface=instagram` → prompts user with an "Open in WhatsApp" dialog or routes to WhatsApp --- ## Spotify Web Auth Screen ### Overview An in-app web view screen where the user authenticates with their Spotify account so that Instagram can access Spotify data (e.g., for music stickers, Now Playing features). ### UI Elements **Header / Toolbar** - Back/close button (top-left) — labeled "Navigate back" or shows a left-arrow icon - Title: displays the name of the service being authorized (e.g., "Spotify") **Main Content** - Embedded web view showing the Spotify login/authorization page - Standard web page elements rendered by the browser (username/password fields, "Log in" button, Spotify branding) - Loading indicator while the page loads **Error States** - "No network connection" — message: "Check your device's network connection and try again." with a "Try again" button - "Page isn't available right now" — with a "Refresh" button - Security certificate error — message: "There are problems with the security certificate for this site" with a "Go back" button ### Interactions - **Back button tap** — dismisses the web auth screen and returns to the previous screen with no Spotify connection made - **User enters Spotify credentials and taps "Log in"** — Spotify processes the auth; on success the screen closes and Instagram records the linked Spotify account - **User denies permission on Spotify's authorization page** — the screen closes; no account is linked - **"Try again" tap** — reloads the Spotify authorization page - **"Refresh" tap** — reloads the current page - **"Go back" tap** (security error) — returns to the previous screen ### State Changes - Progress indicator appears while the web view is loading the Spotify page - On successful authorization, the screen closes and the user is returned to the Instagram feature that initiated the Spotify connection (e.g., music sticker picker, Now Playing) - On failure or cancellation, the user is returned to the same point with no change ### Sample Data - Page title: "Log in to Spotify" - URL (not visible to user): Spotify OAuth authorization endpoint - After success: music sticker tray now shows the user's recently played tracks --- ## Third-Party OAuth Authorization Screen ### Overview A general-purpose in-app web view screen that handles OAuth authentication flows for external services (beyond Spotify), presenting the third-party service's login or permission page so the user can securely grant Instagram access. ### UI Elements **Header / Toolbar** - Close/back button (top-left) - Title: name of the third-party service being authorized **Main Content** - Full-screen embedded web view rendering the third-party provider's OAuth page - The page may include login fields, account selection, and permission grant/deny buttons as provided by the third party - Loading spinner while the page loads **Error / Permission States** - Network error banner or inline message - Security certificate warning (if applicable): "There are problems with the security certificate for this site" with "Go back" option ### Interactions - **Close/back tap** — cancels the authorization flow and returns the user to the previous Instagram screen; the external account is not linked - **User completes sign-in on the third-party page** — the OAuth token is captured; the screen closes; Instagram links the account - **User denies permissions** — the screen closes; the account is not linked; user is returned to the originating feature ### State Changes - Loading spinner while web view loads - On successful OAuth completion: screen closes, user is returned to the initiating feature with the account now linked (e.g., a success toast: "Your account has been successfully linked.") - On cancellation: returns to previous screen with no changes ### Sample Data - Third-party service: Amazon - Success message (shown on return): "Amazon account successfully linked" - Cancellation message: "We won't link your Amazon account. You can still make a purchase." --- # Instagram Login & Onboarding — UI Screen Specifications --- ## Splash / App Launch Screen ### Overview The first screen the user sees when opening Instagram — a brief loading/routing screen that determines whether to show the login flow or navigate directly into the logged-in home feed. ### UI Elements - **Background:** Full-screen white or black background (respects device dark/light mode) - **Instagram logo:** Centered Instagram wordmark or camera icon, vertically and horizontally centered on screen - **Loading indicator:** Subtle spinner or animated logo while session state is being resolved (no progress text) - **No interactive buttons** — this screen is transitional only ### Interactions - **If the user is already logged in:** Automatically navigates to the main Home Feed screen with no user action required. A configurable delay (from server-side config) may be applied before the redirect. - **If the user is not logged in:** Automatically navigates to the Login / Welcome screen. - **On error (network or session failure):** Falls through gracefully to the Login / Welcome screen rather than showing an error. ### Sample Data - No user-visible text content on this screen beyond the Instagram branding. - Duration on screen: typically under 1 second on normal launches; may be slightly longer on cold start. --- ## Welcome / Login Landing Screen ### Overview The entry point for unauthenticated users, presenting options to log in with an existing account or create a new one. ### UI Elements - **Header:** Instagram logo (wordmark) centered near the top of the screen - **Illustration or background:** Decorative imagery or a subtle gradient behind the content - **"Log in" button:** Primary action button, full-width, labeled **"Log in"** - **"Create new account" button:** Secondary action, full-width or text link, labeled **"Create new account"** or equivalent - **"Log in with Facebook" button:** Third option allowing sign-in via Facebook account, labeled with Facebook branding - **Footer links:** - "Forgot password?" — text link - Legal/privacy disclaimer text linking to Meta's Terms and Privacy Policy - **Language selector:** Optional link or dropdown to change display language ### Interactions - **Tap "Log in":** Navigates to the Username/Email & Password entry screen - **Tap "Create new account":** Navigates to the account registration flow (phone/email entry) - **Tap "Log in with Facebook":** Launches Facebook OAuth flow (opens a webview or Facebook app handoff) - **Tap "Forgot password?":** Navigates to the Password Reset screen ### Sample Data - No personalized data on this screen; all content is static branding. --- ## Log In Screen ### Overview The user enters their Instagram username (or email or phone number) and password to authenticate. ### UI Elements - **Back button:** Top-left arrow to return to the Welcome screen - **Header text:** "Instagram" wordmark or screen title - **Username/email/phone input field:** - Placeholder text: "Phone number, username, or email" - Single-line text input - Keyboard type: default (auto-detects email or phone format) - Clear (✕) button appears when field has content - **Password input field:** - Placeholder text: "Password" - Obscured text by default - "Show password" toggle (eye icon) on the right side of the field to reveal/hide characters - **"Log In" button:** Full-width, primary button; disabled/grayed out until both fields have content; label: **"Log in"** - **"Forgot password?" link:** Text link below the login button - **Divider:** Horizontal line with "OR" centered between it - **"Log in with Facebook" button:** Secondary option below the divider - **"Create new account" link:** At the bottom of the screen: "Don't have an account? **Sign up.**" - **Error state:** Inline error message appears below the password field when credentials are incorrect (e.g., "Sorry, your password was incorrect. Please double-check your password.") ### Interactions - **Tap username field:** Keyboard appears; user types their username, email address, or phone number (e.g., `alex_johnson` or `alex@email.com` or `+1 415 555 0182`) - **Tap password field:** Keyboard appears; characters are masked as dots - **Tap eye icon:** Password characters toggle between hidden and visible - **Tap "Log in" button:** Submits credentials; shows a loading spinner inline on the button; on success navigates to the Home Feed; on failure shows an error message - **Tap "Forgot password?":** Navigates to the Password Reset screen - **Tap "Log in with Facebook":** Initiates Facebook OAuth - **Tap "Sign up":** Navigates to the account registration flow ### Sample Data - Username: `alex_johnson` - Password: `••••••••••` - Error message: "Sorry, your password was incorrect. Please double-check your password." --- ## Forgot Password Screen ### Overview The user enters their email address, phone number, or username to receive a password reset link or code. ### UI Elements - **Back button:** Top-left, returns to the Log In screen - **Title text:** "Trouble logging in?" - **Body text:** Explanatory text, e.g., "Enter your email, phone, or username and we'll send you a link to get back into your account." - **Input field:** - Placeholder: "Email, phone, or username" - Single-line text input - Clear (✕) button when field has content - **"Send login link" button / "Next" button:** Full-width primary button; enabled when field is not empty - **"Log in with Facebook" option:** Link below the button (alternative recovery path) - **Divider with "OR"** - **"Create new account" link:** At the bottom - **"Back to login" link:** Secondary navigation back to the Log In screen ### Interactions - **Tap input field:** Keyboard appears; user types their recovery information - **Tap "Send login link":** Submits the form; navigates to the Reset Link Sent confirmation screen; shows a loading state while the request is in progress - **Tap "Log in with Facebook":** Initiates Facebook OAuth flow - **Tap back button or "Back to login":** Returns to the Log In screen ### Sample Data - Input: `alex@email.com` - Input: `alex_johnson` - Input: `+1 415 555 0182` --- ## Reset Link Sent Confirmation Screen ### Overview Confirms that a password reset link or code has been sent to the user's email or phone and instructs them on next steps. ### UI Elements - **Back button:** Top-left - **Envelope or checkmark icon:** Centered illustration indicating success - **Title text:** "Check your email" or "Check your phone" (varies by recovery method) - **Body text:** "We sent an email to a**@e**.com with a link to get back into your account." (email partially obscured for privacy) - **"OK" button:** Full-width button, label: **"OK"** — dismisses and returns to Log In - **"Resend email" / "Resend code" link:** Text link to re-trigger the reset if the user did not receive it - **"Get more help" link:** Navigates to a support/help web page (opens `https://help.instagram.com/contact/502692143473097?ref=igapp`) ### Interactions - **Tap "OK":** Returns the user to the Log In screen - **Tap "Resend email"/"Resend code":** Triggers another send request; shows brief confirmation ("Email sent" or "Code sent") - **Tap "Get more help":** Opens in-app browser to Instagram Help Center ### Sample Data - Email confirmation: "We sent an email to a**@gmail.com** with a link to get back into your account." - Phone confirmation: "We sent a text to +1 •••• ••• 0182 with a temporary login link." --- ## Two-Factor Authentication (2FA) Screen ### Overview After entering correct login credentials, the user is prompted to enter a 6-digit verification code sent to their phone or authentication app. ### UI Elements - **Back button:** Top-left, cancels 2FA and returns to Log In - **Title text:** "Enter confirmation code" - **Body text:** Describes where the code was sent, e.g., "Enter the 6-digit code we sent to your number ending in ••• 0182." - **6-digit code input:** - Either a single text field accepting a 6-digit number - Or six individual single-character input boxes displayed in a row - Numeric keyboard type - Auto-submits when all 6 digits are entered (optional behavior) - **"Confirm" button:** Full-width primary button, label: **"Confirm"**; enabled once 6 digits are entered - **"Send SMS again" / "Resend code" link:** Text link to resend the code - **"Get more help" link:** Navigates to help center - **Alternative method option:** "Can't access this phone? Get help signing in." — text link ### Interactions - **Type 6-digit code:** Each digit fills one box; keyboard auto-advances focus - **Tap "Confirm":** Validates the code; on success navigates to the Home Feed; on failure shows inline error: "The code you entered is incorrect. Please try again." - **Tap "Send SMS again":** Re-sends code; link temporarily disabled with a cooldown ("Resend code in 30s") - **Tap "Can't access this phone?":** Navigates to an account recovery flow ### Sample Data - Code input: `4 8 2 1 7 3` - Error: "The code you entered is incorrect. Please try again." - Destination: "number ending in ••• 0182" --- ## Create New Account — Phone or Email Entry Screen ### Overview The first step of account registration, where the user provides their phone number or email address. ### UI Elements - **Close (✕) button:** Top-right, exits the registration flow - **Title text:** "Enter your mobile number or email address" - **Segmented selector / tabs:** Two tabs to switch input mode: - **"Phone"** tab - **"Email address"** tab - **Phone number input (when "Phone" tab selected):** - Country code selector button (e.g., 🇺🇸 +1) on the left — opens a country code picker - Phone number text field with placeholder "Phone number" - Numeric keyboard - **Email input (when "Email address" tab selected):** - Single-line text field with placeholder "Email address" - Email keyboard - **"Next" button:** Full-width primary button; enabled when a valid input is present - **"Log in" link:** At the bottom — "Already have an account? **Log in.**" ### Interactions - **Toggle tabs:** Switches between phone and email input modes; clears the current field - **Tap country code button:** Opens a searchable country code picker (full-screen or bottom sheet) - **Type phone/email:** Validates format in real time; shows inline error if invalid (e.g., "Enter a valid phone number") - **Tap "Next":** Sends a verification code to the phone number or email; navigates to the Confirm Code screen - **Tap "Log in":** Returns to the Log In screen ### Sample Data - Phone: 🇺🇸 +1 · `415 555 0182` - Email: `alex.johnson@gmail.com` --- ## Create New Account — Confirm Code Screen ### Overview After submitting a phone number or email, the user enters the verification code they received to confirm ownership. ### UI Elements - **Back button:** Top-left - **Title text:** "Enter the confirmation code" - **Body text:** "Enter the code we sent to +1 415-555-0182." (or email address — destination partially masked) - **6-digit code input:** Single field or six individual boxes (numeric input) - **"Confirm" button:** Full-width, enabled when code is complete - **"Resend code" link:** Text link; may have a cooldown timer displayed (e.g., "Resend code in 59s") - **"I didn't receive a code" link:** Offers alternative options (change number, get help) ### Interactions - **Enter code:** Enables the Confirm button - **Tap "Confirm":** Validates code; on success navigates to the Name Entry step; on failure shows error: "The code you entered is incorrect." - **Tap "Resend code":** Re-sends; shows brief confirmation - **Tap "I didn't receive a code":** Opens a help dialog or alternative verification options ### Sample Data - Code: `3 9 1 4 5 6` - Destination: `a***@gmail.com` or `+1 (415) •••-0182` --- ## Create New Account — Name Entry Screen ### Overview The user enters their full name during account creation. ### UI Elements - **Back button:** Top-left - **Progress indicator:** Optional step indicator (e.g., step 2 of 5) near the top - **Title text:** "Add your name" - **Body text:** "Add your name so friends can find you." - **Full name text input field:** - Placeholder: "Full name" - Single-line, first-letter capitalized - Character limit indicator (optional) - **"Next" button:** Full-width primary button; enabled when field is not empty - **"Use my Facebook name and picture" option:** Link or button to pre-fill from connected Facebook account (if applicable) ### Interactions - **Type name:** Field accepts free-form text - **Tap "Next":** Validates field is non-empty; navigates to the Password Creation screen - **Tap "Use my Facebook name and picture":** Auto-fills name and profile photo from linked Facebook account ### Sample Data - Name: `Alex Johnson` --- ## Create New Account — Password Creation Screen ### Overview The user creates a password for their new Instagram account. ### UI Elements - **Back button:** Top-left - **Title text:** "Create a password" - **Body text:** "Create a password with at least 6 characters. It should be something others can't guess." - **Password input field:** - Placeholder: "Password" - Obscured by default - Eye icon on the right to show/hide password - **Password strength indicator:** Optional visual bar or label showing password strength (Weak / Fair / Strong) - **"Next" button:** Full-width primary button; enabled when password meets minimum requirements (≥6 characters) ### Interactions - **Type password:** Field validates minimum length; strength indicator updates live - **Tap eye icon:** Toggles password visibility - **Tap "Next":** Validates password meets requirements; navigates to the Birthday Entry screen; shows inline error if too short: "Your password must be at least 6 characters." ### Sample Data - Password: `••••••••••••` (12 characters, "Strong") --- ## Create New Account — Birthday Entry Screen ### Overview The user enters their date of birth to comply with age verification requirements. ### UI Elements - **Back button:** Top-left - **Title text:** "Add your birthday" - **Body text:** "This won't be part of your public profile." and a "Why do I need to provide my birthday?" learn more link - **Date picker:** Three scroll-wheel pickers or dropdowns displayed side by side: - **Month** — January through December (as labeled in `graduation_date_picker_months` array) - **Day** — 1–31 - **Year** — current year back to 1900 - **Default value:** Scrolled to a date 18 years prior to the current date - **"Next" button:** Full-width primary button; always enabled after a date is selected - **Age restriction notice:** If the selected birthday indicates the user is under 13, the form shows an inline message explaining they cannot create an account. ### Interactions - **Scroll month/day/year wheels:** Updates selected date in real time - **Tap "Next":** Validates age (must be ≥13); navigates to Username Creation screen - **Tap "Why do I need to provide my birthday?":** Expands an inline info panel or navigates to a help page ### Sample Data - Selected date: September · 15 · 1997 --- ## Create New Account — Username Screen ### Overview The user chooses a unique @username for their new Instagram account. ### UI Elements - **Back button:** Top-left - **Title text:** "Create a username" - **Body text:** "Pick a username for your new account. You can always change it later." - **Username input field:** - Placeholder: "Username" - No spaces allowed; automatically lowercased - Character counter or note about allowed characters (letters, numbers, periods, underscores) - **Availability indicator:** Appears next to or below the field: - ✓ green checkmark + "alex_johnson is available" - ✗ red X + "alex_johnson is not available" - Loading spinner while checking - **Suggested usernames list:** Below the input, up to 3–5 suggested alternative usernames if the typed one is taken (e.g., `alex_johnson_22`, `alex.j.official`) - **"Next" button:** Full-width; enabled only when a valid, available username is entered ### Interactions - **Type in field:** After a brief pause (debounce), checks availability against the server and updates the indicator - **Tap a suggested username:** Fills the input field with the suggestion and re-checks availability - **Tap "Next":** Proceeds to the final step (account creation confirmation or profile photo) ### Sample Data - Typed: `alex_johnson` - Available: ✓ `alex_johnson is available` - Taken + suggestions: ✗ `alexa.jones is taken` → suggestions: `alexa.jones_22`, `alexa.j.official`, `alexa_jones99` --- ## Create New Account — Allow Camera & Microphone Permissions Screen ### Overview During or after account setup, Instagram prompts the user to grant camera and microphone access before they can use camera-based features. ### UI Elements - **Illustration:** A decorative image of a camera or phone showing permission UI (accessible label: "Image of the permission screen") - **Title text:** "Allow Instagram to access your camera and microphone" - **Body text:** "This lets you share photos, record videos and preview effects. You can change this anytime in your device settings." - **"Allow Permissions" button:** Full-width primary button, label: **"Allow Permissions"** - **"Not Now" / skip link:** A secondary text link to skip this step and grant permissions later ### Interactions - **Tap "Allow Permissions":** Triggers the native browser/OS permission dialog requesting camera and microphone access; on grant, navigates forward; on deny, shows a secondary prompt - **Tap "Not Now":** Skips permission grant; navigates forward with camera features disabled - **After denial — secondary prompt:** Shows message: "This feature requires camera access. Change the permissions in your device's application settings." with an **"Open Settings"** button that deep-links to device settings, and a "Not now" option. ### Sample Data - Permission dialog text (native OS): `"Instagram" Would Like to Access the Camera` / `"Instagram" Would Like to Access the Microphone` --- ## Account Linked Confirmation Screen ### Overview A confirmation screen shown after the user successfully links an external account (such as Amazon or a generic third-party account) during a checkout or account-linking flow. ### UI Elements - **Checkmark or success icon:** Centered, green or branded success indicator - **Title text:** "Your account has been successfully linked." (or for Amazon: "Amazon account successfully linked") - **"Done" button:** Full-width primary button, label: **"Done"** - **Optional secondary action:** "Continue" link to proceed to the next step in the flow ### Interactions - **Tap "Done":** Dismisses this confirmation and returns the user to the previous flow (e.g., a purchase flow or account settings) - **Tap "Continue":** Proceeds to the next step (e.g., completing a purchase) ### Sample Data - Standard: "Your account has been successfully linked." - Amazon variant: "Amazon account successfully linked" --- ## Account Link Declined Screen ### Overview Shown when the user actively declines to link their Amazon or third-party account, confirming no linking occurred and reassuring them they can still proceed. ### UI Elements - **Info or neutral icon:** Centered indicator (not an error icon — this is a user choice) - **Title text:** "We won't link your account. You can still make a purchase." (or Amazon variant: "We won't link your Amazon account. You can still make a purchase.") - **"Continue" button:** Full-width primary button, label: **"Continue"** - **"Cancel" button or link:** Secondary option, label: **"Cancel"**, to go back ### Interactions - **Tap "Continue":** Proceeds with the purchase or flow without linking the account - **Tap "Cancel":** Returns to the previous screen in the linking flow ### Sample Data - Message: "We won't link your Amazon account. You can still make a purchase." --- # Home & Feed — UI Screen Specifications --- ## Main Feed (Home Screen) ### Overview The user's primary home screen showing a scrollable vertical feed of photo and video posts from accounts they follow, along with recommended content, Stories at the top, and the main navigation bar. ### UI Elements **Top App Bar (Header)** - Instagram logo / wordmark centered or left-aligned in the header - Camera icon (top-left) — opens the in-app camera / Stories camera - Heart icon (top-right) — opens the Activity / Notifications screen - Direct Messages icon (top-right) — opens the Instagram Direct inbox, may show a numeric badge with unread message count **Stories Tray (horizontal scroll row, below header)** - Circular avatar thumbnails with a colorful ring indicating an unseen Story - User's own avatar first, labeled "Your story" with a "+" add button - Each story bubble shows the account's profile photo and their username below - Tap a story bubble to open full-screen Stories viewer **Feed Posts (vertical scrollable list)** Each post card contains: - Post header row: - Circular profile photo (left) - Username (bold, tappable) - Location tag (optional, below username, tappable) - Three-dot "More options" menu (far right) - Sponsored label (if ad) - Media area: - Full-width photo or video - For carousels: left/right swipe indicator dots; page count (e.g., "1 / 5") - For videos: play/pause toggle, mute button, progress indicator - Action bar (below media): - Heart icon — "Like" the post (toggles filled/outlined, like count updates) - Comment bubble icon — opens comments - Paper plane / Send icon — share the post via Direct or other methods - Bookmark icon (far right) — save the post to collections - Like count: e.g., "1,243 likes" or "Liked by **username** and **1,242 others**" - Caption: username (bold) followed by caption text; hashtags and @mentions are tappable links; "more" link if truncated - Comment count: e.g., "View all 47 comments" (tappable) - Comment preview: up to 2 recent comments shown (username bold + comment text) - Comment input row: user's own avatar + placeholder text "Add a comment for @username…" / "Join the conversation…" / "What do you think of this?" - Timestamp: relative time (e.g., "2 hours ago", "3 days ago") **Suggested / Recommended Posts** - "Suggested for you" label section divider within the feed - Follow button next to the suggested user's name in the post header **Post-Upload Snackbar / Toast (conditional)** - Appears after a user finishes uploading a post or Story - Avatar thumbnail of the newly uploaded media (small, circular) - Message text: e.g., "Your post has been shared, [Username]." - Optional action button: "View" (takes user to the newly shared post) - Dismisses automatically after ~5 seconds **Login Welcome Snackbar (conditional — shown after login)** - Brief animated snackbar confirming the user is logged in - Text varies by login method (e.g., logged in via Facebook, Messenger, local auth) - Username displayed in the message **Bottom Navigation Bar** Five tab buttons across the bottom: 1. **Home** (house icon) — current tab (active/highlighted state) 2. **Search** (magnifying glass icon) — navigates to Explore/Search 3. **Create / Add** (plus icon or stylized square) — opens the content creation flow 4. **Reels** (clapperboard / film icon) — opens the Reels tab 5. **Profile** (user's own avatar, circular) — opens the user's own profile Each tab may show a notification badge (numeric or dot) for unread counts. Long-pressing the **Home** tab may show a secondary action (e.g., scroll to top, account switcher). Long-pressing the **Profile** tab may show a popup with options (e.g., "Turn off notifications," or an account-related shortcut). Long-pressing the **Reels** tab may show a popup (e.g., mute/unmute auto-play toggle). ### Interactions - **Tapping the Home tab** when already on Home scrolls the feed back to the top - **Tapping a post's profile photo or username** navigates to that account's profile page - **Tapping the Like button** immediately toggles like state; count increments/decrements without a page reload - **Double-tapping a photo** triggers the Like animation (flying heart) and likes the post - **Tapping the Comment icon or "View all comments"** opens the Comments screen for that post - **Tapping the Share/Send icon** opens the Share Sheet to send the post via Direct Message or other options - **Tapping the Bookmark icon** saves the post; icon fills to confirm; tap again to unsave - **Tapping "more" on a caption** expands the full caption text inline - **Tapping a hashtag** navigates to the Hashtag Explore page - **Tapping an @mention** navigates to that user's profile - **Tapping the three-dot menu on a post** opens a bottom sheet with options (e.g., Report, Not Interested, Copy Link, Share to…, or if own post: Edit, Delete, Archive, etc.) - **Tapping the comment input row** opens the keyboard and focuses the comment text field, with placeholder cycling through variants: "Add a comment for @username", "Join the conversation…", "What do you think of this?" - **Swiping left on a carousel post** advances to the next photo/video in the set - **Tapping a Story ring** opens the full-screen Stories viewer starting with that user's Story - **Tapping the camera icon (top-left)** opens the Stories/Camera capture screen - **Tapping the heart icon (top-right)** navigates to the Activity/Notifications screen - **Tapping the DM icon (top-right)** navigates to the Direct inbox - **Tapping a Suggested user's "Follow" button** immediately follows the account; button state changes to "Following" or "Requested" - **Pull-to-refresh** (swipe down from top of feed) fetches new posts and refreshes the feed ### Sample Data **Stories tray:** - "Your story" (own avatar with blue + ring) - sarah.travels (unseen story ring) - mike_photo (unseen) - jenna.cooks (seen, greyed ring) **Feed post example:** - Username: **national_geo** · Location: Serengeti, Tanzania - Photo: wide-angle wildlife landscape shot - 248,731 likes - Caption: **national_geo** Golden hour on the Serengeti. 🦁 Every sunset here feels like the first. #wildlife #photography #africa - View all 1,204 comments - **alex_wanders** This is absolutely stunning 🔥 - **photo.lovers** I need to go here someday - 3 hours ago **Snackbar after post upload:** - "[Avatar thumbnail] Your post has been shared, @yourname." · "View" --- ## Stories Viewer ### Overview A full-screen, immersive viewer that plays through one or more accounts' Stories sequentially, with tap/swipe controls for navigation. ### UI Elements **Progress Bar** - Thin segmented progress bars at the very top of the screen, one segment per Story item in the current account's set - Currently playing segment animates forward; viewed segments are fully filled; future segments are empty/dimmed **Top Overlay** - Account avatar (small circle, left of username) - Username (bold white text) - Relative timestamp (e.g., "2h", "just now") - "Following" button (if not already following) - Mute/unmute icon (for video stories) - Three-dot "More options" button (top-right) - Close (✕) button (top-right) to exit the viewer **Story Content Area (full screen)** - Photo: static full-screen image - Video: auto-playing full-screen video - Boomerang: looping short clip - Text-only story: colored background with large centered text - Sticker overlays: location tags, hashtags, mention tags, poll/quiz/slider stickers, countdown timer, music sticker with song name **Interactive Sticker Elements (tappable overlays)** - Poll sticker: two options, shows vote percentages if own story - Quiz sticker: multiple choice (A/B/C/D options labeled per arrays.xml) - Slider/Emoji reaction sticker: swipeable emoji slider - Question sticker: shows a text prompt - Music sticker: displays album art, song title, artist name - Countdown sticker: displays time remaining - Location sticker: tappable, goes to location page - Mention sticker: @username, tappable to profile - Hashtag sticker: tappable, goes to hashtag page - Link sticker: shows a URL preview / "Open link" button **Bottom Overlay** - Reply input bar: placeholder text "Send message" or "Reply to @username…" - Quick emoji reaction buttons (row of emoji) - Send / paper plane button (right of input) - Share icon **Between-Story Transition** - Swipe right: go to previous account's Stories - Swipe left: go to next account's Stories - Black gap/animation between accounts ### Interactions - **Tap right half of screen** — advance to next Story item or next account - **Tap left half of screen** — go back to previous Story item - **Hold press (long tap)** — pauses the Story playback while held - **Swipe down** — closes the viewer and returns to Feed - **Swipe left/right** — jump to next/previous account's Story set - **Tap the username or avatar** — navigates to that account's profile - **Tap a poll sticker option** — submits vote, shows result percentages immediately - **Tap a quiz sticker option** — submits answer, reveals correct/incorrect with color feedback - **Tap a mention sticker** — opens a mini-profile popup or navigates to user's profile - **Tap a location sticker** — navigates to the location tag page - **Tap a link sticker** — opens the linked URL in an in-app browser - **Tap the reply input** — keyboard opens, user can type a reply; tapping send delivers a Direct Message to the story's author - **Tap an emoji reaction** — sends that emoji as a quick DM reaction to the story author - **Tap the three-dot menu** — bottom sheet with options: Report, Share, Copy Link, or (for own story) Delete, Save, Edit, See Story Stats - **Tap Close (✕)** — dismisses the viewer and returns to the feed ### Sample Data - **@wanderlust.jade** · 4h · 3 story segments - Segment 1: Photo of Amalfi Coast at sunset, location sticker "Amalfi, Italy" - Segment 2: Boomerang of clinking glasses at dinner - Segment 3: Text story: "Best trip of my life 🥹" on gradient background, with poll "Come with me next time?" Yes / No - **@nike** · 1h · 1 story segment - Video ad for new running shoes, link sticker "Shop Now" --- ## Post Detail / Comments Screen ### Overview A full view of a single post with all its comments visible and a text input to add a new comment. ### UI Elements **Header** - Back arrow (top-left) - "Comments" title centered - (Optional) Post options menu (top-right) **Post Summary (top of screen)** - Profile photo, username, three-dot menu - Post thumbnail (photo/video, smaller than feed) - Like count, caption (full, un-truncated), timestamp **Comments Sort Control** - Dropdown or toggle: "Top comments" / "Newest first" (values from arrays.xml `comments_sorting_options`) **Comments List (scrollable)** Each comment row: - Commenter's circular avatar - Username (bold) + comment text - Relative timestamp (e.g., "3h") - Like icon + like count for the comment - Reply link ("Reply") - If own comment: delete/edit option on long-press - Nested reply threads shown indented below parent comment with "View X replies" collapse/expand control - Pinned comment (if pinned by post author) shown at top with pin icon **Comment Input Bar (bottom of screen, sticky)** - User's own circular avatar (small) - Text input field: placeholder "Add a comment for @username…" / "Start the conversation…" / "What do you think of this?" (rotates through variants from arrays.xml) - Emoji picker icon (left of field) - Post/Send button (right, grayed out until text is entered): labeled "Post" **Loading State** - "Loading…" spinner / placeholder while comments fetch ### Interactions - **Tapping a username** — navigates to that user's profile - **Tapping "Reply"** on a comment — focuses the input field, pre-fills "@username " and highlights the parent comment being replied to - **Tapping "View X replies"** — expands the reply thread inline - **Liking a comment** — toggles the heart icon; count increments immediately - **Long-pressing own comment** — shows options: Delete - **Sorting toggle** — switches between "Top comments" and "Newest first"; list re-orders - **Typing in the input field** — "Post" button activates; tapping "Post" submits the comment and it appears at the bottom of the list immediately - **Tapping a hashtag or @mention** within a comment — navigates to the tag/profile page - **Pull-to-refresh** — reloads the comment list ### Sample Data - **@surfboard.sam** — "This shot is everything 🌊🔥" · 2h · 147 likes - Reply: **@beach.vibes** "Agreed, where was this taken?" · 1h · 3 likes - Reply: **@surfboard.sam** "@beach.vibes Malibu, CA!" · 45m · 1 like - **@photo.nomad** — "The lighting here is insane 😍" · 5h · 89 likes - **@travel.diaries** — "Adding this to my bucket list immediately" · 8h · 22 likes Comment input placeholder: "Add a comment for @surfboard.sam" --- ## Share Post Sheet (Send / Forward Post) ### Overview A bottom sheet that allows the user to send a post to one or more people via Direct Message or share it externally. ### UI Elements **Sheet Header** - "Share" title - Search bar: "Search" placeholder for finding people or groups **Recipient List (scrollable, contact grid or list)** - Each recipient row/tile: - Circular avatar - Username or full name - "Group" label for group chats - Selection circle (empty → filled checkmark when selected) - Recently contacted people shown first **Direct Sections** - "Send in Direct" header label - Suggested recipients (people the user frequently messages) **Share Externally Row** - Options: Copy Link, Share to Story, Share to WhatsApp, Share to Facebook, More (system share sheet) - Each option has an icon and a label **Send Button (bottom)** - "Send" button (blue, full-width), activates when at least one recipient is selected - Shows selected count if multiple: "Send (3)" **"Add Message" (optional)** - After selecting recipients, a text field appears: "Write a message…" ### Interactions - **Tapping a recipient** — toggles selection (checkmark appears); "Send" button activates - **Tapping "Send"** — sends the post as a Direct Message to selected recipients; sheet dismisses with confirmation - **Tapping "Copy Link"** — copies the post URL to clipboard, shows toast "Link copied" - **Tapping "Share to Story"** — opens the Story creation editor with the post as a sticker/embed - **Typing in search** — filters the recipient list in real time - **Tapping "More"** — opens the OS-level share sheet for third-party app sharing - **Swiping down** or tapping outside — dismisses the sheet ### Sample Data Suggested recipients: - **jessica_lee** (avatar) — recently messaged - **Group: Travel Squad** (group avatar) · 5 members - **@daniels.world** (avatar) --- ## Post Options Bottom Sheet (Three-Dot Menu) ### Overview A contextual action sheet that slides up when the user taps the "···" (three-dot / more options) button on a feed post, offering actions related to that specific post. ### UI Elements **Sheet Items (vertical list, full-width tap targets):** *For posts by other users:* - "Report" (with a flag icon) - "Not Interested" / "Hide" - "Unfollow @username" - "Mute" → sub-options: "Mute Posts", "Mute Posts and Stories" - "Copy Link" - "Share to…" - "About This Account" *For the user's own posts:* - "Edit" - "Archive" - "Delete" - "Copy Link" - "Share to…" - "Turn Off Commenting" / "Turn On Commenting" - "Pin to Profile" / "Unpin from Profile" **Cancel Button** - "Cancel" at the very bottom, separate tap target ### Interactions - **Tapping any action** — performs the action immediately (or navigates to a sub-flow) and dismisses the sheet - **Tapping "Unfollow @username"** — shows a confirmation dialog: "Unfollow @username?" with "Unfollow" (red/destructive) and "Cancel" buttons - **Tapping "Delete"** — shows a confirmation dialog: "Delete this item?" with "DELETE" (destructive) and "CANCEL" buttons (matching strings.xml values) - **Tapping "Mute"** — shows a sub-sheet with "Mute Posts" and "Mute Posts and Stories" options - **Tapping "Report"** — navigates to the Report flow (multi-step screen for selecting report reason) - **Tapping "Cancel"** or swiping down — dismisses the sheet without any action ### Sample Data For a post by **@adventure.lens**: - Report - Not interested - Unfollow @adventure.lens - Mute - Copy link - Share to… - About this account - Cancel --- # Content Creation & Camera — UI Specification --- ## Instagram Camera (Camera Capture Screen) ### Overview The primary creation screen where users capture photos or videos using their device camera, select camera modes, and access creative tools before proceeding to edit or share. ### UI Elements **Top Bar** - Close/back button (X icon) — top-left, dismisses the camera and returns to the previous screen - Flash toggle button — top-right area, cycles through flash modes (off / auto / on) - Camera settings button — opens camera configuration options **Camera Viewfinder** - Full-screen live camera preview occupying the majority of the screen - Front/rear camera toggle button — overlaid on or near the viewfinder **Camera Mode Selector** (horizontal scrollable strip, centered near bottom) - Selectable mode pills/tabs: - **PHOTO** — still photo capture - **VIDEO** — standard video recording - **Boomerang** — short looping clip - **Cinematic** — cinematic video mode - **Dual** — simultaneous front and back cameras - **Portrait** — depth-effect portrait mode - **Slow motion** — high frame rate video - **Timer** — countdown before capture **Capture Controls Row** (above the mode selector) - Gallery/media picker thumbnail — bottom-left, shows last photo from device gallery; tapping opens the media picker - Shutter button — large circular button centered, triggers photo capture or starts/stops video recording - Camera flip button — bottom-right, switches between front and rear camera **Overlay Elements** - Timer countdown overlay (appears briefly when Timer mode is active, e.g., "3… 2… 1…") - Recording duration indicator (top area during video capture, e.g., "0:07") - Zoom level indicator (appears when pinching to zoom) **Permission Banner** (shown if permissions are not granted) - Headline: "Allow Instagram to access your camera and microphone" - Body: "This lets you share photos, record videos and preview effects. You can change this anytime in your device settings." - Button: "Open Settings" **Error State** - If camera cannot start: Toast/inline message — "Unable to start camera. Please try again." ### Interactions - **Tapping shutter button (PHOTO mode):** Captures a still photo; transitions to the Photo Edit screen - **Pressing and holding shutter button (VIDEO/other modes):** Begins recording; releasing stops recording; transitions to video review - **Tapping a camera mode pill:** Switches the active mode; the shutter button behavior updates accordingly - **Tapping the gallery thumbnail:** Opens the media picker / gallery selector - **Pinching the viewfinder:** Zooms in or out; a zoom level indicator briefly appears - **Tapping camera flip button:** Switches between front-facing and rear-facing cameras - **Tapping close/back button:** Exits the camera; returns the user to the previous screen (feed, profile, etc.) with a slide-down or fade-out transition - **Tapping the flash icon:** Cycles flash state; icon updates to reflect current state - **Volume button press:** Can also trigger capture (hardware shutter shortcut) - **Timer mode selected:** When the shutter is tapped, a countdown (3s or configured duration) displays over the viewfinder before capturing ### Sample Data - Active mode: VIDEO - Recording time shown: "0:14" - Gallery thumbnail: last photo taken, showing a landscape at sunset - Zoom level shown momentarily: "1.5×" --- ## Camera Settings Screen ### Overview A settings panel where users configure default camera behavior such as the default mode that opens when the camera launches. ### UI Elements **Header** - Title: "Camera settings" - Back arrow (left) — returns to the camera **Default Camera Mode Section** - Section description: "Choose which camera mode to start with when launching the camera next time" - Two selectable options: - **PHOTO** — radio-style selection - **VIDEO** — radio-style selection - Currently selected mode has a visual indicator (filled radio button / checkmark) **Done Button** - Label: "Done" - Positioned at the bottom or top-right - Saves the selection and closes settings ### Interactions - **Tapping PHOTO or VIDEO:** Selects that mode as the default; visual state updates immediately - **Tapping Done:** Saves the preference and returns to the camera - **Tapping back arrow:** Returns to the camera without saving (or saving depending on auto-save behavior) ### Sample Data - Currently selected: PHOTO - After tap on VIDEO: VIDEO becomes selected --- ## Photo / Video Edit Screen ### Overview After capturing or importing media, the user sees a preview of their photo or video alongside editing tools and an action bar to proceed to the sharing step. ### UI Elements **Top Action Bar (Media Edit Action Bar)** - Back arrow (left) — returns to camera capture - "Next" button (right) — proceeds to the share/caption screen **Media Preview** - Full-width preview of the captured photo or video - For video: playback controls (play/pause); trimming handles may appear at the bottom of the preview **Filter Strip** (horizontal scrollable row below the preview) - Thumbnail-based filter tiles showing the media with each filter applied in real time - Each tile shows the filter name beneath it - Currently active filter is highlighted (e.g., bordered or labeled) - Example filter names visible in the strip (based on known Instagram filters): Normal, Clarendon, Gingham, Moon, Lark, Reyes, Juno, Slumber, Crema, Ludwig, Aden, Perpetua, Mayfair, Rise, Hudson, Valencia, X-Pro II, Sierra, Willow, Lo-Fi, Inkwell, Hefe, Nashville, Stinson, Vesper, Earlybird **Edit Tools Row** (icon buttons below the filter strip) - **Adjust** — brightness, contrast, saturation, warmth, shadows, highlights, vignette, fade, sharpen, tint (tapping opens a slider interface per adjustment) - **Tilt Shift** — applies linear or radial blur to a region of the image (tapping opens tilt-shift controls) - **Lux** — auto-enhance lighting **Filter Intensity Slider** (appears when a non-Normal filter is selected) - A horizontal drag slider to reduce or increase the filter strength (0–100) **Adjustment Sliders** (shown one at a time when an edit tool is active) - Label above slider (e.g., "Brightness", "Contrast", "Saturation") - Slider from negative to positive range with a center zero point - Current value shown numerically **Crop / Rotate Tool** (if applicable, appears as part of adjust tools) - Rotation dial and aspect ratio selector ### Interactions - **Swiping left/right in filter strip:** Scrolls through available filters; preview updates live - **Tapping a filter tile:** Applies that filter; selected tile is highlighted - **Dragging filter intensity slider:** Adjusts filter strength in real time; preview updates - **Tapping Adjust tool:** Opens the list of fine-tune adjustments (Brightness, Contrast, Saturation, Warmth, Fade, Highlights, Shadows, Vignette, Sharpen, Tint Shadows, Tint Highlights) - **Tapping an adjustment item:** Opens a full-width slider for that specific parameter - **Dragging adjustment slider:** Updates the preview in real time - **Tapping Tilt Shift:** Shows a blur overlay on the image with a draggable focus region; user can drag the band or circle to reposition - **Tapping back arrow:** Discards edits and returns to camera - **Tapping Next:** Saves edits and advances to the Share / Caption screen ### Sample Data - Captured photo: a brunch table with coffee and avocado toast - Active filter: "Clarendon" (selected, border highlighted) - Filter intensity: 82 - Brightness adjustment: +15 - Contrast: 0 (unchanged) --- ## Media Import (Gallery Picker) Screen ### Overview Users browse and select photos or videos from their device gallery to import into the creation flow. ### UI Elements **Header** - Title: "Media" (or current album name) - Close button (X) — top-left - Album/folder selector — dropdown or button showing the current album name; tapping opens a list of available albums - "Next" button (top-right) — enabled once one or more items are selected **Media Grid** - Full-width grid of photo/video thumbnails (typically 3 columns) - Each cell shows: - Thumbnail image - For videos: duration label overlaid at bottom-right (e.g., "0:34") - For selected items: a numbered selection indicator (e.g., circle with "1", "2", etc.) at top-right **Selection State** - Single selection: tapping a thumbnail previews it full-size in a preview area above the grid; selection indicator appears - Multiple selection: a multi-select toggle in the toolbar enables numbered multi-select mode **Full Preview Area** (above the grid) - Large preview of the currently selected photo or video - Crop handles or aspect ratio button may appear to adjust cropping **Post Type Selector** (tabs or segmented control near top of preview area) - Post - Reels - Stories ### Interactions - **Tapping a thumbnail:** Selects it and shows it in the full preview area at top - **Tapping the album/folder selector:** Opens a sheet listing device albums (e.g., Camera Roll, Screenshots, Downloads, Favorites) - **Tapping a different album:** Loads thumbnails for that album - **Long-pressing or tapping multi-select toggle:** Enables numbered multi-selection mode - **Tapping Next:** Proceeds to the Photo/Video Edit screen with the selected media - **Tapping close:** Returns to the camera ### Sample Data - Current album: Camera Roll (247 items) - Selected photo: beach vacation photo captured yesterday - Selected video: a 23-second clip from last weekend - Grid showing: 36 most recent photos and videos mixed together --- ## Lock Screen Camera Media Screen ### Overview A dedicated screen within Instagram displaying photos and videos captured via the device's lock screen camera widget, separate from the main device gallery. ### UI Elements **Header** - Title bar or contextual header **Empty State** (when no lock screen photos exist) - Icon (camera or placeholder) - Primary message: "No photos or videos yet" - Supporting message: "When you take a photo or video with the lock screen camera, you'll see it here and in your phone's gallery." **Locked State Overlay** (when device is locked) - Message: "Unlock your phone to see all the media captured with the lock screen camera." **Media Grid** (when items exist) - Thumbnail grid of captured photos/videos (same style as gallery picker) - Tapping a thumbnail opens it in a full preview **Delete Confirmation Dialog** - Trigger: user taps a delete option on a media item - Title: "Delete this item?" - Buttons: "CANCEL" and "DELETE" ### Interactions - **Tapping a thumbnail:** Opens the photo or video in full-screen preview - **Tapping delete on an item:** Shows the confirmation dialog - **Tapping DELETE in dialog:** Permanently removes the item - **Tapping CANCEL in dialog:** Dismisses the dialog, item remains - **Swiping left on full-screen preview:** Exits full-screen — display message: "You're now viewing full screen. Swipe left or tap back button to exit." ### Sample Data - 4 photos captured via lock screen camera: selfies and a quick snap of a sunset - First item: portrait photo, timestamp "Today 8:42 AM" --- ## Share / Caption Screen (Post Capture) ### Overview After editing, users write a caption, tag people and locations, choose a destination (Feed, Reels, Stories), and finalize their post. ### UI Elements **Header** - Back arrow (left) — returns to edit screen - Title: "New Post" (or "New Reel" / "New Story" depending on type) - "Share" button (top-right) — posts the content **Preview Thumbnail** - Small square thumbnail of the edited photo/video (top-left of the content area) **Caption Input** - Placeholder text variants (rotating): "Add a comment for [username]", "Start the conversation…", "What do you think of this?" - Multi-line text input; supports emoji, mentions (@username), and hashtags (#tag) - Character count indicator (if near limit) **Tag People Row** - Label: "Tag people" - Tapping opens a face-tagging or people-search interface **Add Location Row** - Label: "Add location" - Tapping opens a location search/map picker **Also Share To Row** (cross-posting options) - Facebook toggle row — toggle to simultaneously share to linked Facebook account - Threads toggle row — toggle to share to linked Threads account **Advanced Settings Row** - Tapping opens additional options (audience, comments on/off, etc.) **Post Type Tabs** (if not already chosen) - Post / Reels / Stories **Loading State** - "Loading…" indicator while the post is being uploaded ### Interactions - **Tapping caption field:** Opens keyboard; user types caption with hashtags and mentions - **Tapping Tag people:** Opens tagging UI (tap on photo to place a tag) - **Tapping Add location:** Opens location search; shows nearby places (e.g., "Central Park, New York") - **Toggling Facebook/Threads share:** Enables/disables cross-post to those platforms - **Tapping Share:** Queues and uploads the post; user is returned to the home feed with a success confirmation; "Loading…" shown while processing - **Tapping back:** Returns to the edit screen; caption draft is preserved ### Sample Data - Caption: "Weekend vibes at the farmer's market 🌻 #sunday #fresh" - Tagged person: @jordan.r - Location: "Grand Army Plaza Greenmarket, Brooklyn, NY" - Facebook cross-post: toggled ON - Post type: Post (feed) --- # Reels & Video Screen Specifications --- ## Reels Feed (Clips Viewer) ### Overview The user scrolls through a full-screen, vertically paginated feed of short-form videos (Reels), where each video autoplays as it comes into view. ### UI Elements **Video Player (Full Screen)** - Full-screen video that autoplays with sound (or muted based on device settings) - Video loops continuously while in view - Subtle top gradient overlay (semi-transparent black fading to transparent) to ensure top UI elements are legible - Subtle bottom gradient overlay (semi-transparent black, multi-stop fade) to ensure bottom UI elements are legible **Top Bar (overlaid on video)** - "Reels" title text centered at top - Camera icon button (top right) — opens the camera to record a new Reel - Swipe left/right may navigate to different feed tabs (e.g., For You, Following) **Right-side Action Bar (vertical stack, overlaid on video)** - Creator profile picture (circular avatar) with a "+" follow button underneath — tapping the avatar navigates to the creator's profile; tapping "+" follows the creator - Heart / Like button with like count below it — tapping likes the video; filled heart indicates already liked; double-tapping the video also triggers a like animation - Comment bubble icon with comment count — tapping opens the Comments sheet - Share (paper plane / arrow) icon with share count — tapping opens the Share sheet - Bookmark / Save icon — tapping saves the Reel to the user's Saved collection; filled icon indicates already saved - More options (⋯ / three-dot) button — tapping opens a contextual bottom sheet **Bottom Info Bar (overlaid on video)** - Creator username (e.g., @natgeo) — tapping navigates to the creator's profile - Audio track name with a spinning vinyl disc icon (e.g., "♪ Original audio – natgeo") — tapping navigates to the audio page showing all Reels using that sound - Reel caption text (truncated, tap "more" to expand) - "Sponsored" label if the video is an ad **Playback Controls** - Tap anywhere on the video to pause/resume; a large play/pause icon briefly animates - Progress bar at the very bottom of the screen indicating video progress - Scrubbing/seeking may be available on long-press ### Interactions - **Swipe up**: advances to the next Reel - **Swipe down**: goes back to the previous Reel - **Tap video**: toggles pause/play - **Double-tap video**: sends a Like (animated heart bursts from tap point) - **Tap Like button**: toggles like on/off; count updates immediately - **Tap Comment button**: slides up the Comments bottom sheet - **Tap Share button**: opens the Share sheet with options to send via Direct, share to story, copy link, etc. - **Tap Save button**: saves Reel to collection; icon fills to indicate saved state - **Tap creator avatar or username**: navigates to that user's profile page - **Tap follow "+"**: follows the creator; button changes to a checkmark - **Tap More (⋯)**: opens a bottom sheet with options: Report, Not Interested, About this account, Copy link - **Tap audio name**: navigates to the Audio page for that sound - **Back button / swipe back**: returns to the previous screen (e.g., Home feed or the tab the user came from) ### Sample Data - Creator: **@chefmarcella** · "Crispy potato tacos in 10 minutes 🌮🔥" - Likes: **48.2K** · Comments: **1,204** · Shares: **3.8K** - Audio: **♪ Original audio – chefmarcella** - Duration: 0:28, currently at 0:14 --- ## Reels Comments Sheet ### Overview A bottom sheet that slides up over the currently paused Reel, showing all comments and allowing the user to post new ones. ### UI Elements **Header** - "Comments" title centered at top of sheet - Sorting dropdown or icon (e.g., top right) with options: "Top comments" / "Newest first" (from `comments_sorting_options` array) - Close/dismiss handle (drag indicator bar at top of sheet) **Comments List (scrollable)** Each comment row shows: - Commenter's circular profile picture (left) - Username in bold (e.g., **foodie_forever**) - Comment text (e.g., "Made this last night, absolute perfection!") - Timestamp (e.g., "3h") - Like count with a heart icon (small, right-aligned) - Reply count link (e.g., "View 12 replies ›") - Threaded replies shown indented beneath parent comment when expanded **Pinned Comment** (if present) - "Pinned" badge above the comment **Creator Comment** (if present) - "Author" badge next to username **Input Bar (bottom, always visible)** - User's own circular profile picture (left) - Text input field with placeholder text cycling through: "Add a comment for @chefmarcella", "Start the conversation…", "What do you think of this?" (from `add_comment_for_non_self_hint_variants` array) - Emoji/sticker icon button (right of input) - Send button (arrow/paper plane icon, activates when text is typed) ### Interactions - **Tap sorting control**: shows dropdown with "Top comments" and "Newest first"; selecting re-orders the list - **Tap "View X replies"**: expands threaded replies inline beneath the parent comment - **Long-press a comment**: shows contextual options: Like, Reply, Copy, Report, Delete (if own comment) - **Tap heart next to comment**: likes that comment; count increments - **Tap commenter avatar/username**: navigates to that user's profile - **Type in input + tap Send**: posts the comment; it appears at the bottom of the list immediately - **Swipe down on sheet / tap outside**: dismisses the sheet; Reel resumes playback ### Sample Data - **@travelbug_kai** · "This is the most satisfying thing I've ever watched 😍" · **2.1K** likes · 3h - View 47 replies - **@healthnut_2024** · "Can you make a vegan version?" · **312** likes · 5h - **@chefmarcella** (Author) · "Yes! Swap the cheese for cashew cream 🙌" · **8.4K** likes · 4h --- ## Reels Share Sheet ### Overview A bottom sheet that lets the user send a Reel to friends via Direct Message, share it to their Story, or access other sharing options. ### UI Elements **Header** - "Share" title centered at top - Drag indicator at top **Send to People (horizontal scroll row)** Each person shown as: - Circular profile picture - Username truncated below (e.g., "maya_j") - A "Send" button or the row is tappable to select **Quick Action Buttons (grid or row below people)** - **Add to your story** — share Reel as a story with sticker-style embed - **Add to Close Friends story** — share to close friends only - **Direct** (paper plane) — opens DM conversation picker - **Copy link** — copies the Reel URL to clipboard; shows "Link copied" toast - **Share to…** — opens Android system share sheet **More Options (bottom)** - Share to external apps (e.g., WhatsApp, Threads) ### Interactions - **Tap a person's avatar**: adds them to the "Send to" list; their avatar gets a checkmark; tapping "Send" dispatches the Reel in DM - **Tap "Add to your story"**: opens story composer with the Reel as a sticker/embed - **Tap "Copy link"**: copies link; toast appears: "Link copied" - **Tap "Direct"**: opens the DM recipient selector screen - **Tap external app icon**: hands off to that app's share handler - **Swipe down or tap outside**: dismisses sheet; Reel resumes ### Sample Data - Recent contacts shown: **@jenna_w**, **@marco.fotos**, **@the_real_priya**, **@surf_dan**, **@quietmtn** - Link copied toast: "Link copied" --- ## Reel Post Detail (Single Reel Page) ### Overview A standalone, full-screen view of a single Reel opened from a profile grid, search, or a deep link — functionally identical to the Reels feed but scoped to one video with the option to scroll to related content. ### UI Elements **Video Player** - Full-screen autoplay video (same as Reels Feed) - Top-left back arrow ("←") to return to the previous screen **Right-side Action Bar** - Like, Comment, Share, Save, More (⋯) — same as Reels Feed **Bottom Info Bar** - Creator username, caption, audio track — same as Reels Feed - View count (e.g., "2.4M views") displayed beneath the caption or in the action bar **Related Reels** (below, if scrollable) - After the current Reel ends or on scroll-up, additional Reels from the same creator or related content appear ### Interactions - All interactions identical to Reels Feed - **Tap back arrow**: returns to the originating screen (profile, search, etc.) - **Tap view count**: may show a brief tooltip or navigate to insights (for own content) ### Sample Data - **@natgeo** · "The moment a wolf pack crosses the frozen river at dawn. 🐺❄️" - **2.4M views** · **187K likes** · **4,302 comments** - Audio: **♪ Interstellar Main Theme – Hans Zimmer** --- ## Reel Audio Page ### Overview A page showing all Reels that use a particular audio track, along with the track's details, allowing users to save the audio or use it to create their own Reel. ### UI Elements **Header** - Back arrow (top left) - Track title (e.g., "Interstellar Main Theme") in large bold text - Artist / original creator name (e.g., "Hans Zimmer" or "@original_poster") - Album art or a waveform/audio visual graphic - Play button to preview the audio clip - **"Save Audio"** button — bookmarks the sound for later use - **"Use Audio"** button (prominent, primary CTA) — launches the Reels camera with this audio pre-loaded **Reels Grid** (below audio info) - Grid of video thumbnails (2 or 3 columns) of Reels using this audio - Each thumbnail shows a play icon overlay and the view count - Number of Reels using this audio shown above the grid (e.g., "847K Reels") ### Interactions - **Tap Play**: previews the audio clip in a mini player - **Tap "Save Audio"**: saves the sound to the user's saved audio library; button label changes to "Saved" - **Tap "Use Audio"**: opens the Reel camera/creation flow with the audio pre-loaded - **Tap a video thumbnail**: opens that Reel in full-screen view - **Tap back**: returns to the Reel that linked here ### Sample Data - Track: **"As It Was"** · **Harry Styles** - **1.2M Reels** using this audio - Top Reel: thumbnail from **@dancelikenobody** — 4.8M views --- ## Reels Camera (Record New Reel) ### Overview The full-screen camera interface for recording or uploading a new Reel, with mode selectors, timer controls, and live effect previews. ### UI Elements **Top Bar** - Close / X button (top left) — exits camera - **"Camera settings"** icon (gear icon, top right) — opens camera settings **Camera Preview** - Full-screen live camera feed (front or rear) - Flip camera button (top right area) to toggle front/rear **Mode Selector (horizontal scroll, above capture button)** Tabs labeled: **PHOTO**, **VIDEO**, and other modes including **Boomerang**, **Cinematic**, **Dual**, **Portrait**, **Slow motion**, **Timer** **Capture Controls (bottom area)** - Large circular record button (hold to record, tap for photo in photo mode) - Red progress arc around the record button showing recording duration - Gallery thumbnail (bottom left) — opens device gallery to pick existing video - Audio/music note icon — opens audio picker - Effects/filters strip (horizontal scroll) showing effect thumbnails - Timer button — sets countdown before recording starts - Speed selector (0.25x, 0.5x, 0.75x, Normal, 1.25x, 1.5x, 2x) - Align/grid button **Left Side Tools (vertical strip)** - Flash toggle (bolt icon) - Timer (clock icon) - Aspect ratio selector - Green screen / background effect **Permission Prompt** (if camera not granted) - Overlay with text: "Allow Instagram to access your camera and microphone" - Subtext: "This lets you share photos, record videos and preview effects. You can change this anytime in your device settings." - **"Allow Permissions"** button - **"Open Settings"** button **Default Camera Mode Prompt** - On first use or from settings: "Choose which camera mode to start with when launching the camera next time" - Options: **PHOTO** / **VIDEO** ### Interactions - **Tap record button**: starts recording; tap again to stop - **Hold record button**: records while held; release stops recording - **Tap mode tab**: switches to that capture mode (Boomerang, Slow motion, etc.) - **Tap gallery thumbnail**: opens media picker to select existing videos/photos - **Tap flip camera**: switches between front and rear camera - **Tap effects**: opens effects browser panel - **Tap audio/music icon**: opens audio search/picker - **Tap timer**: sets a countdown (3s, 10s) before recording starts - **Tap speed control**: changes recording speed; "Slow motion" mode locks to slow speed - **Tap Close (X)**: exits camera and returns to previous screen - **After recording**: automatically advances to the Reel editing/post-capture screen ### Sample Data - Mode selected: **VIDEO** - Recording duration progress: 0:08 / 0:60 - Effects strip showing: Normal, Boomerang, Slow Mo, Cinematic, Blur, Color Shift --- ## Reel Post Capture / Editor ### Overview After recording or selecting clips, the user arrives at an editing screen where they can trim, add audio, apply effects, write a caption, and share the Reel. ### UI Elements **Top Bar** - Back arrow (top left) — returns to camera - "Next" button (top right, primary) — advances to the share/caption screen **Video Preview** - Full-screen preview of the recorded/selected clip(s) with playback - Timeline strip at bottom showing all clips; draggable trim handles on each end **Editing Tool Strip (horizontal scroll row)** Buttons including: - **Audio** (music note) — change or add background audio - **Text** — add text overlays - **Sticker** — add stickers, GIFs, polls, quizzes - **Draw** — freehand drawing tool - **Effects** — apply video effects (from the extensive filter list: Blur Fade, Color Echo, Kaleidoscope, etc.) - **Transitions** — add transitions between clips - **Voiceover** — record voiceover audio - **Captions** (auto-generated subtitles) - **Template** — apply a pre-set editing template **Timeline (bottom)** - Horizontal strip of video thumbnail frames - Draggable trim handles to cut start/end - Audio waveform overlay if music is added - "+" button to add additional clips **Volume / Audio Controls** - When audio is added: original audio vs. music volume sliders ### Interactions - **Scrub timeline**: moves playhead to preview specific moment - **Drag trim handles**: trims clip start/end; preview updates in real time - **Tap "Audio"**: opens music/sound picker - **Tap "Text"**: opens text tool; user types text, picks font/color/animation - **Tap "Effects"**: opens effects browser organized by category - **Tap "Next"**: advances to the Caption & Share screen - **Tap back**: returns to camera with option to discard or keep edits ### Sample Data - Clip duration: 0:22 trimmed from 0:28 source - Audio added: "Golden Hour – JVKE" at 70% volume, original audio at 30% - Text overlay: "Weekend vibes ✨" in white bold font, centered --- ## Reel Caption & Share Screen ### Overview The final step before publishing a Reel, where the user writes a caption, tags people, adds a location, adjusts audience settings, and taps "Share." ### UI Elements **Top Bar** - Back arrow — returns to editor - **"Share"** button (top right, primary, bold) — publishes the Reel **Cover Image Selector** - Small thumbnail (left) showing the current cover frame with a pencil edit icon — tap to choose a different frame from the video as the cover **Caption Input** - Large multi-line text field with placeholder: "Write a caption…" - Emoji picker button (smiley face icon, right side of input) - AI caption suggestion button (optional) - @ mention autocomplete as user types "@" - # hashtag autocomplete as user types "#" **Options List (below caption)** - **Tag people** — opens a search to tag users; shows "Add" button - **Add location** — opens location search - **Add topic** — select a Reels topic/category (e.g., Comedy, DIY, Food) - **Also share to Feed** — toggle (on/off) to cross-post to the photo grid - **Also share to Facebook** — toggle (on/off) - **Advanced settings** — expands to show: Allow comments toggle, Allow duets toggle, Allow remixing toggle, Audience (Everyone / Followers only) **Share to Other Platforms Row** - Facebook toggle, Threads toggle (if connected) ### Interactions - **Tap cover thumbnail**: opens frame picker — user scrubs through video to select a thumbnail frame - **Type in caption**: supports @mentions and #hashtags with inline autocomplete suggestions - **Tap "Tag people"**: opens user search; selected users appear as tags - **Tap "Add location"**: opens location search; selected location appears as a label - **Tap "Also share to Feed" toggle**: enables/disables cross-posting; if enabled, a grid preview thumbnail appears - **Tap "Advanced settings"**: expands/collapses; user can turn off comments, duets, or change visibility - **Tap "Share"**: publishes the Reel; shows a loading indicator then returns to the Reels feed or profile ### Sample Data - Caption: "Sunday golden hour at the farmers market 🌾🧡 #weekendvibes #farmersmarket #foodie" - Location: **Grand Army Plaza Greenmarket, Brooklyn** - Tagged: **@maya_j**, **@the_real_priya** - Also share to Feed: **On** · Also share to Facebook: **Off**