A quest card an eight-year-old can read

By the morning of 14 October the whole campaign was in, from the first morning to Lantern Night. My first message of the day was "how do I start a new game?"

I played it, and the first thing that stopped me was the card that offers you a quest.

The finished quest card: Mother Agnes's face at the top, a big title, three picture steps and a reward panel Where the day ended up: the same quest, offered on my own design.

A card we only just had

The card itself was a day old. On 13 October I had sent a long list from my kids' playtests, and two lines in it asked for this. "When undertaking a quest, the user should have an option shown, on a separate modal or something, saying 'Accept this quest ...' with the quest details, reward, how to undertake it and some pointers etc." And for the end of one: "we need to show a big success modal etc, and make the user feel good."

In the same list I asked that "only the core Quest option should have a quest icon". Other quests "should be discovered organically, rather than directed." The agents built both cards and one quest mark per conversation on the existing quest engine.

It worked. It was also a form.

The old accept card: a long title, World Paused, a Close Esc button, three boxed steps with Show me, a reward line and footer text The accept card on the morning of 14 October. The name tags of Tilly and Mother Agnes float over it from the world behind.

"Too much for an 8 year old"

I sent a screenshot with a blunt note: "This needs a lot more UI work, it's very confusing without much visual hierarchy and too much for an 8 year old to take in."

Then my thoughts, in order. "Remove the bold esc close, subtle x in top right is fine." "World paused words aren't needed." Of the Show me button: "I don't know what 'Show me' does here? I don't think this should be on here... I think only 2 options are accept or 'not now'." For the giver: "Let's do a small mini face of her in a circle, then just her name. Maybe centralise?" And: "The quest items and reward need splitting up a little, and they need to be more visually obvious / scannable." I finished with "Do some of your own adjustments too (can we remove focus style as well). Take a look at all those bits, let's get this right."

A Claude owner started with a test of my one rule, that the card offers only Accept and Not now. It failed with three buttons, then passed with two. Everything else I listed went too, and each step became one short line.

The tidied card: Mother Agnes's face in a circle, a centred title, What to do with three short steps, a separate reward box, Not now and Accept The agents' pass at my notes, later that morning.

It was cleaner. I had asked "can you show me an image of the new card when you get it", but while I waited I realised a list of fixes would never give me what I had in my head. So I stopped it: "I'm going to give you a new quest card layout and design, so don't spend any more time on that."

My own card

Half an hour later I sent two mock-ups, "3 and 5 card designs", and a pack of the parts: a parchment window with the village drawn along its top, the giver's face and a speech bubble, a big title, numbered picture steps with a pin saying where each happens, a reward panel and a green Let's Go!

Nick's mock-up for a three-step quest: a parchment window with Mother Agnes, Help Tilly's Dad!, three picture steps, a reward panel, Not now and Let's Go! My three-step mock-up, as I sent it.

One rule came with them: "Make sure that you compress these images into AVIF or WebP etc. accordingly and don't use these kind of high res PNGs."

The owner built it to the mock-ups, placing the real title, steps and buttons in my window's own pixels. Every quest got short card copy and every step a painted picture. The mock-up showed XP, but the game has none, so it was left out.

Under the hood The step pictures were generated with OpenAI's image model under a US$25 stop: 61 pictures including a pilot and seven redraws, for US$2.63. They ship as AVIF with WebP fallbacks and no PNG, and a card loads only its own, so the first quest's card costs about 420 KB.

Smaller, everywhere

Late that morning the card came back and I sent a punch list of pictures. "The left edge of those flowers is wrong?" "Mother Agnes can be zoomed out a little." And the big one: "Doesn't work on phone, will need everything 'smaller'."

Each became a small fix: the vine repainted, all sixteen givers' faces pulled back to head and shoulders, and a phone layout where the steps become a row you swipe.

The quest card on a phone on its side: Mother Agnes small at top left, the title, the reward at top right and three picture steps in a row The same card on a phone on its side.

Under the hood The check that mattered was a sweep, not a screenshot: every quest's offer, started and success card opened in the live game at seven screen sizes down to a 360x640 phone, looking for scrolling, clipped text, overlaps and buttons under 44 px. Zero problems.

The design was merged to main that afternoon.

Everything else, the same way

I liked what that card had become, and the rest of the game no longer matched it. "We went through kind of systematically that quest card. Like, we made the escape just a small X in the top right. Kind of the button view, the kind of the overall layout. We've got some pieces to build up that kind of look. Let's put everything else through that kind of idea now." I named the house upgrades, the inventory, "the map, the quest, the journal, any of those kind of things that pop up", and added: "I definitely think this should go on its own kind of sub-agent."

A second owner took every panel through the same pass, with a frame, heading plaque, small × and buttons cut from my pack: inventory first, then the map, journal, trade, crafting, home, conversation, settings and tips. The same three things went everywhere: Close/Esc, World Paused and the footer lines.

The inventory before: a dark leather frame, Close Esc and World Paused, dark green slots, and name tags floating over the backpack The inventory just before the pass.

The inventory after: a parchment frame with a plaque title, green and parchment tabs, light slots with count badges and a small × top right The inventory after, merged that afternoon.

One fix came free with it: while a panel is open, the world's overlays now hide, so people's name tags no longer float across the cards.

Under the hood The frame, plaque, buttons, cards and slots are defined once in a shared stylesheet; panels only set their size and place. The quiet focus (no ring when a card opens, a soft one once you use the keyboard) is one helper shared by seven parts of the UI.

That evening I played again. "Hover on the green button goes 2x size. Same for other buttons." And on the quest list in the corner: "Let's remove all this 'track' ability. Just show top left as needed." The buttons stopped growing and Track went: the HUD follows a quest by itself.

What I took from it

Removing things helped most. Every line I cut was one a child would otherwise have had to read and ignore: a keyboard hint, a status word, a button they could not explain. That held for every panel.

The agents were good at applying a list, and delivered a cleaner card within the morning. But the card I wanted only arrived once I drew it. A note says what is wrong; a picture says what right looks like, and the agents built a picture faithfully. Next time I care how something looks, I'll draw it first.

When someone in Brackenmere asks you to help them, a card pops up telling you about the quest. On 14 October I played the whole game through and that card was the first thing that stopped me. By the evening it had been redrawn from scratch, and every other window in the game had been made to match it.

The finished quest card: Mother Agnes's face at the top, a big title, three picture steps and a reward panel Where the day ended up: the same quest, offered on a card I designed myself.

Too much for an eight-year-old

The card was only a day old. My kids had asked for something that tells you what a quest is before you say yes, and a big "well done" at the end. The helpers built it, and it worked. But it looked like a form.

The old accept card: a long title, World Paused, a Close Esc button, three boxed steps with Show me, a reward line and footer text The old card. Too many words, too many buttons, and people's name tags floating over the top.

My note was blunt: "too much for an 8 year old to take in." I listed what to cut. No big Close button, just a small cross in the corner. No "World Paused". Only two choices: Accept or Not now. A little round picture of the person asking. The steps and the reward split apart so you can take them in at a glance.

The tidied card: Mother Agnes's face in a circle, a centred title, What to do with three short steps, a separate reward box, Not now and Accept The tidied card, later that morning. Cleaner, but still not what I had in my head.

So I drew it myself

While I waited I realised a list of fixes would never get me the card I was picturing. So I stopped the work and drew two designs: a parchment window with the village along the top, the person's face and a speech bubble, a big title, numbered picture steps showing where each one happens, a reward box and a green Let's Go! button.

Nick's mock-up for a three-step quest: a parchment window with Mother Agnes, Help Tilly's Dad!, three picture steps, a reward panel, Not now and Let's Go! My drawing, as I sent it.

The helpers built it exactly like that. Every quest got short, simple words and every step got its own painted picture.

Smaller, so it fits a phone

When it came back I had a few small notes. The flowers on one edge looked wrong, Mother Agnes was too close up, and it didn't fit on a phone at all. All three were fixed. On a phone the steps now sit in a row you can swipe along.

The quest card on a phone on its side: Mother Agnes small at top left, the title, the reward at top right and three picture steps in a row The same card on a phone turned on its side.

Every other window too

Once the quest card looked right, nothing else in the game matched it. So the bag, the map, the journal, trading, crafting, your home and the settings all got the same treatment: the same parchment frame, the same little cross to close, and the same clutter taken out.

The inventory before: a dark leather frame, Close Esc and World Paused, dark green slots, and name tags floating over the backpack Your bag, before.

The inventory after: a parchment frame with a plaque title, green and parchment tabs, light slots with count badges and a small × top right Your bag, after.

A bonus: while a window is open, people's name tags no longer float across it. And that evening I asked for two last things: buttons stopped doubling in size when you point at them, and the list of quests in the corner now keeps track by itself.

What I learned

Taking things away helped most. Every line I cut was one a child would have had to read and ignore.

The other lesson: a list of fixes says what is wrong, but a picture says what right looks like. Next time I care how something looks, I'll draw it first.