Code › tail-villain
Retention Needed a Product Story
Connecting spaced review to a landing-page story without letting RPG flavor obscure the product
While rebuilding the landing page, I noticed a risk: Tail Villain could become harder to understand as it became more expressive.
There was plenty of material to work with. Villains, conquest language, unstable topic cards, cracked knowledge states, rarity-styled pricing, mascot motion, and sharper visual feedback all fit the product’s tone. The page could easily become more immersive.
But if all of that moved to the front, the most important utility moved to the back.
Tail Villain is a product for keeping knowledge retrievable. It helps users practice pulling answers back out before they freeze in a high-pressure interview.
The landing work on April 23 and April 24 was not just visual polish. It was a shift from listing features to explaining why the product should exist.
The temptation is to show everything: AI roadmaps, mock interviews, villain characters, the memory curve, dashboards, pricing, and demo screens. None of those are wrong. But a list of features does not automatically make the user’s problem visible.
The problem with interview preparation usually does not end at not knowing enough. A user can understand something while studying, then lose access to it days later. Under pressure, the explanation that felt clear in private can disappear. Tail Villain’s core value sits there: it makes the user recall, defend, and repeat the material before it fades.
That meant retention and spaced review had to be explained first. The RPG flavor had to support that story, not replace it.
That is why the Ebbinghaus forgetting curve belonged on the landing page.
The curve is not there to scare users with a chart. It connects a familiar fact, memory fades over time, to the product’s behavior. It explains why a topic comes back later, why weak areas stay visible, and why a session report should feed the next review.
But a graph alone does not create a product story. Axis labels, legends, and decay animation can make the section legible, but the user-facing message is simpler: Tail Villain does not just ask you to study more. It makes you retrieve what you studied before it becomes hard to reach.
That distinction mattered. This was not meant to be a study-volume tracker. It was meant to be a recall loop.
I kept the RPG tone. Defeating villains, defending unstable topics, and making conquered states visually satisfying all fit Tail Villain’s personality. If the product became a dry learning-management screen, it would lose a lot of its energy.
But the RPG layer could not be allowed to do the explanatory work by itself. If conquest language comes first and the reason for review comes later, users may remember the game-like surface without understanding the practical loop. Pricing can borrow rarity styling, but the important question is still what value and limits each plan represents.
Structure lasts longer than persuasion tricks.
The dashboard and topic cards had the same tension.
When an unstable topic shakes or shows a crack animation, the user immediately feels that the knowledge is weakening. That can be useful. But animation should clarify state, not stand in for it.
So I also worked on the dashboard hierarchy. Roadmaps and topics needed clearer relationships. The next action had to be easier to find. Refresh behavior needed visible feedback so the user could trust that the screen had actually updated. Replacing background auto-polling with a manual refresh and a short transition was part of the same idea.
Good interaction design does not mean adding more motion. It means the user can read the current state and move to the next action without guessing.
On April 24, the landing work continued through component cleanup, language handling, beta waitlist preparation, and mascot motion. Details like CTA-area scaling and SSR language defaults matter because they shape first impressions.
But first impressions should reinforce the product explanation, not bury it.
The question became simple: after seeing the page, does the user understand Tail Villain as a memory-training product?
The villains create pressure. The RPG visuals make review less dull. But the central sentence has to stay practical: knowledge fades, and Tail Villain turns that fading point into another question.
This work reminded me that product storytelling needs boundaries, just like system design.
In system design, I separate the rules owned by the backend from the state rendered by the frontend. The landing page needed a similar split. Retention and spaced review are the product rules. RPG style is the presentation layer that makes those rules memorable.
If those layers are reversed, the product may look more exciting, but the reason to use it becomes weaker.
Tail Villain’s landing page should not explain a game. It should explain the problem of forgetting and the practice loop that brings knowledge back under pressure.
The villain is the face of that story. The reason for the product is still retention.