VM-tipset 2026

Hur bygger man ett tippningsspel som hela kompisgänget vill använda — även de som annars aldrig orkar med appar?

Det här är mitt första projekt där jag inte bara designat, utan också byggt och lanserat en riktig produkt som folk använder på riktigt. VM-tipset 2026 är en privat webbsajt där jag och mitt kompisgäng tippar på alla matcher i fotbolls-VM sommaren 2026 — gruppspel, slutspel, poäng, topplistor, allt på ett ställe.

Jag hade aldrig kodat förut. Idén föddes ur ren lust: jag ville ha ett eget tipsspel utan reklam, utan konton man tvingas skapa, och utan allt det krångel som följer med de stora sajterna. Så jag bestämde mig för att bygga det själv — med ett AI-kodverktyg som parprogrammerare — och låta min UX-bakgrund forma varje beslut. Resultatet ligger live på vmtipset.org och används av gänget genom hela turneringen.

Mockuuups Free iPhone mockup on multicolored background.jpeg

OM PROJEKTET

PERIOD

~3 veckor intensiv utveckling

maj 2026

Lanserades 16 maj 2026, live under hela VM sommaren 2026.

MEDVERKANDE

Erik Hedenstedt

Ett soloprojekt från ax till limpa. Jag stod för all design, alla produktbeslut och — för första gången — själva koden. Som parprogrammerare använde jag ett AI-verktyg som skrev koden medan jag styrde riktningen, fattade besluten och testade allt. Mitt kompisgäng (drygt tio personer) har fungerat som högst verkliga testanvändare: de har skapat konton, gått med i grupper och hittat buggar åt mig längs vägen.

UPPDRAGET

Ett privat VM-tips för kompisgänget

Uppgiften var självvald: bygg en sajt där ett slutet gäng (under 50 personer) kan tippa 1X2 på alla 104 matcher i VM. Sajten skulle sköta hela turneringen automatiskt — räkna poäng, fylla i slutspelsträdet när grupperna är färdigspelade, uppdatera topplistor och påminna deltagarna inför varje ny fas. Inget offentligt, ingen öppen registrering, inga utomstående.

Eftersom jag var både beställare, designer, utvecklare och användare fick jag bredda mitt scope många gånger. Ofta i en dominoeffekt — för att lösa en sak var jag tvungen att först lösa en annan.

METOD

Mobile-first, eget designsystem och tillgänglighet på riktigt

Jag utgick från användarna: ett kompisgäng som mest sitter på telefonen och som inte vill lära sig en massa regler. Därför byggde jag mobile-first och lät hela upplevelsen vila på stilren, nordisk enkelhet — mycket luft, tydliga knappar, tydlig feedback.

Tidigt tog jag fram ett eget designsystem: en färgpalett där varje färg betyder något (grönt för rätt tips, lila för bonuspott, orange för det förvalda krysset) och återanvändbara komponenter. Eftersom tillgänglighet är det jag brinner allra mest för gjorde jag en fullständig WCAG 2.2 AA-audit och arbetade mig igenom den punkt för punkt — kontraster över 4,5:1, synliga fokusmarkeringar för tangentbord, korrekt ARIA på alla interaktiva element, och skärmläsarvänliga tabeller och diagram.

Sedan itererade jag — hela tiden. Mina kompisar hittade saker jag aldrig sett själv: knappar utan feedback som fick folk att råka skapa dubbletter, inbjudningslänkar som tappades bort i mejlappars inbyggda webbläsare, och en horisontell scroll som bara dök upp på vissa telefoner. Varje sådan upptäckt blev en liten, säker förbättring snarare än ett stort, modigt omtag.

NÅGRA DESIGNBESLUT JAG ÄR STOLT ÖVER

Ett säkerhetsnät i stället för en bestraffning. Glömmer du tippa en match låses den automatiskt till kryss vid avspark — så att alla alltid har ett tips inne och ingen åker ur leken bara för att livet kom emellan.

Inga spoilers. Vem som tippat vad avslöjas först när matchen är spelad. Innan dess ser man bara "X av Y har tippat" — spänningen bevaras och ingen kan snegla på de andra.

Återhållsamhet med mejl. Sajten skickar exakt sex mejl under hela VM, ett inför varje ny fas. Frestelsen att mejla oftare var stor, men för ett litet gäng är vägen till skräppostmappen kort — och då missar folk de mejl som faktiskt spelar roll.

En onboarding som lär ut utan att tråka. Sju korta slides introducerar reglerna, med möjlighet att hoppa över och att se dem igen senare från regelsidan.

LÄRDOMAR

Det här projektet lärde mig att design inte slutar vid prototypen. När man också bygger och driftar det man ritat tvingas man stå för varje beslut — i produktion, med riktiga användare som blir besvikna när något inte funkar. Jag insåg hur mycket UX som göms i det som händer efter lanseringen: felmeddelanden, laddningstillstånd, och det där som går sönder bara på någons alldeles specifika telefon.

Framför allt bevisade det för mig att en UX-designer som vågar närma sig tekniken kan ta en idé hela vägen — från lust till live.