Front-end · Data engineering · 2026

Biggest Fan, IRENE Solo Album Fan Hub

A self-initiated fan hub that turns a static comeback poster into one living destination, experience the rollout, explore the album, take action.

Role
UI/UX, front-end & data engineering
Tools
HTML/CSS/JS, Vercel, GitHub Actions, Supabase, Cheerio
Client
Self-initiated fan project
Status
Live & ongoing (2026)
Biggest Fan — schedule
Biggest Fan — tune in
Biggest Fan — album
Biggest Fan — vote
Biggest Fan — schedule
Biggest Fan — the live site Auto-advancing
The problem

A K-pop comeback spins up dozens of touchpoints, but there's no single place where fans can find it all.

Before the album drops, labels release teasers across Instagram and YouTube. Content gets buried in feeds within hours. A fan arriving on Day 10 has no way to experience Day 1, the rollout narrative is lost to the algorithm.

For Irene's first solo album Biggest Fan, SM released the comeback schedule as a retro shopping-catalog infomercial, product photos, starburst price tags, fake phone numbers. It's a poster. You screenshot it and it disappears into your camera roll.

After the album drops, fans coordinate streaming, voting, and chart-tracking across platforms within a 24–72 hour window. But the tools are scattered across Google Docs, group chats, and random app downloads. New fans have no idea where to start.

SM Entertainment's original comeback schedule teaser
SM's original comeback schedule, a poster, not an experience.
Personas

The hub has to land for the superfan who already knows the streaming plan by heart and the newcomer who has never voted once, usually on the same night, inside the same 72-hour window.

SW Soo-a
Soo-a, 24
The streaming warrior
Tap to read more ↻
Soo-a, 24
Seoul · day-one fan since Red Velvet debut

"I already know the streaming plan by heart, I just want every link and chart in one tab so I'm not juggling five group chats on comeback night."

Wants
Live charts, voting steps and streaming links consolidated, always current.
Frustration
Playbooks live in scattered Google Docs that go stale mid-comeback.
Tap to flip back ↺
LN Lena
Lena, 19
The late-arriving newcomer
Tap to read more ↻
Lena, 19
Toronto · found Irene through a viral clip

"I got here on day 10 and everyone's talking about teasers I never saw. I just want to catch up without scrolling three weeks of feeds."

Wants
To experience the whole rollout from the start, in order, in a few minutes.
Frustration
Early teasers are buried by the algorithm and impossible to find later.
Tap to flip back ↺
MR Mari
Mari, 27
The overseas supporter
Tap to read more ↻
Mari, 27
São Paulo · wants to help but can't read Korean

"I'll happily pre-order and stream, but half the Korean apps won't take my card and I never know which links actually count."

Wants
Clear, global-friendly ways to buy and stream that she knows will count.
Frustration
Korean-only platforms and payment walls shut international fans out.
Tap to flip back ↺
The insight

Fans don't need another social post. They need a single destination.

One place to experience the rollout, explore the album, and take action. The design goal was simple: turn SM's static teaser into an all-in-one fan hub, teasers, album info, streaming links, voting guides, and live data in one place.

Design rationale

The design wasn't invented, it was extracted.

Every design decision came from deconstructing SM's comeback schedule and translating it from print to interactive experience. The colour palette was sampled directly from the teaser, and the heavy, condensed, uppercase type was replicated with Arial Black.

Typeface
Aa
ABCDEFGHIJKLM
NOPQRSTUVWXYZ
0123456789
Arial Black
Display & headers — heavy, condensed, all-caps
Palette, sampled from the teaser
Electric Blue
#0537B5
Royal Purple
#7B1FA2
Hot Pink
#FD5ECD
Acid Yellow
#FEFF00
Ink
#0F0E0C
The solution, experience the rollout
  • Schedule grid → interactive rollout. Each date becomes a clickable card that loads that day's content into the player. Fans arriving late walk through the entire rollout in 60 seconds.
  • Retro TV player → teasers as channels. Each teaser gets its own channel on a CRT with scan lines and glow. YouTube embeds, deliberately no autoplay, so every play counts as a real view.
  • Album carousel → pre-order with confidence. Auto-swiping carousel of all three versions with a side-by-side comparison table.
Act 1, experience the rollout, the interactive schedule grid and retro TV channel player. Tap to expand with sound.
The solution, take action
  • Live charts → the scoreboard. An hourly GitHub Actions job scrapes rankings from Melon, Bugs, Genie, Flo, and Apple Music into Supabase, so the frontend is always fresh.
  • Hanteo sales → real-time feedback. Live sales rankings beside the pre-order button via a Vercel serverless proxy with a short edge cache.
  • Streaming guide → zero-friction action. Every global and Korean platform with direct links and smart buttons that detect iOS vs Android.
  • Voting guide → consolidated playbook. All five music shows and voting apps, step by step. No fan-made Google Doc required.
Act 2, take action, the album carousel, live charts and pre-order flow. Tap to expand with sound.
Real-world impact

One organic tweet, no ads, no budget, no label backing, and the site drew visitors from 82 countries before the album even dropped.

119.8K
tweet views
~2.5%
clicked through to the site
Pre-release traction · Mar 16–26

The site went live on March 16, a full two weeks before the album released on March 30. Nearly half of the total traffic landed in the first 24 hours, then kept climbing right up to launch.

2,981
visitors before launch
4,275
page views before launch
1,500
in the first 24 hours

Tracked via Vercel Analytics (client-side), so users with ad blockers or privacy browsers aren't counted, real traffic is likely 20–40% higher.

Where the traffic came from
82countries reached
Key takeaways
What worked
  • Fans want a destination, not another feed post. Labels spend weeks crafting a rollout, then drop it on platforms built to bury it in a scroll. Nearly 3,000 people went out of their way to visit a standalone site, and half of them within the first day, which says the appetite for a real home is there.
  • Reach follows the experience, not the ad spend. With zero paid promotion, the site pulled a global audience across 82 countries. A clear, sharable experience travelled further on its own than most paid campaigns manage.
  • One hub beats ten tabs. Pulling the countdown, links, and live data into a single place turned scattered comeback chaos into one action fans could actually follow through on.
What's next
  • Getting them there is easier than keeping them. The spike proves fans will show up, but a countdown and a streaming guide only earn one visit. The next version needs a reason to return as the teasers roll out, maybe something like a virtual photo booth with Irene, a scavenger hunt across the drops, or a lucky draw for a signed album, along with a way to opt in for alerts on the next drop so the traffic becomes an audience the next comeback starts with, instead of rebuilding from zero.
  • A global audience deserves more than one language. Visitors came from 82 countries, but the hub only spoke English. Adding a few key languages and localised streaming links would meet that international demand where it already is, and likely widen the reach even further.
View live site ↗
You might also be interested
MG
Corporate Map Generator
Internal HTML tool
IF
Indiana Fever
Landing-page redesign
KM
Kalos Mirror
Wellness platform
← Back to studioAll work ↗