Stray Kids fans navigate 8–12 platforms daily like Twitter/X, YouTube, Bubble, Weverse, fan translator threads, voting apps, Discord, and more just to stay up to date. The result: 79% miss live content due to time zones, 67% rely on delayed fan translations, and comeback seasons feel less like celebrations and more like obligations.
The problem wasn't a lack of content. It was a lack of infrastructure.
Problem Statement:
Stray Kids fans are highly engaged but deeply fragmented scattered across 5+ platforms with no unified way to discover content, connect with other fans, or stay current without burnout. The opportunity was to consolidate this ecosystem into a single, intelligent, low-friction experience.
What made this hard
The product needed to reduce overwhelm without reducing content, support global fans across time zones, deliver translation-first experiences, and foster safety without toxicity all within a 3-month solo capstone timeline with no existing design system to build from.
I conducted 8 interviews and surveyed 391 Stray Kids fans across 30+ countries to understand the emotional, behavioral, and logistical realities of being a global fan. I also ran a 3-day diary study and competitive analysis across 10 platforms.
Six patterns emerged that drove every design decision that followed:
Fragmentation is the core pain, not content volume
Fans check 5+ apps daily just to stay current. Consolidation was the primary need, not new features. This directly led to the decision to build a unified digest rather than another content feed.
Translation gaps create a two-tier fandom
66% struggle with translation delays. 73% rely on fan translators. Non-Korean speakers are systematically excluded from real-time participation. This made translation indicators a non-negotiable feature in the Lives and Catch Up flows.
Live content is the highest-value, hardest-to-access format
79% of fans miss lives due to time zones. A catch-up experience wasn't a nice-to-have, it was the product's reason to exist. This became the anchor feature of the entire platform.
Community spaces feel unsafe at scale
Large group chats cause anxiety. Fans want moderated, fandom-specific spaces. This directly informed the decision to cap the Community feature at 50 members, prioritizing depth of connection over reach.
Comeback seasons cause burnout
Streaming, voting, and content consumption feel like obligations. Fans needed a way to participate at their own pace without guilt. This shaped the optional Comeback Hub checklist, personalized, not prescriptive.
Event discovery is entirely word-of-mouth
There's no reliable discovery layer for local fan events. Fans learn through Instagram reposts and Twitter threads. This created the case for a dedicated Events feature with map-based local and global discovery.
Early IA explorations used a tab-based structure with 6 top-level sections. User testing revealed this created cognitive overload. Users couldn't predict where content lived and abandoned flows before completing them.
I simplified to 4 primary destinations with progressive disclosure for secondary content. This single structural decision directly reduced onboarding confusion and improved first-session task completion in Round 1 testing.
The 4 destinations: Catch Up · Lives · Events · Community
Each destination maps directly to a research finding. Catch Up addresses fragmentation. Lives addresses time-zone inequity. Events addresses discovery gaps. Community addresses the need for safe, moderated spaces. Nothing in the IA is arbitrary. Every tab exists because research said it needed to.
I mapped six primary flows: Onboarding, Catch-Up, Missed Live, Comeback Hub, Event Finder, and Community & Profile. Low-fidelity wireframes were tested with 6 users before any high-fidelity work began.
Three findings from lo-fi testing directly changed the design:
Finding 1 - Home feed needed stronger content hierarchy
Users couldn't identify what to engage with first. This led to the "Today's Priority" card in the final design, a single surfaced piece of time-sensitive content at the top of every session. The decision to lead with one thing instead of everything reduced decision fatigue immediately.
Finding 2 - Event discovery had too many steps
Users abandoned after step 3 of a 5-step flow. I collapsed filter and browse into a single swipeable surface, reducing event discovery from 5 steps to 3. Task completion for this flow improved from 58% to 89% between testing rounds.
Finding 3 - Community entry point was buried
Users couldn't find how to join or create a community space. Elevating Community to a primary tab, not a nested feature, fixed the discoverability issue entirely and was validated in Round 2 testing.
Inspired by Stray Kids' bold visual identity, the brand system needed to feel like it belonged in the fandom, not like a generic utility app.
Primary color: Crimson, drawn directly from Stray Kids' official brand palette, creating immediate visual recognition for fans
Background: Dark, reduces eye strain during late-night content consumption, a real behavioral pattern surfaced in the diary study
Accent: Cream, warmth against the dark UI, prevents the interface from feeling cold or corporate
Typography prioritized legibility at small sizes for translated text, a direct design response to the translation-first requirement. Every brand decision traces back to a user need, not just an aesthetic preference.
High-fidelity screens incorporated all research insights: clearer labels, translation-forward layouts, localized timestamps, calm spaced compositions, and predictable navigation patterns.
Catch Up Delivers a structured daily digest across all platforms, anchored by a "Today's Priority" card that surfaces the most time-sensitive content first. This directly addressed the research finding that fans spend 2+ hours just figuring out what they missed. The feature reduces that to under 5 minutes.
Missed Live Recap Provides a short recap, full live with chapters, and translation ETA indicators for every live event. Designed specifically for fans in incompatible time zones, the single highest-pain-point identified in research. "Finally, I don't feel guilty missing lives" was the exact response from a tester in Round 2.
Comeback Hub Consolidates all comeback-related content including music videos, performances, and interviews, with an optional personalized checklist. The checklist is opt-in, not prescriptive, directly responding to the burnout finding. Fans can participate at their own pace.
Events Multi-city, map-based event discovery with RSVP, wallet integration, and calendar syncing. Reduced from 5 steps to 3 by consolidating filter and browse into a single swipeable surface, the biggest structural improvement between lo-fi and hi-fi.
Community Intentionally small-scale and moderated, capped at 50 members. Focused on meaningful interaction, not algorithm-driven feeds. The cap was a direct design decision rooted in the research finding that large group chats create anxiety rather than belonging.
Rather than building a static click-through prototype, I used Lovable, an AI-powered vibe-coding tool, to generate a fully functional front-end prototype that real users could interact with on their phones.
This decision compressed the prototyping timeline by approximately 60% and produced something no Figma prototype could: a live, interactive build that felt like a real app during testing.
How I did it
I wrote structured mega-prompts refined with ChatGPT to reduce trial-and-error. Early unstructured prompts took around 20 Lovable credits per flow. After refining the prompting approach, the same flows cost 2-3 credits each. I connected GitHub for image and asset management and coded 30+ screens in a single day.
What this taught me
Prompt writing is designing logic. Naming components clearly saves hours of debugging. AI-assisted coding still requires UX intuition. The tool builds what you describe, not what you mean. The gap between those two things is where design thinking lives.
Live prototype: stay-connect-skz.lovable.app (best viewed on mobile)
I tested both the Figma prototype and the Lovable build with 7 fans across India, the US, Australia, the Middle East, and Singapore, across two full rounds with distinct goals.
Round 1: 6 participants
Goal: validate IA and identify navigation confusion
Key findings: home feed hierarchy was unclear, event discovery had too many steps, community entry point was buried
Changes made: introduced Today's Priority card, collapsed event flow from 5 to 3 steps, elevated Community to primary navigation
Round 2: 5 participants
Goal: validate revised IA, surface copy and microcopy issues
Ke y findings: SKZ Log needed a clearer entry point, back button missing in some screens, the word "Suggestion" confused users
Changes made: added explicit entry point for SKZ Log, fixed navigation gaps, replaced "Suggestion" with "Recommended"
Key outcome: Task completion for event discovery improved from 58% to 89% between rounds, a 31-point lift driven directly by the structural changes made after Round 1.
What worked
Catch Up was the standout feature. "This alone replaces Twitter for me."
The Missed Live Recap reduced FOMO guilt.
Event Finder felt genuinely novel. "Nobody puts events in one place. This is huge."
Delivered a fully tested, high-fidelity prototype validated across two rounds of usability testing with fans across 5 countries. The final design consolidated 5+ fan touchpoints into a single platform. Task completion rate reached 89% for core flows. Presented to peers and faculty at CSUEB as part of graduate research.
The live Lovable prototype remains accessible at stay-connect-skz.lovable.app.
What I learned
This project pushed me to think beyond individual screens toward ecosystem design. The biggest lesson: fans don't have a content problem, they have a fragmentation problem. Solving it required understanding the entire service layer, not just the app interface.
The Lovable prototyping process changed how I think about speed and fidelity. A functional prototype surfaces feedback that a static one never could. Users behave differently when something feels real.
Working solo within a hard deadline forced ruthless prioritization. Every feature that didn't directly address a research finding got cut. That constraint made me a more decisive, more confident designer.
Future scope
Personalization through listening history and engagement patterns, deeper streaming API integration, and a notification system designed to reduce rather than add to information overload.
