Träff #21 • Designprocess • 29 maj • vt 24 UX Writing • Nackademin

Transcript

1. Designprocess 1
2. Oavsett hur omfattande ett projekt är; oavsett om vi arbetar med hela processen från start till mål eller bara med en enstaka del, så har vi ett antal grundtankar som genomsyrar varje åtagande – stort som litet. Här redovisar vi kort tre av dem. Våra grundtankar 1. Mervärdet av att arbeta i team 2. Vikten av att i varje situtation lyssna, lära och ompröva 3. Alla ska med
3. Grundtankar Ett team är mer än summan av sina delar. Ett team gör att vi kan säkra mångfald och bredd. Vi sätter ihop team för de uppdrag vi får och de problem som ska lösas. Medlemmarna har olika kompetenser och olika bakgrunder: vi skapar tvärfunktionella grupper där unga konsulter med de färskaste kompetenserna paras ihop med seniora konsulter med lång erfarenhet. Konsulter med erfarenhet från e-handel kan ge värdefulla insikter till uppdrag i offentlig sektor. En bakgrund i systemutveckling ger nya perspektiv på visuell design. Teamwork betyder också färre överlämningar, och mindre risk för att insikter och kunskaper går förlorade under processen gång. Vi vet helt enkelt att samarbete ger bättre kvalitet till dig som kund. 1. Arbeta i team
4. Våra grundtankar Upptäcka - Hitta insikter - Förfina och lägga till detaljer - Främja gemensam förståelse - Dokumentera Skapa - Utforma idéer - Ta fram skisser och prototyper Validera - Säkra att våra antaganden och lösningar stämmer med faktiska behov - Kvalitativa eller kvantitativa metoder Vår designprocess består av flera steg, där vi för ihop stakeholders, slutanvä n­ dare och våra egna yrkesdiscipliner. I varje steg har vi fokus på att ställa rätt ­ frågor, förstå de nödvändiga sammanhangen, och säkra att våra slutsatser stämmer överens med verkligheten. Lärdomar från ett steg skapar så grunden för följande steg. Upptäcka Skapa Validera 2. Lyssna, lära och ompröva
5. Grundtankar Att skapa inkluderande tjänster är en av våra grundstenar. Vi är övertygade om att tillgänglighet ger en bättre användarupplevelse för alla, inte bara för vissa specifika målgrupper. Vi säkrar att visuell design, interaktion och kod i våra lösningar följer WCAG. Vi ser också till att skapa kognitiv tillgänglighet genom lättförståelig text (UX copy) och form som hjälper människor med kort uppmärksamhet att fokusera. I user research och användningstester ser vi till att arbeta med så heterogena grupper som möjligt, så att förslag granskas ur ett mångfaldsperspektiv. ✓ Det finns permanenta hinder som till exempel nedsatt syn. ✓ Att ha en skadad arm är ett temporärt hinder. ✓ Ett situationellt hinder kan vara att ha en bebis på armen och begränsad koncentrationsförmåga. 3. Alla ska med.
6. Designprocess – en översikt Sätta syfte och mål Vår designprocess börjar med att se till att vi förstår vilken förändring vi ska möjliggöra. Vi enas om konkreta effektmål och scope. Förstå användarna Så snart som möjligt därefter vill vi lära känna användarna, för att förstå deras drivkrafter, behov, frustrationer och livssituation. Syntes och Idéarbete Nu kan vi väga verksamhetens krav och användarnas mot varandra, och börja skapa designidéer. Vi vill generera många idéer, även de som kan låta galna, för att uppmuntra nya perspektiv. Detta görs alltid tillsammans med uppdragsgivaren. Interaktionsdesign och ux-copy När vi valt inriktning börjar arbetet med interaktionsdesign. Vi jobbar iterativt, med regelbundna avstämningar för att ta beslut. Även i detta steg involverar vi användarna. Visuell design Designarbetet fortsätter till prototyper med hög detal j­ rikedom och färdig visuell stil. Här fokuserar vi också på regelrätta användnings- tester. Utveckling och uppföljning Slutligen ser vi till hur vi kan designa införande och lansering av produkten eller tjänsten. Vi ser hur en förvaltning för framtiden kan behöva organiseras. Vi utvärderar också själva projektet tillsammans med beställaren. Syntes och idéarbete Sätta syfte och mål Förstå användarna Interaktions- design och ux-copy Visuell design Utveckling och uppföljning Testa och iterera Leverans
7. De här bidrar från oss - Designstrateger - Effektkartläggare - Projektledare - Systemarkitekt Det här behöver vi från uppdragsgivaren - Genomföra ett antal workshops med rätt deltagare - Sätta en klar bild av målen som alla är överens om - Tillgång till några nyckelpersoner - Tillgång till relevant tidigare dokumentation - Identifiera och prioritera grupper av användare för att undersöka i nästa steg Exempel på leverabler - Effektkarta - Effektmål Sätta syfte och mål Förstå användarna Syntes och idéarbete Interaktionsdesign och ux-copy Visuell design Sätta syfte, scope och effektmål Vi börjar med att skaffa oss en gedigen kunskap om verksamhetens mål och uppdragets förutsättningar. Det viktigaste är få en djup förståelse för vilka utmaningar och problem som kunden har. - Varför vill man skapa nytt eller göra om det man har? - Vad ska den bestående förändringen vara när arbetet är avslutat? Vi intervjuar ledande personer i verksamheten. Vi läser också in oss på bakgrundsmaterial, inklusive grafisk profil, varumärke s­ strategi, värdeord, tonalitetsdokument. Vi gör utkast till syfte, scope och konkreta effektmål som vi diskuterar i en eller flera workshops. Där tar vi med en bred grupp av representanter från organisationen. Det är viktigt att ledande personer är med, så att syfte och ramar för projektet har godkänts på högsta möjliga nivå. Vi sätter upp en hypotes om vilka användargrupper vi måste ­ nå ut till, för att lyckas med projektet. Dessa kommer vi att undersöka närmare i nästa steg .­ Överlämning och uppföljning Designprocess
8. De här bidrar från oss I det här steget jobbar oftast två user researchers i par. Det här behöver vi från uppdragsgivaren - Normalt sett sparar det tid om uppdragsgivaren kan ordna det praktiska kring rekrytering av potentiella intervjupersoner. - Uppdragsgivaren kan ha en representant som observatör i intervjuer med användare, men deltar inte aktivt. - Vi kan behöva tillgång till statistikkällor som sökloggar, besök- eller användnings-statistik, webbanalyser etc. Exempel på leverabler - Kundresekartor - Beskrivningar av typanvändare/grupper - Vägledning om prioritering - Insiktsrapporter Sätta syfte och mål Förstå användarna Syntes och idéarbete Interaktionsdesign och ux-copy Visuell design Förstå användarna I det här steget samlar vi kunskaper och insikter om användarna: deras behov och drivkrafter som är relevanta för att verksamheten ska nå de eftersträvade effekterna. Vi försöker hitta mönster så vi att kan samla användarna i tydliga grupper. Vi arbetar både med kvalitativa och kvantitativa metoder. Vi samlar insikter genom djupintervjuer och observationer i användarnas normala miljö. Vi analyserar data som sökloggar, besök- eller användningsstatistik, etc. Vi fokuserar inte på demografi utan på beteenden, roller och djupare behov. Vi tänker inte bara på slutanvändarna, utan även de interna användarna, så de kan jobba så effektivt med systemet som möjligt. Resultaten blir en eller flera artefakter, där vi så fylligt som möjligt ger en grund för att prioritera vilka användargrupper som har störst möjlighet att bidra till de givna effektmålen. Överlämning och uppföljning Designprocess Charles Deluvio / Unsplash
9. De här bidrar från oss - Designstrateg - Tjänstedesigner Det här behöver vi från uppdragsgivaren - Rätt deltagare i workshops för att få brett kompetens- perspektiv - Få tillgång till nyckelpersoner för att kunna ställa frågor kring rangordning av idéer och tester Exempel på leverabler - Idé-workshops - Konceptutveckling - Design Thinking-processer Sätta syfte och mål Förstå användarna Syntes och idéarbete Interaktionsdesign och ux-copy Visuell design Överlämning och uppföljning Designprocess Nu gäller det att skapa en syntes av verksamhetens krav och användarnas behov och problem. Vad finns det för lösningar som tillfredsställer båda? Vi jobbar med att ta fram en mångfald av idéer och perspektiv och använder flera metoder för att hitta så många idéer med så hög kvalitet som möjligt. Via workshops tillsammans med olika kompetenser hos uppdragsgivaren får vi en bra spridning och olika vinklar på idéerna. Idéerna går igenom en urvalsprocess och prioritering. De mest lovande tas vidare till nästa steg för att bli skisser som kan testas på användare. Syntes och idéarbete Jason Goodman / Unsplash
10. I vårt idéarbete gör vi … 10 Klustring & urval av idéer Efter ideationsfasen klustrar vi liknande teman och ger varje idégrupp en titel. Grupperna få välja en eller flera idéer att gå vidare med utifrån definierade kriterier, t ex genom omröstning med hjälp av klisterpluppar eller rangordna idéer utifrån: - De teamkompetenser som behövs - Inkomstpotential mellan 1-4 - Arbetsinsats mellan 1-4 - Hur säker man är på ovanstående från 10-100% Om man multiplicerar inkomstpotential- siffran med procenttalet och delar med arbetsinsats-siffran får man ett poäng som går lätt att ställa i kontrast mot övriga ideer. How might we-frågor Vi brukar använda oss av “How might we”- frågor som vi skapar genom att omformulera de viktigaste insikterna från vår användarresearch till frågor. Det gör vi för att kunna vända problemen till designlösningar och samtidigt få en bra balans mellan ett konkret formulerat problemområde och tillräckligt med utrymme för kreativa tankar, till exempel inför ideation workshops. Skisser & tester De vinnande idéerna eller idén conceptualiseras och utvecklas sedan vidare till mer konkreta idéer som kan testas på användare. Ideation workshops Ideation och conceptutveckling är en bra process för att låta grupper arbeta kreativt och samarbeta för att generera en stor mängd kreativa idéer på kort tid. Det är bra att ha en bred kompetens- spridning bland de som är med. För att alla ska känna sig bekväma med att generera både bra och mindre bra idéer inför varandra brukar vi börja med några olika uppvärmningsövningar. Olika sätt att få fram ideer kan vara genom association, negativ brainstorming, användarperspektiv etc. Tiden för idé- generering bör hållas kort för att sätta lite press på grupperna. Sätta syfte och mål Förstå användarna Syntes och idéarbete Interaktionsdesign och ux-copy Visuell design Överlämning och uppföljning
11. Leverabler i idéarbetet 11 Test och lärdomskort Vi använder ibland test och lärdomskort för att testa våra ideer och hypoteser på ett strukturerat sätt. Testkort Vi tror att… (hypotes) För att verifiera det kommer vi att… (test) Och mäta… (mätpunkt) Vi har rätt om… (kriterie) Lärdomskort Vi trodde att… (hypotes) Vi observerade… (observation) Från detta lärde vi oss att… (lärdomar och insikter) Därför kommer vi att… (beslut och handling framöver) Sätta syfte och mål Förstå användarna Syntes och idéarbete Interaktionsdesign och ux-copy Visuell design Överlämning och uppföljning
12. Sätta syfte och mål Förstå användarna Syntes och idéarbete Interaktionsdesign och ux-copy Visuell design Interaktionsdesign och ux-copy Nu konkretiserar vi idéerna och koncepten genom att göra skisser, wireframes och enkla prototyper. Vi jobbar i gemensamma designprocesser, via workshops och ­ direkt i de specialiserade verktyg som vi använder. Vi skapar flöden, informationsstruktur och innehåll. Vår ux-copy ser till att språket och tonaliteten anpassas till målgruppen samt följer riktlinjer för tillgänglighet. I detta skede arbetar vi med snabba iterationer och snabb feedback. Vi gör täta, regelbundna tester med slutanvändare och kunder, för att se om vår design fungerar – i början med enkla skisser och så småningom med mer omfattande klickbara prototyper. Vi delar också löpande design med uppdragsgivaren, för att verifiera om vi uppfattat detaljerna rätt. Överlämning och uppföljning Designprocess De här bidrar från oss - Interaktionsdesigners - UX-designers - UX-copy - Systemarkitekt Det här behöver vi från uppdragsgivaren - Snabb feedback på skiss och förslag - Tillgång till testpersoner - Verifiera tekniska lösningar Exempel på leverabler - Flödesschema - Wireframes - Klickbara prototyper - Riktlinjer för tonalitet - Skrivregler för UX-copy - Specifikationer till utvecklare - Specifikationer till grafiska designers Bild: Amélie Mourichon / Unsplash
13. De här bidrar från oss - Art Directors - UI-designers - Grafiska formgivare Exempel på leverabler - Moodboards - Grafisk profil - Typografi - Färgkarta - Bildmanér - CSS - Ikoner - Rörlig grafik Sätta syfte och mål Förstå användarna Syntes och idéarbete Interaktionsdesign och ux-copy Visuell design Visuell design Parallellt med interaktionsdesign och ux- copy arbetar vi med att ta fram rätt visuellt uttryck för tjänsten eller produkten: färg, form, typografi, bilder, ikoner och rörlig grafik. Ibland finns redan en färdig designprofil. Då gäller det att lösa hur den på bästa sätt kan tillämpas den på den nya tjänsten eller produkten. Ibland gäller det att ta fram en visuell design från början, att hitta ett helt nytt uttryck som kan skilja tjänsten från sina konkurrenter och locka rätt kunder eller användare. Vi säkrar alltid att formen uppfyller kraven på tillgänglighet: tillräckliga färgkontraster, läsbar typografi, bilder som är möjliga att tolka, och andra krav. Överlämning och uppföljning Designprocess Zdan Ivan /Shutterstock
14. De här bidrar från oss - Projektledare - Effektstrateg - Kommunikatör Det här behöver vi från uppdragsgivaren - Samarbete kring kommande steg Exempel på leverabler - Införandestrategi - Lanseringsmaterial - Backlog - Roadmap - Onboardingmaterial - Manualer - Mätplan Sätta syfte och mål Förstå användarna Syntes och idéarbete Interaktionsdesign och ux-copy Visuell design Utveckling och uppföljning Sista steget i vår designprocess handlar om att säkra att vi verkligen bidrar till beställarens övergripande syfte. Är den digitala produkten tillräcklig? Behövs det andra åtgärder? Hur ska den lanseras? Kan den vidareutvecklas? I detta steg tar vi fram vår mätplan. Vi bestämmer exakt vad ska vi mäta, när, och hur. Det ger oss tydliga kriterier för att säga om projektet är lyckat (eller om vi behöver göra mer). Vi samlar också ihop idéer om möjliga förbättringar. Vi summerar vår backlog och gör en preliminär utvecklingsplan (roadmap) för framtida utveckling. Slutligen gör vi, tillsammans med ­ Utveckling och uppföljning Designprocess Priscilla Du Preez on Unsplash