samesong
Onboarding Case Study
A deep-dive into designing the onboarding flow for the world's first social live music app. For the bigger picture, dive in here.
Project Background:
samesong is a social music and concert app designed to help people connect through shared tastes and live shows.
Why:
Music unites us, but today there’s no central place to share your unique tastes and meet others who love the same sounds.
What:
samesong blends social networking with concert discovery.
How:
-
Find Your People: Match with friends and new connections who share your musical interests.
-
Live the Music: Explore comprehensive concert listings, see what shows friends are attending, and find concert buddies to sing along with.
Sing the same song—together.
Project Timeline:
2 months of on/off work
Role:
Research, Design, Strategy
Outcome:
Designed a user flow, handoff documentation, and micro-animation prototypes to support the final onboarding flow, based on the insights gained from the discovery phase.
Project Process
01.
Early Research & Discovery
02.
Product Strategy & UX
03.
Handoff & Motion
04.
Outcomes & Next Steps
01.
Early Research
& Discovery
Before focusing on onboarding, I conducted a comprehensive analysis of the live-concert app landscape and user behaviors to understand how fans discover events and engage with live music experiences.
Competitive Analysis
Methodology
Reviewed direct competitors (concert/music discovery apps) and indirect ones (social/event platforms).
Focus Areas: Onboarding flows, event discovery, concert listings, concert pages, and social-sharing features.
What Research Showed
Concert apps recommend shows, but none help you find people to go with. So onboarding needs to set up music identity + social connection right away.
Best-in-Class Apps Had
-
Step-by-step onboarding with progress bar
-
Fun + fast artist selection (carousel + search)
-
Genres first (auto-tag from artists if possible)
-
Primary location required, others optional
-
Playful contact sync (avatars + shared music tags)
-
Clear minimum requirements to move forward
-
Illustrations/motion to match the excitement of concerts
​
Why this matters
If onboarding feels exciting and social rather than transactional, users finish energized, already connected, and ready to explore samesong.
Surveying Current and Potential Users
Methodology:
I ran a 24-hour Instagram Stories survey with multiple-choice and short-answer questions to capture concert-discovery and attendance habits, leveraging my socially connected, app-savvy follower base and Instagram’s core young-adult demographic for quick, relevant insights.
Participants:
~60–70 respondents (~5% of 1,250 followers), primarily younger, digitally active users.
Summary of Results:
-
Concert Attendance Frequency: A majority of respondents reported attending 0–2 concerts per year, with a smaller portion attending 3–5 concerts annually. Very few reported attending more than 12 concerts per year.
-
Social Coordination: Responses indicated varying behaviors around finding people to attend concerts with, suggesting an opportunity for tools that facilitate event coordination among friends.
-
Discovery Channels: Initial findings also pointed toward common platforms or methods for discovering concerts, providing direction for potential feature prioritization.
Low Frequency of Attendance
Most users attend only a few concerts per year, suggesting that when they do go, the experience needs to feel highly valuable and easy to organize.
Opportunity to Leverage Discovery Platforms
Users are actively using social media and other platforms to discover events, highlighting an opportunity to integrate discovery and social planning in one place.
Need for Social Coordination Tools
Many struggle to find companions, signaling demand for friend-matching and coordination tools.
Validating a Key Hypothesis
Users need better tools not only to discover concerts but also to coordinate attendance with friends, directly shaping samesong’s core product focus.
Next Steps:
At a future phase, when the profile page and home page experiences are designed, qualitative interviews to dive deeper into users' motivations, pain points, and behaviors around concert discovery and social planning. These insights will guide the development of initial user personas and inform these design concepts.
02.
Product Strategy & UX
...And why I decided to jump into onboarding first.
Fun fact... Onboarding was not where I planned on starting with samesong.
Like any eager designer, I wanted to jump right into designing the sexiest pages first. While this did help me establish my design system, I quickly hit a wall on how the overall experience should integrate together.
So I stepped back: What’s going to hook the user from the get-go and make them excited to jump in and explore samesong? How can I get gain users in an already crowded concert app market? It starts with onboarding. Hook the user with a fun and interactive onboarding experience while simultaneously making it seamlessly intuitive to use. So how do I tackle that?
Using Whimsical to Organize Research, UX, and Strategy
I chose to use Whimsical as a way to organize my documents outside of Figma. Whimsical’s combination of text-based documents and user experience tools made it easy to organize, update as I make progress, and keep myself accountable.
​
Insights from these documents directly informed the high-fidelity wireframes and micro-animations that showcase the complete onboarding experience.
Task Flow
Approach
-
One task per screen → less cognitive load
-
Clear skip options → user control, no pressure
-
Light motion only when it improves clarity
What the flow captures
-
Account access
-
Music preferences
-
Location
-
Contacts
Outcome
A welcoming onboarding experience that supports sensory-sensitive users, reduces drop-off, and gathers the data needed to personalize samesong from day one.
03.
Handoff & Motion
With the core design system already established through earlier explorations, I layered in only what was needed: form fields, selectors, and clear page copy, drawing inspiration from apps that balance striking visuals with clean, functional simplicity to keep the experience focused and seamless.
Prototype/Hand-off Documentation
Because I used a variety of tools between wireframes and motion, the best way to demonstrate each interaction was through a hand-off document. I used a combination of Figma, ProtoPie, and Figma Make. Within this document, there are Hi-Fi wireframes and a section on motion with mini-prototypes that help demonstrate to the developer exactly how the micro-interactions should behave. In some cases, these tools provide JavaScript. Presenting the onboarding flow this way helps clear up confusion and more seamlessly integrates the various prototyping tools used.
Sensory Design Considerations
Creating an onboarding flow for samesong meant considering not only usability, but also how different sensory profiles experience motion, information density, color, and rhythm. As a highly sensitive person myself, I approached interaction design through a sensory-aware lens to ensure the experience felt emotionally clear, grounded, and approachable for all users, including those who are neurodivergent or easily overstimulated.
Predictable Pacing
All transitions use gentle, linear or soft-ease motion to avoid sudden changes.
-
Predictability helps reduce overwhelm and builds trust during onboarding.​
-
Design remains both intentionally engaging without being overwhelming.
04.
Next Steps & Testing
This phase is focused on testing whether the onboarding feels smooth and engaging across different flow options. As I gather feedback, I’ll also pay attention to how pacing and motion land for sensory-sensitive users to ensure the experience feels comfortable for everyone.
Next Steps: User Testing
The next phase is centered on testing and validating the impact of the onboarding flow on user comfort and completion.
​​
Testing Priorities
-
Single-task vs. multi-field onboarding: A/B test whether distributing tasks across focused screens reduces drop-off and improves comfort for sensory-sensitive users compared to a single, dense account form.
-
Manual artist-selection patterns: Test a standard genre selector vs. a playful “bubble” version to measure speed, enjoyment, and overwhelm thresholds.
​
Why this Matters
These tests will reveal which interaction patterns support more users in both efficiency and considers sensory comfort and emotional ease during onboarding.
​
Broader Exploration
In the longer term, I’ll explore adaptive onboarding modes (e.g., reduced-motion or higher-clarity layouts) to create a more neuro-inclusive experience that meets users where they are.
"Bubbles"
Made with Figma Make
Next Steps: Pages to Design
To validate onboarding, the Profile and Homepage are the next priority. Designing onboarding first revealed what users actually value most, which now shapes these screens.
​
Profile Page
-
Highlights favorite artists + genres
-
Shows upcoming concerts based on preferences
-
Surfaces shared artists with friends/contacts
Homepage
-
Personalized concert feed based on:
-
Favorite artists
-
Location
-
Social matches
-
Trending events if users skipped inputs
-
Why This Matters
If users immediately see content shaped by what they shared during onboarding, I can test whether personalization increases first-session engagement and early retention.
​
Want to Follow Along?
-
Visit the samesong page in my portfolio to follow how the app experience develops.
-
Visit samesong.app to sign up for the email list and be the first to know about when the product goes live.