Samhällskontraktet
Samhällskontraktet
Bakgrund
Bakgrund
Samhällskontraktet är ett partnerskap mellan Eskilstuna kommun, Västerås stad och Mälardalens Universitet som utforskar och tar sig an komplexa samhällsutmaningar.
De har två fokusområden: Barn och unga lyckas och välmående och självständiga äldre.
I kursen användbar design tilldelades ett design case där uppdraget bestod av att skapa förbättringsförslag till deras webbplats som är mer anpassad för deras målgrupper. Detta skapades genom en målgruppsanalys samt en prototyp av webbplatsen för Samhällskontraktet med fokus på storytelling med en visuell balans mellan bild och information.
Samhällskontraktet är ett partnerskap mellan Eskilstuna kommun, Västerås stad och Mälardalens Universitet som utforskar och tar sig an komplexa samhällsutmaningar.
De har två fokusområden: Barn och unga lyckas och välmående och självständiga äldre.
I kursen användbar design tilldelades ett design case där uppdraget bestod av att skapa förbättringsförslag till deras webbplats som är mer anpassad för deras målgrupper. Detta skapades genom en målgruppsanalys samt en prototyp av webbplatsen för Samhällskontraktet med fokus på storytelling med en visuell balans mellan bild och information.
Bakgrund
Samhällskontraktet är ett partnerskap mellan Eskilstuna kommun, Västerås stad och Mälardalens Universitet som utforskar och tar sig an komplexa samhällsutmaningar.
De har två fokusområden: Barn och unga lyckas och välmående och självständiga äldre.
I kursen användbar design tilldelades ett design case där uppdraget bestod av att skapa förbättringsförslag till deras webbplats som är mer anpassad för deras målgrupper. Detta skapades genom en målgruppsanalys samt en prototyp av webbplatsen för Samhällskontraktet med fokus på storytelling med en visuell balans mellan bild och information.
Roll
Roll
Interaktionsdesigner, UX/UI designer
Interaktionsdesigner, UX/UI designer
Verktyg
Verktyg
Figma, FigJam, Zoom, Outlook, Slack
Figma, FigJam, Zoom, Outlook, Slack
Tidsram
Tidsram
10 veckor
10 veckor
Roll
Interaktionsdesigner, UX/UI designer
Verktyg
Figma, FigJam, Zoom, Outlook, Slack
Tidsram
10 veckor
Problem
Problem
Den nuvarande webbplatsen för Samhällskontraktet är inte särskilt målgruppsanpassad. Webbplatsen ska fungera som nav för kommunikation och bidra till att skapa förståelse, engagemang och trovärdighet. Webbplatsen ska ha tydliga ingångar till samtliga målgrupper, ha en balans mellan berättande och fakta samt tydlig CTA för hur målgrupperna kan engagera sig. Detta var utgångspunkten för detta design case, vilket innebar en markant målgruppsanalys samt UX-audit på den nuvarande webbplatsen.
Den nuvarande webbplatsen för Samhällskontraktet är inte särskilt målgruppsanpassad. Webbplatsen ska fungera som nav för kommunikation och bidra till att skapa förståelse, engagemang och trovärdighet. Webbplatsen ska ha tydliga ingångar till samtliga målgrupper, ha en balans mellan berättande och fakta samt tydlig CTA för hur målgrupperna kan engagera sig. Detta var utgångspunkten för detta design case, vilket innebar en markant målgruppsanalys samt UX-audit på den nuvarande webbplatsen.
Problem
Den nuvarande webbplatsen för Samhällskontraktet är inte särskilt målgruppsanpassad. Webbplatsen ska fungera som nav för kommunikation och bidra till att skapa förståelse, engagemang och trovärdighet. Webbplatsen ska ha tydliga ingångar till samtliga målgrupper, ha en balans mellan berättande och fakta samt tydlig CTA för hur målgrupperna kan engagera sig. Detta var utgångspunkten för detta design case, vilket innebar en markant målgruppsanalys samt UX-audit på den nuvarande webbplatsen.
Designprocess
Designprocess
Agil projektledning
Målgruppsanalys
Prototypande
Användbarhetstester
Agil projektledning
Under detta design case arbetade vi i gruppen genom agil projektledning, vilket innebar flexibla beslut, effektivt arbete och nära kundsamarbete. Arbetet löpte på under tre sprint-veckor samt tid emellan dessa för analys och bearbetning. Detta var ett nytt arbetssätt för mig som var både produktivt och lärorikt.
Här användes sprinttavla samt en prioriterad projekttavla för att enkelt spåra de olika moment som valts ut under projektets gång.
Agil projektledning
Målgruppsanalys
Prototypande
Användbarhetstester
Agil projektledning
Under detta design case arbetade vi i gruppen genom agil projektledning, vilket innebar flexibla beslut, effektivt arbete och nära kundsamarbete. Arbetet löpte på under tre sprint-veckor samt tid emellan dessa för analys och bearbetning. Detta var ett nytt arbetssätt för mig som var både produktivt och lärorikt.
Här användes sprinttavla samt en prioriterad projekttavla för att enkelt spåra de olika moment som valts ut under projektets gång.
Designprocess
Agil projektledning
Målgruppsanalys
Prototypande
Användbarhetstester
Agil projektledning
Under detta design case arbetade vi i gruppen genom agil projektledning, vilket innebar flexibla beslut, effektivt arbete och nära kundsamarbete. Arbetet löpte på under tre sprint-veckor samt tid emellan dessa för analys och bearbetning. Detta var ett nytt arbetssätt för mig som var både produktivt och lärorikt.
Här användes sprinttavla samt en prioriterad projekttavla för att enkelt spåra de olika moment som valts ut under projektets gång.
Resultat
Resultat
Användbarhetstester på den nuvarande webbplatsen visade att det kändes komplicerat att förstå vad Samhällskontraktet arbetar med. Språket upplevdes för internt och de långa styckena med text var för överväldigande att läsa. Majoriteten av dessa tester skedde på studenter på Mälardalens universitet, men få av dem hittade information som var riktade åt dem specifikt utan att leta en längre stund. Syftet med detta test var att identifiera de problem som användarna möter när de interagerar med webbplatsen som vi sedan kunde arbeta vidare med i en re-design i form av en prototyp.
Användbarhetstester på den nuvarande webbplatsen visade att det kändes komplicerat att förstå vad Samhällskontraktet arbetar med. Språket upplevdes för internt och de långa styckena med text var för överväldigande att läsa. Majoriteten av dessa tester skedde på studenter på Mälardalens universitet, men få av dem hittade information som var riktade åt dem specifikt utan att leta en längre stund. Syftet med detta test var att identifiera de problem som användarna möter när de interagerar med webbplatsen som vi sedan kunde arbeta vidare med i en re-design i form av en prototyp.
Resultat
Användbarhetstester på den nuvarande webbplatsen visade att det kändes komplicerat att förstå vad Samhällskontraktet arbetar med. Språket upplevdes för internt och de långa styckena med text var för överväldigande att läsa. Majoriteten av dessa tester skedde på studenter på Mälardalens universitet, men få av dem hittade information som var riktade åt dem specifikt utan att leta en längre stund. Syftet med detta test var att identifiera de problem som användarna möter när de interagerar med webbplatsen som vi sedan kunde arbeta vidare med i en re-design i form av en prototyp.
Användbarhetstest
Användbarhetstest
Low-fidelity prototyp
Low-fidelity prototyp
Koncept
Koncept
Designcaset som presenterades ville ha en tydlig balans mellan berättande och fakta. Tillsammans med resultaten från det inledande användbarhetstestet analyserades all datainsamling och en intensiv idégenerering påbörjades. Detta utspelades med bland annat metoder som affinitetsdiagram, how-might-we, skissande samt marknadsanalys på webbplatser med liknande budskap. Detta ledde till konceptet med en tydlig storytelling, där användaren sätts in i en resa där de får utforska och förtydliga sin roll i Samhällskontraktets arbeten.
Designcaset som presenterades ville ha en tydlig balans mellan berättande och fakta. Tillsammans med resultaten från det inledande användbarhetstestet analyserades all datainsamling och en intensiv idégenerering påbörjades. Detta utspelades med bland annat metoder som affinitetsdiagram, how-might-we, skissande samt marknadsanalys på webbplatser med liknande budskap. Detta ledde till konceptet med en tydlig storytelling, där användaren sätts in i en resa där de får utforska och förtydliga sin roll i Samhällskontraktets arbeten.
Användbarhetstest
Användbarhetstest
Mid-fidelity prototyp
Mid-fidelity prototyp
Första prototypen skapades i Figma i mid-fidelity version. Här testade vi även en "skiss" stil för att den ska efterlikna en pappersprototyp. För de användbarhetstesterna som utfördes så informerades deltagarna om att detta inte är en färdig prototyp och att syftet med denna version är att testa konceptet och användbarheten. Genom en tematisk analys av testsvaren upptäcktes det att många påpekade bristen på färg och bilder. Användbarheten i prototypen var förbättrad men behövdes mer arbete. Detta då vissa rubriker och språkbruk fortfarande kunde upplevas ovisst.
Första prototypen skapades i Figma i mid-fidelity version. Här testade vi även en "skiss" stil för att den ska efterlikna en pappersprototyp. För de användbarhetstesterna som utfördes så informerades deltagarna om att detta inte är en färdig prototyp och att syftet med denna version är att testa konceptet och användbarheten. Genom en tematisk analys av testsvaren upptäcktes det att många påpekade bristen på färg och bilder. Användbarheten i prototypen var förbättrad men behövdes mer arbete. Detta då vissa rubriker och språkbruk fortfarande kunde upplevas ovisst.
Användbarhetstest
Low-fidelity prototyp
Koncept
Designcaset som presenterades ville ha en tydlig balans mellan berättande och fakta. Tillsammans med resultaten från det inledande användbarhetstestet analyserades all datainsamling och en intensiv idégenerering påbörjades. Detta utspelades med bland annat metoder som affinitetsdiagram, how-might-we, skissande samt marknadsanalys på webbplatser med liknande budskap. Detta ledde till konceptet med en tydlig storytelling, där användaren sätts in i en resa där de får utforska och förtydliga sin roll i Samhällskontraktets arbeten.
Användbarhetstest
Mid-fidelity prototyp
Första prototypen skapades i Figma i mid-fidelity version. Här testade vi även en "skiss" stil för att den ska efterlikna en pappersprototyp. För de användbarhetstesterna som utfördes så informerades deltagarna om att detta inte är en färdig prototyp och att syftet med denna version är att testa konceptet och användbarheten. Genom en tematisk analys av testsvaren upptäcktes det att många påpekade bristen på färg och bilder. Användbarheten i prototypen var förbättrad men behövdes mer arbete. Detta då vissa rubriker och språkbruk fortfarande kunde upplevas ovisst.
Wireframes
Wireframes
High-fidelity prototyp
High-fidelity prototyp
Wireframes
High-fidelity prototyp
Detta design case är ett samarbete mellan fem interaktionsdesignstudenter.
I detta case presenteras de wireframes som jag själv har varit med och skapat och/eller varit delaktig i.
För att ta del av hela prototypen, klicka här.
Detta design case är ett samarbete mellan fem interaktionsdesignstudenter.
I detta case presenteras de wireframes som jag själv har varit med och skapat och/eller varit delaktig i.
För att ta del av hela prototypen, klicka här.
Detta design case är ett samarbete mellan fem designstudenter. I detta case presenteras de wireframes som jag själv har varit med och skapat och/eller varit delaktig i. För att ta del av hela prototypen, klicka här.
Om oss
Om oss
Den nuvarande webbplatsen har en sida kallad "om oss" som beskriver Samhällskontraktet arbete, hur de arbetar och deras vision. Detta var en av de mest texttunga sidor på hela webbplatsen. Denna sida arbetade jag på genom att implementera
Samhällskontraktets grafiska profil samt de bilder som delats som visar deras vardag. Mycket av utmaningen handlade om att bryta upp texten på ett vis som inte känns för överflödigt för användaren. Sidan beskriver kortfattat om deras arbete, vision och fokusområden. Layouten bryts upp med vissa stycken som citat från samarbeten i deras mörkblåa primärfärg samt tydligare CTA-knappar för att lätta få kontakt med Samhällskontraktet.
Den nuvarande webbplatsen har en sida kallad "om oss" som beskriver Samhällskontraktet arbete, hur de arbetar och deras vision. Detta var en av de mest texttunga sidor på hela webbplatsen. Denna sida arbetade jag på genom att implementera
Samhällskontraktets grafiska profil samt de bilder som delats som visar deras vardag. Mycket av utmaningen handlade om att bryta upp texten på ett vis som inte känns för överflödigt för användaren. Sidan beskriver kortfattat om deras arbete, vision och fokusområden. Layouten bryts upp med vissa stycken som citat från samarbeten i deras mörkblåa primärfärg samt tydligare CTA-knappar för att lätta få kontakt med Samhällskontraktet.
Om oss
Den nuvarande webbplatsen har en sida kallad "om oss" som beskriver Samhällskontraktet arbete, hur de arbetar och deras vision. Detta var en av de mest texttunga sidor på hela webbplatsen. Denna sida arbetade jag på genom att implementera
Samhällskontraktets grafiska profil samt de bilder som delats som visar deras vardag. Mycket av utmaningen handlade om att bryta upp texten på ett vis som inte känns för överflödigt för användaren. Sidan beskriver kortfattat om deras arbete, vision och fokusområden. Layouten bryts upp med vissa stycken som citat från samarbeten i deras mörkblåa primärfärg samt tydligare CTA-knappar för att lätta få kontakt med Samhällskontraktet.
För studenter
För studenter
Tydliga ingångar för Samhällskontraktets målgrupper var en stor del av design briefen. På grund av deras samarbete med Mälardalens universitet fokuserade vi på att skapa en sida som riktar sig mot studenter. På denna sida kan man hitta all information om hur du som student kan engagera dig i Samhällskontraktet. Sidan strukturerades genom att dela upp stycken för att lätt hitta den information som är relevant för vad användaren söker.
För att följa webbplatsens koncept med storytelling får man sedan ta del av en students berättelse (som är fiktiv i detta exempel) och hur deras resa tillsammans med Samhällskontraktet har varit. Detta skapar empati och övertygelse hos användaren att eventuellt vilja göra något liknande själv. Sidan avslutas med ett stycke för lärare på olika typer av skolor som även de kan få information om hur de tar kontakt med Samhällskontraktet.
Tydliga ingångar för Samhällskontraktets målgrupper var en stor del av design briefen. På grund av deras samarbete med Mälardalens universitet fokuserade vi på att skapa en sida som riktar sig mot studenter. På denna sida kan man hitta all information om hur du som student kan engagera dig i Samhällskontraktet. Sidan strukturerades genom att dela upp stycken för att lätt hitta den information som är relevant för vad användaren söker.
För att följa webbplatsens koncept med storytelling får man sedan ta del av en students berättelse (som är fiktiv i detta exempel) och hur deras resa tillsammans med Samhällskontraktet har varit. Detta skapar empati och övertygelse hos användaren att eventuellt vilja göra något liknande själv. Sidan avslutas med ett stycke för lärare på olika typer av skolor som även de kan få information om hur de tar kontakt med Samhällskontraktet.
För studenter
Tydliga ingångar för Samhällskontraktets målgrupper var en stor del av design briefen. På grund av deras samarbete med Mälardalens universitet fokuserade vi på att skapa en sida som riktar sig mot studenter. På denna sida kan man hitta all information om hur du som student kan engagera dig i Samhällskontraktet. Sidan strukturerades genom att dela upp stycken för att lätt hitta den information som är relevant för vad användaren söker.
För att följa webbplatsens koncept med storytelling får man sedan ta del av en students berättelse (som är fiktiv i detta exempel) och hur deras resa tillsammans med Samhällskontraktet har varit. Detta skapar empati och övertygelse hos användaren att eventuellt vilja göra något liknande själv. Sidan avslutas med ett stycke för lärare på olika typer av skolor som även de kan få information om hur de tar kontakt med Samhällskontraktet.
Alla initiativ och projekt
Alla initiativ
och projekt
Sidan "Initiativ och projekt" bjuder in användaren till att kunna bläddra bland Samhällskontraktets alla projekt. Taggar med tydligare uppdelning har lagts till där man lätt kan filtrera bland ämne och status. Korten för alla projekt har en stor yta som skapar bättre klickbarhet.
Här behöver man heller inte bli överväldigad av en lång lista med projekt utan man klickar vidare om man vill se mer. På sidan finns även en sökruta samt en kort dropdown meny som förklarar vissa ord som förekommer ofta i Samhällskontraktet.
Sidan "Initiativ och projekt" bjuder in användaren till att kunna bläddra bland Samhällskontraktets alla projekt. Taggar med tydligare uppdelning har lagts till där man lätt kan filtrera bland ämne och status. Korten för alla projekt har en stor yta som skapar bättre klickbarhet.
Här behöver man heller inte bli överväldigad av en lång lista med projekt utan man klickar vidare om man vill se mer. På sidan finns även en sökruta samt en kort dropdown meny som förklarar vissa ord som förekommer ofta i Samhällskontraktet.
Alla initiativ och projekt
Sidan "Initiativ och projekt" bjuder in användaren till att kunna bläddra bland Samhällskontraktets alla projekt. Taggar med tydligare uppdelning har lagts till där man lätt kan filtrera bland ämne och status. Korten för alla projekt har en stor yta som skapar bättre klickbarhet.
Här behöver man heller inte bli överväldigad av en lång lista med projekt utan man klickar vidare om man vill se mer. På sidan finns även en sökruta samt en kort dropdown meny som förklarar vissa ord som förekommer ofta i Samhällskontraktet.
Key take-aways
Key take-aways
Detta var en av de mest ambitiösa projekt som jag var med och arbeta på. Att arbeta nära produktägare var en ny upplevelse och gav värdefulla lärdomar om hur ett teamarbete mellan kund och designteam kan se ut. Utöver detta fick jag vässa mina kunskaper i Figma och hur man kan arbeta med en grafisk profil på ett lekfullt sätt. Användbarhet ligger inte bara i layouten, utan hur man formulerar ord. Detta var en av de största utmaningarna i projektet, då jag arbetade mer med ordspråket på en webbplats som jag inte gjort förr.
Key take-aways
Detta var en av de mest ambitiösa projekt som jag var med och arbeta på. Att arbeta nära produktägare var en ny upplevelse och gav värdefulla lärdomar om hur ett teamarbete mellan kund och designteam kan se ut. Utöver detta fick jag vässa mina kunskaper i Figma och hur man kan arbeta med en grafisk profil på ett lekfullt sätt. Användbarhet ligger inte bara i layouten, utan hur man formulerar ord. Detta var en av de största utmaningarna i projektet, då jag arbetade mer med ordspråket på en webbplats som jag inte gjort förr.