Design pass: dressing the app in locket artwork, and shifting copy from 'crisis' to 'encouragement'
Wired six locket illustrations generated with Nano Banana across the whole app (optimized with sharp), fixed the app icon being hidden behind the default favicon, and overhauled the emotional tone of the copy from a 'when you're falling apart' crisis frame to 'encouragement from the people who care about you.' Same reason we dropped the suicide-prevention hotline — not treating people as patients, but as a friend at their side.
Why
Two things were bugging me.
- The app had no real artwork. It was getting by on a single pendant SVG.
- The copy was too heavy. The product name Beside is good, but the descriptions and lines — like "Things to keep beside you when you fall apart" / "Things to hold onto in the moment you're falling apart" — were a crisis/collapse frame. In the user's own words: "This looks like it's literally for people at risk of suicide." Exactly the same problem as when we dropped the suicide-prevention counseling hotline earlier — treating people as patients.
Artwork (6 images → the whole app)
First I distilled the brand DNA (calm/warm/intimate, candlelight leaking out as the locket opens, terracotta-gold palette) onto a single page, and used that to draw up a prompt pack for Nano Banana (Gemini image). My brother brought back images 1–6, and I converted them into lightweight web assets with scripts/gen-art.mjs (sharp) — 2MB-range PNGs → 10–29KB webp, OG 39KB — and wired them in:
- 1 → app icon (192/512/maskable/apple)
- 2 → login hero
- 3 → empty-box illustration
- 4 → 'open it up' entry card background (bedside locket — the spot where the tone fits best)
- 5 → OG share card (+ added
openGraph/twitter/metadataBasetolayout.tsx) - 6 → full background texture (
body::before, 55% over the gradient)
The original images/ are heavy, so I put them in .gitignore and commit only the optimized output. Regenerate with node scripts/gen-art.mjs.
The app icon that wasn't showing up
I laid down the new locket, but the tab icon stayed the same old one. The culprit was app/favicon.ico (the create-next-app default) — the App Router auto-links it as /favicon.ico, the browser requests it by default, and it ended up hiding metadata.icons (the locket). Fixed by deleting the default favicon and placing app/icon.png (the locket). (Details in docs/troubleshooting.md.)
Copy: crisis → encouragement
The core work. Stripped out the "when you fall apart" emotion entirely, and moved to a warm, universal tone of the people who care about you cheering you on from your side.
I wrote out three directions (① encouragement from my people ② warmth you pull out when you need strength ③ the tenderness of keeping it beside you) as full Korean+English lines for each, and judged them on crisis-escape / warmth / brand fit / universality. The judging recommendation was ③ (the lightest and most universal), but my brother chose ① encouragement from my people, the most direct match to the "people who cheer me on" intent.
Reflected this across 12 ko+en keys + the contribution header + the manifest (name/description). On one more pass, I also swapped "Take a moment, catch your breath" (= a calm down tone, ultimately the same crisis register) for an encouragement tone.
before → after (ko)
| Spot | Before (crisis) | After (encouragement) |
|---|---|---|
| Tagline | 무너질 때, 곁에 둘 것들 | 나를 아끼는 사람들의 한마디, 곁에 |
| Login | 무너지는 순간, 나를 붙들어줄 것들을 곁에 둬요. | 나를 아끼는 사람들의 한마디를 곁에 품어둬요. |
| Box subtitle | 무너지는 순간, 여기 있어요. | 내 편의 한마디가, 여기 있어요. |
| Empty box | …나를 붙들어줄 것들을 모아요… | 나를 아끼는 사람들의 응원을 여기 모아요… |
| Contribution done | …무너지는 순간에 곁이 되어줄 거예요. | …힘이 필요한 날 곁에서 응원이 되어줄 거예요. |
| Open it up | 잠시, 숨을 고르고. | 곁에 둔 다정한 한마디 하나. |
Verification: grep "무너" → 0 hits. TS clean.
Principle
No treating people as patients. Not a tool that rescues you from crisis, but the tone of a friend cheering you on from your side.
Keep the name Beside and the locket metaphor as they are, but make every line and every image point toward "you are loved, and someone on your side is here." The design (warm cream + gold, light from the opening locket) and the copy look at the same place.
Postscript: bringing the English into a Western tone (North America / Europe)
Right after the Korean reframe, it bugged me that the English was translationese faithfully carrying over the Korean. If we're aiming at the US, Canada, and Europe, we need native localization, not literal translation. I applied two tone candidates (warm/sincere / modern/concise) to ~40 English emotional-copy lines, and a native NA/EU editor filtered out translationese, cringe, and repetition line by line to produce the final version (a workflow). US spelling + universal phrasing that also reads in the UK/EU, and the overused "in your corner" was kept in just one spot (the tagline) and otherwise varied.
- Keep the words of the people in your corner close beside you. → Keep the kind words from your people close, and come back to them anytime.
- Gather the encouragement from people in your corner here… → This is where the good words add up. Drop in a few of your own, or ask someone you trust for theirs.
- Keep them close again → Tuck it away again
I didn't touch the Korean dictionary. Only the English was localized separately — for each market (language region), tone is something you rewrite, not translate.