App-design – från användarbehov till klickbar prototyp

Därför lönar sig app-design före kod

Att ändra en skärm i Figma tar minuter. Att ändra samma skärm när den är programmerad, kopplad till en databas och testad kan ta dagar. App-design flyttar de dyra misstagen till den billigaste fasen. Den ger också något konkret att visa för ledning, investerare eller testanvändare innan budgeten för utveckling är beslutad.

App-designen består av två delar: UX (hur appen fungerar – flöden, struktur, vad som visas när) och UI (hur den ser ut – färger, typsnitt, knappar, ikoner). Båda ingår.

Steg 1: UX-research i rätt storlek

Research behöver inte vara ett stort projekt. För de flesta företagsappar räcker:

• Intervjuer med 4–6 tänkta användare (kunder, medlemmar eller personal), 30 minuter var
• Genomgång av nuvarande arbetssätt – vilka papper, Excel-filer eller telefonsamtal ska appen ersätta?
• Jämförelse av mönster som användarna redan känner igen från appar de använder dagligen

Resultatet är en lista med de viktigaste uppgifterna appen ska lösa, i prioritetsordning, och de ord användarna själva använder. Det senare låter som en detalj men avgör om knappar och menyer blir begripliga.

Steg 2: Wireframes och flöden

Wireframes är enkla gråskaleskisser av varje vy. De visar vad som finns var, utan att färg och bild tar fokus. Här bestämmer vi navigeringen (flikar längst ner, meny eller en enda huvudvy), vad som händer när något går fel och hur tomma vyer ser ut första gången appen öppnas.

Exempel på flöden vi alltid ritar för en företagsapp:

1. Första start och eventuell introduktion
2. Registrering och inloggning, inklusive glömt lösenord
3. Kärnflödet – det appen finns till för
4. Notiser och vad som händer när man trycker på dem
5. Profil, inställningar och radering av konto (krävs av Apple)
6. Felmeddelanden och läge utan uppkoppling

Steg 3: Klickbar prototyp i Figma

När flödena sitter gör vi den visuella designen och kopplar ihop vyerna till en prototyp. Den öppnas i Figma-appen på telefonen och känns som en riktig app: man trycker sig igenom flödet, ser övergångar och kan visa den för andra. Prototypen är det bästa underlaget för att testa med användare – fem personer som försöker lösa en uppgift avslöjar de flesta problemen.

Designen följer plattformarnas riktlinjer där det spelar roll, så att iPhone-användare och Android-användare känner igen sig, och tar hänsyn till tillgänglighet: kontrast, textstorlek som går att förstora och tillräckligt stora tryckytor.

Steg 4: Designsystem och överlämning

Designsystemet är också det som gör att en app inte ser lappad ut efter några års vidareutveckling. När en ny funktion ska byggas finns redan knappar, fält och kort att utgå från, och utvecklarna behöver inte gissa avstånd eller färger. Vi bygger komponenterna i Figma med samma namn som de får i koden, så att design och app hålls i takt. Om ni redan har en app som ska få ny design kan designsystemet införas stegvis.

Ett designsystem är en samling återanvändbara byggstenar: färger, typsnitt, avstånd, knappar, fält, kort och ikoner, med regler för när de används. Det gör att appen blir konsekvent och att nya vyer går snabbt att ta fram – både nu och om ett år när ni vill bygga vidare.

Vad som ingår och inte ingår

Ingår: research i den omfattning som behövs, flöden, wireframes, visuell design för mobil, klickbar prototyp, designsystem i Figma, två revideringsrundor och en genomgång med de utvecklare som ska bygga appen (våra eller era).

Ingår inte: logotyp och grafisk profil från grunden (vi utgår från er befintliga), fotografering, illustrationer utöver ikoner och design av webbplats eller adminpanel om det inte avtalas.

Så går det till och vad det kostar

1. Uppstart – mål, målgrupp och avgränsning (vecka 1)
2. Research och flöden (vecka 1–2)
3. Wireframes och visuell design (vecka 2–3)
4. Prototyp, test och revidering (vecka 3–4)
5. Överlämning av Figma-filer – ni äger dem

App-design kostar från 24 000 kr för en app med ett fåtal vyer. Antal vyer, antal roller (till exempel kund, personal och admin) och om research ska innehålla användartester påverkar priset. Går ni vidare med utveckling hos oss ingår designen i projektets fasta pris. Vill ni testa idén direkt efter designen är en MVP-app nästa naturliga steg. Läs också guiden om kravspecifikation för app, som designen ofta tas fram parallellt med, och räkna på hela projektet i priskalkylatorn.