Alla arbeten

UX/UI-design · TRR · Designer av samlingssidan Sök jobb, samordnad mellan områden

En del av Sök jobb på TRR: se hur delarna hänger ihop

Så samlade vi stödet för jobbsökare på ett ställe, så att användarna kunde se vilken hjälp de kunde få

Tidigare hade varje typ av stöd en egen ingång i navigeringsfältet, och ingen kunde se hela området på en gång. Jag designade en samlingssida för jobbsökare: guider, verktyg och tjänster på ett ställe, i en ordning som visar vad man gör först och vad som kommer sedan. Jag förankrade innehållet hos intressenter i organisationen och samordnade designen med designers från andra områden, så att samlingssidorna fungerar som en helhet. I användartester av den gamla navigeringen mot den nya samlingssidan hittade användarna lättare hjälp som var användbar för dem och förstod hur stödet hängde ihop.

Min roll
UX/UI-designer, i samarbete med intressenter och designers från andra områden
Bransch
Omställning och tjänster för arbetslivet
Företag
TRR
Plattform
Webb
Metod
Innehåll förankrat hos intressenter, A/B-tester med användare och avstämningar med rådgivare
Verktyg
Figma
Fungerande prototypProva självBläddra på samlingssidan, läs en guide, spara den som favorit och be om feedback på ditt cv. På svenska, på dator eller mobil.
En mockup av den nya designen: samlingssidan Sök jobb med ett introkort och guider, och framför den guiden Skriv ett bra cv med innehållsförteckning och guiden sparad som favorit

Kort version

Problemet

Varje typ av stöd hade en egen ingång i navigeringsfältet. Användarna kunde inte se hela området, så mycket av hjälpen de kunde få förblev dold.

Det här gjorde vi

En samlingssida för jobbsökare som samlar guider, verktyg och tjänster, med innehåll förankrat i organisationen och en design som delas med de andra samlingssidorna.

Vad som förändrades

I A/B-tester med användare hittade de lättare användbar hjälp med den nya sidan och förstod bättre hur stödet var uppbyggt.

01

Problemet

TRR erbjuder mycket stöd till den som söker ett nytt jobb: guider, aktiviteter, verktyg och personlig hjälp från rådgivare. Men vägen in var navigeringsfältet, med en ingång för varje typ av stöd.

Ingen överblick

Användarna såg en ingång i taget och kunde aldrig se hela området, så de visste inte allt de kunde få hjälp med.

Ingen ordning

Inget visade var man skulle börja eller vad som kom sedan. Varje ingång såg lika viktig ut.

Hjälp som förblev dold

Stöd som hade kunnat vara användbart var lätt att missa, eftersom man behövde veta att det fanns för att hitta det.

Målet

Göra TRR:s stödutbud mer synligt för användarna.

02

Design­utmaningen

Utmaningen var att visa mycket stöd på en gång utan att det blev en vägg av länkar. Användarna behövde se hela området och samtidigt förstå var de skulle börja.

Innehållet behövde fungera både för den som precis har förlorat jobbet och vill komma igång, och för den som redan vet vad den behöver och vill hitta det snabbt.

Överblick och riktning

Visa allt som finns och säg samtidigt: börja här, sedan det här.

03

Min roll och hur vi arbetade

Min roll

Jag designade samlingssidan Sök jobb: konceptet, guidernas struktur, skärmarna i Figma och prototypen vi använde i användartesterna.

Jag involverade intressenter i organisationen för att bestämma vilket innehåll sidan skulle visa. Sidan samlar stöd från flera delar av TRR, så de som äger det stödet behövde vara överens om vad som hamnar var.

Jag samordnade också designen med designerna som arbetade med de andra områdena. Sök jobb är en av flera samlingssidor, bredvid Kompetensutveckling och Starta företag, och tillsammans behövde de upplevas som en sammanhängande helhet.

Hur vi arbetade

Vi byggde en prototyp för användartester och för avstämningar med TRR:s rådgivare, som vet vilka frågor jobbsökare ställer. Sedan itererade vi designen utifrån det vi lärde oss.

Från koncept till testad design

Innehåll förankrat hos intressenter → koncept → prototyp i Figma → avstämningar med rådgivare och samordning med designers från andra områden → A/B-test av den gamla navigeringen och den nya samlingssidan → designiteration.

04

Viktiga designbeslut

Tre beslut formade designen.

  1. En sida per behov, inte en ingång per tjänstI stället för en lista med tjänster i navigeringsfältet får användaren en samlingssida byggd kring det hen vill göra: hitta ett jobb. Allt stöd för det behovet är samlat där.
  2. En ordning som visar vägenSidan går från det grundläggande till det specifika: först hur man söker jobb, sedan verktyg och tjänster, sedan mer att lära sig. Användaren ser vad hen ska göra först och vad som kommer sedan.
  3. Varje guide leder vidare till mer hjälpEn guide avslutas med relaterade aktiviteter, relaterat innehåll och ett sätt att få personlig feedback. Att läsa en guide är ingen återvändsgränd. Den leder till nästa användbara stöd.
05

Lösningen, steg för steg

Flödet följer en jobbsökare från överblicken, in i en guide och vidare till personlig hjälp. Skärmarna kommer från en fungerande prototyp byggd utifrån designen i Figma. Foton och illustrationer kommer från designfilen. Klicka på en bild för att förstora den.

Fungerande prototypProva självBläddra på samlingssidan, läs en guide, spara den som favorit och be om feedback på ditt cv. På svenska, på dator eller mobil.

Se: allt för jobbsökare på ett ställe

Samlingssidan Sök jobb: en kort introduktion, ett kort som frågar om du vill söka jobb eller bredda din kompetens, och den första sektionen med tre guider
1Samlingssidan. En sida för behovet, som börjar med hur man söker jobb. Ett kort erbjuder en annan väg för den som hellre vill bredda sin kompetens.
Två sektioner längre ner: Verktyg och tjänster med fyra verktyg, och Lär dig mer om att söka jobb med tre guider och artiklar
2Sedan verktyg, sedan mer att lära sig. Verktyg och tjänster kommer härnäst och fördjupande guider sist. Ordningen visar användaren vad hen ska göra först.

Läs: en guide med samma struktur varje gång

Guiden Skriv ett bra cv: rubrik, en kort ingress, typ och lästid, en knapp som visar att den är sparad som favorit, och en innehållsförteckning till höger
3Guiden. Typ och lästid först, en kort ingress, en innehållsförteckning och en stjärna för att spara den under Mina favoriter.
Checklistan i guiden: fem numrerade steg för att skriva ett cv, följda av en tipsruta om vad man inte ska ha med, med Checklista markerad i innehållsförteckningen
4En checklista att agera på. Råden avslutas med numrerade steg och ett kort tips, och innehållsförteckningen visar var du är.

Gå vidare: från att läsa till att få hjälp

Slutet av guiden: två relaterade aktiviteter med datum och tid, och en lista med relaterat innehåll, bland annat tjänsten Få feedback på dina ansökningshandlingar
5Relaterad hjälp. Aktiviteter med datum, relaterade guider och artiklar, och en tjänst för personlig feedback.
Formuläret för hjälp med ansökningshandlingar: vad som händer i två steg, sedan typ av hjälp, en kort beskrivning, uppladdning av ett dokument och hur du vill få återkoppling
6Be om feedback. Först förklaras vad som händer. Sedan några frågor, ett dokument och hur du vill få återkoppling.
Bekräftelsen: tack, vi har fått ditt ärende, och vi återkommer med feedback så snart som möjligt
7Bekräftelse. Den säger vad som händer sedan och hur du får återkoppling.

Samma innehåll i mobilen

Samlingssidan i en mobil med introduktionen och introkortet
Samlingssidan. Introt och det första valet.
Den första sektionen i en mobil med guiderna staplade i en kolumn
Sektioner. Korten staplas i en kolumn, i samma ordning.
Guiden Skriv ett bra cv i en mobil
Guide. Ingressen och favoritknappen kommer först.
Checklistan i en mobil med fem numrerade steg
Checklista. Numrerade steg som är lätta att följa på en liten skärm.
06

UX-beslut: vad och varför

Varje beslut svarar på ett av de tre problemen: ingen överblick, ingen ordning och hjälp som förblev dold.

Från problem till beslut

Ingen överblick

Beslut 1–2: en samlingssida per behov, med alla typer av stöd sida vid sida.

Ingen ordning

Beslut 3–5: sektioner som går från det grundläggande till det specifika, ett första val högst upp och samma struktur i varje guide.

Hjälp som förblev dold

Beslut 6–8: relaterad hjälp i slutet av varje guide, en kort väg till personlig feedback och favoriter att komma tillbaka till.

Besluten i detaljerna

  1. Organisera efter behov, inte efter tjänstAnvändare tänker inte i tjänster. De tänker ”jag behöver ett jobb”. Samlingssidan Sök jobb är döpt efter det behovet och samlar allt som hjälper med det.
  2. Blanda typer på samma sidaGuider, artiklar, verktyg och tjänster ligger tillsammans på sidan. Varje kort visar vilken typ det är och hur lång tid det tar, så att användaren kan välja det som passar just nu.
  3. Först det här, sedan det därSektionerna går från ”hur du söker jobb” till ”verktyg och tjänster” till ”lär dig mer”. Ordningen i sig är vägledning, och det var den som fick användarna att förstå hur stödet hängde ihop.
  4. Erbjud en annan väg högst uppAlla vill inte söka jobb direkt. Ett kort högst upp frågar om du hellre vill bredda din kompetens, med ”Inte intresserad” för att dölja det.
  5. Samma struktur i varje guideEn kort ingress, några avsnitt, en checklista och ett tips. När du har läst en guide vet du hur du läser nästa.
  6. Avsluta varje guide med nästa stegRelaterade aktiviteter, relaterat innehåll och en tjänst för personlig feedback. Guiden blir en väg in till mer stöd, inte slutet på det.
  7. Gör det lätt att be om personlig hjälpFeedbackformuläret förklarar vad som händer i två steg innan det frågar något, har få fält och låter användaren välja mejl eller att bli uppringd.
  8. Låt användarna komma tillbakaEn stjärna sparar en guide under Mina favoriter i menyn, så att användaren kan gå tillbaka till den utan att söka igen.
07

UI-design: vad och varför

Mycket innehåll behövde kännas lugnt och lätt att skumma. De här visuella besluten gör det möjligt.

Samlingssidan Sök jobb som den designades i Figma, med TRR:s logotyp, foton och illustrationer på korten, verktygen med ikoner och sidfoten
Samlingssidan i Figma. Designen som den gjordes för TRR, med tjänstens egna foton och illustrationer.
  1. Byggt på TRR:s designsystemLila för handlingar, Raleway för rubriker och Open Sans för text, med de befintliga komponenterna. De nya sidorna känns som en del av samma tjänst.
  2. Ett mönster för alla samlingssidorSamordnat med designerna för de andra områdena, så att samlingssidorna är uppbyggda på samma sätt. Att gå från Sök jobb till Kompetensutveckling känns som samma tjänst.
  3. Ett kort, flera storlekarDen viktigaste guiden får ett stort kort med bild. Resten får ett kompakt kort med bilden vid sidan. Storleken visar var man ska börja.
  4. Typ och tid på varje kortEn färgad etikett visar om det är en guide eller en artikel, bredvid nivå och lästid. Användaren ser vad hen får innan hen klickar.
  5. En innehållsförteckning som följer medPå breda skärmar har guiden en innehållsförteckning som stannar kvar och markerar avsnittet du läser.
  6. Numrerade checklistorRåd som ska omsättas i handling visas som numrerade steg, skilda från den löpande texten, så att de är lätta att följa.
  7. Foton för guider, illustrationer för idéerGuider om praktiska uppgifter använder foton av människor som arbetar. Bredare ämnen, som att hitta sin arbetsmarknad eller gå på intervju, använder illustrationsstilen. Bilden antyder vilken sorts innehåll det är innan du läser.
  8. Mjuka ytor för tips och valIntrokortet och tipsrutan har ljusa ytor, så att de sticker ut från innehållet utan att konkurrera med de viktigaste handlingarna.
08

Resultatet

Det här visade användartesterna

Vi testade den befintliga navigeringen (A) mot den nya samlingssidan (B). Resultatet kommer från användartesterna. Vi mätte det inte i siffror.

  • Med samlingssidan hittade användarna lättare hjälp som kunde vara användbar för dem.
  • Användarna förstod bättre hur stödet var uppbyggt: först det här, sedan det där.
  • Överblicken visade stöd som användarna inte hade hittat när varje erbjudande hade en egen ingång i navigeringsfältet.

För TRR

  • Designen svarar på målet att göra stödutbudet mer synligt för användarna.
  • Samlingssidorna delar en design som är samordnad mellan områdena, så att upplevelsen hänger ihop i hela TRR:s stöd.
  • Innehållet på Sök jobb förankrades hos de intressenter som äger stödet.

Vad jag tar med mig

Att göra stöd synligt handlar inte bara om att visa fler länkar. Det handlar om att visa hela området och samtidigt ge det en ordning.

Att testa det gamla och det nya sida vid sida gjorde skillnaden tydlig. När samma innehåll var ordnat efter behov och i en följd hittade användarna mer av det och förstod hur det hängde ihop.

Nästa case · UX/UI-design · TRR Så designade jag om matchningsprofilen – och andelen användare steg från 30 till 50 procent