Majako logo
Om Majako
Användarvänlighet

Majako designprocess

Vi följer en väldefinierad designprocess som från början identifierar och bemöter de viktiga frågorna.

blogg-majako-designprocess


En väldefinierad designprocess som från början identifierar och bemöter de viktiga frågorna samt etablerar en rigorös metodik för att utvärdera resultat må förvisso innebära en högre "up-front"-kostnad jämfört med att direkt implementera funktionalitet på (om än aldrig så träffsäker) magkänsla, men detta vägs i längden mer än väl upp för av att man så tidigt som möjligt kan utveckla rätt lösningar för rätt problem. Genom att användaren får sina faktiska behov tillgodosedda ökas konverteringsgraden, och tid, pengar och arbete besparas genom att man slipper utveckla fullfjädrade lösningar på samma problem om och om igen genom "trial and error".

Eftersom det ofta är svårt att direkt från början hitta en optimal lösning, eller ens finna och identifiera användarnas faktiska behov (då de ofta inte ens vet säkert själva!), är det högst önskvärt att ha en iterativ process där man börjar enkelt och upprepar processen med ökad detaljnivå när man bättre förstår problemet. Alla intressenter och delaktiga i utvecklingsprocessen involveras tidigt för att kunna hålla en fokuserad arbetsgång där varje part är väl införstådd med problemet och kan komma med synpunkter, råd och invändningar innan alltför mycket arbete måste göras om.

När?
  • När ett nytt projekt påbörjas
  • När ett nytt problem uppdagas eller vid ny insikt

Iterationscykel, abstrakt nivå

Ett steg är inte nödvändigtvis avslutat för att nästa steg påbörjas, utan man återkopplar och förfinar löpande när man erhåller ny insikt om problemet. Varje givet steg i processen kan (beroende på problemet) vara mycket kort: man bör sträva efter så korta iterationer som möjligt för att snabbt få brukbara lösningar som kan förbättras vidare.

  1. Förstå och definiera problemet
  2. Skissa lösningar
  3. Utveckla en lösning
  4. Utvärdera lösningen
  5. Iterera från steg 1 med ökad detaljnivå

Iterationscykel, detaljnivå

Detta är en anpassad version av den process Google använder för intern utveckling samt lär ut i sina kurser. Den ursprungliga processen är avsedd för större bolag med dedikerade designteam, men i praktiken hos ett mindre bolag som Majako kan enskilda steg slås ihop eller helt hoppas över vid behov, beroende på projektets omfattning. Då vi arbetar i ett litet team med tätt samarbete i alla faser bör kolumnen "vem?" ses som en indikation på vem som gör det huvudsakliga arbetet, snarare än som en exkluderande regel.

Steg Namn Beskrivning Vem?
1 Förstå Förstå problemet och designutmaningar:
Vem/Vad/Varför: Vad är användarnas "pain points" och förväntningar? Vad var funktionens ursprungliga syfte? Har vi användardata? Kan vi samla feedback för att bättre förstå problemet?
Klient, utvecklare, designers
2 Definiera Etablera fokus: specifik kontext och önskat utfall
Ta fram mätmetoder (Google Analytics, Hotjar, etc.) för utvärdering
Klient, utvecklare, designers
3 Brainstorma/skissa Kolla UX-benchmarks, vanliga lösningar, konkurrenter
Brainstorming, "hur kan vi?"
Informationsarkitektur
Rita (pappers-)skisser av olika lösningar för mobil och desktop
Besluta vilka lösningar (eller kombinationer av olika designer) att bygga
Designers, utvecklare
4 Designa (lo-fi) Bygg enkla prototyper med låg detaljnivå med grundläggande interaktion
Övervägande mobilanvändare: mobile-first med progressive enhancement
Övervägande desktopanvändare: graceful degradation
Designers
5 Validera fas 1 Designers får intern feedback från utvecklare
Har vi besvarat den ursprungliga frågan/mött användarnas behov?
Designers, utvecklare
6 Designa och iterera (hi-fi) Bygg detaljerade prototyper för mobil och desktop med responsiv design
Färg, typografi, ikoner, avstånd, designprinciper (ex.vis Gestalt), rörelse, osv.
Hur ska interaktion ske?
Hur ska element och bakgrund bete sig vid hovring/klick?
Aktiva/inaktiva element
Övergångar
Designers
7 Validera fas 2 Designers får ytterligare feedback från utvecklare
Har vi besvarat den ursprungliga frågan/mött användarnas behov?
Bredare intern testning om möjligt och nödvändigt
Iterera tills användarnas "pain points" är åtgärdade
Visa design för klienten
Designers, utvecklare, klient
8 Brukbara prototyper Utveckla faktiskt brukbar funktionalitet Utvecklare
9 Validera fas 3 Samla och granska mätvärden som definierat i steg 2
Kan vi göra A/B-testning på sidan?
Samla feedback från användare för fortsatt förbättring
Användbarhetsenkät om nödvändigt
Designers, utvecklare
10 Retrospektion Vad föll väl ut? -- Vilka verktyg sparade tid? Vilka steg var bra?
Vad kan förbättras? -- Vilka problem uppstod oftast? Vad var de största utmaningarna inom teamet? Hindrade den nuvarande processen teamet från att utveckla bättre lösningar?
Utvärdera utfallet: över- eller underskattade vi mängden arbete som krävdes? Påverkade någon extern faktor produktiviteten? Löser den slutliga designen faktiskt användarens problem?
Designers, utvecklare