type
case study
Mentor
Sandra Vickery
Duration
4 Weeks
Date
Summer 2025
Problem
Music streaming services often offer complex and confusing subscription processes, with users struggling to understand the value proposition before committing to premium plans. The user experience during onboarding and subscription selection is frequently disconnected from actual user needs.
Solution
Obeats music streaming app delivers a streamlined onboarding experience with personalized artist and podcast selection, followed by transparent premium plan options. The app focuses on clear pricing, student discounts, and an intuitive interface that demonstrates value before asking for commitment.
My Role
As the UX/UI Designer for Obeats, I led the end-to-end design process from initial research through prototyping. I conducted usability testing with 10+ participants, analyzed feedback patterns, and implemented iterative improvements to enhance the signup flow and premium plan selection experience.
01 Discovery
Project Timeline
The 90-hour UX design project for Obeats' music streaming interface spans June 13-30, 2025, progressing through Discovery, Design, First Validation, High-Fidelity Design, Second Validation, and Final Design phases. My approach combines thorough research with efficient design iterations, featuring two rounds of usability testing, online research methods, rapid prototyping, and remote testing to deliver a high-quality user experience efficiently.
Secondary Research
My research examined subscription adoption rates, competitive strategies, and media consumption patterns to understand market opportunities. Findings show strong subscription penetration among younger adults, with success requiring clear value differentiation and alignment with Gen Z and Millennial preferences for creator-driven social media content over traditional media.
At Least One Subscription
US adults using at least one subscription service: 64% overall, with 70% of 18-44 year-olds, 63% of 45-64 year-olds, and 55% of those 65+, showing clear generational differences in adoption.
Subscription Competitors
Spotify and Pandora offer $5.99 student discounts. Obeats can compete through lower pricing, premium features, payment flexibility, longer trials, and strategic bundling while maintaining clear free/premium differentiation.
Social Media Connection
Generational Divide in Media: Gen Z (54%) and Millennials (44%) connect more with social media creators and content than traditional celebrities, while older generations show minimal interest.
02 Define
Primary Research
My research explored free-to-premium conversion in streaming services. Key findings from affinity mapping revealed that pricing flexibility, content quality, and user experience drive subscription decisions. These insights shaped the Alex Chen persona - a budget-conscious college student - and informed user stories covering three conversion pathways: new registration, first-time onboarding, and returning user engagement.
Affinity Mapping Categories
I conducted affinity mapping to synthesize media subscription research, identifying key patterns in user behavior, pricing, and optimization techniques that guide conversion strategies for budget-conscious young adults.
Affinity Mapping Highlights
After identifying key insights across six categories in my media subscription research, I distilled the most crucial element from each area.
User Personas
Based on thorough research and affinity mapping to organize my findings, I created Alex Chen, a user persona representing a college student juggling media subscriptions with limited finances. The evidence-based persona captures the core conflict between entertainment desires and budget constraints, which became a central focus throughout my design process.
User Stories Minimum Viable Product
While keeping Alex Chen and their potential experience on Obeats, I mapped user conversion journeys across three key paths: new registration, first-time onboarding, and returning user engagement. Each pathway identifies strategic touchpoints where users naturally encounter premium offerings, creating seamless conversion opportunities.
03 Information Architecture
Site Map
The Obeats site map features six main sections (Account, Home, Search, Library, Premium, and Create) supporting both free and premium user journeys. The structure balances simplicity with functionality, allowing users to easily navigate content, manage preferences, and discover premium features.
User Flows
The Obeats platform features two key user flows: New User Flow showcases Obeats’ streamlined onboarding process with strategic premium conversion points, while Returning Free User Flow demonstrates how we integrate premium prompts naturally within the core experience. Both flows balance frictionless navigation with compelling subscription opportunities.
04 Ideation
Low Fidelity Sketches
The Obeats Low Fidelity Sketches focus primarily on the new user experience, guiding them through account creation and onboarding. Upon completion, users can choose to either begin listening immediately or explore premium options. The sketches feature greater detail to eliminate the need for Figma wireframes, thereby saving development time to quickly start user testing.
Sketches to Prototype 1
I conducted the first usability test for Obeats music streaming app with 5 participants aged 18-24. Results showed an intuitive onboarding flow, clear premium features, effective navigation, and appealing visual sketch design. Minor issues included multiple sign-up pages, font readability concerns, premium tab placement, and unclear student verification. The testing provided valuable insights for the next design iteration.
05 Visual Design
Obeats Mood Board
Personality
Dynamic and rhythmic.
Creative and inspiring.
Sophisticated yet accessible.
Forward-thinking and innovative.
Attributes
Flowing curves and wave-like forms.
Clean, minimal interface with bold accents.
Sound visualization elements.
Balanced hierarchy with focus on content.
Image Inspiration
Sound waves and audio visualizers.
Modern music studios and equipment.
Urban music scenes.
Digital audio workspaces.
UI Attributes
Purple gradient spectrum for primary elements.
Cyan accents for interactive components.
Dark mode-friendly with high contrast.
Soft animations mimicking sound waves.
Visual Style Guide
06 Implementation
Usability Testing Highlights
After completing high-fidelity screens, I conducted a second round of usability testing showed design improvements with users praising the clean interface, inclusive options, and appealing visuals. Button states and animations received positive feedback, while pricing was clearly understood. Key improvements needed: adding progress indicators, clarifying button labels, adjusting spacing, and enhancing premium plan comparison with more prominent pricing.
Development Sign Up
Development Artist Select
Development Premium
Final Prototypes
These final prototypes incorporate all critical user feedback and demonstrate significant improvements in both aesthetics and task completion rates across the two main flows: New and Returning Users.
Flow New User
Flow Returning Users
Last Thoughts and Next Steps
Impacts & Results
Clean, intuitive design with clear visual feedback received positive response from all participants.
Animation like the confetti enhanced user experience.
Premium features and pricing structure were generally clear and understandable.
Lessons Learned
Navigation clarity is critical - users were confused by transitions between music and podcast screens.
Progress indicators are essential for multi-step processes.
Button labeling must be intuitive - "Done" vs "Next" created confusion.
Future Opportunities
Test genre options to optimize the personalization step during the onboarding process.
Consider displaying all premium plans on a single screen with vertical scrolling for potential easier comparison.
Create more premium promotion variations with clear benefits.
Personal Growth
Developed better design intuition through multiple rounds of usability testing.
Gained valuable insights on implementing and enhancing effective onboarding processes.
Continued to gain experience in presenting design decisions with evidence-based rationales.