Wave your lightstick
{{ myTaps }} waves from you

Live interaction · Audience experience

KISWE MOBILE · HANGTIME · 2019

Giving a fandom a way to act together,
and a mark to recognise it by

A concept study built on research I ran during my first design internship: 200,000 fans watching the same concert alone in their rooms, told the number but given no way to feel a single one of them.

RoleProduct design intern: research, concept, and UI
ProductHangtime 2.0, live watch-party for K-pop
Why meThe only designer on the team who grew up inside K-pop fandom, translating that culture into product decisions for a US engineering team
My impactInteraction features for BTS concerts, 756K viewers across 100+ countries
Kiswe LIVE
Encore, 21:58 KST
{{ tapsLabel }} lightsticks lit

Concept visual. The live layer sits on top of the broadcast, never in place of it.

01 · The problem

Everyone was there. Nobody could feel it.

A counter banner said 200,000. There was no crowd, no lightsticks, no sign of another human being. The number was information, not presence.

Fans watching
0
Countries
0
Visible to each other
None
02 · Watching as a fan

I watched a full concert and logged where the product held attention, and where it broke it.

I watched it as a fan, not as a competitor audit, and wrote down every moment the product lost me.

“I feel like I'm in the real concert. But after an hour my eyes were exhausted. It's dynamic, and the view is too busy.”
Session log · 2019One two-hour concert, watched as a fan
0:14:00
AttentionChat competes with the show

Fans wanted to react between songs, not during them.

0:41:00
MultiviewSwitching cameras breaks focus

Choice was nice. Using it interrupted the flow.

1:06:00
RoomsLeaving a room left the show

A hang should switch like a channel, not a door.

1:52:00
PresenceFans could not see each other exist

The finding that redefined the brief.

03 · The reframe

Concert energy is a crowd effect, not a video quality problem.

One test for every feature after that: does it let fans feel each other in real time, without pulling their eyes off the stage?

Brief as given
Add more interactive features to the live stream.
Brief after research
Make the crowd visible, so a fan alone at home knows the other 200,000 are there.
Problem framing
Three rules every feature had to pass
  • A fan can do it with one thumb, without reading.
  • The crowd shows up as one shared signal, not 200,000 separate messages.
  • Nothing pauses, covers or reloads the stream.
04 · The live layer

Five features that sit on top of the stream, never in front of it.

Feature 0{{ featNo }} of 05

{{ featTitle }}

{{ featDesc }}

LIVE{{ tapsLabel }}
Seoul, KR
184,206 lightsticks lit right now
CHORUS
CHAT STEPPED BACK
All한국어EnglishEspañol
minji_07 · Seoul
이 파트 진짜 미쳤다
“This part is insane”
rae · Toronto
that high note, every single time
dee · Manila
no one is standing still right now
luisa · Bogotá
estoy llorando otra vez
“I'm crying again”
During the song · what the room feels
Pick the encore00:{{ clock }}
Spring Day
Mikrokosmos
Dionysus
{{ pickHint }}
Spring Day{{ p0 }}%
Mikrokosmos{{ p1 }}%
Dionysus{{ p2 }}%
Share mic level, never audio
SING ALONG · 41,208 MICS
MIC ON
NOW WATCHING · {{ chName }}
Stage
Solo
Crowd
Backstage
05 · Try it

Two of the features, live on this page.

Lightstick map · venue jumbotronOn air
Lightsticks waving
{{ tapsLabel }}
Brightest now
{{ topCity }}

Tap the lightstick in the bottom-right corner. Your city gets brighter on the wall behind the stage.

Live vote · encore00:{{ clock }}
Spring Day ✓ voted{{ p0 }}%
Mikrokosmos ✓ voted{{ p1 }}%
Dionysus ✓ voted{{ p2 }}%
{{ voteLabel }}{{ totalVotes }} votes
06 · What I would carry forward

Protect the performance, then let the crowd rise into it.

These principles came from watching one concert closely, not from adding features to a screen. They are the part of this project I have used in every live or real-time product since.

Protect attention

Live UI should step back during high-focus moments rather than compete with the performer.

Surface the crowd

Use reactions, shared signals, or audience perspective to make remote presence perceptible.

Preserve continuity

Changing chat, hang, camera, or social layer should never interrupt the stream.

Design the rhythm

Participation has moments: chorus, pause, encore, transition. It should not be permanently on.

Measurement
Presence

Do fans act, not just watch? One live action per fan per song, still happening after thirty minutes.

Attention

How long do they stay? Drop-off at the sixty minute mark, where the eye fatigue showed up.

Return rate

Do they come back? Tickets bought for the next tour date, photocards shared the day after.

How I would know the live layer worked

Three signals, each tied back to a finding from the concert log rather than to engagement in general.

07 · Brand & icon

The other half of the internship: Hangtime's rebrand.

Hangtime was moving from chat-centered social video to interactive live video, and the app icon no longer said what the product was. I owned the icon renewal end to end, from the brand research it started with to the mark the team chose.

Starting point · brand research
Before any icon, I built the words the icon would have to earn

I started from language, not shapes. Everything the team said about the product went onto sticky notes and got grouped until nine clusters held: media based, real-time changeable, exciting feelings freely, lively, interactive dynamic, group together, three-dimensional, dynamic. Those clusters collapsed into three brand characteristics under one core value, Better Together, and each characteristic was then translated into something drawable: Changeable into flexible, Interactive-Together into a connected circle, Playful-Young into vivid motif. The motif I proposed came out of the name itself, a person with open arms, which is also the lowercase h.

Sticky note affinity map grouped into nine clusters
Affinity mapping · every word the team used, grouped into nine clusters
Core value
“Better Together”

What Hangtime is for, and the thing every mark after this had to carry.

Changeable

Real-time media capture of a moment. Conversations and images pass by fast, so the brand has to feel like it is changing.

InstantaneousReal-timeMedia-basedMomentsZ generation
Interactive-Together

Interactive communication between media and users, small groups gathering to share what they feel.

ConnectEmotionalIn one placeConversationSympathyFriends
Playful-Young

18–24 sports fans as the core audience: they communicate actively, compete, and say what they think without hedging.

DynamicLivelyFreeThree-dimensionalCompetitive
Design keywords · characteristic to something drawable
Changeable
Flexible
Interactive-Together
Connected circle
Playful-Young
Vivid motif
Motif
A cheering person with arms open, drawn so the arm and body form a lowercase h

A person with their arms open, drawn so the raised arm and the body are the lowercase h. The name promises hanging out; the mark promises it back before a single word is read.

Draft 1
A letter “H” read as the shape of other objects

I designed on instinct, no criteria: forms I found interesting. The team liked the craft and said the same thing three different ways, that it looked like a messaging app. Nothing here said live video.

Draft 1 icon explorations, letter H
Draft 2
Brand colors land, and the mark starts arguing for a meaning

Adam set the brand palette, so I stopped choosing colors and started choosing meanings: a party popper for the moment a song drops, a crowd behind a play button, an H built from a person with their arms up. The team picked four of these to test.

Wordmark · condensed
Wordmark · condensed
Wordmark · bolt as the H
Wordmark · bolt as the H
Lockup · dot and burst marks
Lockup · dot and burst marks
“HANG” cut into the tile
“HANG” cut into the tile
Party popper · app icon
Party popper · app icon
Party popper · full lockup
Party popper · full lockup
Soft star in a ring
Soft star in a ring
“hi” as the h
“hi” as the h
“Hang” script, smile tail
“Hang” script, smile tail
Crowd silhouette behind play
Crowd silhouette behind play
H as a person, arms up
H as a person, arms up
Hang room plus play
Hang room plus play
First user survey · SurveyMonkey
Four finalists the team picked together, tested in context on a real home screen

Not “which is prettiest” but whether the icon could carry the app's functionality: each option was mocked up on an iPhone home screen next to Mail, Photos and TV, then asked two questions. “What do you like the most?” and “What do you think this app is for?”

Option A · bubble struck by a bolt
Option A · bubble struck by a bolt
Option B · play in a room of reactions
Option B · play in a room of reactions
Option C · two bubbles, one watching
Option C · two bubbles, one watching
Option D · group on a screen
Option D · group on a screen
Option D on an iPhone home screen
Tested in context, not on a white artboard.
What I sent the team afterwards

The results were clean and I still could not act on them. So instead of starting another round I wrote to the team: one criterion is not enough. Immediate recognition is nice, but Netflix, Snapchat and Pinterest all fail that test and are read perfectly well. I asked for several criteria, more varied questions, and, since I had joined after the rebrand was decided, the goal behind it.

Slack message asking for several criteria Slack message asking for the goal behind the rebrand

Two answers came back, and both changed the work. YouTube content was landing in Hangtime, so the value to emphasise moved from conversation to interactive video. And Mike, our CEO, set the constraint: the letter H is good, but this is a global app, so focus on the features.

Draft 3 · after the survey
Interactive video first, and every form put through the 60px test

With the goal finally written down I stopped designing letters and started designing the feature: a screen with a play in it, people inside that screen, reactions coming out of it, two screens linked together for a hang. The lowercase h survived only where it doubled as one of those shapes. This is also where I started every idea as a row at real icon size, because the survey had taught me that a mark that only works at 400px is not an app icon.

Lowercase h, five weights of the same stroke
Lowercase h, five weights of the same stroke
h behind a screen, play ghosted in
h behind a screen, play ghosted in
The h-screen mark tested large and at 60px
The h-screen mark tested large and at 60px
H built from two phones facing each other
H built from two phones facing each other
People inside the screen, play attached
People inside the screen, play attached
Reactions rising out of the screen
Reactions rising out of the screen
Reaction burst, two densities
Reaction burst, two densities
Reduction row · which forms survive small
Reduction row · which forms survive small
Two bubbles and a play, four arrangements
Two bubbles and a play, four arrangements
Same mark, light and gradient tile
Same mark, light and gradient tile
Two screens linked · nine variations
Two screens linked · nine variations
Direction check, side by side
Direction check, side by side
Dark mode set, mark only
Dark mode set, mark only
h on a soft plum tile
h on a soft plum tile
h in a ring, single weight
h in a ring, single weight
h with an RGB offset, tone test
h with an RGB offset, tone test
Draft 4
Speech bubble plus play, then everything that had to be cut

The obvious answer was to draw both halves of the product, chat and video, so the bubble-and-play family got the furthest. Mike\u2019s feedback reframed it: emphasising the letter H is fine, but this is a global app, so lean on the feature, not the initial. In parallel the reduction tests began, because the confetti, dots and bokeh versions all died at 60px on a home screen.

Speech bubble + play, lockup
Speech bubble + play, lockup
Bubble tile, lowercase mark
Bubble tile, lowercase mark
Bubble + play, reduced
Bubble + play, reduced
Bubble with reaction dots
Bubble with reaction dots
Bubble with confetti
Bubble with confetti
Bubble in a lit room
Bubble in a lit room
h stroke in a black circle
h stroke in a black circle
h in mint, on plum
h in mint, on plum
h drawn as one gesture
h drawn as one gesture
Card struck by a bolt
Card struck by a bolt
HT on a play triangle
HT on a play triangle
Softest bubble variant
Softest bubble variant
Draft 5
One gesture, legible at 60px, and a mascot to test the tone ceiling

The last round split into three answers to the criteria I had proposed: does it read as interactive video, does it survive at phone scale, does it work outside Korea. The figure mark carried presence, the play-with-two-dots carried function, and the neon and mascot studies were deliberately loud so the team could see where the brand\u2019s tone limit was. It was called fresh but too experimental, which was the useful answer. What survived was the simplest one.

Play with two reaction dots
Play with two reaction dots
Figure mark, black badge
Figure mark, black badge
Figure mark, single purple
Figure mark, single purple
Figure mark, teal to plum
Figure mark, teal to plum
Figure mark, warm gradient
Figure mark, warm gradient
H sharing its stem with the mark
H sharing its stem with the mark
Two people in one leaf
Two people in one leaf
Line monogram, H in a circle
Line monogram, H in a circle
Neon sign lockup
Neon sign lockup
Neon · phone held up
Neon · phone held up
Mascot · “Better Together”
Mascot · “Better Together”
Mascot · line version
Mascot · line version
Second user survey · SurveyMonkey
Four went in, two came out, and this time the survey was built properly

Everything I had asked for after round one went into this one: two of these four picked as the head-to-head, a wider set of questions instead of a single preference, and randomised order so position could not do the voting. The team chose the second and third options to run against each other, one leading with the letter, one leading with the feature.

Option 01 · HT inside a play
Option 01 · HT inside a play
Option 02 · h in a ring · taken forward
Option 02 · h in a ring · taken forward
Option 03 · h as a screen with play · taken forward
Option 03 · h as a screen with play · taken forward
Option 04 · play in a room of reactions
Option 04 · play in a room of reactions

Both finalists were shown as full lockups, on light and on black, at icon size. The point of the exercise was no longer to find the prettiest mark but to see which one people could describe back to us.

Draft rounds
5
User surveys run
2
Also shipped as resources
Drawing tool GUI, sticker UI icons, hang mark, tab bar study
Brand & icon system
From “which one looks best” to “what should this icon say”

The icon work is where I learned that preference data is only useful after a team agrees on the criteria.

08 · The internship itself

The summer that decided where I would build the rest of my career.

My first summer working outside Korea. Inside the office I learned how a US product org argues, decides and ships, and how much of design is translating one culture for another. Outside it: museum nights in Manhattan, Brooklyn's vibe, Bell Labs in the middle of a tech boom, the freedom of Pride week, and colleagues who showed me what an ordinary American week actually looks like.

This was where I decided I would move to the States, which I did four years later.

The team in midtown Manhattan

The team, midtown Manhattan, August 2019.

At the Kiswe wall
Last week at Kiswe.
My desk
My desk, New York office.
Drafts
World Cup on the wall.
Final presentation
Final presentation.
Nokia Bell Labs badge
Nokia Bell Labs.
Next caseFuture CAPTCHA05 →

Thanks for spending time with the work.

Want to talk through a project?