Skip to main content

Own product · Built with a team of AI agents · 2026

Logging a quiz night in under a minute

A pub quiz app I started for my own group. I drafted the spec with AI, Claude Code agents built it, and I made the design calls along the way.

By Sabina Nordell, Senior UX/UI Designer

Role
Design direction and product ownership
Tools
Claude Code, SvelteKit, Svelte 5, Tailwind CSS, Zabi Components, Supabase, Vercel, Playwright

Who it’s for

I started Quizrundan for my own pub quiz group in Stockholm, and other groups use it too. A group of friends, usually three to eight, logs each quiz night, rates the pub, and works through a round of pubs. The moment that matters is at the table, right after the results are read out.

The spec had four personas, and I added a fifth: Maja, who finds the app in a social post and has no group yet. They aren’t research. The agents use them to check a flow.

The goal and the limits

One goal came first: logging a night at the table takes under 60 seconds. It does.

Groups never see each other. Only the pub list is shared.

Free tiers only, which ruled out Sign in with Apple.

No photos from pubs or Google. Only one of the 19 pubs had an openly licensed photo, so each gets a drawing.

How I worked with the agents

The agents write the code, so my design work happens in the calls: my answers to their questions, and what I approve, reject, or pick from their reviews.

One call that changed a build: the first build put the Overall rating last. QA flagged it, I moved Overall to the top, and it was rebuilt the same day.

  1. Sabina

    The spec

    Drafted with AI, owned by Sabina. Dated 4 October.

    • Product
    • Brand
    • Flows
    • Backend

    Every agent reads the same files

  2. Claude Code agents

    The team

    They write the code

    • Product: three roles, all added
    • Design: two from the start, two added
    • Engineering: four from the start
    • Six roles at the start
    • Eleven by 19 October
  3. An agent

    Hits a gap

    The spec is silent or unclear

  4. An agent

    Writes a question

    At most 8 lines, with options and a proposed default

    Example question, made up for this page

    Should saving a night play a sound? Default: no sound

    • ANo sound, the default
    • BA short sound when the night is saved

    Built: A

  5. An agent

    Builds the default

    And carries on. The pull request lists it under Decisions.

  6. Sabina

    Answers

    In the questions file, when she can

  7. Sabina’s answer

    The same as the default?

    • The same: it stays as built
    • Different: a new task for the agents

Sabina

Makes the calls

She approves, rejects, or picks from the agents’ UX, UI, brand, and visual reviews. Only she merges to main.

How Quizrundan is built: every agent works from Sabina’s spec, a gap in it becomes a question with a default, and her answer keeps the default or makes a new task. Only she merges to main. The question is an example, made up for this page.

Logging a night in three steps

The night: the pub, with tonight’s quizzes first, the date, who came, and the team name. A planned quiz fills most of it in.

Ratings: one score for the whole team, Overall first, the score the ranking counts. Every category can be skipped.

Result: placement, number of teams, and points. Anything left out can wait as a draft.

Saving ends on a screen that reacts to the result and suggests three untried pubs, so the next one is picked at the table.

Goal: under 60 seconds, at the table

  1. Step 1 of 3

    Kvällen

    The night

    • PubNeeded
    • DateNeeded. Starts as today
    • Who was there?Starts with you ticked
    • Team name tonightStarts as the group’s
    • Theme
  2. Step 2 of 3

    Betyg

    Ratings

    One score for the whole team.

    • OverallCounts in the ranking
    • The group’s other categories
    • Notes about the night (optional)
  3. Step 3 of 3

    Resultat

    Result

    Fill in what you know.

    • Placement, Number of teams
    • Our points, Max points
    • Winner’s points

    Can’t remember it all? That’s fine, the rest can wait.

    It ends with Save as draft or Save the night

Logging a quiz night: the three steps of Log visit in Quizrundan, with the app’s English labels. The 60-second goal is for the whole log, not for each step.

Three design decisions

One rating per night, agreed at the table. A rating from each person would turn a quick decision into a survey.

No league between groups. Stats ranks the group’s own pubs by its own ratings.

A group picks its own round. The spec gave every group the same 19 quizzes, so a group that finished had nothing left to aim for. Since 13 October a group can pick its own pubs, and since 16 October a theme, the original 19 among them.

Giving it a brand

I named it Quizrundan, “the quiz round”, with a nod to doing the rounds of every pub. The spec set the voice: the funniest friend in your quiz team, quick, warm, and a bit cheeky. The base is ultramarine, and from a studio’s site I picked flat colour blocks and two type voices. Sunshine yellow on that blue read too much like the Swedish flag, so blossom pink became the accent.

After the first release the app felt grey to me and short on personality, with no clear main action. I picked one per screen, booking the next quiz first. I tried DynaPuff for headlines and Inter for text, and kept both. DynaPuff is playful like a pub quiz, gives the app personality, and suits the drawings.

Later that day it still felt dated to me, and I asked why. A review found the brand on about eight of 60 screens. I approved a new direction, with the round as a board of 19 stamps on Home. Visited pubs get a check, and every pub keeps its full colour.

In dark mode the blue head on Home was too bright, so I asked for every block one step darker.

Colour

  • Ultramarine#0026EA

    The brand colour. Brand blocks, and the one main action on a light screen.

  • Navy#183A89

    Text and lines on light screens, and the label on a pink button.

  • Blossom pink#EB8FFE

    The accent. The one main action on blue and at night, and every filled star.

  • Tint#CDDEFF

    A card you can open. At night, what’s selected.

  • Sunshine#FDD715

    Only for things that are yellow, like a pub portrait’s ground. Never a button.

  • Light

    • Page: paper, #F8FAFF
    • Text: navy
    • Main action: ultramarine, with a white label
  • Navy night

    • Page: navy, #0A1E4A
    • Text: pale blue, #EFF5FF
    • Main action: blossom pink, with a navy label
    • Blocks: ultramarine a step darker, #0018A7

Type

  • DET HAR GÅTT EN MÅNAD.

    DynaPuff

    Display lines, section heads, and big numbers

  • Ett betyg för hela laget.

    Inter

    Body text, labels, and buttons

    Shown here in Avenir Next, this site’s sans

Shapes

  • Stamp

    A pub on the round: a square tile with small corners, and a navy check once the team has been.

  • Star

    A rating. A filled star is pink with an outline, so it shows on any ground. An empty one is the outline alone.

  • Squared shapes

    Every drawing follows one rule: rectangles, circles, straight tapers, and arcs, on one baseline, with corners at 1 or 3 times the line.

Quizrundan’s brand on one sheet: its five main colours and what each one is for, the app in light and at night, its two typefaces, and three of its shapes. The shapes are simplified and drawn for this page.

Redrawing the drawings

The drawings follow the style of Okra Livia, who is in my quiz group and made the references. An illustrator agent draws them in SVG, some from sketches I made with AI. I wasn’t happy with the first set, and the rounder second set was worse: the first set’s squared shapes suit the app and SVG better. I approved a sample of six on 19 October. The same day the illustrator agent redrew the mascot, portraits, avatars, group marks, empty states, and app icon from simple shapes. They ship with the next release.

  1. Version 1

    Rectangles, circles, and ellipses, butted together

    Later judged the better one, for its squared shapes

  2. Version 2

    Every main shape gets a belly, a taper, or a sag

    17 October: judged worse than version 1

  3. Version 3, squared

    Only rectangles, circles, straight lines, and arcs, with one family of corners

    Sample of six approved, 19 October
One glass, drawn three ways, to show the rule behind each version of Quizrundan’s drawings. The glass is drawn for this page and isn’t one of the app’s drawings.

When I changed course

The spec planned four releases. By 11 October the second had 134 tasks and a 1,050-line questions file. I asked for a set way of working. The answer was a roadmap of briefs, three product roles to shape them, and releases named by date.

Where it is now

Quizrundan is live.

The first release came on 6 October, the day after the first commit. The latest, on 16 October, added a pub map.

Feedback from quiz groups shaped the pub list and the map, but most changes came from using it myself at quiz nights.

It also pushed my own library. By 16 October the app had filed 155 entries for Zabi Components: missing pieces, bugs, and requests.

  • Quizrundan’s Pubs tab in its dark navy theme, in Swedish. A test group, Testlaget, sits above the title Pubar, a switch between Lista and Karta, “0 av 20 besökta” (one of the 20 is a pub a test added), a search field, and filter chips. The first card shows a drawn steam engine on yellow for Flying Scotsman Inn, Mondays at 19:00, on Fleminggatan 28.

    The pub list

  • The same tab with Karta chosen: a dark map of central Stockholm with round pins. Some pins show a pub’s drawing, and numbered ones group pubs that sit close together, such as 4 in Vasastaden and 7 on Södermalm. A link above the map says one pub is only in the list: the one a test added, which has no address.

    The map

The pub list and the map, from a local test run with placeholder data: a test group that hasn’t visited any pubs yet. The pubs are real venues, apart from one a test added. Map © OpenMapTiles © OpenStreetMap contributors.

What I’d do differently

I’d plan by briefs from the first day, not by four releases. A brief is small enough to say yes to before it’s built. A release that big stopped telling me what was in flight.

About the author

I’m Sabina Nordell, a Senior UX/UI Designer in Stockholm. Want to talk about this work? Get in touch.

Read the CV