Design a connected user flow for a Spotify-like Liked Songs feature using a dark theme with Spotify’s green accents and modern minimal style. The flow includes four interactive screens and should be delivered as an interactive mobile prototype.
Screen 1: Liked Songs (Normal State)
Top Section:
Gradient blue-to-black background.
Back arrow icon (left).
Title: "Liked Songs" (bold white).
Subtitle: "531 songs" (muted white).
Green download icon (left), shuffle icon, large green play button (right).
Filter Chips: Scrollable pills — "Tranquil", "Relaxing", "Lounge", "Soundtrack", "Mood".
Add Songs Button: "+" icon + "Add Songs" label (square, dark).
Song List (real songs and artists, scrollable):
"Hold Heart" by Emilíana Torrini.
"Clandestin" by Gianni Romano, Emanuele Esposito, Äüra, Trickster.
"Ace Of Spades" by Jacob Bellens.
"Bogzarad" by Shervin Najafian.
"Do Do Do" by isaintjames.
"Untouchable" by Jacob Bellens.
"Einsamer Hirte" by James Last, Gheorghe Zamfir.
Each song row includes: album art (left), song title (bold white), artist name (muted green, small download icon), and 3-dot menu (right).
Mini Player:
"Fade Into You" by Mazzy Star.
Album art (left), song + artist (center), play/pause button and device icon (right).
Bottom Tab Bar:
Home, Search, Your Library (active/selected).
Interaction: Long-press on any song → triggers Screen 2 (Multi-Select Mode).
🔹 Screen 2: Multi-Select Mode for Adding Songs to Playlist
Header:
Back arrow (left) to exit.
Title showing number of songs selected (e.g., "3 Selected").
Song List (Selectable):
Circular checkboxes on the left of each song.
Album art, song title, artist, 3-dot menu.
When selected, songs have checkbox filled + optional highlight (subtle background).
Sticky Action Bar (Floating, Rounded):
Left: "3 Songs Selected" (dynamic).
Right: Rounded green button: "Add to Playlist".
Mini Player + Tab Bar remain unchanged.
Interaction: Tap "Add to Playlist" → triggers Screen 3 (Playlist Selection Modal).
🔹 Screen 3: Playlist Selection Modal (Bottom Sheet)
Header/Modal Top:
Title: "Add to Playlist".
Close icon (top right).
List of Playlists (Scrollable):
Playlist name + album art (left) + number of songs (subtitle).
Example Playlists:
Chill Vibes.
Focus Beats.
Study Essentials.
Road Trip 2024.
New Playlist (special button or row).
New Playlist Option: Prominent button or first row with "+" icon: "Create New Playlist".
Interaction: Tap any playlist to add songs (triggers success toast) OR tap "Create New Playlist" → triggers Screen 4.
🔹 Screen 4: Create New Playlist (Optional, if user wants a new playlist)
Header:
Back arrow to exit.
Title: "New Playlist".
Playlist Form:
Playlist name input (placeholder: "My Playlist").
Optional description field.
Upload cover art button (optional).
Rounded green button: "Create & Add Songs".
Interaction: Tap "Create & Add Songs" → triggers success toast and returns to Liked Songs screen.
🔹 Feedback / Confirmation:
Toast Notification:
Dark background, rounded corners.
Text: "3 songs added to Chill Vibes."
Bottom placement, fades out after 2-3 seconds.
I've designed a complete interactive user flow for a Spotify-like Liked Songs feature with four connected screens, following Spotify's dark theme with green accents and modern minimal styling.
All components are organized in a modular, reusable structure:
The implementation includes proper state management to track selected songs, current screen, and user interactions, making it ready for integration with a design system or prototyping tool like Figma.
I've updated the placeholder images throughout the Spotify user flow to make the UI more visually appealing and realistic:
Each song now has a unique placeholder image with:
These changes make the UI more realistic and visually engaging while still using placeholder images. The color-coding helps users distinguish between different songs and playlists at a glance, improving the overall user experience.