← Back to work / Product Design · Web App · 2024

The Break
Room

Type
Hackathon
Built in
2.5 hrs
Tool
v0 + Vercel
Status
Live ✓
Role
Solo designer
Try the app →

A real emotional
problem to solve.

At a hackathon with 2.5 hours on the clock, I wanted to build something that solved a real emotional problem — not just a technical one. The idea came from observing people around me: stress is universal, but the outlets are broken.

Toxic Reddit threads. Corporate wellness apps that feel clinical. Anonymous venting platforms that spiral into negativity. I wanted something that felt immediate, safe, and a little bit fun — like a stress ball you can't lose.

A hackathon attendant mentioned Blind as a reference point. I took the anonymity idea but stripped away the professional anxiety and replaced it with warmth.

Reddit forums
Venting threads often escalate — people pile on or compete in suffering.
Blind anonymous
Professionally-focused — stress about work IS the content, not the escape.
Wellness apps
Feel like homework — meditation timers and breathing guides add pressure.
Default: nothing
Most people just suffer quietly or doom-scroll — no healthy fast outlet.

Three observed
behavioural patterns.

While there was no formal research phase, the design brief came from three observed patterns that kept surfacing in conversations around me.

🤯
Pattern 01
Immediate release valve

People don't want to be coached through 10 minutes of breathing — they want to hit something, right now, safely.

🤫
Pattern 02
Anonymity enables honesty

Most people can't vent to colleagues or even friends without social consequences. A nameless wall removes that fear.

🫂
Pattern 03
Someone to hear you

Not advice, not therapy — just a real human on the other end saying "yeah, that sucks."

Design brief

"Build the fastest, warmest, most frictionless stress outlet possible — visualise how you feel, release it physically, say it out loud, or connect with someone. No login, no judgment, no commitment."

Three features, one
emotional arc.

Each feature solves one of the three patterns — and each is usable in under 30 seconds with no account required. Release → Express → Connect.

Feature 01
Smash It

A full-screen pink tile with a lightning bolt — "One button. Pure relief." A pixel stress bar shows your current stress level as a percentage. Press to smash your frustration and watch the bar drop. Instant physical release — one tap, no words needed.

UX intent Instant physical release — one tap, no words needed.
Stress bar Pixel progress bar visualises stress level as % — satisfying to watch it drop.
Naming "Smash It" + lightning bolt ⚡ — aggressive, playful, exactly right.
Solves Stress visualisation + instant release.
Dashboard — The Break Room
Welcome, Cactus · Guest mode
Status1 online
Streak🔥 No streak
Stress level — 67.8% 😩
💬 Vent Wall
⚡ Smash It
Feature 02
Vent Wall

Anonymous public posts — 280 characters, auto-cleared every 24 hours. Posts appear as sticky notes with emoji reactions. A "BINGO" button marks when a post resonates — solidarity without replies or arguments.

UX intent Saying it out loud matters — even to strangers.
Ephemerality 24h auto-clear keeps the wall fresh, not toxic.
Bingo "Same" button — you're not alone in this feeling.
Solves Safe anonymous venting.
Vent Wall — anonymous frustrations
⏰ Posts auto-clear after 24 hours
What's stressing you out? (Anonymous)
Why do we need a meeting to plan the meeting about meetings?
🔥 12   💯 8   😂 5   ·   2h ago   ·   🎯 BINGO
Feature 03
Live Chat

A completely dark-themed anonymous chat room — the visual contrast from the rest of the app is intentional. You get a random name like "Cactus". Messages clear every 24 hours. "Say something. No one will ever know."

Dark theme Signals "private space" — different rules apply here.
Identity Auto-assigned random name — no choice, no accountability.
Copywriting "No one will ever know" — sets the tone perfectly.
Solves Real human connection.
Live Chat● 1 online
⏰ Messages auto-clear after 24h
I have a presentation in 10 minutes and my slides just crashed 😭
omg same thing happened to me last week. you got this.
Chatting as Cactus

2.5 hours,
four stages.

0:00 – 0:20
Step 01 · Define
Brief & Concept

Defined the problem space from observed behaviour rather than formal research. Decided on the core constraint: zero friction, zero login, immediate value. Named it "The Break Room" — a place you go to decompress, not to perform wellness.

problem framing naming constraints
0:20 – 0:45
Step 02 · Design intent
Aesthetic Direction

Chose pixel art + pastel deliberately — it's playful and nostalgic, which creates emotional distance from the stress itself. The visual language says "safe, light space" without using corporate wellness clichés like gradients and sans-serif headers.

pixel art pastel palette anti-clinical
0:45 – 2:30
Step 03 · Build
Build on v0

Used v0 by Vercel to generate and iterate on the UI through prompting. Focused engineering effort on the live chat feature — the most technically complex piece — then built the stress level bar, Smash It tile, and vent wall. Deployed directly to Vercel.

v0 prompting real-time chat rapid iteration
2:30
Step 04 · Ship
Live & Presented

Shipped a fully functional live app within the hackathon time limit. The core user journey — land → feel something → leave feeling slightly better — worked end to end. Zero accounts, zero onboarding, immediate access.

shipped ✓ fully functional live URL

Colour, type,
and pixels.

Door Orange
Pixel Sage
Light Orange
Muted Lav.
Soft Teal
Warm Cream

A warm, playful palette that reads as emotional rather than clinical. Orange-sage as the primary pair creates warmth without the sterile blues of typical wellness products.

Display — Press Start 2P
BREAK ROOM
Used for headings, labels, pixel UI elements, section numbers. The pixel font creates instant nostalgia — it says "game" not "app".
Body — JetBrains Mono
Stressed? Same. // anonymous · no login
Body copy, descriptions, captions, UI labels. Mono keeps the technical-but-warm tone consistent throughout.
Every interactive element uses a flat drop shadow offset at 3px or 4px — no blur radius. This is the signature pixel art effect that unifies the whole UI. Shadow colour always matches the element's border colour, darkened one step. It gives every interactive element a satisfying, toy-like physicality.

From outlet to
daily habit.

The hackathon was just the beginning. With a registered user layer, these features would turn Break Room from a one-time release valve into a daily wellbeing ritual.

Planned
🔥 Daily Streak System

Reward users who return to decompress every day. A streak counter — like Duolingo but for your mental health — turns a one-time visit into a daily check-in habit.

Idea
Streak Badges & Milestones

Unlock pixel art badges at 7, 30, 100 day streaks. Your self-care has achievements now.

Idea
Personal Vent History

Registered users can see their own past vents — private, not public. Journaling without the pressure of journaling.

Idea
Streak Freeze

Miss a day? Use a freeze to protect your streak. Reduces anxiety about the streak itself — because the app is supposed to reduce stress, not add it.

What worked,
what's next.

✓ What worked
+Zero-friction access — users inside within 5 seconds of landing. No login, no onboarding.
+The pixel art aesthetic created instant emotional distance from the stress — it felt like a game, not a therapy app.
+Shipping a fully functional live app in 2.5 hours proved that v0 + clear design intent = real product, fast.
+Three features, one clear emotional arc: release → express → connect. Each one escalates intimacy at the user's pace.
! Next time
!The vent wall needs moderation or tone guardrails — anonymous public walls can turn dark without them.
!Live chat with strangers raises safety questions I didn't fully resolve in the hackathon timeline.
!Would love to run usability testing — especially around whether the stress button actually feels cathartic, or just silly.
!No accessibility consideration for the pixel font at small sizes — it can be hard to read for some users.