Landr Social Media Landing Page Platform
High-fidelity prototype for a social media landing page platform enabling artists to provide one-click following across multiple platforms while investigating API limitations and cost-effective development through vibe coding approaches.
Project Overview
This project focused on prototyping a high-fidelity social media landing page platform that enables artists to provide one-click following across multiple social media platforms. The goal was to investigate API limitations, understand cost-effective development through vibe coding, and prioritize consumer interaction experience over individual platform connections.
The Challenge
Artists needed a unified solution for social media following that would streamline the user experience while accounting for varying API capabilities across platforms. The challenge involved investigating each platform's API limitations, designing around authorization requirements, and creating a mobile-first experience that prioritizes bulk following over individual connections.
The Solution
I designed a mobile-first landing page platform with customizable branding, progress indicators, and strategic button placement to emphasize bulk following. Through comprehensive API research, I identified platform-specific workarounds and limitations, while utilizing vibe coding to eliminate developer costs and test feasibility within budget constraints.
Experience Demo
Interactive Platform Walkthrough
Watch the complete user experience as we demonstrate the Landr social media integration platform. This demo showcases the seamless flow from landing page to multi-platform following, highlighting the mobile-first design and strategic user experience decisions.
Key Experience Highlights:
- Streamlined user onboarding process
- Intuitive social media platform selection
- Visual feedback for successful connections
- Responsive design across all device sizes
- Brand-consistent visual experience
Design Process
Social Media Platform API Investigation
Conducted comprehensive research across Spotify, Instagram, Facebook, and SoundCloud APIs to understand following capabilities, authorization requirements, and platform-specific limitations that would impact user experience design.
Vibe Coding Implementation
Utilized vibe coding approach to eliminate developer costs while testing feasibility and understanding limitations. This cost-effective method allowed for rapid prototyping and validation of core functionality without significant investment.
Consumer-Focused UX Design
Prioritized consumer interaction experience over artist perspective, designing mobile-first interfaces with strategic button placement to emphasize bulk following while maintaining individual platform options for user flexibility.
Customization & Visual Feedback Systems
Developed customizable landing page designs with automatic color setting based on song cover art, progress bar indicators, and iconography to communicate successful and failed follow attempts to users.
API Research Findings
Spotify
Following: Allows following after user authorization, but dirties the UX experience
Workaround: Can add songs to user favorites remotely if already logged in on device
Impact: Requires additional authorization step but provides alternative engagement
Following: Removed API for automatic user follow interactions
Workaround: Use messaging API to trigger messages - users message back for 30-day content access
Impact: Requires manual user engagement but enables ongoing communication
Following: Removed API for automatic user follow interactions
Workaround: Similar messaging approach as Instagram for engagement
Impact: Limited direct following but messaging campaigns possible
SoundCloud
Following: Allows follows through API when user is logged in
Workaround: None needed - direct API integration works
Impact: Seamless user experience with immediate follow capability
UI/UX Design Considerations
Mobile-First Design Priority
Designed with mobile as key focus based on majority of user interactions occurring on mobile devices when engaging with social media links and content.
Strategic Button Placement
Primary "Connect to All Platforms" button positioned as the main focus of page and user experience, with individual platform options available but secondary in visual hierarchy.
Dynamic Customization
Landing page colors can be customized per backend artist account, with automatic color setting based on showcased song cover art for cohesive brand experience.
Visual Progress Indicators
Progress bar and iconography system provides clear visual cues to indicate successful and failed follow attempts, keeping users informed throughout the process.
Consumer-Focused Experience
Investigation prioritized consumer interaction over artist perspective to understand API limitations and authorization experience impact on end-user experience.
Landr Brand Integration
Custom Landr logo created through ChatGPT interaction to render PNG logo file based on potential branding, included in topic folder for reference.
