# Login & Account Setup Screens --- ## Welcome / Login Entry Screen ### Overview The user sees the Spotify logo and is prompted to choose how to continue — either by logging in or signing up — using multiple identity provider options. ### UI Elements - **Header**: Spotify logo centered at the top of the screen - **Title text**: "Who's listening?" (from `account_selection_title`) - **Subtitle text**: "Get personalized recommendations, playlists, and more." (from `account_selection_subtitle`) - **Continue with Google button** — labeled using `accessibility_continue_with_google` ("Google"), branded button with Google icon - **Continue with Facebook button** — labeled using `accessibility_continue_with_facebook` ("Facebook"), branded button with Facebook icon - **Continue with Apple button** — labeled using `accessibility_continue_with_apple` ("Apple"), branded button with Apple icon - **Continue with Phone number button** — labeled using `accessibility_continue_with_phone` ("Phone number") - **Continue with Email button** — labeled using `accessibility_continue_with_email` ("Email") - **Continue with NAVER button** — labeled using `accessibility_continue_with_naver` ("NAVER") — shown in applicable regions - **"Switch to log in" link** — text link labeled `action_switch_to_login` ("switch to log in") - **"Switch to sign up" link** — text link labeled `action_switch_to_signup` ("switch to sign up") ### Interactions - Tapping **Google**, **Facebook**, **Apple**, **NAVER**: Initiates OAuth flow for that provider; user is taken to that provider's login page in a browser or in-app web view - Tapping **Phone number**: Navigates to the phone number entry screen - Tapping **Email**: Navigates to the email/password login or signup screen - Tapping **"switch to log in"**: Toggles the screen to the Login variant (if currently on signup) - Tapping **"switch to sign up"**: Toggles the screen to the Signup variant (if currently on login) ### Sample Data - User sees: "Who's listening?" with subtitle "Get personalized recommendations, playlists, and more." - Five social/identity buttons stacked vertically: Google, Facebook, Apple, Phone number, Email --- ## Email Login Screen ### Overview The user enters their Spotify email address and password to log in with credentials. ### UI Elements - **Back button** — top-left, labeled "Back" (`accessibility_navigate_back`) - **Screen title** — "Log in" or equivalent heading - **Email/username input field** — text input with hint text `abc_search_hint` ("Search…") or email placeholder; single line - **Password input field** — masked text input; password type - **"Send login link" link** — text link labeled `action_log_in_without_password` ("send login link") for passwordless login - **Log In button** — primary CTA button; enabled once fields are non-empty - **Error message area** — inline error text below relevant field when credentials fail (e.g., `action_navigate_to_content_error` "Something went wrong") ### Interactions - Typing in email field: Updates field value; no action until submission - Typing in password field: Updates masked field value - Tapping **"send login link"**: Navigates to passwordless login flow — app sends a login link to the user's email - Tapping **"open email app"** (`action_open_email_app`): Opens the device's default email client (appears after login link is sent) - Tapping **Log In button**: Submits credentials; on success navigates to the main home screen; on failure shows an error message - Tapping **Back**: Returns to the Welcome screen ### Sample Data - Email field: "alex.johnson@gmail.com" - Password field: "••••••••••" - Error state: "Something went wrong" shown below the password field on invalid credentials --- ## Passwordless Login (Send Login Link) Screen ### Overview The user is informed that a magic login link has been sent to their email, and they are prompted to open their email app to complete login. ### UI Elements - **Back button** — top-left - **Instructional heading** — explains that a login link was sent to the user's email address - **Email address displayed** — shows the address the link was sent to (e.g., "We sent a link to alex@gmail.com") - **"Open email app" button** — primary CTA labeled `action_open_email_app` ("open email app") - **Retry / Resend link** — secondary option to resend the link if not received ### Interactions - Tapping **"Open email app"**: Opens the device's default email client so the user can tap the magic link - Tapping **Back**: Returns to the Email Login screen - After tapping the magic link from the email: User is authenticated and redirected into the app's home screen ### Sample Data - "We sent a link to alex.johnson@gmail.com. Check your inbox and tap the link to log in." --- ## Account Picker ("Who's Listening?") Screen ### Overview On a shared device, users can pick which Spotify account to listen with from a list of previously logged-in accounts. ### UI Elements - **Title**: "Who's listening?" (`account_picker_title_text`) - **Subtitle**: "Get personalized recommendations, playlists, and more." (`account_picker_info_text`) - **Account list** — vertical list of account cards, each showing: - Profile picture / avatar - Display name - Account type badge (e.g., "Managed plan member" from `account_type_premium_managed`, "Spotify Free" from `account_type_free_managed`, "Self-managed" from `account_details_account_type_self_managed`) - PIN required indicator (icon + label `account_switching_user_pin_required_content_description` "PIN required") if applicable - Disabled state with label `account_switching_user_disabled_accessibility_label` ("No internet connection") if offline - **"Add account" button** — at the bottom of the account list, labeled `account_picker_add_user_text` ("Add account") - **Accessibility label for switching** — each account row has `account_switching_user_action_accessibility_label` ("switch to %1$s's account") ### Interactions - Tapping an **account row** (no PIN required): Switches to that account immediately; shows snackbar "You're now logged in as [Name]" (`account_switching_logged_in_snackbar_message`) - Tapping an **account row** (PIN required): Shows a PIN entry dialog before switching - Tapping **"Add account"**: Navigates to the Add Account screen (login/signup flow for a new account) - Tapping a **disabled account row**: No action; row shows "No internet connection" accessibility label - Note: Young listener accounts on shared devices can switch between managed accounts without a PIN; a self-managed account requires the plan manager to enter a PIN (`account_switching_young_listener_disclaimer`) ### Sample Data - Account 1: Avatar, "Alex Johnson", "Self-managed" badge - Account 2: Avatar, "Sam (Kid)", "Managed plan member" badge, PIN required icon - Account 3: "Add account" button at bottom --- ## Add Account Screen ### Overview The user initiates adding a new Spotify account to the current device by entering credentials or choosing a sign-in method. ### UI Elements - **Back button** — top-left - **Screen title**: "Add account" (`add_account_page_title`) - **Subtitle/disclaimer**: "While you are signed in, anyone else using this device will be able to access your account." (`account_switching_disclaimer`) - **"Add a different account" section title** (`add_different_account_title`) - **Sign-in method buttons** — same options as Welcome screen (Google, Facebook, Apple, Phone, Email) - **"Add Account" primary button** (`add_account` "Add Account") ### Interactions - Tapping any sign-in provider: Initiates the corresponding auth flow - Successful auth: New account added to the account picker list; snackbar "You're now logged in as [Name]" shown - Failed attempt: Snackbar error "Something went wrong. Have another go?" (`add_managed_account_failed_snackbar`) - Tapping **Back**: Returns to Account Picker ### Sample Data - Screen title: "Add account" - Disclaimer: "While you are signed in, anyone else using this device will be able to access your account." --- ## Parental Consent / QR Code Screen ### Overview A young listener is shown a QR code that their parent or guardian must scan in order to grant parental consent for account creation. ### UI Elements - **Screen title**: "Ask your parent or guardian to scan this code" (`aa_share_parental_consent_title`) - **QR code image** — large, scannable QR code centered on screen; accessibility description: "QR Code, use another camera to scan and continue" (`aa_share_parental_consent_qr_code_description`) - **Primary instruction text**: "They should scan this code with the device where they normally use Spotify." (`aa_share_parental_consent_instruction`) - **Divider / "Or" separator** - **"Parent login" button** — secondary CTA labeled `aa_share_parental_consent_continue_current_device_button` ("Parent login") for the alternative flow - **Alternative instruction text**: "Or, your parent can log in here temporarily. You won't be able to access their account." (`aa_share_parental_consent_instruction_current_device`) - **Disclaimer**: "Does your parent not have an account? They can sign up for free with either option." (`aa_share_parental_consent_disclaimer`) ### Interactions - Parent scans QR code with another device: Completes parental consent flow on the parent's device; the young listener's app progresses automatically - Tapping **"Parent login"**: Opens a temporary parent login screen on the current device so the parent can authenticate and grant consent without the child accessing the parent's full account ### Sample Data - Title: "Ask your parent or guardian to scan this code" - Large QR code image displayed - Below: "They should scan this code with the device where they normally use Spotify." - Button: "Parent login" - Fine print: "Does your parent not have an account? They can sign up for free with either option." --- ## Account Details / Profile Screen ### Overview The user views and manages their account information, including account type, name, profile picture, and content settings. ### UI Elements - **Back/navigation button** — top-left - **Screen title**: "Account type" label (`account_details_account_type_title`) - **Profile picture** — circular image; accessibility description `account_details_profile_picture_description` ("Profile picture") - **Name row** — shows display name with click label `account_details_name_row_click_label` ("Update name") and row title `account_details_name_row_title` ("Name"); tappable to edit - **Account type row** — displays one of: - "Spotify Kids (separate app)" (`account_details_account_type_kids`) - "Managed account (you control playback)" (`account_details_account_type_managed`) - "Self-managed" (`account_details_account_type_self_managed`) - "Account switch in progress" (`account_details_account_type_switch_in_progress`) - **Account transition in progress banner** — if applicable, shows `account_details_button_disabled` ("Account transition is in progress"); all buttons disabled - **Explicit content toggle** — labeled `account_details_explicit_content_title` ("Explicit content") with description `account_details_explicit_content_description` ("Content (labeled with the [E] tag) that may contain adult language or themes.") - **Remove member section** (plan manager only): - Title: "Remove member" (`account_details_remove_member_title`) - Description: "Remove this person's access to your plan." (`account_details_remove_member_description`) - **Remove button** — labeled `account_details_remove_member_button` ("Remove"); red/destructive style ### Interactions - Tapping **Name row**: Opens an inline edit field or dialog to update display name - Toggling **Explicit content**: Enables or disables explicit content for this account; updates immediately - Tapping **Remove** (plan manager view): Opens a confirmation dialog before removing the member from the plan - Confirmation dialog buttons: "Cancel" / "Remove" - When account transition is in progress: All interactive elements show as disabled with message "Account transition is in progress" ### Sample Data - Name: "Alex Johnson" - Account type: "Managed plan member" - Explicit content: Toggle in ON state - Remove member: "Remove this person's access to your plan." with "Remove" button (shown to plan manager only) --- # Music Player & Playback — Screen Specifications --- ## Now Playing View ### Overview The full-screen music player where users see the currently playing track's artwork, control playback, and access related features like lyrics, queue, and sharing. ### UI Elements **Header / Top Bar** - Back/collapse chevron (down arrow) — returns user to the previous screen - Title: "Now Playing" (string: `now_playing_view_title`) - "..." or three-dot button — opens context menu (more options) - Share button — labeled "Share" (`action_share_label`) **Artwork Area** - Large square album/track artwork, centered, fills most of the upper screen - Artwork animates slightly (scale + alpha transitions) on track change - On video tracks, artwork area shows the video player **Track Info** - Track title (large, single line, truncated with ellipsis) - Artist name (smaller, below title) - "Save" / heart button — adds track to library; label: "Add" (`action_save_label`); when saved: "Item added" (`add_to_button_content_description_added`) **Playback Controls** - **Shuffle button** — toggles shuffle mode; accessibility label: "Smart Shuffle" (`accessibility_smartshuffle`) - **Previous track button** — skips to previous track or restarts current track - **Play/Pause button** — large center button; toggles playback - **Next track button** — skips to next track - **Repeat button** — cycles through repeat modes (off → repeat all → repeat one) **Seek Bar / Progress** - Horizontal scrubber showing elapsed and total track time - Current playback position timestamp (left) - Total duration timestamp (right) - Draggable thumb to seek **Volume Control** - Horizontal volume slider (below seek bar or near bottom) - Accessibility label: "Volume %d" (`accessibility_label_volume`) **Bottom Action Row** - **Lyrics button** — navigates to full-screen lyrics (`spotify:lyrics:fullscreen`) - **Queue button** — opens the play queue (`spotify:queue`) - **Connect / Devices button** — opens device picker (`spotify:internal:connect-device-picker`); shows current output device name; accessibility: "Volume for %s" (`accessibility_label_volume_for_device`) - **Share button** — opens share sheet **Gradient Background** - Background uses a color gradient derived from the album artwork **Snackbar / Toast** - Appears on errors: "Something went wrong" (`action_navigate_to_content_error`) - Track save confirmation snackbar **Picture-in-Picture (PiP) Mode** - When app enters PiP, the player collapses to a small floating window - Shows artwork, track title, and play/pause control ### Interactions - **Tapping artwork** — toggles a "preview" mode or opens video player if video track - **Swiping down** — collapses Now Playing View back to the mini player / previous screen; uses `nowplaying_activity_exit` animation - **Tapping shuffle** — toggles shuffle; button state updates visually - **Tapping prev/next** — skips track; artwork and track info update immediately - **Tapping play/pause** — toggles playback state; button icon changes - **Dragging seek bar** — scrubs through track; timestamp updates in real time - **Tapping lyrics** — navigates to full-screen lyrics screen - **Tapping queue** — navigates to Queue screen - **Tapping devices** — opens Connect Device Picker bottom sheet - **Tapping share** — opens Share sheet - **Tapping "..." (more options)** — opens context menu bottom sheet with additional actions - **Tapping save/heart** — adds track to library; heart icon fills; snackbar confirms - **Configuration change (rotate/resize)** — layout re-renders to match new orientation/width - **Entering PiP** — full UI collapses; dialogs are dismissed automatically ### Sample Data - **Track:** "Anti-Hero" - **Artist:** Taylor Swift - **Album artwork:** Midnights album art - **Duration:** 3:20 - **Current position:** 1:14 - **Volume:** 72% - **Shuffle:** On - **Repeat:** Off --- ## Now Playing — Lyrics (Full Screen) ### Overview A full-screen overlay showing synchronized, scrolling lyrics for the currently playing track. ### UI Elements **Header** - Close/back button (top left) — collapses back to Now Playing View - Track title and artist name (top center, small) - Share lyrics button — navigates to lyrics share selector (`spotify:lyrics-share-selector`) **Lyrics Body** - Scrolling list of lyric lines - Current line highlighted (larger or brighter color) - Past lines dimmer; upcoming lines slightly muted - Lines scroll in sync with playback position **Upsell Banner (Free Users)** - If lyrics are behind a paywall, a banner appears explaining the Premium benefit - Button: upgrade/learn more **Premium Signifier** - Small badge or label visible if content requires Premium (`premiumSignifier`) ### Interactions - **Lines scroll automatically** as the track progresses - **Tapping a lyric line** — seeks the track to that timestamp - **Tapping share** — opens the lyrics share selector where user can pick which lines to share - **Tapping close** — returns to Now Playing View ### Sample Data - Current line (highlighted): *"It's me, hi, I'm the problem, it's me"* - Previous line (dimmed): *"At teatime, everybody agrees"* - Next line (muted): *"I'll stare directly at the sun but never in the mirror"* --- ## Queue ### Overview The play queue screen where users see the currently playing track and the list of upcoming songs. ### UI Elements **Header** - Back button or close button - Title: "Queue" (implied by `spotify:queue` route) **Now Playing Section** - Label: "Now playing" - Row showing: track artwork thumbnail, track title, artist name - Currently playing indicator (e.g., animated bars or highlighted row) **Next in Queue Section** - Section header: "Next in queue" or "Next up" - List of upcoming tracks, each row showing: - Track number/position - Artwork thumbnail (small) - Track title - Artist name - Drag handle (to reorder) - Remove button (swipe or long press); accessibility: "Remove %1$s by %2$s" (`accessibility_action_remove_track`) **Next From [Context] Section** - Section header showing the source context (e.g., "Next from: Midnights") - Remaining tracks from the original playlist/album/context **Clear Queue Button** - Button or action to clear all manually queued tracks ### Interactions - **Tapping a track row** — plays that track immediately; queue updates - **Long pressing / drag handle on a row** — reorders track in queue - **Swiping a row left** — removes track from queue; snackbar confirms - **Tapping remove icon** — removes track; accessibility announces "Remove [track] by [artist]" - **Tapping back** — returns to Now Playing View - **Tapping "Add to queue" from elsewhere** — adds track to queue; snackbar: "Added to queue" ### Sample Data **Now Playing:** - "Anti-Hero" — Taylor Swift **Next in Queue:** 1. "Karma" — Taylor Swift 2. "Lavender Haze" — Taylor Swift **Next from: Midnights:** 3. "Midnight Rain" — Taylor Swift 4. "Vigilante Shit" — Taylor Swift 5. "Bejeweled" — Taylor Swift --- ## Connect Device Picker ### Overview A bottom sheet that lets users choose which device (phone, speaker, TV, etc.) to play music on via Spotify Connect. ### UI Elements **Sheet Header** - Title: "Connect to a device" or similar - Close button (top right) **Current Device** - Row labeled "This device" or the phone's name - "Local device" indicator (`local_device`) - Volume slider for the current device; accessibility: "Volume for %s" (`accessibility_label_volume_for_device`) **Available Devices List** - Each device row shows: - Device icon (speaker, TV, phone, car, etc.) - Device name (e.g., "Living Room Speaker", "Kitchen Echo") - Connection status (active device highlighted) - Disabled state if unavailable; accessibility: "The %s device is disabled." (`accessibility_device_row_disabled`) - "..." or context menu button per device; accessibility: "Open context menu for %s" (`accessibility_open_context_menu_for_device`) **Bluetooth Settings Link** - "Open Bluetooth devices in system settings" (`accessibility_open_bluetooth_settings`) — tappable link **Volume Control (Active Device)** - Volume slider for the currently active remote device - Accessibility: "Volume for %s" (`accessibility_label_volume_for_device`) **Output Switcher Option** - Button/link to open system audio output switcher (`spotify:internal:connect-output-switcher`) ### Interactions - **Tapping a device** — transfers playback to that device; selected device gets highlighted; sheet may close or stay open - **Tapping "..." on a device** — opens a context menu for that device (`spotify:internal:connect-device-context-menu`) with options like rename, disconnect, etc. - **Tapping "Open Bluetooth settings"** — opens system Bluetooth settings - **Adjusting volume slider** — changes volume on the selected device in real time; accessibility announces "Volume %d" (`accessibility_label_volume`) - **Tapping close** — dismisses the sheet ### Sample Data - **This device:** Pixel 7 Pro (active, currently playing) - **Available:** - Kitchen Echo Dot (Bluetooth) - Living Room TV (Spotify Connect) - MacBook Pro (Spotify Connect) --- ## Now Playing — Context Menu (More Options) ### Overview A bottom sheet of additional actions for the currently playing track, accessible via the "..." button in the Now Playing View. ### UI Elements **Header** - Track artwork thumbnail - Track title - Artist name - Album name **Action List** (each item is a tappable row with an icon and label) - **Add to playlist** — "Add to playlist" (`add_to_collection_label`) - **Add to queue** — add track to queue end - **Go to artist** — navigates to artist page - **Go to album** — navigates to album page - **Share** — "Share" (`action_share_label`); opens share sheet - **Save to library / Remove from library** — "Add" / "Remove" toggle - **View credits** — navigates to track credits (`spotify:track:{id}:credits`) - **Start radio** — starts a radio based on this track - **Song DNA** — "About SongDNA" (`about_songdna_title`); navigates to SongDNA feature (`spotify:track:{id}:dna`) - **Report** — "Report" (`actions_picker_report_abuse`) - **Sleep timer** — access sleep timer settings ### Interactions - **Tapping any action** — performs the action and closes the sheet (or navigates away) - **Tapping outside the sheet** — dismisses it - **Tapping share** — opens the Share sheet; sheet closes - **Tapping "Add to playlist"** — opens the Add to Playlist screen - **Tapping "Go to artist"** — navigates to artist page; Now Playing collapses ### Sample Data - Track: "Flowers" by Miley Cyrus, from *Endless Summer Vacation* - Actions visible: Like, Add to playlist, Add to queue, Go to artist, Go to album, Share, View credits, Start radio, Song DNA, Report --- ## Mini Player (Now Playing Bar) ### Overview The persistent mini player bar pinned to the bottom of the screen while music is playing, visible from any main tab. ### UI Elements - **Track artwork** — small square thumbnail (left) - **Track title** — truncated single line - **Artist name** — smaller text below title - **Play/Pause button** — icon button (right side) - **Next track button** — icon button (far right) - **Progress indicator** — thin progress line along the top edge of the bar ### Interactions - **Tapping the bar (anywhere except buttons)** — expands to the full Now Playing View with enter animation (`nowplaying_activity_enter`) - **Tapping play/pause** — toggles playback without opening full view - **Tapping next** — skips to next track; bar updates with new track info - **Swiping the bar left or right** — optionally dismisses or skips (behavior may depend on feature flags) - Accessibility: "show Now Playing View" (`action_desc_show_now_playing_view`) ### Sample Data - Artwork: "Flowers" single cover - Title: "Flowers" - Artist: "Miley Cyrus" - State: Playing (pause icon shown) - Progress: ~40% filled --- ## Video Player (Now Playing — Video Mode) ### Overview Full-screen video playback within the Now Playing view, shown when the currently playing content includes a music video or podcast video episode. ### UI Elements **Video Viewport** - Full-screen video display (portrait or landscape) - Tap to show/hide playback controls overlay **Overlay Controls (visible on tap)** - Back/collapse button (top left) - Track title and artist (top center) - "..." more options button (top right) - Seek bar with timestamps - Play/Pause, Previous, Next buttons (center bottom) - Volume control - Full-screen toggle **Video Settings Button** - Navigates to `spotify:nowplaying:video-settings` **Ad Overlay (if ad playing)** - "Ad Playing" label (`ad_playing`) - Skip countdown: "Skip in %d" (`ad_delayed_skip_label`) - "Your [music/podcast] will continue after the break" (`ad_header_title_music` / `ad_header_title_podcast`) **Subtitles/Captions Toggle** - Accessible via video settings (`spotify:nowplaying:video-settings:subtitles`) ### Interactions - **Tapping video** — shows/hides control overlay; overlay auto-hides after a few seconds - Accessibility label: "Tap to show controls" (`ad_overlay_view_description`) - **Tapping settings** — opens Video Settings sheet - **Tapping subtitles** — toggles captions or opens subtitle language picker - **Rotating device** — video re-layouts to fill new orientation - **Entering PiP** — video continues playing in floating PiP window; controls hidden; tapping PiP restores full view ### Sample Data - Content: Beyoncé — "CUFF IT" (Official Music Video) - Duration: 4:02 - Current time: 2:15 - Subtitles: Off - Quality: Auto --- ## Video Settings ### Overview A settings sheet or screen for configuring video playback options such as quality and subtitles, accessible from the Now Playing video player. ### UI Elements **Header** - Title: "Video settings" (implied by `spotify:nowplaying:video-settings`) - Close button **Video Quality Row** - Label: "Video quality" - Current quality shown (e.g., "Auto", "360p", "720p") - Tapping navigates to `spotify:nowplaying:video-settings:video-quality` **Subtitles Row** - Label: "Subtitles / Captions" - Toggle or current language shown - Tapping navigates to `spotify:nowplaying:video-settings:subtitles` **Audio Language Row** - Label: "Audio language" - Current language shown - Tapping navigates to `spotify:nowplaying:video-settings:audio-language` **"Video disabled" info link** - Navigates to `spotify:nowplaying:video-disabled-info` if video is unavailable ### Interactions - **Tapping "Video quality"** — opens quality selection list; user picks a resolution; returns to settings - **Tapping "Subtitles"** — opens subtitle language picker - **Tapping "Audio language"** — opens audio track/language picker - **Tapping close** — dismisses the sheet; returns to video player ### Sample Data - Video quality: Auto (current) - Subtitles: Off - Audio language: English --- # Spotify Search & Discovery — Screen Specifications --- ## Search Home (Browse / Discover) ### Overview The user lands on the Search tab and sees a browse grid of content categories they can explore, plus a search bar at the top. ### UI Elements **Header/Toolbar** - Screen title: "Search" (or "Find" depending on variant) - Search bar with placeholder text: "Search…" (from `abc_search_hint`) - Microphone icon button for voice search (accessibility: "Voice search") **Search Input Area** - Text input field, placeholder: "Search…" - Clear button appears when text is present (accessibility label: "Clear query") - Submit/search button (accessibility label: "Submit query") - Voice search button (accessibility label: "Voice search") **Browse Categories Grid** - 2-column grid of category cards, each showing: - Category artwork/background image (fills the card) - Category name overlaid as bold text (e.g., "Pop", "Hip-Hop", "Podcasts", "New Releases", "Charts") - Cards have distinct background colors per category - Sections visible: Music, Podcasts & Shows, Audiobooks, Live, Charts, Browse All - Possible category entries (from code): Pop, Hip-Hop, Rock, Podcasts, Audiobooks, Charts, New Releases, Genres, etc. **Bottom Navigation Bar** - "Home", "Search", "Your Library", and "Premium" (or profile icon) tabs ### Interactions - Tapping the search bar focuses the input and transitions to the Active Search / Autocomplete screen - Tapping a category card navigates to that genre/category's browse page (e.g., a genre page with playlists, albums, and top tracks) - Tapping the microphone button opens voice search mode - Typing in the search bar triggers autocomplete suggestions in real time ### Sample Data Category grid examples: - "Pop" (pink gradient) - "Hip-Hop" (orange gradient) - "Podcasts & Shows" (green) - "New Releases" (dark blue) - "Charts" (teal) - "Audiobooks" (gold) - "Live Events" (red) --- ## Active Search / Autocomplete ### Overview After tapping the search bar, the user sees their recent searches and, as they type, live autocomplete suggestions appear. ### UI Elements **Header** - Back arrow (accessibility label: "Back" / "Navigate up") - Active search text input field (focused, keyboard visible) - Clear ("✕") button to clear the current query **Recent Searches Section** (shown before typing begins) - Section header: "Recent searches" - List of recent search entries, each showing: - Search query text - Clock/history icon - "✕" remove button to delete that entry - If no recents: empty state or omitted entirely **Autocomplete Suggestions List** (shown while typing) - Vertically scrollable list of suggested queries - Each row shows: - Magnifying glass icon - Suggested search term text - Arrow icon (to indicate it will execute the search) - Suggestions update in real time as the user types **Recent/Trending Section** (before typing, optional) - "Trending" section with popular search terms shown as chips or a list ### Interactions - Tapping a recent search item executes that search immediately and navigates to Search Results - Tapping the "✕" on a recent item removes only that item from history - Tapping an autocomplete suggestion executes the search and navigates to Search Results - Tapping the arrow on a suggestion opens full search results for that query - Pressing the keyboard "search" / "done" action submits the current typed query - Tapping the back arrow returns to Search Home without executing a search ### Sample Data Recent searches: "Taylor Swift", "Morning coffee playlist", "Crime Junkie podcast", "Radiohead" Autocomplete for "tay": "taylor swift", "taylor swift anti-hero", "taylor swift midnights", "taylor hendrix" --- ## Search Results ### Overview The user sees a tabbed results page showing all content types matching their query, with a prominent "Top Result" card at the top. ### UI Elements **Header** - Back arrow - Search query text in the input field (editable) - Clear button **Filter Tabs Row** (horizontally scrollable pills/chips) - "All", "Songs", "Artists", "Albums", "Playlists", "Podcasts & Shows", "Episodes", "Audiobooks", "Profiles", "Genres" — all derived from the navigation routes (SEARCH_SONGS, SEARCH_ARTISTS, SEARCH_ALBUMS, SEARCH_PLAYLISTS, SEARCH_PODCASTS_AND_EPISODES, SEARCH_EPISODES, SEARCH_AUDIOBOOKS, SEARCH_PROFILES) - Active filter pill is highlighted (white/green) **"All" Tab Content:** *Top Result Card* (large card at top) - Entity artwork (artist photo, album cover, or playlist image) - Entity name (bold, large text) - Type label below name (e.g., "Artist", "Album", "Song") - Play button in bottom-right corner of the card *Songs Section* - Section header: "Songs" - Vertical list of up to 4 track rows, each showing: - Track thumbnail (album art) - Track title (primary text) - Artist name (secondary text) - Explicit badge ("E") if applicable - "…" context menu button - "See all" link at the bottom of the section *Artists Section* - Section header: "Artists" - Horizontally scrollable row of circular artist cards, each showing: - Circular artist photo - Artist name below - "Artist" label *Albums Section* - Section header: "Albums" - Horizontally scrollable row of album cards, each showing: - Square album artwork - Album title - Artist name + release year *Playlists Section* - Section header: "Playlists" - Horizontally scrollable row of playlist cards: - Playlist artwork - Playlist name - Owner name (prefixed with "by", e.g., "by Spotify") *Podcasts & Shows Section* - Section header: "Podcasts & Shows" - Vertical list rows each showing: - Show thumbnail (square) - Show title - Creator / publisher name - "Podcast" or "Show" type label **Individual Filter Tab Content (e.g., "Songs" tab)** - Full scrollable list of matching tracks - Each row: album art thumbnail, track title, artist name, explicit badge if applicable, "…" context menu - List is paginated/infinite scroll **No Results State** - Centered illustration or icon - Primary message: "No results found for '[query]'" - Secondary message: "Check the spelling, or try a different keyword." - (Based on strings: `add_to_playlist_empty_view_search_title`, `add_to_playlist_empty_view_search_subtitle`) **Search Feedback Dialog** (accessible from a menu or prompt) - Triggered by a "Give feedback" link in some search contexts - Routes to `DIALOG_SEARCH_FEEDBACK` ### Interactions - Tapping a filter tab pill reloads the results list filtered to that content type - Tapping the Top Result card navigates to that entity's page (artist profile, album, etc.) - Tapping a track row plays the track and opens the mini Now Playing bar - Tapping "…" on a track opens the track context menu (add to playlist, share, go to artist, etc.) - Tapping "See all" under a section navigates to a full results list for that type - Tapping an artist card navigates to the Artist profile page - Tapping an album card navigates to the Album page - Tapping a playlist card navigates to the Playlist page - Tapping a podcast/show card navigates to the Show/Podcast page ### Sample Data Query: "Billie Eilish" - Top Result: Billie Eilish (Artist card with photo, "Artist" label, Play button) - Songs: "bad guy", "Happier Than Ever", "Ocean Eyes", "Therefore I Am" - Albums: "HIT ME HARD AND SOFT" (2024), "Happier Than Ever" (2021), "When We All Fall Asleep…" (2019) - Playlists: "This Is Billie Eilish" by Spotify, "Billie Eilish Radio", "sad girl hours" - Related Artists: Khalid, Billie Eilish's brother Finneas, Lorde --- ## Search Results — Songs Filter ### Overview A full-screen scrollable list of songs matching the search query. ### UI Elements **Header** - Back arrow - Search bar showing the current query - "Songs" filter tab active **Sort / Filter Options** (optional, top of list) - Sort by: Relevance (default) **Track List** - Each track row contains: - Album art thumbnail (small square, ~50×50px) - Track title (bold) - Artist name (smaller, muted) - Explicit "E" badge (if applicable, described: `account_details_explicit_content_title`) - Playback duration (right-aligned) - "…" overflow/context menu button **Loading State** - Skeleton rows while loading **Empty / Error State** - Message: "Couldn't find "[query]"" with retry option ### Interactions - Tapping a track row begins playback and shows the mini Now Playing bar - Tapping "…" opens the track context menu (options: Add to playlist, Save to library, Share, Go to artist, Go to album, View credits, Add to queue, Report) - Scrolling to the bottom loads more results ### Sample Data Query: "love" - "Lover" — Taylor Swift (3:41) - "Love Story (Taylor's Version)" — Taylor Swift (3:57) - "Crazy in Love" — Beyoncé (3:56) - "Love Yourself" — Justin Bieber (3:38) - "What Is Love" — Haddaway (3:52) --- ## Search Results — Podcasts & Episodes Filter ### Overview A filtered view showing only podcast shows and individual episodes that match the search query. ### UI Elements **Header** - Back arrow, active search query in search bar - "Podcasts & Shows" filter tab active **Sub-filter pills** (horizontal scroll, below main tab) - "Shows", "Episodes" — to further narrow results - Optionally: "Videos" (from route SEARCH_PODCASTS_AND_EPISODES_VIDEOS), "Upload date: Last week" / "Last 24 hours" (from SEARCH_LAST_WEEK, SEARCH_LAST_24_HOURS) **Shows List** - Each show row: - Square show artwork - Show title (bold) - Publisher / creator name - "Podcast" type label - Follow/Save button (heart icon or "+" icon) **Episodes List** - Each episode row: - Square show artwork (small) - Episode title (bold, 2 lines max, ellipsized) - Show name (secondary text) - Publication date + duration (e.g., "Nov 14 · 45 min") - Download/save icon - Playback progress bar (if partially listened) - "…" context menu ### Interactions - Tapping a show navigates to the Show/Podcast page - Tapping an episode immediately begins playback and shows the Now Playing bar - Tapping "…" on an episode opens the episode context menu (Add to queue, Download, Share, Go to show, Mark as played) - Sub-filter pills refine the results list in place ### Sample Data Query: "true crime" - Shows: "Crime Junkie" by audiochuck · Podcast; "Serial" by This American Life · Podcast; "My Favorite Murder" · Podcast - Episodes: "MURDERED: Jennifer Servo" — Crime Junkie · Nov 18 · 28 min; "Update: Adnan Syed" — Serial · Oct 12 · 32 min --- ## Spotify Codes Scanner (Scannables) ### Overview The user sees a live camera viewfinder to scan a Spotify Code (a unique barcode-style code that links to any Spotify content), with options to cancel or select an image from photos. ### UI Elements **Full-Screen Camera Viewfinder** - Live camera preview occupying the full screen background - A centered scanning target area/frame overlaid on the viewfinder (rectangular or rounded rectangle guide) - Spotify-themed overlay/branding **Top Bar** - Cancel/close button ("✕") in the top-left corner, white icon (from code: white "X" icon drawn with `R.color.white`) - No title text in default mode; in social listening mode, the privacy notice text is visible **Bottom Controls** - "Select from photos" button — allows user to pick a photo containing a Spotify Code from their device gallery - *Hidden* in social listening mode (`button.setVisibility(GONE)`) **Social Listening Mode Variant** (when launched for social listening) - "Select from photos" button is hidden - Privacy notice text label is shown instead (from `R.id.social_listening_privacy_notice`) - Scanning hint text changes to: "scannables_social_listening_viewfinder_hint" (e.g., something like "Point your camera at your friend's Spotify Code") **Default Mode Hint Text** - Instructional text below the viewfinder frame (from `R.id.txt_scannable_instructions`), e.g., "Point your camera at a Spotify Code" **Progress Dialog** (shown while processing) - Title: (from `scannables_progress_dialog_title`, e.g., "Scanning…") - Message states: 1. While decoding: `scannables_progress_dialog_decoding` (e.g., "Decoding code…") 2. While contacting server: `scannables_progress_dialog_contacting_server` (e.g., "Finding content…") - Device vibrates briefly when a code is successfully detected (decoding complete) **Error Toast Messages** - If the code can't be retrieved: `scannables_cant_retrieve_scannable` (e.g., "Can't retrieve this Spotify Code") - For other errors: `scannables_error_message_toast` (generic error message) ### Interactions - Camera viewfinder auto-scans continuously for any Spotify Code in frame - When a valid code enters the frame: 1. The progress dialog appears with "Decoding code…" 2. Device vibrates 3. Message changes to "Finding content…" 4. On success: the screen closes and the linked Spotify content opens (e.g., a track, album, artist, or playlist page) 5. On failure: a toast error is shown and the scanner stays open - Tapping "Select from photos" (default mode only): opens the device photo gallery; user picks an image; the app decodes the Spotify Code from that image using the same flow - Tapping the Cancel/close "✕" button: closes the scanner and returns to the previous screen **Onboarding Screen** (shown first time, before camera permission granted) - If camera permission is not yet granted or the user hasn't seen onboarding, the app navigates to `ScannablesOnboardingActivity` (request code 10001) before showing the scanner - After granting permission, the scanner screen launches automatically ### Sample Data - Scanning a Spotify Code on a physical poster → opens "Blinding Lights" by The Weeknd - Scanning a code from a friend's phone screen → opens the "Chill Hits" playlist by Spotify - Scanning a code on an album sleeve → opens the album "GUTS" by Olivia Rodrigo --- ## Genre / Category Browse Page ### Overview After selecting a category from the Search home grid, the user sees a curated page of playlists, albums, shows, and editorial content within that genre or category. ### UI Elements **Header** - Back arrow - Category name as page title (e.g., "Pop", "Hip-Hop", "Podcasts") - Category-specific header color/background (matching the browse grid card color) **Content Sections** (vertically stacked, each with a section header and horizontal scroll) *Featured / Editorial Row* - Large banner card at top (full-width or near full-width) - Editorial playlist or Spotify-curated content - Title + subtitle text overlaid on artwork *Playlists Section* - Section header (e.g., "Popular Playlists", "Editorial Picks") - Horizontally scrollable row of playlist cards: - Square artwork - Playlist name - Short description or follower count *New Releases Section* (for music genres) - Section header: "New Releases" - Horizontally scrollable album cards: - Album artwork - Album title - Artist name *Top Tracks / Chart Section* (optional) - Section header: "Top Tracks" or "Charts" - List or horizontal cards *Shows / Podcasts Section* (for podcast categories) - Section header: "Shows" - Show cards with artwork and name *Sub-Categories / Related Genres* - Pills or card row for related genres/moods (e.g., under "Hip-Hop": "Rap", "Trap", "R&B") ### Interactions - Tapping a playlist card navigates to the Playlist page - Tapping an album card navigates to the Album page - Tapping an artist navigates to the Artist profile - Tapping a show card navigates to the Podcast/Show page - Tapping a sub-category pill navigates to that sub-genre browse page - Tapping the Play button on a featured item begins playback ### Sample Data Category: "Hip-Hop" - Featured: "RapCaviar" playlist (large hero image) - Popular Playlists: "Most Necessary", "Get Turnt", "Gold School", "Feelin' Myself" - New Releases: "GNX" — Kendrick Lamar (2024), "Chromakopia" — Tyler, The Creator (2024) - Sub-categories: "Trap", "Old School", "Conscious Rap", "Latin Rap" --- ## Assisted Curation Search (Playlist Creation Search) ### Overview A search interface specifically for finding and adding songs, artists, albums, or shows when building an AI-assisted or manually curated playlist. ### UI Elements **Header** - Back/close button - Title: (contextual, e.g., "Add songs" or "Search") - Search input field, auto-focused with keyboard visible - Placeholder: "Search" (`add_blocked_content_search_placeholder`) **Filter Tabs** (horizontal scroll) - "Songs", "Artists", "Albums", "Playlists", "Episodes", "Shows" — each navigating to a sub-search (from ASSISTED_CURATION_SEARCH_SONGS, _ARTISTS, _ALBUMS, _SHOWS, _EPISODES, etc.) **Results List** - For songs: track rows with checkbox or add icon - Track title, artist name, album art, duration - "Add" / checkmark toggle button on the right - For artists: artist rows with circular photo, name, follower count - For albums: album rows with artwork, title, year - For shows: show rows with artwork, name, episode count **Empty / No Results State** - Title: "No result found" (`add_to_playlist_empty_view_search_title`) - Subtitle: "Check the spelling, or try different keywords." (`add_to_playlist_empty_view_search_subtitle`) **Selected Items Indicator** (optional sticky footer or counter) - Shows number of selected items, e.g., "3 songs selected" - "Done" button to confirm selections ### Interactions - Typing in the search field queries all content types and shows results filtered by the active tab - Tapping a track/album/artist adds it to the playlist-in-progress (item shows a checkmark) - Tapping a checked item removes it from the selection - Tapping "Done" commits the selections and returns to the playlist creation screen - Tapping back without confirming discards any unsaved changes (may show a discard confirmation) ### Sample Data Search: "kendrick" - Songs tab: "HUMBLE." (4:43), "Not Like Us" (4:35), "DNA." (3:05) - Artists tab: Kendrick Lamar (57M followers) - Albums tab: "GNX" (2024), "Mr. Morale & The Big Steppers" (2022) --- ## AI Playlist Creator ### Overview The user interacts with a conversational prompt interface to describe the playlist they want, and Spotify's AI generates a personalized playlist for them. ### UI Elements **Header** - Back/close button - Title: (e.g., "Create playlist with AI" or "AI Playlist") **Prompt Input Area** - Large text input or multi-line field - Placeholder text inviting the user to describe what they want (e.g., "Describe your ideal playlist…") - Character counter or limit indicator - Microphone/voice input button (optional) **Send / Generate Button** - Prominent CTA button: "Create" or a send arrow icon **Generated Playlist Preview** (after AI responds) - Playlist artwork (auto-generated or user-selectable) - Playlist title (AI-suggested) - List of generated tracks: - Each track row: artwork, title, artist, duration, "…" context menu - "Regenerate" option or thumbs up/down feedback - "Save" / "Add to library" button **Re-Edit Option** (for existing AI playlists) - If opened via `PLAYLIST_CREATE_EUTERPE_REPORT_A_PROBLEM` or reedit route - Shows original prompt - Allows editing the prompt and regenerating **Report a Problem Link** - Small link: "Report a problem" navigates to a feedback/report screen ### Interactions - Typing a description and tapping "Create" sends the prompt and shows a loading state while the AI generates the playlist - The generated playlist appears with a preview of tracks - User can regenerate if not satisfied (new set of tracks generated from same or tweaked prompt) - Tapping "Save" adds the playlist to the user's library - Tapping a track in the preview plays it - Tapping "Report a problem" opens a feedback form specific to AI playlist generation ### Sample Data Prompt: "Songs for a rainy Sunday morning, mostly indie and acoustic, calm energy" Generated playlist: - "Skinny Love" — Bon Iver - "Re: Stacks" — Bon Iver - "First Day of My Life" — Bright Eyes - "The Night Will Always Win" — Manchester Orchestra - "Holocene" — Bon Iver Suggested title: "Rainy Sunday Acoustic" --- # Your Library & Playlists — Screen Specifications --- ## Your Library ### Overview The main library hub where users browse and manage all their saved music, podcasts, and playlists in one scrollable list. ### UI Elements **Header/Toolbar:** - Title: "My Library" (from `action_bar_add_to_library_context_accessibility`) - Top-right: Search icon (magnifying glass) — searches within library - Top-right: "+" / Add button — adds new content or creates a playlist - Profile avatar (top-left, or accessible via account switcher) **Filter Chips (horizontal scrollable row below header):** - "Playlists" — filter to show only playlists - "Albums" — filter to show only saved albums - "Artists" — filter to show only followed artists - "Podcasts & Shows" — filter to show only podcast subscriptions - "Downloaded" — filter to show only locally downloaded content **Sort/View Controls (below filter chips):** - Sort selector showing current sort order (e.g., "Recently added", "Alphabetical", "Creator") - Grid/List view toggle icon — switches between list rows and grid tiles **Library Item List (scrollable):** Each row shows: - Artwork thumbnail (square, ~48×48dp) — playlist cover, album art, artist photo, or podcast image - Title (bold, single line, truncated with ellipsis) - Subtitle: content type + owner/artist (e.g., "Playlist • Spotify", "Album • Taylor Swift", "Artist", "Podcast • Weekly") - Download indicator (arrow/checkmark icon) if content is downloaded offline - A "PIN required" badge (from `account_switching_user_pin_required_content_description`) for managed-account-restricted content **Special Items:** - "Liked Songs" row — purple gradient thumbnail with heart icon, "Playlist • [N] songs" - "Liked Episodes" row — purple thumbnail with heart icon (for podcast episodes) - "Your Episodes" row — podcast episodes saved for later **Empty State (if no items match filter):** - Illustration - Title + subtitle suggesting the user add content **Mini Now-Playing Bar (pinned at bottom):** - Track/episode artwork thumbnail - Title and artist name - Play/Pause toggle button - Next track button **Bottom Navigation Bar:** - Home | Search | **Your Library** (active, highlighted) | Premium (or Feed) ### Interactions - **Tap a playlist/album/artist/podcast row** → Opens the respective detail page (Playlist Detail, Album, Artist, or Podcast screen) - **Long-press any row** → Opens a context bottom sheet with options: Play, Add to queue, Add to playlist, Download, Share, Remove from library, etc. - **Tap the "+" button** → Opens a modal/sheet: "Create playlist", "Create playlist folder", "Find playlists to follow" - **Tap the Search icon** → Reveals an in-library search field (placeholder: "Find in Your Library") at the top, filters the list in real time - **Swipe down on list** → Scroll to reveal search bar (pull-to-filter gesture) - **Tap a filter chip** → Filters list to show only that content type; chip becomes active/highlighted; other chips remain tappable to switch - **Tap sort selector** → Opens a bottom sheet with sort options: "Recently added", "Recently played", "Alphabetical", "Creator", "Custom order" - **Tap grid/list toggle** → Switches between compact list rows and a 2-column grid of artwork tiles - **Tap the Mini Now-Playing bar** → Expands to full Now Playing screen ### Sample Data | Artwork | Title | Subtitle | |---|---|---| | 💜 gradient | Liked Songs | Playlist • 847 songs | | Custom collage | Chill Vibes | Playlist • You | | Album art | Midnights | Album • Taylor Swift | | Artist photo | The Weeknd | Artist | | Podcast cover | How I Built This | Podcast • NPR | | Green tiles | Discover Weekly | Playlist • Spotify | | Single color | My Running Mix | Playlist • You • Downloaded | --- ## Playlist Detail ### Overview A full-screen view of a single playlist showing its artwork, metadata, all tracks, and playback controls. ### UI Elements **Hero / Header Area (scrolls away):** - Large square playlist artwork (full-width or centered, ~60% of screen width) - Playlist title (large, bold): e.g., "Chill Vibes" - Owner line: "by [Username]" or "by Spotify" (from `add_to_playlist_by_owner`) - Track count + total duration (e.g., "32 songs, 2 hr 8 min") - Optional description text (1–2 lines, truncated) **Action Row (below header, sticky or near-sticky):** - Heart/Add icon — saves/unsaves the playlist to Your Library; filled when saved, outline when not (from `add_to_button_content_description_add` / `add_to_button_content_description_added`) - Download icon (arrow pointing down) — downloads for offline; shows filled checkmark when downloaded - Share icon (from `action_share_label`) - "···" More options button (from `action_more_options`) - **Shuffle button** (large, green/active color) — starts playlist in shuffle mode - **Play button** (large, solid green circle with triangle) — plays from the first track **Track List:** Each track row shows: - Track number or reorder handle (if in edit mode) - Track title (bold, single line) - Artist name(s) (gray, single line, comma-separated for multiple artists) - Explicit badge "E" if content is explicit (from `account_details_explicit_content_title`) - Track duration (right-aligned) - A "···" context menu icon on the right (visible on tap/long-press) - Currently playing indicator: animated equalizer bars replacing the track number for the active track **Sticky Playback Header (appears when scrolling past the hero):** - Compact playlist title - Shuffle + Play buttons remain accessible **Footer:** - "Add to playlist" button or "Find more" recommendation row - Recommended tracks section: "Recommended · Based on what's in this playlist" with a list of suggested tracks, each showing a green "+" button ### Interactions - **Tap the Play button** → Begins playing the playlist from track 1; mini player appears at bottom - **Tap the Shuffle button** → Begins playing in shuffle order; Shuffle mode activates - **Tap any track row** → Plays that track, then continues through the playlist - **Long-press a track row** → Opens context bottom sheet with: Play next, Add to queue, Add to playlist, Go to artist, Go to album, Share, Download, Remove from this playlist (if owner), Report - **Tap "···" on a track** → Same context bottom sheet - **Tap the Heart/Add icon** → Toggles save state; snackbar confirmation: "Added to Your Library" / "Removed from Your Library" - **Tap the Download icon** → Downloads all tracks; progress indicator replaces icon; snackbar: "Downloading" - **Tap Share icon** → Opens share sheet (from `action_share_content_description`) - **Tap "···" More (header)** → Bottom sheet: Add to queue, Go to radio, Edit playlist (if owner), Delete playlist, Report, Share - **Tap a recommended track "+"** → Adds to playlist; confirmation snackbar - **Swipe back / tap Back** → Returns to Your Library or previous screen ### Sample Data **Playlist:** "Late Night Drive" - By: johndoe_music - 24 songs · 1 hr 34 min - Description: "Perfect songs for long drives when the city goes quiet." **Tracks:** 1. Blinding Lights — The Weeknd · 3:20 2. Levitating — Dua Lipa · 3:23 3. Golden Hour — JVKE · 3:25 **[currently playing — equalizer bars]** 4. Sunflower — Post Malone, Swae Lee · 2:38 5. Let Her Go — Passenger · 4:14 --- ## Create / Edit Playlist ### Overview The screen where users create a new playlist or edit an existing one's title, description, and cover image. ### UI Elements **Header:** - Back/Close button (X or ←) - Title: "New playlist" (when creating) or "Edit playlist" (when editing) - "Save" button (top-right, bold, enabled once a name is entered) — from `add_to_playlist_button_done` - "Cancel" button or back gesture — from `add_to_playlist_button_cancel` **Artwork Section:** - Large square artwork preview (center, ~160×160dp); shows current cover or a default mosaic of track art - Pencil/edit overlay icon in the bottom-right corner of the artwork - Tapping artwork triggers the image picker **Edit Fields:** - Text input: "Name" (from `account_details_name_row_title`) — single-line, placeholder: "Add a name" - Text area: "Description" (optional) — multiline, placeholder: "Add an optional description" **"Add to playlist" refine section (from `add_to_playlist_refine_details_title`):** - Toggle: "Make private" — controls playlist visibility - Toggle: "Collaborative playlist" — allows friends to add tracks **Image Picker Sheet** (appears on artwork tap): - "Take photo" - "Choose from library" (device photos) - "Use generated art" (auto-generated cover from track mosaic) - "Remove photo" (if a custom photo is set) **Keyboard behavior:** Keyboard appears automatically when the screen opens if creating a new playlist. ### Interactions - **Tap artwork / pencil icon** → Opens image picker bottom sheet - **Select "Choose from library"** → Opens device photo picker (native system UI) - **Type in Name field** → Enables the Save button; character limit enforced (100 chars) - **Type in Description field** → Optional; shown on playlist detail page below the title - **Toggle "Make private"** → Playlist visibility changes; only visible to the owner if ON - **Tap "Save" / "Done"** → Saves changes; navigates back to playlist detail or Your Library; snackbar confirmation: "Playlist saved" - **Tap "Cancel" / Back** → Dismisses without saving; confirmation dialog if changes were made: "Discard changes?" with "Discard" and "Keep editing" buttons ### Sample Data - **Name:** "Summer Road Trip 2024" - **Description:** "All the songs we played on the way to the coast." - **Cover:** Mosaic of 4 album covers (Dua Lipa, Harry Styles, Olivia Rodrigo, Arctic Monkeys) --- ## Add to Playlist ### Overview A modal sheet or full-screen picker where users choose which existing playlist to add a track or album to, or create a new playlist. ### UI Elements **Header:** - Title: "Save to playlist" or "Add to playlist" - Close/back button (from `add_to_playlist_back_button_content_description`) **Search Field:** - Placeholder: "Find playlist" (from `add_to_playlist_find_playlist_hint`) - Clear button (X) when text is present (from `add_to_playlist_find_playlist_clear_button_content_description`) **"New playlist" Button (pinned at top of list):** - "+" icon + "New playlist" label (from `add_to_playlist_new_playlist_button_text`) **"Save in" / "Saved in" Section Headers:** - "Save in" label (from `add_to_playlist_save_in_section_header`) — shows playlists the item is NOT yet in - "Saved in" label (from `add_to_playlist_saved_in_section_header`) — shows playlists the item is ALREADY in, with a "Clear all" link (from `add_to_playlist_saved_in_section_header_clear_all`) **Playlist List:** Each row shows: - Playlist artwork thumbnail (square, ~48×48dp) - Playlist name (bold) - "by [Owner]" subtitle (from `add_to_playlist_by_owner`) - Checkmark icon on the right when the item is already in this playlist **Empty Search State:** - "No result found" title (from `add_to_playlist_empty_view_search_title`) - "Check the spelling, or try different keywords." subtitle (from `add_to_playlist_empty_view_search_subtitle`) **Empty Folder State:** - "This folder is empty" title (from `add_to_playlist_empty_view_folder_title`) - "Click New Playlist to create a new playlist in this folder." subtitle (from `add_to_playlist_empty_view_folder_subtitle`) **Bottom action:** - "Done" button (from `add_to_playlist_button_done`) — confirms selection and dismisses ### Interactions - **Tap "New playlist"** → Navigates to Create Playlist screen; on save, the track is automatically added to the new playlist - **Tap a playlist row** → Immediately adds the item; row gets a checkmark; snackbar: "Added to [Playlist Name]" - **Tap a playlist row already checked** → Removes the item; checkmark disappears; snackbar: "Removed from [Playlist Name]" - **Type in search field** → Filters playlist list in real time - **Tap "Clear all"** → Removes the item from all playlists it was saved in; confirmation may appear - **Tap "Done"** → Dismisses the sheet, returns to previous screen - **Tap Close/Back** → Dismisses without further action ### Sample Data **Adding track:** "Espresso" by Sabrina Carpenter **Playlists shown:** - ✅ Late Night Drive (already saved) - Morning Coffee — by You — 18 songs - Gym Hits — by You — 42 songs - Running Playlist — by You — 31 songs - Pop Favorites — by Spotify — 50 songs --- ## Library Search (Find in Library) ### Overview An in-library search experience that filters the user's saved content by keyword across all types. ### UI Elements **Header:** - Back arrow button - Active text input field with placeholder "Search…" (from `abc_search_hint`) - Clear button (X) — from `abc_searchview_description_clear` - Voice search button (microphone icon) — from `abc_searchview_description_voice` **Results List:** - Results appear immediately as the user types, filtered from library content only - Each result row shows: - Artwork thumbnail - Item title (bold) - Content type badge + artist/owner (e.g., "Song", "Playlist • You", "Artist", "Album") - Explicit badge "E" if applicable **Empty Results State:** - Text: "Couldn't find "[query]"" style message - Suggestion to check spelling **Recent Searches:** - Shown before typing starts (if any history exists) - List of recent search terms with clock icon - "Clear recent searches" link ### Interactions - **Type in search field** → Results filter live from the library - **Tap a result** → Opens that item (song plays, playlist/album/podcast opens its detail page) - **Tap X (clear)** → Clears query and shows all library items or recent searches again - **Tap back arrow** → Returns to Your Library main view - **Tap a recent search term** → Re-executes that search ### Sample Data **Query:** "taylor" **Results:** - 🎵 Anti-Hero — Taylor Swift (Song, in Liked Songs) - 📁 Taylor Swift Radio (Playlist • Spotify) - 👤 Taylor Swift (Artist, followed) - 💿 Midnights — Taylor Swift (Album, saved) - 💿 Folklore — Taylor Swift (Album, saved) --- # Premium & Payments Screens ## Premium Signup Screen ### Overview The user is presented with a web-based flow for upgrading to Spotify Premium, displayed within a native container that manages the signup experience. ### UI Elements **Header/Toolbar** - No traditional navigation toolbar; the screen uses an immersive full-screen layout - A close/back button (top-left or top-right) to exit the signup flow **Main Content Area** - A full-screen web view embedded within the native shell, loading Spotify's premium checkout experience - The web content renders the plan selection, pricing, and payment steps **Plan Selection Section** - Headline text presenting Premium plan options (e.g., "Go Premium") - Plan cards or list items, each showing: - Plan name (e.g., "Premium Individual", "Premium Duo", "Premium Family") - Monthly price (e.g., "$11.99/month") - A short description of what's included - A "Get started" or "Try free" call-to-action button - A promotional banner if a free trial is available (e.g., "Try 1 month free") **Payment Section** (after plan selection) - Payment method selector: - Credit/debit card option - Other payment methods depending on region - Card input fields: - Card number - Expiration date (MM/YY) - CVV/security code - Cardholder name - Billing address fields (if required) - A "Start" or "Subscribe" button to complete purchase - Price summary line (e.g., "You'll be charged $11.99/month after your free trial") - Legal disclaimer text linking to Terms of Service **Payment Method Icons** - Logos for accepted payment types (e.g., Visa, Mastercard) — the URL `https://wwwcheckout.spotifycdn.com/static/images/play-fop-logos/Visa.png` confirms Visa branding is shown - A recurring premium plan image is loaded from `https://checkout.spotifycdn.com/static/images/product-images/recurring_premium.png` **Footer** - Links to Spotify's Privacy Policy and Terms of Service - "Cancel anytime" reassurance text ### Interactions - **Tapping a plan card** → Highlights that plan and reveals payment entry below, or advances to a dedicated payment step - **Tapping "Try free" / "Get Premium"** → Initiates the checkout flow for the selected plan - **Filling in payment details** → Real-time card validation feedback (e.g., incorrect card number, expired date) - **Tapping "Subscribe" / "Start"** → Submits payment; shows a loading indicator while processing - On success → Navigates to a confirmation/welcome screen or returns to the main app with Premium unlocked - On failure → Displays an inline error message describing the issue (e.g., card declined) - **Tapping the close/back button** → Dismisses the signup screen and returns the user to the previous screen - **Tapping Terms of Service or Privacy Policy links** → Opens the relevant page in an in-app browser or external browser ### Sample Data - **Plan card example:** - Plan: "Premium Individual" - Price: "$11.99 / month" - Offer: "Try 1 month free, then $11.99/month" - Button: "Try free for 1 month" - **Plan card example:** - Plan: "Premium Duo" - Price: "$16.99 / month" - Subtitle: "2 Premium accounts for couples under one roof" - Button: "Get Premium Duo" - **Plan card example:** - Plan: "Premium Family" - Price: "$19.99 / month" - Subtitle: "Up to 6 Premium accounts" - Button: "Get Premium Family" --- ## Account Type & Plan Details Screen ### Overview The user views their current account type, subscription status, and plan membership information, and can manage certain account settings from here. ### UI Elements **Header/Toolbar** - Title: "Account" or the user's display name - Back navigation button (top-left) **Account Type Row** - Label: "Account type" - Value showing one of the following based on account state: - "Self-managed" - "Managed account (you control playback)" - "Spotify Free" - "Managed plan member" - "Spotify Kids (separate app)" - "Plan member" - "Account switch in progress" **Name Row** - Label: "Name" - Displays the user's current display name - Tappable — accessibility label: "Update name" **Profile Picture Section** - Circular profile photo thumbnail - Accessibility label: "Profile picture" - Tappable to change profile picture **Explicit Content Toggle** - Title: "Explicit content" - Description: "Content (labeled with the E tag) that may contain adult language or themes." - Toggle switch — ON/OFF - Disabled with message "Account transition is in progress" during account switching **Plan Membership Section** (for plan managers only) - Section showing plan members under the current user's plan - Each member row shows: - Member name and account type - A "Remove" button per member - Tapping "Remove" triggers a confirmation dialog: - Title: "Remove member" - Body: "Remove this person's access to your plan." - Buttons: "Remove" (destructive) / Cancel - Success snackbar: "Removed from your plan." **Account Privacy Link** - Tappable row labeled "Account Privacy" - Opens the Account Privacy page **Disabled State Banner** (during account transition) - Banner text: "Account transition is in progress" - All buttons are disabled while transition completes ### Interactions - **Tapping "Name" row** → Opens a name editing screen or inline edit field - **Toggling "Explicit content"** → Immediately updates the setting; blocked with a toast during account transition - **Tapping "Remove" next to a plan member** → Shows a confirmation dialog - Confirming → Removes the member; shows snackbar "Removed from your plan." - Cancelling → Dismisses the dialog - **Tapping "Account Privacy"** → Navigates to Account Privacy page - **Tapping back** → Returns to the previous screen (Settings or Profile) ### Sample Data - **Account type:** "Premium Duo" - **Name:** "Maria Gonzalez" - **Explicit content:** ON - **Plan members:** - "Carlos Gonzalez" — Managed plan member — [Remove] - "Sofia Gonzalez" — Managed plan member — [Remove] --- ## Parental Consent / QR Code Screen ### Overview A young listener (child) is shown a QR code that their parent or guardian must scan to grant parental consent, enabling account creation or access. ### UI Elements **Header/Toolbar** - No standard toolbar; uses a full-screen onboarding style layout - Possibly a back button (top-left) to go back **Title** - Large heading: "Ask your parent or guardian to scan this code" **QR Code Display** - A prominently displayed QR code image in the center of the screen - Accessibility description: "QR Code, use another camera to scan and continue" **Instruction Text** - Body text: "They should scan this code with the device where they normally use Spotify." **Alternative Option Section** - Subheading or separator line - Secondary instruction: "Or, your parent can log in here temporarily. You won't be able to access their account." - Button: "Parent login" (allows the parent to log in directly on the child's device) **Disclaimer Text** - Small text at the bottom: "Does your parent not have an account? They can sign up for free with either option." ### Interactions - **Parent scans QR code** → On the parent's device, the Spotify app or browser opens a consent flow; upon completion, the child's device receives confirmation and advances - **Tapping "Parent login"** → Opens a temporary parent login screen on the current device (child's device); after the parent authenticates, the child's flow resumes — the parent's account is not accessible to the child - **Tapping back** → Returns to the previous onboarding step ### Sample Data - The QR code encodes a unique session URL, e.g., linked to `https://www.spotify.com/account/parental-consent` with a session token - Child's name shown in context if available: e.g., "Set up an account for Lena" --- ## Account Switcher / Who's Listening Screen ### Overview Users on a shared device see a list of accounts and can tap their profile to start listening, or add a new account. ### UI Elements **Header** - Title: "Who's listening?" **Subtitle** - "Get personalized recommendations, playlists, and more." **Account List** - A grid or list of circular profile avatars, each showing: - Profile picture (or initial placeholder) - Display name below avatar - For accounts requiring a PIN: a lock icon with accessibility label "PIN required" - For disabled/no internet accounts: grayed out with accessibility label "No internet connection" - Accessibility label per item: "switch to [name]'s account" **Add Account Button** - A "+" avatar tile at the end of the list - Label: "Add account" **Young Listener Disclaimer** (shown in managed account context) - Small text: "On shared devices, young listeners can switch between managed accounts without a PIN. To access self-managed accounts, the plan manager will need to enter their PIN." **Logged-in Snackbar** - Appears after successful switch: "You're now logged in as [name]" ### Interactions - **Tapping an account avatar** → - If no PIN required: immediately switches to that account, shows snackbar "You're now logged in as [Name]", navigates to home - If PIN required: prompts a PIN entry dialog before switching - If no internet: shows an error state or toast - **Tapping "Add account"** → Opens the Add Account / Log In screen - **Tapping "Add a different account"** (if that option is present) → Opens login flow for a different Spotify account ### Sample Data - Account 1: Profile photo of a woman, name "Maria" - Account 2: Green initial circle "C", name "Carlos" - Account 3: Lock icon, name "Sofia" (PIN required) - Add account tile: "+" / "Add account" --- # Social & Group Listening — Screen Specifications --- ## Spotify Jam Onboarding (Host Welcome Screen) ### Overview A full-screen onboarding screen shown to the user who is starting a Spotify Jam session, explaining what Jam is and how to manage it before confirming they want to begin hosting. ### UI Elements **Header Area** - A custom illustrated header component (the "IPL Onboarding Header") spanning the top portion of the screen — this is likely a branded graphic or animation related to Spotify Jam (group listening), showing visual imagery of the social listening experience (e.g., multiple people listening together, music visualizer, or Jam branding artwork) **Body Text — Privacy / Info Notice** - Two paragraphs of explanatory text displayed together: 1. **Host information line:** Text from the string `social_listening_v2_onboarding_host_info_jam` — explains what being a Jam host means to the user (e.g., something like: "As the host, you control what plays for everyone in the Jam.") 2. **Turn off / devices line:** Text from the string `social_listening_v2_onboarding_host_info_turn_off_jam`, which includes an inline **Devices icon** (a small icon rendered inline with the text, matching the "DEVICES" icon from Spotify's icon set). This sentence describes how to turn off the Jam or manage devices. - On **portrait orientation**, the two text blocks are separated by two line breaks (stacked vertically) - On **landscape orientation**, the two text blocks are joined by a single space (inline on the same line) **Confirm Button** - Label: `"Got it"` (inferred from the event key `got_it_button` tracked on click) - Style: Primary action button, full-width or prominently sized, at the bottom of the screen - Behavior: Tapping confirms the user has read the onboarding info and dismisses/closes this screen ### Interactions - **Tapping "Got it" button:** - Logs a "got it button clicked" analytics event under the `host_onboarding` context - Dismisses and closes this onboarding screen entirely, returning the user to wherever they came from (typically the Now Playing view or a Jam invite flow) - If no username is associated (edge case), a warning is logged internally but the button still functions - **Screen appearance:** - The screen tracks an impression event labeled `host_onboarding` when it becomes visible - No back navigation gesture is explicitly handled — the screen is modal and must be dismissed via the button ### Sample Data - **Host info text (portrait layout):** > "As the host, you control what's playing for everyone in your Jam." > > "To turn off Jam, go to [Devices icon] Devices." - **Host info text (landscape layout):** > "As the host, you control what's playing for everyone in your Jam. To turn off Jam, go to [Devices icon] Devices." - **Button:** "Got it" - **Username context:** The screen receives the host's username (e.g., `"musiclover42"`) from the calling flow but does not necessarily display it visibly — it is used internally to identify the session host. --- ## Spotify Jam — Active Session / Live Sharing Dialog ### Overview A dialog or sheet shown during an active Spotify Jam session, allowing participants to view who is in the session and manage the live group listening experience. ### UI Elements *(Based on navigation route keys `live_sharing_session_dismissed`, `live_sharing_dialog`, and `session_id` present in the navigation state, plus the Jam-related class references)* **Session Header** - Spotify Jam branding/logo area — the Jam logo image loaded from `https://misc.spotifycdn.com/livesharing/meet_logo_large.png` - Session name or currently playing track info (title and artist) **Participant List** - A scrollable list of users currently in the Jam session - Each participant row shows: - Circular avatar / profile picture - Display name (e.g., "Sarah K.") - Listening indicator (e.g., animated sound bars or a "now listening" badge if they are actively connected) **Session Controls** - **Invite button** — allows the host or participants to invite more people to join the Jam (shares a link or QR code) - **Leave / End Jam button** — labeled differently depending on role: - Host sees: "End Jam" (terminates the session for everyone) - Participant sees: "Leave Jam" (removes only themselves) **Privacy / Info Footer** - Brief note about what Jam is and how listening is shared with participants ### Interactions - **Tapping "Invite":** - Opens a share sheet with a Jam invite link that others can tap to join - The link is deep-linkable into the Spotify app - **Tapping "Leave Jam" (as participant):** - Exits the user from the session - Dismisses the dialog and returns them to normal solo playback - Fires a `live_sharing_session_dismissed` navigation event - **Tapping "End Jam" (as host):** - Ends the session for all participants - All listeners return to their own individual playback contexts - Dialog is dismissed - **Tapping outside the dialog / swiping down:** - Dismisses the dialog without leaving the session (user remains in the Jam, dialog just closes) ### Sample Data - **Session:** "Jam with Alex, Maria, and 2 others" - **Now Playing:** "Espresso" by Sabrina Carpenter - **Participants:** - Alex R. (host) — 🎵 listening - Maria T. — 🎵 listening - Jake M. — 🎵 listening - You --- ## Spotify Jam — Join Session Screen ### Overview A screen or dialog presented to a user who has received a Jam invite link, showing them details about the active session and prompting them to join. ### UI Elements *(Inferred from `search_query`, `session_id`, `live_sharing_dialog` nav routes and the Jam onboarding/joining flow)* **Session Preview Card** - Host's profile picture (circular avatar) - Host's display name (e.g., "Alex is hosting a Jam") - Currently playing track artwork (album cover) - Track title and artist name - Number of current listeners (e.g., "3 people listening") **Action Buttons** - **"Join Jam"** — primary button, Spotify green, joins the user into the group session - **"Not now"** / **"Dismiss"** — secondary text button, declines the invitation without joining **Footer Note** - Small text explaining that joining the Jam means the host controls playback ### Interactions - **Tapping "Join Jam":** - User enters the active Jam session - Playback on their device switches to match what the host is playing - User is now listed as a participant in the host's participant list - Screen transitions to the Now Playing view, now showing the shared Jam context - **Tapping "Not now" or dismissing:** - Dialog/screen is closed - User's current playback is unaffected - The invite is ignored (no session joined) ### Sample Data - **Header:** "Alex is hosting a Jam" - **Now Playing:** "Flowers" by Miley Cyrus - **Listeners:** "You + 3 others" - **Join button:** "Join Jam" - **Decline button:** "Not now" --- # Profile & Account Management — Screen Specifications --- ## Account Picker ("Who's Listening?") ### Overview Users see a list of all accounts linked to the device and select which profile to use for the current session. ### UI Elements - **Header / Title:** Bold headline text reading **"Who's listening?"** centered at the top of the screen. - **Subtitle / Info text:** Secondary line below the title reading **"Get personalized recommendations, playlists, and more."** - **Account list (scrollable):** A vertical list of account rows. Each row shows: - Profile picture / avatar - Display name - Account type badge (e.g., "Managed plan member", "Spotify Free", "Spotify Kids (separate app)", "Self-managed") - If a PIN is required to switch to that account, a small **"PIN required"** indicator is shown on the row - If the account is unavailable due to no internet, a **"No internet connection"** indicator replaces the account type badge - If an account switch is currently in progress, the row shows **"Account switch in progress"** - **"Add account" button:** A text or button row at the bottom of the list labeled **"Add account"**, allowing the user to add a new profile to the device. - **Loading state:** While accounts load, the list area may show a loading indicator in place of the account rows. ### Interactions - **Tapping an account row:** Switches the active session to that account. If the account requires a PIN, a PIN entry prompt appears before switching. On success, a snackbar message appears: **"You're now logged in as [name]"** and the user is taken to the main app home screen. - **Tapping "Add account":** Opens the Add Account flow, navigating to a screen titled **"Add account"** / **"Add a different account"**. - **Tapping an account row when no internet:** No switch occurs; the row is shown as disabled with the label **"No internet connection"** used as the accessibility description. - **Back navigation:** Exits the picker and returns to the previous screen or exits the app. ### Sample Data - **"Aisha Lawson"** — Self-managed - **"Ben Lawson"** — Managed plan member - **"Lily Lawson"** — Spotify Kids (separate app) - **"Add account"** — bottom row --- ## Account Details ### Overview The user views and manages details for a specific account, including name, profile picture, account type, explicit content settings, and family plan membership controls. ### UI Elements - **Back navigation button** in the top-left - **Screen title:** "Account" or the account holder's name shown in the toolbar/header - **Profile picture row:** - Circular avatar image with accessibility label **"Profile picture"** - Tappable to change the photo - **Name row:** - Label: **"Name"** - Current display name shown as a value - Tap action labeled **"Update name"** (accessibility label: **"Update name"**) - **Account type row:** - Label: **"Account type"** - Value: one of **"Self-managed"**, **"Managed account (you control playback)"**, **"Spotify Kids (separate app)"**, **"Plan member"**, **"Managed plan member"**, or **"Account type: Account transition is in progress"** - **Explicit content row:** - Title: **"Explicit content"** - Description: **"Content (labeled with the [E] tag) that may contain adult language or themes."** - Toggle switch (ON / OFF) - **Remove member section** (only visible on managed/family plan accounts): - Section title: **"Remove member"** - Description: **"Remove this person's access to your plan."** - Button labeled **"Remove"** - **Disabled state banner** (shown when a transition is in progress): - Message: **"Account transition is in progress"** - All action buttons disabled ### Interactions - **Tapping the name row:** Opens an inline or separate name editor so the user can update their display name. - **Toggling explicit content:** Immediately updates the explicit content setting for this account. The toggle reflects the new state. - **Tapping "Remove":** Opens a confirmation dialog: - Title: **"Remove member"** - Body: **"Remove this person's access to your plan."** - Buttons: **"Remove"** (destructive) and **"Cancel"** - On confirm: a snackbar shows **"Removed from your plan."** and the member is removed from the list. - **Back navigation:** Returns to the account picker or family plan management screen. ### Sample Data - **Name:** "Ben Lawson" - **Account type:** "Managed account (you control playback)" - **Explicit content:** OFF --- ## Account Privacy ### Overview The user reads information about their Spotify account privacy and can request a download of their personal data. ### UI Elements - **Back navigation button** - **Page header title:** **"Account Privacy"** - **Body text:** > "We want to make it easy for you to manage and understand your account privacy, so you can use the Spotify service in the way you want. > > The controls on this page enable you to download a copy of your Spotify personal data." - **"Download my data" button** (or equivalent action button): allows the user to request a data download - **Links / legal text:** May include links to the Spotify privacy policy (`https://www.spotify.com/legal/privacy-policy`) ### Interactions - **Tapping "Download my data":** Initiates a data export request. The user may see a confirmation message or be directed to their email to complete the request. - **Tapping the privacy policy link:** Opens the Spotify privacy policy in the in-app browser or default browser. - **Back navigation:** Returns to the previous account settings screen. ### Sample Data *(Content is static informational text as shown above.)* --- ## Add Account ### Overview Users add a new Spotify account to the device so it can appear in the account picker. ### UI Elements - **Back navigation button / Close button** - **Screen title:** **"Add account"** or **"Add a different account"** - **Login options list** — each option is a full-width tappable row with an icon and label: - **"Email"** (accessibility label: "Email") - **"Facebook"** (accessibility label: "Facebook") - **"Google"** (accessibility label: "Google") - **"Apple"** (accessibility label: "Apple") - **"Phone number"** (accessibility label: "Phone number") - **"NAVER"** (accessibility label: "NAVER") *(shown in supported regions)* - **Disclaimer text:** > "While you are signed in, anyone else using this device will be able to access your account." - **"Don't have an account? Sign up" link** at the bottom (switches between log-in and sign-up modes) ### Interactions - **Tapping a login option (e.g., "Google"):** Launches the corresponding authentication flow (OAuth, Facebook SDK, Apple Sign In, etc.) in a sheet or browser. - **Completing authentication:** Closes the authentication sheet; the new account appears in the account picker and a snackbar confirms: **"You're now logged in as [name]"**. - **Tapping "switch to sign up":** Changes the form to account-creation mode. - **Back/close:** Returns to the account picker without adding an account. ### Sample Data - A user already logged in as "Aisha Lawson" wants to add "Ben Lawson's" account. They tap "Email," enter Ben's credentials, and are returned to the picker showing both accounts. --- ## Parental Consent — Share QR Code ### Overview A young listener's device shows a QR code that a parent or guardian must scan from their own device to grant parental consent. ### UI Elements - **Screen title:** **"Ask your parent or guardian to scan this code"** - **QR code image:** Large centered QR code with accessibility label **"QR Code, use another camera to scan and continue"** - **Instruction text (primary):** > "They should scan this code with the device where they normally use Spotify." - **Divider / "Or" separator** - **Secondary instruction text:** > "Or, your parent can log in here temporarily. You won't be able to access their account." - **"Parent login" button:** A button labeled **"Parent login"** allowing the parent to log in directly on the child's device instead of scanning. - **Disclaimer text:** > "Does your parent not have an account? They can sign up for free with either option." ### Interactions - **Parent scans the QR code** with their own device: Opens the parental consent flow on the parent's device; once approved, the child's screen advances. - **Tapping "Parent login":** Opens a temporary login screen for the parent on the current device. The parent's account is not made persistently accessible to the child. - **Completing parental consent:** Advances the child's account to the appropriate account state and returns to the main app. - **Back navigation:** Cancels the consent request and returns the child to the previous step in onboarding/account setup. ### Sample Data - Child account: "Lily Lawson" (age-restricted, awaiting parental consent) - Parent: logs in temporarily as "Aisha Lawson" on the same device to grant consent --- ## Account Switching — PIN Entry ### Overview When a user attempts to switch to an account that is protected by a PIN, a PIN entry prompt appears before access is granted. ### UI Elements - **Title / prompt text:** Indicates the account being accessed (e.g., the account name or a generic prompt to enter PIN) - **PIN input field:** Numeric input (typically 4 digits), masked for privacy - **Accessibility label on the PIN field:** **"PIN required"** - **"Confirm" / "Submit" button** - **"Cancel" button:** Dismisses the prompt and returns to the account picker - **Error state:** If the PIN is incorrect, an inline error message is shown and the field is cleared ### Interactions - **Entering the correct PIN and tapping "Confirm":** The account switch completes; the user is taken to the home screen as the new account, with snackbar: **"You're now logged in as [name]"**. - **Entering an incorrect PIN:** Error message displayed; the PIN field is cleared for re-entry. - **Tapping "Cancel":** Returns to the account picker with no account switch. ### Sample Data - Attempting to switch to "Aisha Lawson (Self-managed)" which is PIN-protected - Correct PIN: 4-digit numeric code set by the plan manager --- ## Young Listener Account — Shared Device Notice ### Overview On a shared device, an informational banner or screen explains the PIN rules for young listeners switching between account types. ### UI Elements - **Informational text:** > "On shared devices, young listeners can switch between managed accounts without a PIN. To access self-managed accounts, the plan manager will need to enter their PIN." - **OK / Dismiss button** ### Interactions - **Tapping "Dismiss" or "OK":** Closes the notice and returns the user to the account picker or the screen they came from. ### Sample Data *(Static informational content as above.)* --- # Ads & Promotions — Screen Specifications --- ## Audio Ad Break Screen ### Overview The user sees a full-screen (or overlay) ad interstitial between tracks, informing them that their music or podcast will resume after a brief ad break, with ad content and optional skip controls. ### UI Elements **Header / Context Banner** - Text: "Your music will continue after the break" (for music context) or "Your podcast will continue after the break" (for podcast context), or "Enjoy this playlist with limited ads, after a message from [Sponsor Name]" for sponsored contexts - "Ad Playing" label displayed prominently while ad audio is active **Ad Content Area** - Advertiser branding / artwork image (full-width) - Ad title / tagline text - Sponsored label or advertiser name **Skip Control** - Countdown label: "Skip in [N]" (e.g., "Skip in 5") while the skip delay is active — not tappable yet - Once the delay expires, a tappable "Skip" button appears **Ad Feedback Button** - A small "tell us about this ad" or thumbs-down action visible during/after the ad **Footer** - "FEWER ADS" badge (shown to users with a qualifying plan or offer), with accessibility label "Fewer ads" - Progress bar showing how far through the ad break the user is **"Fewer Ads" Badge** - Label: "FEWER ADS" - Accessibility: "Fewer ads" --- ### Interactions - **Skip button (after countdown):** Skips the current ad and returns to music/podcast playback. Only becomes interactive after the countdown timer finishes. - **Skip in N countdown:** Non-interactive countdown label; updates every second (e.g., "Skip in 5" → "Skip in 4" → … → "Skip"). - **Ad image / CTA area tap:** Opens the advertiser's click-through URL in an in-app browser or external browser. - **Ad feedback button:** Opens the Ad Feedback Sheet (see below). - **Ad finishes naturally:** Music or podcast playback resumes automatically; screen is dismissed with no transition animation. --- ### Sample Data - Header text: "Your music will continue after the break" - Advertiser: "Nike" - Ad tagline: "Just Do It — Shop the new Air Max collection" - Skip countdown: "Skip in 5" - Badge: "FEWER ADS" --- ## Video Ad Overlay Screen ### Overview The user sees a full-screen video advertisement overlay that plays over the app before returning to their content. ### UI Elements **Video Player Area** - Full-screen video playback - Overlay description text: "Tap to show controls" (accessibility label `ad_overlay_view_description`) **Playback Controls (revealed on tap)** - Mute/unmute toggle - Skip countdown label: "Skip in [N]" while unskippable - Skip button: becomes active after countdown completes **Ad Attribution** - Small advertiser name or logo - "Ad Playing" status label **Skip / Close Button** - Countdown label while unskippable - Tappable "Skip" once timer expires **Ad Feedback (optional)** - Thumbs-down or feedback icon --- ### Interactions - **Tap anywhere on video:** Reveals or hides playback controls - **Mute button:** Toggles audio on/off for the video ad - **Skip button (after countdown):** Dismisses the video ad and resumes content; screen closes with no transition animation - **Video completes naturally:** Screen is dismissed, content playback resumes ### Sample Data - Advertiser: "Spotify Premium" - Ad headline: "No ads. No limits. Try Premium free." - Skip countdown: "Skip in 3" --- ## Ad Feedback Sheet ### Overview A bottom sheet or dialog that appears when the user taps the feedback/dislike button on an ad, allowing them to report why they dislike the current ad. ### UI Elements **Sheet Header** - Title: "Tell us more about this ad" (neutral) or a positive variant prompt - Subtitle: "This helps improve ads on Spotify." **Reason List (single-select)** Negative feedback options: - "It's not relevant to me" - "I'm getting this ad too often" - "I think the content was unpleasant" - "I think the content was offensive" - "I just don't like this ad" Positive feedback options (shown in alternate flows): - "It's relevant to me" - "I'm interested in this brand" - "I'm interested in this product" - "The content was enjoyable" - "It helped me discover something new" **Confirmation / Dismiss** - After selecting a reason, the sheet closes and a confirmation message appears: "Thanks. This helps improve ads on Spotify." (or for in-feed ads: "Thanks. We'll adjust your ad experience.") --- ### Interactions - **Tap a reason:** Selects that reason and immediately submits feedback; sheet dismisses - **Tap outside sheet / swipe down:** Dismisses sheet without submitting feedback - **Post-submission:** A brief toast/snackbar appears with the confirmation text, then disappears ### Sample Data - Title: "Tell us more about this ad" - Subtitle: "This helps improve ads on Spotify." - Selected reason: "I'm getting this ad too often" - Confirmation: "Thanks. This helps improve ads on Spotify." --- ## App Open Ad Screen ### Overview A full-screen interstitial that appears when the user first opens Spotify, showing a brief ad before the app's main content becomes accessible. ### UI Elements **Background / Branding** - Spotify logo centered - Accessibility label: "Spotify Logo" **Ad Message** - Text: "Spotify starts after this brief ad" **Ad Content** - Advertiser image or animated asset (full-screen) - Advertiser name / tagline **Skip / Timer** - Countdown or auto-dismiss once ad completes **Progress Indicator** - Visual progress bar or countdown timer indicating time remaining before app content loads --- ### Interactions - **Ad plays to completion:** Automatically navigates to the Spotify home/main screen with no user action required - **Skip button (if available after countdown):** Skips the ad and proceeds to the main app screen immediately - **Tap ad CTA area:** Opens advertiser link in browser ### Sample Data - Message: "Spotify starts after this brief ad" - Advertiser: "Samsung" - Tagline: "Galaxy S25 — Discover what's next" --- ## Promoted Playlist / Sponsored Context Banner ### Overview An inline banner or card appearing within the user's feed or playlist view, indicating the current listening context is sponsored by an advertiser and will include limited ads. ### UI Elements **Banner / Card** - Sponsor attribution text: "Enjoy this playlist with limited ads, after a message from [Brand Name]" - Advertiser logo or image - "FEWER ADS" badge (where applicable) **CTA Button (optional)** - "Learn more" fallback label linking to advertiser content **Dismiss / Interaction Area** - Tapping the banner navigates to ad content or advertiser page --- ### Interactions - **Tap banner:** Opens advertiser's destination URL or campaign content - **"Learn more" button:** Opens advertiser URL in in-app browser - **Dismiss (if available):** Collapses or hides the banner; returns to normal playlist view ### Sample Data - Banner: "Enjoy this playlist with limited ads, after a message from Coca-Cola" - Badge: "FEWER ADS" - CTA: "Learn more" --- ## Ad Carousel / Image Ad Unit ### Overview A horizontally scrollable carousel of ad images embedded in the home feed or browse screen, showing a series of sponsored cards the user can swipe through. ### UI Elements **Carousel Container** - Multiple image cards displayed horizontally, scrollable left/right - Each card has an accessibility label: "Image [N] of [Total], [Description]." (e.g., "Image 1 of 3, Nike Air Max campaign.") **Individual Card** - Full-bleed ad image - Advertiser name / tagline overlay - Page indicator dots showing current position **CTA / Tap Target** - Tapping a card opens the advertiser destination --- ### Interactions - **Swipe left/right:** Advances through carousel cards; page indicator updates - **Tap card:** Opens advertiser URL in browser or in-app web view - **Auto-advance:** Cards may auto-scroll on a timer ### Sample Data - Card 1: "Image 1 of 3, Nike — Shop the Air Max 95" - Card 2: "Image 2 of 3, Apple Music — Try 3 months free" - Card 3: "Image 3 of 3, Samsung — Galaxy S25 Ultra" --- ## Ad Preferences / Partner Preferences Screen ### Overview A web-based screen (loaded in an in-app browser or webview) where users can manage their ad personalization settings and opt out of interest-based advertising on Spotify. ### UI Elements **Page Header** - Title: "Account Privacy" or ad preferences heading - Back navigation button **Content (webview)** - Loaded from `https://www.spotify.com/account/ads/` - Explains how Spotify uses data to personalize ads - Opt-out toggles or preference controls rendered by the web page **Navigation** - "Open in default browser" option (accessible via share/overflow menu) --- ### Interactions - **Toggle ad personalization (web controls):** Updates user's ad preference settings on the Spotify account - **Back button:** Returns to previous app screen - **"Open in default browser":** Launches device browser at the same URL ### Sample Data - Page URL: spotify.com/account/ads/ - Description: "We want to make it easy for you to manage and understand your account privacy, so you can use the Spotify service in the way you want." --- # Live Events & Stories — Screen Specifications --- ## On Tour Legal Disclosure ### Overview A full-screen informational screen that presents a legal disclosure to the user before they can access live event or concert content, requiring them to acknowledge tour-related legal terms. ### UI Elements **Header / Toolbar** - Back/close button (X icon, top-left) — navigates away and dismisses the screen - No title text in the toolbar itself; content title is part of the main body **Main Content Area** - Scrollable body containing the legal disclosure text for live events ("On Tour" disclosure) - The disclosure is rendered via a Spotify-hosted web view at the URI `spotify:live-legal-disclosure` - Legal text explains terms and conditions related to ticket sales, live events, or on-tour concert campaign content - Spotify branding / logo may appear as part of the webview header **Navigation / Action Buttons** - No explicit "Agree" or "Continue" button is shown in this minimal wrapper — the webview itself manages any acceptance actions - Pressing the system Back button or the toolbar close button dismisses the screen and returns the user to the previous screen **Toolbar Close Icon** - Rendered using the Spotify icon font at 24 dp - Color: white/light on dark background (consistent with Spotify's dark theme) ### Interactions | Element | Action | Result | |---|---|---| | Back button (hardware or toolbar X) | Tap | Closes/finishes the screen; returns to the previous screen (e.g., Artist Concerts, Event listing) | | Webview content | Scroll | Scrolls through the legal disclosure text | | Any in-webview buttons (e.g., "Accept", "Continue") | Tap | Handled internally by the webview; may navigate deeper into the concert/live event flow | **Navigation Flow:** - This screen is entered when the user attempts to access live event or on-tour content that requires a legal acknowledgment (e.g., tapping on a concert campaign or ticket-sale entry point from an artist page or Events Hub). - After the user closes or completes the disclosure, they are returned to the calling screen (artist page, concerts hub, etc.). ### Sample Data > **Legal Disclosure — Live Events** > > By continuing, you acknowledge that ticket purchases are subject to Spotify's [Ticket Sale Terms](https://www.spotify.com/legal/ticket-sale-terms/). Prices and availability are set by third-party sellers and are subject to change. Spotify is not responsible for the accuracy of event listings. Events may be cancelled or postponed; refund policies are determined by the event organizer. --- ## Concerts / Live Events Hub ### Overview A browsable hub screen showing upcoming concerts and live events near the user, organized around artists the user follows and events relevant to their listening history. ### UI Elements **Header / Toolbar** - Screen title: "Concerts" (inferred from `mod0.CONCERTS` / `acw.a(8)` = `"concert_campaign"`, `acw.a(11)` = `"event"`) - Share icon button (top-right) — shares the hub or a specific event link - Context menu button (three dots / "More" icon, top-right) **Location / City Row** - A row showing the user's current city or a manually selected city (e.g., "New York, NY") - Tapping opens the City Search screen to change the location - Small location-pin icon to the left of the city name **Section: Upcoming Concerts for Artists You Follow** - Horizontal or vertical scrollable list of artist cards - Each card shows: - Artist photo or avatar (circular) - Artist name (e.g., "Taylor Swift") - Upcoming event count badge (e.g., "3 upcoming shows") - Tapping an artist card opens the Artist Concerts sub-screen **Section: Events Near You** - Vertical list of event rows - Each event row shows: - Event artwork / venue image (square thumbnail, ~56 dp) - Event/concert name (e.g., "The Eras Tour – Night 2") - Artist name (e.g., "Taylor Swift") - Date and city (e.g., "Sat, Aug 10 · Madison Square Garden, New York") - A "Tickets" or "Get Tickets" pill button (green, Spotify-styled CTA) - Tapping the row opens the Concert Detail screen - Tapping "Get Tickets" opens the Concert Webview (third-party ticket seller) **Section: Concert Campaigns** - Horizontal card carousel - Each card shows: - Promotional campaign image (wide aspect ratio ~16:9) - Campaign title (e.g., "Summer Arena Tour 2025") - Subtitle text (e.g., "Featuring Arctic Monkeys, Wet Leg") **Empty State** (if no events are found nearby) - Illustration or icon (e.g., a map pin with a music note) - Title: "No concerts nearby" - Subtitle: "Try changing your location to see shows in other cities." - Button: "Change location" **Loading State** - Skeleton placeholders for the event rows and section headers ### Interactions | Element | Action | Result | |---|---|---| | Location row | Tap | Opens City Search screen (`concerts/citysearch`) | | Artist card | Tap | Opens Artist Concerts screen (`concerts/artist`) | | Event row | Tap | Opens Concert Detail screen (`concerts/concert`) | | "Get Tickets" button | Tap | Opens ticket purchase webview (`concerts/concert/webview`) | | Concert Campaign card | Tap | Opens Concert Campaign screen (`concerts/campaign`) | | Share button | Tap | Opens share sheet to share the events hub link | | Context menu (•••) | Tap | Opens a bottom sheet with options: "Share", "Copy Link" | ### Sample Data **Events Near You:** - 🎵 **Olivia Rodrigo** — GUTS World Tour · Fri, Sep 5 · Kia Forum, Los Angeles - 🎵 **Arctic Monkeys** — The Car Tour · Sat, Sep 6 · Hollywood Bowl, Los Angeles - 🎵 **Hozier** — Unreal Unearth Tour · Sun, Sep 7 · Greek Theatre, Los Angeles --- ## Artist Concerts ### Overview A dedicated sub-screen showing all upcoming (and optionally past) concert dates for a specific artist, allowing the user to browse shows by date and city and purchase tickets. ### UI Elements **Header / Toolbar** - Back arrow (top-left) — returns to the previous screen - Title: Artist name (e.g., "Billie Eilish") - Share icon (top-right) **Artist Banner** - Full-width artist hero image or banner photo at the top - Artist name overlaid in large bold text at the bottom of the banner - "Follow" / "Following" toggle button (pill, below the banner or overlaid) **Filter / Sort Bar** - Horizontal filter chips: - "All Dates" - "This Month" - "This Weekend" - Optional location filter chip: "Near Me" / "All Cities" **Concert Date List** - Vertical list of concert rows, grouped by month - Month header (e.g., "September 2025") in uppercase secondary text - Each row shows: - Date block (left side): day abbreviation + number (e.g., "FRI\n05") - Event details: - Venue name (e.g., "Madison Square Garden") - City and country (e.g., "New York, USA") - Support act if available (e.g., "with Gracie Abrams") - Right side: "Tickets" button (green pill) or "Sold Out" label (gray, disabled) - If the user has previously saved/bookmarked the event, a small bookmark icon appears on the row **No Upcoming Shows State** - Centered message: "No upcoming shows" - Subtext: "Follow Billie Eilish to get notified when new dates are announced." - Follow button ### Interactions | Element | Action | Result | |---|---|---| | Back button | Tap | Returns to Concerts Hub or Artist page | | Follow/Following button | Tap | Toggles follow state; snackbar: "Following Billie Eilish" | | Filter chip | Tap | Filters the list to matching dates; selected chip highlighted in white | | Concert row | Tap | Opens Concert Detail screen for that specific event | | "Tickets" button | Tap | Opens Concert Webview (external ticket seller) | | Share button | Tap | Opens share sheet for the artist's concert tour page | ### Sample Data **September 2025** - FRI 05 — Kia Forum, Los Angeles, USA · *with Chappell Roan* — **Tickets** - SAT 06 — Kia Forum, Los Angeles, USA — **Sold Out** - TUE 09 — Chase Center, San Francisco, USA — **Tickets** **October 2025** - THU 02 — United Center, Chicago, USA — **Tickets** - FRI 03 — United Center, Chicago, USA — **Tickets** --- ## Concert Detail ### Overview A detail screen for a specific concert event, showing full event information, the venue, lineup, and a prominent call-to-action to purchase tickets. ### UI Elements **Header / Toolbar** - Back arrow (top-left) - Share icon (top-right) - Context menu (•••) with options: "Copy Link", "Report a problem" **Hero Section** - Large event artwork or venue photo (full-width, ~220 dp tall) - Gradient overlay at the bottom of the image - Event name in large bold text overlaid (e.g., "The Eras Tour – Surprise Night") **Event Info Card** - Date and time (e.g., "Saturday, August 10, 2025 at 7:30 PM") - Venue name (bold): "Madison Square Garden" - Address: "4 Pennsylvania Plaza, New York, NY 10001" - Map thumbnail (static map image showing the venue location) — tapping opens Maps app - "Get Directions" link **Lineup Section** - Section header: "Lineup" - List of performing artists (each row): - Artist avatar (circular, ~40 dp) - Artist name - Role label if applicable (e.g., "Headliner", "Support") - Follow button (small, outlined) **Ticket CTA Section** - Large green button: "Get Tickets" - Subtext below button: "Tickets sold by [Ticketmaster / AXS / etc.]" - Price range if available (e.g., "From $45") - If sold out: grayed-out button labeled "Sold Out" with subtext "Check resale options" **Legal Disclosure Trigger** - Small text link at the bottom: "Ticket sale terms" - Tapping this opens the On Tour Legal Disclosure screen **About the Venue** - Collapsible section: "About the Venue" - Brief text description of the venue (e.g., capacity, location history) ### Interactions | Element | Action | Result | |---|---|---| | Back button | Tap | Returns to Artist Concerts or Concerts Hub | | Share icon | Tap | Opens share sheet for this event's link | | Map thumbnail / "Get Directions" | Tap | Opens native Maps app with venue as destination | | Artist row | Tap | Navigates to that artist's profile page | | Follow button on artist row | Tap | Follows/unfollows the artist | | "Get Tickets" button | Tap | Opens Concert Webview for ticket purchase | | "Ticket sale terms" link | Tap | Opens On Tour Legal Disclosure screen | | Context menu (•••) | Tap | Shows bottom sheet: "Copy Link", "Share", "Report a problem" | ### Sample Data **Event:** Taylor Swift — The Eras Tour (Final Night) **Date:** Sunday, December 8, 2025 at 7:00 PM **Venue:** Rogers Centre, 1 Blue Jays Way, Toronto, ON M5V 1J1 **Lineup:** - Taylor Swift (Headliner) - Gracie Abrams (Support) **Tickets from $89 — Get Tickets** (powered by Ticketmaster) --- ## City Search (Concert Location Picker) ### Overview A search screen that allows users to find and select a city to filter the Concerts Hub for live events in that location. ### UI Elements **Header / Toolbar** - Back arrow (top-left) — dismisses and returns to the Concerts Hub - Title: "Search location" - Search field (full-width, auto-focused on open): placeholder text "Search cities…" - Clear button (X) inside the search field — clears the typed query **Current Location Row** (above the search results list) - Location pin icon - Text: "Use current location" - Tapping requests location permission if not granted, then auto-selects the user's city **Recent Locations Section** (shown before user types) - Section header: "Recent" - List of recently selected cities, each row: - Location pin icon - City name and country (e.g., "Los Angeles, USA") **Search Results List** (shown while typing) - Each result row: - Location pin icon - City name (e.g., "New York") - State/country label (e.g., "New York, USA") - No-results state: - Text: "No results for "[query]"" - Suggestion: "Try a different city name." **Loading State** - Spinner or skeleton rows while fetching results ### Interactions | Element | Action | Result | |---|---|---| | Back button | Tap | Dismisses screen; no location change | | Search field | Type | Filters/queries city list in real time | | Clear (X) in search field | Tap | Clears typed text; returns to recent locations view | | "Use current location" row | Tap | Requests location permission; on grant, sets location to user's current city and returns to Concerts Hub | | Recent location row | Tap | Sets that city as the selected location; returns to Concerts Hub filtered to that city | | Search result row | Tap | Sets that city as the selected location; returns to Concerts Hub filtered to that city | ### Sample Data **Recent:** - Los Angeles, USA - Chicago, USA **Search results for "New":** - New York, USA - New Orleans, USA - Newcastle, UK - New Delhi, India --- ## Concert Webview (Ticket Purchase) ### Overview An in-app web browser that loads the external ticket-selling page for a specific concert, allowing the user to purchase tickets without leaving the Spotify app. ### UI Elements **Header / Toolbar** - Back arrow (top-left) — closes the webview and returns to Concert Detail - Title: Event name or ticket seller name (e.g., "Ticketmaster" or "Get Tickets") - "Open in browser" icon button (top-right) — opens the same URL in the device's default browser - Progress bar (thin, below the toolbar) — shows page load progress **WebView Content Area** - Full-width, full-height embedded browser rendering the ticket seller's website - Supports scrolling, tapping links, and form input (for purchase flow) - Standard webview back/forward navigation via swipe gestures or in-page controls **Loading State** - Centered Spotify-styled loading spinner while the page loads - If the page fails to load: - Error message: "Something went wrong" - "Try again" button - "Open in browser" link **Footer / Bottom Bar** (if applicable) - May display a persistent "Open in [Browser Name]" suggestion banner at the bottom on first load ### Interactions | Element | Action | Result | |---|---|---| | Back arrow | Tap | If webview can go back in history: navigates back within webview. If at root page: closes webview and returns to Concert Detail | | "Open in browser" icon | Tap | Opens the current URL in the device's default browser (Chrome, etc.) | | In-page links / buttons | Tap | Navigates within the webview (selecting tickets, entering payment info, etc.) | | "Try again" button (error state) | Tap | Reloads the ticket page | | Swipe back (gesture) | Swipe right | Goes back in webview history or closes if at root | ### Sample Data **Title:** "Get Tickets — Ticketmaster" **URL Loading:** `https://www.ticketmaster.com/event/taylor-swift-eras-tour-new-york-08102025` --- ## Concert Campaign ### Overview A promotional screen for a themed concert campaign (e.g., a festival, a multi-artist tour sponsorship, or a branded concert series), showing featured events grouped under a campaign identity. ### UI Elements **Header / Toolbar** - Back arrow (top-left) - Share icon (top-right) **Campaign Hero** - Full-width promotional banner image (16:9 or panoramic aspect) - Campaign title overlaid in large text (e.g., "Coachella 2025") - Optional tagline or subtitle (e.g., "See all artists performing this April") **Campaign Description** - Short paragraph text describing the campaign (e.g., "Discover artists playing at the world's biggest music festivals this season.") **Featured Events Section** - Section header: "Events" or "Shows" - Vertical list or 2-column grid of event cards: - Event artwork (square thumbnail) - Event name - Artist(s) performing - Date and city **Featured Artists Section** - Section header: "Artists in this campaign" - Horizontal scrollable row of artist avatar cards: - Circular artist photo - Artist name below - Tapping navigates to the artist's profile **CTA Section** - "Browse All Events" button (full-width, green) - Or individual "Get Tickets" buttons per event card ### Interactions | Element | Action | Result | |---|---|---| | Back button | Tap | Returns to Concerts Hub | | Share icon | Tap | Opens share sheet for the campaign page link | | Event card | Tap | Opens Concert Detail screen for that event | | "Get Tickets" on event card | Tap | Opens Concert Webview for ticket purchase | | Artist avatar | Tap | Opens the Artist profile page | | "Browse All Events" button | Tap | Expands or navigates to a full list of campaign events | ### Sample Data **Campaign:** "Global Citizen Festival 2025" **Tagline:** "Music for change — Central Park, New York · Sep 27, 2025" **Description:** "Join millions of Global Citizens as we bring together the world's biggest artists to end extreme poverty by 2030." **Featured Artists:** Beyoncé · SZA · Coldplay · H.E.R. · Davido **Events:** - Global Citizen Festival NYC — Sep 27, Central Park, New York - Global Citizen Festival Accra — Sep 28, Black Star Square, Accra --- ## Multi-Event Bottom Sheet ### Overview A bottom sheet that appears when a user taps on a map pin or location cluster that contains multiple events in the same city or venue, allowing quick browsing without leaving the current screen. ### UI Elements **Sheet Handle** - Thin drag handle at the top of the sheet (indicates it can be expanded or dismissed) **Sheet Header** - City/venue name (e.g., "3 events in Los Angeles") - Close button (X) on the right **Event List** - Scrollable vertical list of event rows (same design as the Concerts Hub event rows): - Event artwork thumbnail (square, ~48 dp) - Artist name (bold) - Event name / tour name - Date (e.g., "Sat, Sep 6") - Venue name - "Tickets" button (green pill, right-aligned) **Sheet Expand Indicator** - "See all events in Los Angeles" text link at the bottom of the list (if more than ~4 events) ### Interactions | Element | Action | Result | |---|---|---| | Drag handle | Drag up | Expands the sheet to near full-screen | | Drag handle | Drag down / Close X | Dismisses the sheet | | Event row | Tap | Opens Concert Detail for that event (sheet remains dismissible) | | "Tickets" button | Tap | Opens Concert Webview | | "See all events in [City]" | Tap | Navigates to a full filtered Concerts Hub view for that city | ### Sample Data **Sheet Title:** "3 events in Los Angeles" - **Olivia Rodrigo** — GUTS World Tour · Sep 5 · Kia Forum — **Tickets** - **Arctic Monkeys** — The Car Tour · Sep 6 · Hollywood Bowl — **Tickets** - **Hozier** — Unreal Unearth Tour · Sep 7 · Greek Theatre — **Tickets** --- # Kids & Family Screen Specifications --- ## Account Selector ("Who's Listening?") ### Overview Users see a list of accounts on the current device and select whose profile to use before listening begins. ### UI Elements - **Header text:** "Who's listening?" (displayed as the page title) - **Subheading:** "Get personalized recommendations, playlists, and more." - **Account list:** Scrollable vertical list of user profiles, each row showing: - Profile avatar/photo (circular thumbnail) - Display name (e.g., "Emma", "Dad", "Mia") - Account type badge where applicable (e.g., "Managed plan member", "Spotify Free", "Spotify Kids (separate app)") - PIN lock icon badge labeled "PIN required" for accounts that require a PIN to access - Disabled state with label "No internet connection" for accounts that can't be accessed offline - **"Add account" button:** Text button at the bottom of the list, labeled "Add account" - **Disclaimer text (shared devices with young listeners):** "On shared devices, young listeners can switch between managed accounts without a PIN. To access self-managed accounts, the plan manager will need to enter their PIN." ### Interactions - Tapping a standard account row immediately logs into that account and navigates to the Spotify home screen - Tapping an account requiring a PIN prompts a PIN entry overlay before proceeding - Tapping a disabled (no internet) account shows an error or does nothing - Tapping "Add account" navigates to the Add Account screen - The screen is navigated to automatically when the app detects multiple accounts, or is accessed from Settings ### Sample Data - **Emma** — Managed plan member - **Sarah** — Self-managed (Plan Manager) - **Jake** — Spotify Free - **Lily** (PIN required badge) — Managed plan member --- ## Add Account ### Overview Users initiate the process of logging into a new Spotify account to add it to the device's account list. ### UI Elements - **Page title:** "Add account" - **Informational text:** "Get personalized recommendations, playlists, and more." - **Login options:** Buttons or list items for each sign-in method: - "Continue with Google" - "Continue with Facebook" - "Continue with Apple" - "Continue with Email" - "Continue with Phone number" - **"Add a different account" section:** A separate entry point labeled "Add a different account" - **Disclaimer text:** "While you are signed in, anyone else using this device will be able to access your account." ### Interactions - Tapping a login method launches the corresponding authentication flow (OAuth, email/password, phone OTP, etc.) - On successful login, the new account is added to the account list and the user is taken to the home screen - Failure or cancellation returns the user to the Account Selector screen - A snackbar message may appear on failure: "Something went wrong. Have another go?" ### Sample Data - User is adding their child's Spotify account to a family tablet - After tapping "Continue with Email," a standard email + password login screen opens --- ## PIN Gate ### Overview A PIN entry screen that guards access to a specific account or parental control settings, requiring the user to enter a numeric PIN before proceeding. ### UI Elements - **Title/instruction:** Contextual heading (e.g., "Enter your PIN" or similar) - **PIN input area:** A numeric PIN entry field, typically displayed as a series of masked dots corresponding to PIN digits - **Numeric keypad:** On-screen digit buttons (0–9) plus a backspace/delete button - **Error state:** An error message displayed inline if the entered PIN is incorrect - **Cancel/back option:** A button or back gesture to dismiss the PIN gate and return to the previous screen ### Interactions - User taps digits on the keypad; each digit fills one dot in the PIN display - When the correct number of digits is entered, the app automatically validates - Correct PIN: User is granted access and navigated to the protected destination - Incorrect PIN: Dots shake or clear and an error is shown - Tapping Cancel or back navigates the user back without granting access ### Sample Data - A parent set up a 4-digit PIN "1234" (note: blacklisted passwords are filtered during setup) - Incorrect entry shows an error message inline beneath the PIN dots --- ## Change PIN ### Overview Allows the plan manager or parent to update the PIN used to protect parental controls and managed account access. ### UI Elements - **Page title:** "Change PIN" (or similar heading) - **Current PIN input field:** A numeric entry field for the existing PIN (masked dots + on-screen keypad) - **New PIN input field:** Entry for the desired new PIN - **Confirm new PIN field:** Repeat entry to confirm the new PIN - **Submit/Save button:** A primary action button (e.g., "Save" or "Done") - **Error/validation messages:** Inline messages if the current PIN is wrong, or if the new PIN and confirmation don't match ### Interactions - User enters current PIN; if incorrect, an error is displayed and flow does not proceed - User enters and confirms new PIN; if they don't match, an error is displayed - On successful change, a confirmation message (snackbar or inline) is shown and the user is returned to Settings or the Parental Controls screen ### Sample Data - Current PIN: ● ● ● ● - New PIN: ● ● ● ● - Confirm: ● ● ● ● - Success snackbar: "Your PIN has been updated." --- ## Parental Controls Settings ### Overview A settings screen where the plan manager (parent/guardian) manages content restrictions and account settings for young listeners on their plan. ### UI Elements - **Page title:** "Parental controls" - **Explicit content toggle row:** - Label: "Explicit content" - Description: "Content (labeled with the E tag) that may contain adult language or themes." - Toggle switch (ON/OFF) - **Manage blocked content row:** - Label: "Blocked artists & songs" - Navigates to the blocked content management screen - **Account details section per managed member:** - Member name row (label: "Name", tap to update) - Birthday row (tap to update) - Account type row showing "Managed account (you control playback)" - Remove member button labeled "Remove" with description: "Remove this person's access to your plan." - **Change PIN row:** Navigates to the Change PIN screen - **Parental consent section:** A row or button related to parental consent/approval (if applicable) ### Interactions - Toggling explicit content immediately applies the setting to the managed account - Tapping "Blocked artists & songs" navigates to the Manage Blocked Content screen - Tapping "Name" navigates to an inline editor for updating the managed account's display name - Tapping "Birthday" navigates to an inline birthday update screen - Tapping "Remove" triggers a confirmation dialog before removing the member from the plan - Tapping "Change PIN" navigates to the Change PIN screen ### Sample Data - Member: Lily, Age 9 - Explicit content: OFF - Blocked: 3 artists, 2 songs - Account type: Managed account (you control playback) --- ## Manage Blocked Content ### Overview Displays the list of artists and songs currently blocked for a managed (young listener) account, and allows the parent to remove blocks or search for new items to block. ### UI Elements - **Page title:** "Blocked artists & songs" (or "Blocked content") - **Search bar:** A search input labeled "Search" for finding new artists or songs to block - **Blocked items list:** Each row shows: - Content artwork (artist photo or album art thumbnail) - Name of the artist or song - Artist name for songs (secondary line) - Remove/unblock button (e.g., a trash icon or "Remove" label) - **Empty state:** - Title: "Search artists or songs" - Subtitle: "Choose music that this young listener won't be able to play." - **Error state:** - Title: "Couldn't load result" - Subtitle: "Try again?" - Button: "Reload" ### Interactions - Tapping the search bar opens the blocked content search screen - Tapping the remove button on a blocked item unblocks that artist or song immediately - Items unblocked disappear from the list with a brief animation - Pulling down on the list or tapping "Reload" refreshes the list ### Sample Data - **Blocked artists:** Eminem, Cardi B - **Blocked songs:** "WAP" by Cardi B ft. Megan Thee Stallion, "Lose Yourself" by Eminem --- ## Add Blocked Content (Search) ### Overview A search interface that lets the parent search for specific artists or songs to add to a managed account's blocked list. ### UI Elements - **Search bar:** Text input with placeholder "Search" and an "X" clear button labeled "Clear search" - **Search results list:** Each result row shows: - Thumbnail (artist photo or album art) - Primary name (artist or song title) - Secondary text (e.g., artist name for tracks) - An "Add" button or plus icon on the right - **Empty/zero state (before searching):** - Title: "Search artists or songs" - Subtitle: "Choose music that this young listener won't be able to play." - **No results state:** - Title: "Couldn't find "[search term]"" - Subtitle: "Try searching again using a different spelling or keyword." - **Error state:** - Title: "Couldn't load result" - Subtitle: "Try again?" - Button: "Reload" ### Interactions - Typing in the search bar triggers a live search for matching artists and songs - Tapping "Clear search" clears the input and returns to the zero state - Tapping "Add" on a result adds the artist or song to the blocked list; the button may change state to indicate it is blocked - Tapping back/cancel returns to the Manage Blocked Content screen without changes ### Sample Data - Search query: "drake" - Results: Drake (Artist), "God's Plan" by Drake, "Hotline Bling" by Drake, "One Dance" by Drake ft. WizKid --- ## Kid Account Creation — Education ### Overview An informational screen in the kid account creation flow that explains to the parent what a managed (young listener) account is and what controls they will have. ### UI Elements - **Illustration:** A full-width or centered image (sourced from Spotify's CDN, e.g., IAM_SeparateAccounts.png) depicting the concept of separate accounts or family listening - **Headline:** Contextual heading explaining the feature (e.g., "Separate accounts for your family" or similar) - **Body text:** 2–3 paragraphs explaining: - What a managed account is - That the parent controls what the child can play - That explicit content can be blocked - **Continue/Next button:** Primary CTA to move to the next step in the flow - **Back/Cancel option:** Navigation to exit or go back in the flow ### Interactions - Tapping "Continue" or "Next" advances to the next step (e.g., name entry, birthday entry, or parental consent) - Tapping back or the device back gesture returns to the previous step or exits the flow ### Sample Data - Illustration: Two cartoon profile icons representing a parent and child with the Spotify logo - Headline: "Separate accounts, separate listening" - Body: "Your child gets their own Spotify account. You control what they can play, and their listening is kept separate from yours." --- ## Kid Account Creation — Name Entry ### Overview A step in the kid account creation flow where the parent enters the child's name for their new managed account. ### UI Elements - **Step indicator:** Optional progress dots or step count at the top - **Headline:** "What's your child's name?" or similar - **Name text input field:** A single-line text input with appropriate label - **Continue/Next button:** Primary CTA, disabled until a valid name is entered - **Back button:** Returns to the previous step ### Interactions - User types the child's name; the Continue button becomes active when at least one character is entered - Tapping Continue advances to the next creation step (e.g., birthday) - Tapping back returns to the education/previous step ### Sample Data - Input: "Lily" - Continue button activates after "L" is typed --- ## Kid Account Creation — Birthday ### Overview A step in the kid account creation flow where the parent enters the child's date of birth to verify eligibility and set age-appropriate controls. ### UI Elements - **Headline:** "When's [child's name]'s birthday?" or similar - **Date picker:** A scrollable date selector (day, month, year) or three separate numeric input fields - **Informational note:** A short text explanation of why the birthday is needed (e.g., for age-appropriate recommendations and compliance) - **Continue/Next button:** Primary CTA, enabled when a valid date is entered - **Back button:** Returns to the previous step ### Interactions - User scrolls/selects a date of birth - Tapping Continue validates the date; if the age is outside the supported range, an error or age-gating message is shown - On a valid date, advances to the next step (e.g., PIN creation, parental consent) ### Sample Data - Date selected: September 14, 2016 - Child's name shown in heading: "When's Lily's birthday?" --- ## Kid Account Creation — PIN Setup ### Overview A step in the kid account creation flow where the parent creates a numeric PIN that will protect parental control settings and account switching. ### UI Elements - **Headline:** "Create a PIN" or "Set up a PIN for parental controls" - **PIN entry display:** A row of 4 masked dot indicators - **On-screen numeric keypad:** Digits 0–9 and a backspace key - **Instructional text:** Explains that this PIN will be used to access parental controls - **Back button:** Returns to the previous step ### Interactions - User taps digits on the keypad; each fills one dot - After 4 digits are entered, the app automatically advances to a PIN confirmation step - In the confirmation step, the user re-enters the same PIN; if it matches, the PIN is saved and the flow continues - If PINs don't match, both fields clear and an error is shown (e.g., "PINs don't match. Try again.") ### Sample Data - PIN display: ● ● ● ● - Confirmation prompt: "Enter your PIN again to confirm" --- ## Kid Account Creation — Parental Consent (Legal) ### Overview A step presenting the legal terms and consent required by the parent before a managed child account can be created, including privacy policy acknowledgment. ### UI Elements - **Headline:** "Before we continue…" or "Your consent is needed" - **Scrollable legal text:** Summary of the managed account terms and privacy policy with a link to the full document - Link: Spotify managed account privacy policy URL - **Checkbox or toggle:** "I agree to the terms" acknowledgment control - **Continue/Accept button:** Primary CTA, enabled only after agreement is checked - **Back button:** Returns to the previous step - **"Does your parent not have an account?" note** (if applicable in a child-led signup variant): "They can sign up for free with either option." ### Interactions - User scrolls through the legal text - Tapping the checkbox/toggle enables the Continue button - Tapping Continue submits the consent and moves to the next step (account submission) - Links within the text open the relevant legal pages in an in-app browser ### Sample Data - Privacy policy link: "Spotify Managed Account Young Listener Privacy Policy" - Checkbox label: "I confirm I am the parent or guardian and agree to these terms" --- ## Kid Account Creation — Submitting ### Overview A transitional loading screen shown while the new managed kid account is being created on Spotify's servers. ### UI Elements - **Spotify logo or animated loading indicator:** Centered on the screen - **Status text:** "Creating account…" or "Just a moment…" - No interactive controls; the user waits for the process to complete ### Interactions - On success, the user is automatically navigated to a confirmation/welcome screen or the account selector - On failure, an error screen is shown with a "Try again" option ### Sample Data - Loading spinner with text: "Setting up Lily's account…" --- ## Parental Consent QR Code (Share Parental Consent) ### Overview Displays a QR code for a child who needs parental consent — the parent scans it on their own device to approve account creation or changes. ### UI Elements - **Page title:** "Ask your parent or guardian to scan this code" - **Instructional text:** "They should scan this code with the device where they normally use Spotify." - **QR code image:** A large, centered QR code graphic with accessibility label "QR Code, use another camera to scan and continue" - **Alternative option text:** "Or, your parent can log in here temporarily. You won't be able to access their account." - **"Parent login" button:** A secondary button allowing the parent to log in directly on the current device - **Disclaimer text:** "Does your parent not have an account? They can sign up for free with either option." - **Back/Cancel option** ### Interactions - The QR code is displayed statically; the parent scans it using another device's camera or the Spotify app - Tapping "Parent login" navigates to a temporary parent login screen on the current device - Scanning the QR code on the parent's device opens the consent approval flow on that device - Once consent is granted (from either path), this screen automatically advances or shows a success state ### Sample Data - QR code links to: https://www.spotify.com/account/parental-consent - Child's name shown in subtitle context: "Lily is waiting for your approval" --- ## Graduation — Forced Lock Screen ### Overview A blocking full-screen overlay shown to a young listener whose account has been forced to graduate (transition to a self-managed account), preventing further use of the app until the graduation process is acknowledged. ### UI Elements - **Full-screen blocking overlay:** Covers the entire app, preventing interaction with any underlying content - **Spotify logo or illustration:** Centered graphic indicating this is an important notice - **Headline:** Context-specific heading explaining that the account needs to be graduated (e.g., "Time to take control of your account" or similar transition messaging) - **Body text:** Explanation that the account is being transitioned and playback has been stopped - **Primary CTA button:** Labeled to start or acknowledge the graduation process (e.g., "Get started" or "Continue") - **No dismiss/back option:** The screen cannot be bypassed; the user must engage with the graduation flow ### Interactions - Music/audio playback is automatically stopped when this screen appears - Tapping the CTA button launches the graduation flow (education → terms → account transition steps) - There is no way to dismiss this screen without completing or engaging with the graduation process - The back gesture is disabled or redirected back to this screen ### Sample Data - Headline: "You've grown up on Spotify" - Body: "It's time to manage your own account. Tap below to get started — it only takes a few minutes." - Button: "Get started" --- ## Graduation — Education ### Overview An informational screen in the account graduation flow that explains to the user what it means to graduate from a managed account to a self-managed account. ### UI Elements - **Illustration:** An image representing independence or growing up (e.g., from Spotify's CDN) - **Headline:** Explains the graduation concept (e.g., "You're becoming self-managed") - **Body text:** 2–3 paragraphs explaining: - What changes (they gain full control of their account) - What stays the same (their music, playlists, listening history) - Any parental oversight that is ending - **Continue/Next button:** Primary CTA to advance in the flow - **Back button / Close option** (only if not forced) ### Interactions - Tapping Continue advances to the graduation terms screen - If in the forced graduation flow, back navigation may be disabled or loop back to this screen ### Sample Data - Headline: "Your account is growing up" - Body: "You'll now manage your own Spotify account. Your playlists, liked songs, and listening history are all yours." --- ## Graduation — Terms & Conditions ### Overview A screen presenting the terms of service the user must accept as part of graduating to a self-managed Spotify account. ### UI Elements - **Page title:** "Terms and conditions" or "Review and accept" - **Scrollable terms text:** Full or summarized graduation/self-managed account terms with links to full legal documents - **Acceptance checkbox or button:** User must actively agree before proceeding - **Accept/Continue button:** Primary CTA, active only after acceptance - **Back button** ### Interactions - User scrolls through the terms - Tapping the checkbox enables the Continue button - Tapping Continue submits acceptance and moves to the next graduation step - Links within the terms text open in an in-app web browser ### Sample Data - Terms summary: "By continuing, you agree to Spotify's Terms of Service and Privacy Policy. You will become the sole manager of this account." - Link: "Read the full Privacy Policy" --- ## Graduation — Status Screens (Requested / Postponed / Approved / Rejected / Supervision) ### Overview A set of status-feedback screens shown to the user at different points in the graduation request lifecycle, each communicating the current state of their graduation request. ### UI Elements (common across all status screens) **Requested:** - Illustration representing a pending/waiting state - Headline: Something like "Request sent" - Body: Explanation that the plan manager has been notified and needs to approve - Optional "View request" or "Check status" button **Postponed:** - Headline: Explains the graduation has been postponed - Body: Reason or timeframe, with options to try again later or contact the plan manager **Approved:** - Celebratory illustration or Spotify branding - Headline: "Your graduation has been approved!" - Body: Confirmation that the account is now self-managed - CTA: "Start listening" or "Go to Spotify" **Rejected:** - Headline: Indicates the request was not approved - Body: Explains who rejected it (the plan manager) and what the user can do next - CTA: "OK" or "Go back" **Supervision:** - Headline: Indicates the account is under supervision mode - Body: Explains what supervision means for the account's capabilities - CTA to proceed or learn more ### Interactions - Each status screen has a primary button that navigates the user forward appropriately: - Approved → Home screen - Rejected / Postponed → Back to the managed account experience - Supervision → Informational flow or home - "View request" opens the view-request details screen showing the graduation request details ### Sample Data - **Requested:** "Your request has been sent to Sarah. She'll get a notification to review it." - **Approved:** "Welcome to your new account, Lily! You're now in charge." - **Rejected:** "Sarah has declined your graduation request. Talk to them for more details." --- ## Managed Account Details (Plan Manager View) ### Overview A screen where the plan manager views and edits the details of a specific managed (young listener) account on their plan. ### UI Elements - **Page title:** The managed member's name (e.g., "Lily's account") - **Profile picture:** Circular avatar labeled "Profile picture" (accessible) - **Name row:** - Label: "Name" - Current name value (e.g., "Lily") - Tap to edit, accessibility label: "Update name" - **Account type row:** - Label: "Account type" - Value: "Managed account (you control playback)" - **Explicit content row:** - Label: "Explicit content" - Toggle: ON/OFF - Description: "Content (labeled with the E tag) that may contain adult language or themes." - **Blocked content row:** - Label: "Blocked artists & songs" - Navigates to Manage Blocked Content - **Birthday row:** - Shows current birthday or age - Tap to update - **Remove member section:** - Title: "Remove member" - Description: "Remove this person's access to your plan." - Button: "Remove" (destructive action, red or secondary style) - **Account transition in progress state** (if applicable): - Disabled button labeled "Account transition is in progress" ### Interactions - Tapping the name row opens a name edit screen - Tapping the birthday row opens a birthday edit screen - Toggling explicit content applies immediately - Tapping blocked content navigates to the Manage Blocked Content screen - Tapping "Remove" shows a confirmation dialog: - Title: "Remove member" - Description: "Remove this person's access to your plan." - Buttons: "Remove" (confirm) and "Cancel" - On confirmation, a snackbar appears: "Removed from your plan." ### Sample Data - Name: Lily - Account type: Managed account (you control playback) - Explicit content: OFF - Birthday: September 14, 2016 - Blocked: Eminem, Cardi B --- ## Add Child Plan Member ### Overview A screen that allows a plan manager to add a new managed child account to their Premium Family plan. ### UI Elements - **Page title:** "Add to your plan" - **Informational illustration or icon** - **Body text:** Explains what adding a child plan member means (they get a managed Spotify account, parent controls playback) - **Primary CTA button:** "Add to plan" - **Cancel button:** "Cancel" - **Error state (if addition fails):** - Title: "Something went wrong" - Body: "Try again?" - Buttons: "Try again" and "Cancel" ### Interactions - Tapping "Add to plan" initiates the kid account creation flow (education → name → birthday → PIN → consent → submit) - Tapping "Cancel" dismisses the screen and returns to the plan management screen - On success, a confirmation is shown and the new member appears in the plan member list - On failure, the error state is shown with a retry option ### Sample Data - Heading: "Add a child to your plan" - Body: "They'll get a managed Spotify account. You'll be able to control what they can listen to." - Button: "Add to plan" --- # Settings & Notifications — Screen Specifications --- ## Settings (Main Settings Screen) ### Overview The user sees a list of all configurable settings categories for the Spotify app, from which they can navigate into any specific settings section. ### UI Elements **Header/Toolbar** - Title: "Settings" (the route `spotify:settings` confirms this as the top-level settings destination) - Back arrow to return to the previous screen **Settings Category List** Each row is a tappable navigation item with a label that routes to a sub-settings screen. Based on the routes registered in the app: - **Account** — routes to Account Settings - **Notifications** — routes to Notification Settings - **Quality** — routes to Playback Quality settings - **Playback** — routes to Playback settings - **Social** — routes to Social settings - **Connectivity** — routes to Connectivity settings - **Content Personalization** — routes to Content Personalization settings - **Ads** — routes to Ads preferences (`spotify:config:ads`) - **Parental Controls** — routes to Parental Controls settings - **Integrations** — routes to Integrations settings - **App Icon** — routes to custom app icon picker (`spotify:config:app-icon`) - **Business Information** — routes to Business Information (`spotify:settings:business-information`) - **About** — routes to About screen - **Search** — a search bar or search icon in the toolbar to search within settings (`spotify:settings:search`) **Search Bar (optional, inline or toolbar)** - Placeholder text: "Search…" (from `abc_search_hint`) - Tapping opens a filtered settings search view ### Interactions - Tapping any category row navigates to that section's dedicated settings screen. - Tapping the Search icon or row navigates to the Settings Search screen. - Back arrow returns to the main app (Home or wherever the user came from). ### Sample Data ``` Settings Account Notifications Quality Playback Social Connectivity Content Personalization Ads Parental Controls Integrations App Icon Business Information About ``` --- ## Settings Search ### Overview The user searches within the settings menu to quickly find a specific setting by keyword. ### UI Elements **Header/Toolbar** - Search input field (autofocused), placeholder: "Search…" - Clear ("×") button appears when text is entered (label: "Clear query") - Back arrow to return to the main Settings screen **Search Results List** - Each result row displays: - Setting name/label - Parent section name as secondary text (e.g., "Playback · Quality") - Empty state: no results message with suggestion to check spelling or try different keywords (based on similar empty-state patterns: "No result found" / "Check the spelling, or try different keywords.") ### Interactions - Typing in the search field filters settings in real time. - Tapping a result navigates directly to that settings sub-page. - Tapping "Clear query" clears the search field and resets results. - Back arrow dismisses search and returns to main Settings. ### Sample Data ``` [Search field: "notif"] Notifications Main Settings New Episode Notifications Notifications Push Notifications Notifications ``` --- ## Account Settings ### Overview The user manages their Spotify account details, subscription status, and linked services. ### UI Elements **Header/Toolbar** - Title: "Account" (route: `spotify:settings:account`) - Back arrow **Account Info Section** - Display name row — label: "Name", tapping opens an update flow; accessibility: "Update name" - Account type row — label: "Account type", value shown as one of: - "Spotify Free" - "Managed plan member" - "Self-managed" - "Spotify Kids (separate app)" - Profile picture — label: "Profile picture", tappable to update - Explicit content toggle — label: "Explicit content", description: "Content (labeled with the [E] tag) that may contain adult language or themes." **Plan / Membership Section** (if applicable) - Plan overview link **Danger Zone / Actions** - Log out button - Link to account privacy page (title: "Account Privacy", description about downloading personal data) ### Interactions - Tapping "Name" row opens the update name flow. - Tapping "Account type" may show account upgrade or management options depending on account type. - Tapping "Explicit content" toggles the setting on or off. - Tapping "Account Privacy" opens the Account Privacy page with a description: "We want to make it easy for you to manage and understand your account privacy…" and an option to download Spotify personal data. ### Sample Data ``` Account Name Taylor Chen Account type Self-managed Profile picture [Avatar image] Explicit content [Toggle: ON] Content labeled with the E tag that may contain adult language or themes. Account Privacy ``` --- ## Notification Settings (Main) ### Overview The user views and manages all push notification preferences for the Spotify app. ### UI Elements **Header/Toolbar** - Title: "Notifications" (route: `spotify:internal:preferences:push_notification`) - Back arrow **Global Toggle** - Master "Allow notifications" toggle — enables or disables all Spotify push notifications **Notification Category List** Each row shows a category name and optionally the current enabled/disabled state: - **Messages** — tapping opens the Messages notification category detail screen (`spotify:settings:notifications:category-details:notify-messages`) - **New Episode Notifications** — routes to `spotify:new-episode-notifications` - **Notification Categories** — routes to category list view (`spotify:internal:preferences:notification_settings:categories`) **System Settings Link** - "Open notification settings in system settings" link/button — takes the user to the Android system notification settings for the Spotify app ### Interactions - Toggling the master switch enables or disables all notification types. - Tapping a category row opens that category's detail screen. - Tapping the system settings link opens the device's notification settings for Spotify. ### Sample Data ``` Notifications Allow notifications [Toggle: ON] Messages → New Episodes → Categories → Open in system settings ``` --- ## Notification Category Details ### Overview The user views and toggles notifications for a specific notification category (e.g., Messages). ### UI Elements **Header/Toolbar** - Title: name of the category (e.g., "Messages") - Back arrow **Description** - Short text explaining what types of notifications this category includes **Toggle** - Enable/disable toggle for this specific notification category - Label: "ON" / "OFF" **Channel List** (if applicable) - Sub-channels within the category, each with their own toggle - Each row: channel name + toggle ### Interactions - Toggling enables/disables that notification category. - Sub-channel toggles work independently within the enabled category. - Back arrow returns to Notification Settings. ### Sample Data ``` Messages Notifications about new messages from friends and listening activity. Enable [Toggle: ON] Direct Messages [Toggle: ON] Group Messages [Toggle: ON] ``` --- ## New Episode Notifications ### Overview The user manages push notification settings for new podcast episodes from shows they follow. ### UI Elements **Header/Toolbar** - Title: "New Episode Notifications" (route: `spotify:new-episode-notifications` / `spotify:podcast-new-episode-notifications:settings`) - Back arrow **Global Toggle** - Label: "Notify me about new episodes" — master toggle for all podcast episode notifications **Show List** Each row represents a podcast show the user follows: - Podcast artwork (square thumbnail, ~48×48px) - Podcast name (bold, single line) - Latest episode info (secondary text, e.g., "New episode available") - Toggle to enable/disable notifications for that specific show **Empty State** - Shown when the user follows no podcasts - Text: "Follow podcasts to get notified about new episodes" ### Interactions - Master toggle enables/disables all new-episode notifications. - Per-show toggle individually enables or disables notifications for that show. - Tapping the show row (not the toggle) navigates to that podcast's show page. ### Sample Data ``` New Episode Notifications Notify me about new episodes [Toggle: ON] [artwork] The Daily [Toggle: ON] The New York Times [artwork] Stuff You Should Know [Toggle: OFF] iHeartPodcasts [artwork] Crime Junkie [Toggle: ON] audiochuck ``` --- ## Quality Settings ### Overview The user controls streaming and download audio quality settings. ### UI Elements **Header/Toolbar** - Title: "Audio quality" (route: `spotify:settings:quality`) - Back arrow **Streaming Quality Section** - Header: "Streaming" - Options listed (tappable radio-style rows): - "Automatic" — adjusts based on connection - "Low" — saves data - "Normal" - "High" - "Very high" (Premium only) - "Extreme" / "Lossless" (Premium only — accessible via `spotify:lossless:settings-sheet:quality`) - Currently selected option has a checkmark or highlighted state - Accessibility label: "Streaming quality [current value]" **Download Quality Section** - Header: "Download" - Same quality tier options as streaming - Only available for Premium users **Other Toggles** - "Download using cellular" — toggle to allow/disallow downloads on mobile data - Data Saver mode toggle — label: "Data saver" — reduces streaming quality automatically ### Interactions - Tapping a quality tier selects it (radio button behavior). - Tapping "Download using cellular" triggers a confirmation dialog: `spotify:internal:download-over-cellular-dialog` - Data Saver toggle saves state immediately. - Lossless/Extreme rows show an upgrade prompt if user is not on the right Premium tier. ### Sample Data ``` Audio Quality STREAMING ○ Automatic (recommended) ● Normal ○ High ○ Very high ○ Extreme DOWNLOAD ○ Normal ● High ○ Very high ○ Extreme Download using cellular [Toggle: OFF] Data Saver [Toggle: OFF] ``` --- ## Playback Settings ### Overview The user configures playback behavior including crossfade, gapless playback, and other audio options. ### UI Elements **Header/Toolbar** - Title: "Playback" (route: `spotify:settings:playback`) - Back arrow **Playback Options** - **Crossfade** — slider (0–12 seconds) controlling overlap between tracks; label shows current value (e.g., "5 seconds") - **Gapless playback** — toggle; removes silence between tracks - **Automix** — toggle; blends certain playlist transitions like a DJ - **Normalize volume** — toggle; keeps volume consistent across tracks - **Mono audio** — toggle; plays audio as single channel (accessibility) - **Equalizer** — tappable row that opens the device's system equalizer - **Show unplayed podcasts first** — toggle for podcast episode ordering - **Playback timeout** — link to configure playback timeout (`spotify:playback-timeout`) - **Sleep timer nudge** — may appear contextually (`spotify:internal:sleep-timer-nudge`) ### Interactions - Crossfade slider updates the setting in real time as it's dragged. - Toggle switches save immediately. - Tapping "Equalizer" launches the system equalizer app/view. - Tapping "Playback timeout" navigates to the timeout configuration screen. ### Sample Data ``` Playback Crossfade ────●──────── 5 sec Gapless playback [Toggle: ON] Automix [Toggle: ON] Normalize volume [Toggle: ON] Mono audio [Toggle: OFF] Equalizer → Show unplayed podcasts first [Toggle: ON] Playback timeout → ``` --- ## Social Settings ### Overview The user controls privacy and social sharing settings, such as whether their listening activity is visible to friends. ### UI Elements **Header/Toolbar** - Title: "Social" (route: `spotify:settings:social`) - Back arrow **Social Sharing Toggles** - **Private session** — toggle; hides listening activity from followers and prevents it from affecting recommendations. Label: "Private session" - **Listening activity** — toggle; shows what you're listening to in the Friend Activity feed. Related route: `spotify:listening-activity:settings`, `spotify:listening-activity:audiencesetting` - **Share my listening activity on Spotify** — toggle to control activity sharing - **Connect with Facebook** — tappable row to link/unlink Facebook account (`spotify:internal:preferences:facebook-connect`) - **Artist announcements** — toggle to receive push notifications when followed artists post **Audience Setting** - "Who can see your listening activity?" — tappable row with options: Everyone / Only people I follow / Nobody ### Interactions - Toggling "Private session" immediately switches the listening mode and updates the UI indicator (lock icon may appear in Now Playing). - Tapping "Who can see your listening activity?" opens the Audience Setting sub-screen. - Tapping "Connect with Facebook" opens the Facebook connect flow. ### Sample Data ``` Social Private session [Toggle: OFF] Share my listening activity [Toggle: ON] Who can see your listening activity? Everyone → Connect with Facebook → Artist announcements [Toggle: ON] ``` --- ## Connectivity Settings ### Overview The user manages network and device connection preferences, such as offline mode and Spotify Connect behavior. ### UI Elements **Header/Toolbar** - Title: "Connectivity" (route: `spotify:settings:connectivity`) - Back arrow **Network Options** - **Offline mode** — toggle; limits playback to downloaded content only - **Sync over Wi-Fi only** — toggle; prevents downloads over mobile data - **Sync downloaded content** — toggle; keeps downloaded content up to date **Spotify Connect** - **Show local devices only** — toggle; limits device picker to devices on the same network - **Device picker** — tappable link to open the device picker (`spotify:internal:connect-device-picker`) **Bluetooth** - **Bluetooth device settings** — tappable row; accessibility: "Open bluetooth devices in system settings" ### Interactions - Toggling "Offline mode" immediately restricts the app to downloaded tracks only and shows a visual indicator. - "Show local devices only" filters the Connect device list. - Tapping "Device picker" opens the full Spotify Connect device picker overlay. - Tapping Bluetooth row opens device-level Bluetooth settings. ### Sample Data ``` Connectivity Offline mode [Toggle: OFF] Sync over Wi-Fi only [Toggle: ON] Sync downloaded content [Toggle: ON] SPOTIFY CONNECT Show local devices only [Toggle: OFF] Device picker → BLUETOOTH Bluetooth devices → ``` --- ## Content Personalization Settings ### Overview The user controls how Spotify personalizes content recommendations based on their listening behavior and data. ### UI Elements **Header/Toolbar** - Title: "Content Personalization" (route: `spotify:settings:content-personalization`) - Back arrow **Personalization Toggles** - **Tailor my Spotify experience** — toggle; allows Spotify to use listening data for recommendations - **Process my data for ads personalization** — toggle; routes to `spotify:config:ads` - **Taste profile** — tappable row to view and manage taste profile (`spotify:internal:tasteprofile`) **Links** - "Privacy Policy" — opens `https://www.spotify.com/legal/privacy-policy` in a web view - "Ads preferences" — opens `https://www.spotify.com/account/ads/` ### Interactions - Toggles save immediately. - Tapping "Taste profile" navigates to the Taste Profile screen. - Tapping policy links opens an in-app browser. ### Sample Data ``` Content Personalization Tailor my Spotify experience [Toggle: ON] Spotify uses your listening data to give you better recommendations. Ads personalization [Toggle: ON] Taste profile → Privacy Policy ↗ Ads preferences ↗ ``` --- ## Parental Controls Settings ### Overview A plan manager or parent manages content restrictions and account controls for young listeners on a Family plan. ### UI Elements **Header/Toolbar** - Title: "Parental Controls" (route: `spotify:settings:parental-controls`) - Back arrow **Content Restrictions** - **Explicit content** — toggle to block explicit content for managed accounts; description: "Content (labeled with the E tag) that may contain adult language or themes." - **Manage blocked content** — tappable row to add or remove blocked artists/songs; navigates to `spotify:internal:parental-control:manage-blocked-content:[id]` **Account Management** - **Managed account members list** — each member row shows: - Member name - Account type (e.g., "Managed account (you control playback)") - Arrow to open member details - **Add member** — button: "Add to plan" / "Add account" - **Remove member** — opens a confirmation dialog with title: "Remove member", description: "Remove this person's access to your plan.", button: "Remove" **PIN Management** - **Change PIN** — tappable row (`spotify:internal:change-pin`) - **PIN required for switching** — informational note: "On shared devices, young listeners can switch between managed accounts without a PIN. To access self-managed accounts, the plan manager will need to enter their PIN." ### Interactions - Tapping "Manage blocked content" navigates to the blocked content search/management screen. - Tapping a member row navigates to that member's account detail screen. - Tapping "Add to plan" launches the add member flow. - Tapping "Remove" on a member shows a confirmation dialog before removing. - Tapping "Change PIN" navigates to the PIN change flow. - After removing a member, a snackbar shows: "Removed from your plan." ### Sample Data ``` Parental Controls CONTENT Explicit content [Toggle: OFF] Content labeled with E that may contain adult language. Manage blocked content → 2 blocked artists FAMILY MEMBERS [avatar] Jamie Chen Managed account → [avatar] Alex Chen Managed account → + Add to plan PIN Change PIN → ``` --- ## Manage Blocked Content ### Overview A parent or plan manager searches for and adds artists or songs that a young listener will not be able to play. ### UI Elements **Header/Toolbar** - Title: "Blocked Content" (implied from `spotify:internal:parental-control:manage-blocked-content:[id]`) - Back arrow **Search Bar** - Placeholder: "Search" (`add_blocked_content_search_placeholder`) - Clear button: "Clear search" (`add_blocked_content_clear_search`) **Empty State (before search)** - Title: "Search artists or songs" (`add_blocked_content_empty_title`) - Subtitle: "Choose music that this young listener won't be able to play." (`add_blocked_content_empty_subtitle`) **Search Results List** - Each result row: - Artwork thumbnail - Artist or track name (bold) - Secondary label: artist name (for tracks) or "Artist" - "Block" / "Unblock" action button or checkmark **No Results State** - Title: "Couldn't find "[search term]"" (`add_blocked_content_no_results_title`) - Subtitle: "Try searching again using a different spelling or keyword." (`add_blocked_content_no_results_subtitle`) **Error State** - Title: "Couldn't load result" (`add_blocked_content_error_title`) - Subtitle: "Try again?" (`add_blocked_content_error_subtitle`) - Button: "Reload" (`add_blocked_content_retry_button`) **Currently Blocked Items** - Section header: "Blocked" - List of blocked artists/songs with option to unblock each ### Interactions - Typing in the search field fetches matching artists and tracks. - Tapping a result adds it to the blocked list. - Tapping a blocked item removes it. - Tapping "Reload" on error retries the search. ### Sample Data ``` Blocked Content [Search field: "Drake"] RESULTS [artwork] Drake Artist [Block] [artwork] God's Plan Drake [Block] [artwork] Hotline Bling Drake [Block] BLOCKED [artwork] Cardi B Artist [Unblock] [artwork] WAP Cardi B [Unblock] ``` --- ## About Settings ### Overview The user views app version information, legal notices, and links to Spotify's terms and policies. ### UI Elements **Header/Toolbar** - Title: "About" (route: `spotify:settings:about`) - Back arrow **App Info Section** - Spotify logo or icon - App version number (e.g., "Version 8.9.14.588") - Build number **Legal & Policies Links** - "Privacy Policy" — opens `https://www.spotify.com/legal/privacy-policy` - "Terms of Use" / "Platform Rules" — opens `https://www.spotify.com/platform-rules/plain` - "Licenses" — opens the open-source licenses viewer - "Support" — opens `https://support.spotify.com` **Social / Credits** - Copyright notice: "© 2024 Spotify AB" ### Interactions - Tapping policy links opens them in an in-app browser / web view. - Tapping "Licenses" navigates to a list of open-source library licenses. - Tapping "Support" opens the Spotify support site. ### Sample Data ``` About [Spotify logo] Spotify Version 8.9.14.588 Privacy Policy ↗ Terms of Use ↗ Platform Rules ↗ Licenses → Support ↗ © 2024 Spotify AB ``` --- ## Integrations Settings ### Overview The user manages third-party integrations and connected services, such as Alexa or car platform connections. ### UI Elements **Header/Toolbar** - Title: "Integrations" (route: `spotify:settings:integrations`) - Back arrow **Connected Services List** - Each row: - Service logo/icon - Service name (e.g., "Amazon Alexa", "Facebook") - Status indicator: "Connected" or "Not connected" - Arrow to manage the connection **Available Integrations** - Amazon Alexa — connects to Alexa skill for voice control (deep link to Alexa account linking) - Facebook — "Connect with Facebook" (`spotify:internal:preferences:facebook-connect`) - Waze — driving integration (`spotify:waze:optout` / `spotify:waze:onboarding`) ### Interactions - Tapping a connected service opens the management/disconnect flow for that service. - Tapping a not-connected service opens the connection/authorization flow. - Alexa integration navigates to Alexa account linking URL via in-app browser. ### Sample Data ``` Integrations [Alexa icon] Amazon Alexa Not connected → [Facebook icon] Facebook Connected → [Waze icon] Waze Not connected → ```