UX design
Etikprövningsmyndigheten- Designprocess
Etikprövningsmyndig-heten
Designprocess
Etikprövningsmyndigheten- Designprocess



Design process
Design process
Research och analys
Informationssstruktur
Wireframing
Prototyping och visuell design
Användartester och iterationer
Research och analys
Informationssstruktur
Wireframing
Prototyping och visuell design
Användartester och iterationer
Research och analys
Research och analys
Vi inledde arbetet med en omfattande analys av den befintliga webbplatsen för att identifiera de största tillgänglighetsproblemen. Redan här blev det tydligt att långa texter, komplexa menyer och svagt visuellt fokus försvårade för användare att snabbt hitta rätt information. För att fördjupa vår förståelse använde vi både empatiska tester med skärmläsare och synsimulatorer samt en omvärldsanalys där vi jämförde andra myndigheters webbplatser. Dessa metoder gav oss insikter om hur personer med olika funktionsvariationer upplever hinder när de navigerar digitala tjänster.
Vi kompletterade analysen med användartester på den befintliga sidan, där vi lät representanter från målgruppen interagera med webbplatsen. Testerna visade bland annat att navigeringen var svår att förstå, att dropdown-menyerna inte fungerade med tangentbord och att textmängden upplevdes som överväldigande. En användare med synnedsättning hade problem med att följa visuellt fokus, och en person med dyslexi upplevde att de långa texterna gjorde det svårt att snabbt hitta relevant information.
Genom att kombinera observationer, tester och omvärldsanalys fick vi en tydlig bild av webbplatsens brister. Detta gav oss en stabil grund för att påbörja arbetet med en ny informationsstruktur och en mer användarvänlig design.
Vi inledde arbetet med en omfattande analys av den befintliga webbplatsen för att identifiera de största tillgänglighetsproblemen. Redan här blev det tydligt att långa texter, komplexa menyer och svagt visuellt fokus försvårade för användare att snabbt hitta rätt information. För att fördjupa vår förståelse använde vi både empatiska tester med skärmläsare och synsimulatorer samt en omvärldsanalys där vi jämförde andra myndigheters webbplatser. Dessa metoder gav oss insikter om hur personer med olika funktionsvariationer upplever hinder när de navigerar digitala tjänster.
Vi kompletterade analysen med användartester på den befintliga sidan, där vi lät representanter från målgruppen interagera med webbplatsen. Testerna visade bland annat att navigeringen var svår att förstå, att dropdown-menyerna inte fungerade med tangentbord och att textmängden upplevdes som överväldigande. En användare med synnedsättning hade problem med att följa visuellt fokus, och en person med dyslexi upplevde att de långa texterna gjorde det svårt att snabbt hitta relevant information.
Genom att kombinera observationer, tester och omvärldsanalys fick vi en tydlig bild av webbplatsens brister. Detta gav oss en stabil grund för att påbörja arbetet med en ny informationsstruktur och en mer användarvänlig design.
Identifierade brister
Identifierade brister
1️⃣
Texttungt innehåll
2️⃣
Svår navigering
3️⃣
Problem med hjälpmedel
4️⃣
Drop-down menyer
5️⃣
Visuella brister
1️⃣
Sidorna innehöll långa textstycken som var svåra att ta till sig, särskilt för personer med kognitiva svårigheter eller dyslexi.
Sidorna innehöll långa textstycken som var svåra att ta till sig, särskilt för personer med kognitiva svårigheter eller dyslexi.
2️⃣
Menystrukturen var komplex och gjorde det svårt för användare att förstå var de befann sig eller hitta rätt information
Menystrukturen var komplex och gjorde det svårt för användare att förstå var de befann sig eller hitta rätt information
3️⃣
Webbplatsen gick inte att använda fullt ut med tangentbord, vilket gjorde att den inte fungerade för användare som förlitar sig på skärmläsare.
Webbplatsen gick inte att använda fullt ut med tangentbord, vilket gjorde att den inte fungerade för användare som förlitar sig på skärmläsare.
4️⃣
Dropdown-menyerna fungerade endast när man hovrade med musen, vilket exkluderade tangentbordsanvändare och skapade problem vid hög zoom.
Dropdown-menyerna fungerade endast när man hovrade med musen, vilket exkluderade tangentbordsanvändare och skapade problem vid hög zoom.
5️⃣
Färgerna gav ett oprofessionellt uttryck och kontraster var inte tillräckligt starka för att underlätta läsbarhet. Det visuella fokuset vid navigation var svagt eller otydligt, vilket gjorde det svårt att orientera sig.
Färgerna gav ett oprofessionellt uttryck och kontraster var inte tillräckligt starka för att underlätta läsbarhet. Det visuella fokuset vid navigation var svagt eller otydligt, vilket gjorde det svårt att orientera sig.
Persona, Scenario & User Journey
Persona, Scenario & User Journey

Persona
Persona
Arbetet med persona, scenario och user journey hjälpte oss att synliggöra de största hindren på den befintliga webbplatsen så som svårnavigerade menyer, långa textstycken och brist på tydlig vägledning. Samtidigt blev det ett verktyg för att rikta in vår design på att skapa en mer intuitiv, inkluderande och lättillgänglig användarupplevelse.
Arbetet med persona, scenario och user journey hjälpte oss att synliggöra de största hindren på den befintliga webbplatsen så som svårnavigerade menyer, långa textstycken och brist på tydlig vägledning. Samtidigt blev det ett verktyg för att rikta in vår design på att skapa en mer intuitiv, inkluderande och lättillgänglig användarupplevelse.
Informationsstruktur
Informationsstruktur
Efter analysen arbetade vi med att omorganisera innehållet. Målet var att skapa en mer logisk struktur med färre nivåer i menyerna och en tydligare kategorisering. Vi reducerade mängden text och fokuserade på att lyfta fram det mest centrala först. Detta gjordes genom att skapa en ny informationshierarki som placerade de mest efterfrågade sidorna närmare startsidan.
Efter analysen arbetade vi med att omorganisera innehållet. Målet var att skapa en mer logisk struktur med färre nivåer i menyerna och en tydligare kategorisering. Vi reducerade mängden text och fokuserade på att lyfta fram det mest centrala först. Detta gjordes genom att skapa en ny informationshierarki som placerade de mest efterfrågade sidorna närmare startsidan.
Wireframing
Wireframing
Nästa steg var att ta fram wireframes i Figma. Genom lågdetaljerade skisser kunde vi snabbt testa olika alternativ för hierarki, placering av innehåll och rubriknivåer. Fokus låg på att skapa en intuitiv och enkel struktur som minimerade den kognitiva belastningen. Vi kompletterade detta med en moodboard för att definiera det visuella uttrycket och skapa en känsla av professionalitet och tydlighet.
Nästa steg var att ta fram wireframes i Figma. Genom lågdetaljerade skisser kunde vi snabbt testa olika alternativ för hierarki, placering av innehåll och rubriknivåer. Fokus låg på att skapa en intuitiv och enkel struktur som minimerade den kognitiva belastningen. Vi kompletterade detta med en moodboard för att definiera det visuella uttrycket och skapa en känsla av professionalitet och tydlighet.






Wireframes
Wireframes
Prototyping & Visuell design
Prototyping & Visuell design
När wireframes var färdiga utvecklade vi en interaktiv prototyp i Figma. Här lade vi till visuella element såsom en ny färgpalett, mer läsbar typografi och ikoner för att stödja förståelsen. Dropdown-menyer ersattes av enklare navigeringsalternativ, en sökfunktion lades till för flexibilitet, och startsidan fick en tydligare uppdelning mellan forskare och forskningsdeltagare. Prototypen designades med WCAG 2.2 och universella designprinciper som vägledning, bland annat enkel och intuitiv användning, uppfattbar information och tolerans för misstag.
När wireframes var färdiga utvecklade vi en interaktiv prototyp i Figma. Här lade vi till visuella element såsom en ny färgpalett, mer läsbar typografi och ikoner för att stödja förståelsen. Dropdown-menyer ersattes av enklare navigeringsalternativ, en sökfunktion lades till för flexibilitet, och startsidan fick en tydligare uppdelning mellan forskare och forskningsdeltagare. Prototypen designades med WCAG 2.2 och universella designprinciper som vägledning, bland annat enkel och intuitiv användning, uppfattbar information och tolerans för misstag.



Prototyp (startsida)
Prototyp (startsida)
Användartester & Iterationer
Användartester & Iterationer
Slutligen genomförde vi användartester med representanter från målgruppen, bland annat personer med dyslexi och en användare med synnedsättning. Feedbacken var avgörande för att iterera prototypen. Vi upptäckte exempelvis behovet av tydligare rubriker, större klickytor och mer konsekvent vägledning med hjälp av färg och text. Iterationerna resulterade i en prototyp som inte bara blev mer tillgänglig, utan också mer användarvänlig och trovärdig för hela målgruppen.
Slutligen genomförde vi användartester med representanter från målgruppen, bland annat personer med dyslexi och en användare med synnedsättning. Feedbacken var avgörande för att iterera prototypen. Vi upptäckte exempelvis behovet av tydligare rubriker, större klickytor och mer konsekvent vägledning med hjälp av färg och text. Iterationerna resulterade i en prototyp som inte bara blev mer tillgänglig, utan också mer användarvänlig och trovärdig för hela målgruppen.
Resultat
Resultat
Resultatet av projektet blev en prototyp som visade hur Etikprövningsmyndighetens webbplats kan göras mer tillgänglig, intuitiv och trovärdig för både forskare och forskningsdeltagare. Genom kortare texter, tydligare navigering och en mer enhetlig visuell design skapade vi en lösning som upplevdes enklare och mer inkluderande vid våra tester.
Resultatet av projektet blev en prototyp som visade hur Etikprövningsmyndighetens webbplats kan göras mer tillgänglig, intuitiv och trovärdig för både forskare och forskningsdeltagare. Genom kortare texter, tydligare navigering och en mer enhetlig visuell design skapade vi en lösning som upplevdes enklare och mer inkluderande vid våra tester.
Startsida



Före
Före
Startsida



Efter
Efter
Etikprövning - så går det till


Före
Före
Etikprövning - så går det till


Efter
Efter
Mina lärdomar
Mina lärdomar
En viktig lärdom för mig var hur universell design kan omsättas i praktiken – från informationsstruktur till visuella val. Jag insåg också hur avgörande det är att involvera olika typer av användare i testningen, eftersom deras perspektiv synliggjorde problem som annars lätt hade förbisetts. Projektet gav mig erfarenhet av att arbeta både metodiskt och användarcentrerat, vilket jag tar med mig in i framtida designutmaningar.
En viktig lärdom för mig var hur universell design kan omsättas i praktiken, från informationsstruktur till visuella val. Jag insåg också hur avgörande det är att involvera olika typer av användare i testningen, eftersom deras perspektiv synliggjorde problem som annars lätt hade förbisetts. Projektet gav mig erfarenhet av att arbeta både metodiskt och användarcentrerat, vilket jag tar med mig in i framtida designutmaningar.