UX/UI-design · AI · TRR · I ett tvärfunktionellt produktteam
Tydligare jobbannonser, bättre filter och AI-stöd, så att fler kommer till första intervjun
TRR samlar jobbannonser från många jobbsajter och företag åt dem som TRR hjälper i omställning, och matchar dem genom varje persons matchningsprofil. Jag designade om hur man hittar och läser annonserna: kort i stället för en lista, nya filter, annonser med tydlig struktur och två AI-tjänster som togs fram i designsprintar med det tvärfunktionella teamet. Den ena jämför ditt cv med annonsen och föreslår vad du ska lyfta fram. Den andra skapar ett cv anpassat till annonsen. Delarna lanserades stegvis, och vi testade hela flödet med användare.
- Min roll
- UX/UI-designer i det tvärfunktionella produktteamet
- Användare
- Personer i omställning som söker ett nytt jobb
- Företag
- TRR
- Metod
- Designsprintar för AI-tjänsterna, användartester av hela flödet
- Plattform
- Webb, desktop och mobil
- Verktyg
- Figma
Kort version
Problemet
Jobbannonserna visades som en tät lista som var svår att överblicka, särskilt i mobilen, och annonserna var långa textblock. Att söka jobbet på ett bra sätt krävde mycket arbete.
Det här gjorde vi
Kort som visar det viktigaste direkt, nya filter, annonser med tydlig struktur och AI-stöd på annonsen som hjälper användaren att anpassa sitt cv till jobbet.
Målet
Tydligare annonser, bättre filtrering och ett enklare sätt att söka, så att fler kommer till första intervjun.
Problemet
Personer i omställning använder TRR:s jobbannonser för att hitta sitt nästa jobb. Annonserna kommer från många jobbsajter och från företag som samarbetar med TRR, och matchningsprofilen avgör vilka som föreslås. Men att hitta, läsa och söka krävde mer än det borde.
En lista som var svår att överblicka
Annonserna visades som rader i en tabell, som en lista med poster. Titel, företag och ort fanns med, men inte vad jobbet handlade om, och raderna blev trånga i mobilen.
Annonser som långa textblock
Många annonser var en enda lång text utan rubriker. Det var svårt att se arbetsuppgifter, krav och sista ansökningsdag utan att läsa allt.
Svårt att söka på ett bra sätt
För att ha en chans behöver man anpassa sitt cv till varje jobb. Att veta vad man ska lyfta fram, och göra det för varje ansökan, tar tid och kräver självförtroende.
Målet
Tydligare annonser, bättre filtrering och ett enklare sätt att söka, så att fler kommer till första intervjun.
Designutmaningen
Annonserna kommer från många källor, i många format och med varierande kvalitet. Designen behövde få dem att kännas enhetliga och lätta att jämföra, utan att kunna skriva om det arbetsgivarna skrivit.
AI-stödet skulle hjälpa användarna att söka bättre utan att ta över. Det behövde vara tydligt vad som var AI-genererat, lätt att granska och redigera, och bygga på det personen faktiskt skrivit i sitt cv och sin matchningsprofil.
Från att bläddra till att söka
Stöd hela vägen: hitta rätt annonser, förstå dem snabbt och skicka en ansökan som sticker ut.
Min roll och hur vi arbetade
Min roll
Jag var UX/UI-designer i det tvärfunktionella produktteamet. Jag designade sökningen och korten, filtren, annonssidans struktur och AI-tjänsterna, och testade flödet med användare.
Designsprintar för AI-tjänsterna
För AI-tjänsterna arbetade vi i designsprintar med hela det tvärfunktionella teamet. Tillsammans utforskade vi hur AI bättre kunde stödja jobbsökandet, och vad vi kunde bygga på kort tid för att öka chansen att komma till en första intervju.
Vi skissade och jämförde flera koncept, till exempel att redigera ett anpassat cv i en panel bredvid annonsen eller på en egen sida. Sedan valde vi de satsningar som gjorde mest för chansen till intervju och gick att bygga snabbt, och sparade resten som idéer till senare.
Så valde vi
Störst effekt på att komma till en första intervju × går att bygga på kort tid = första versionen. Resten blev ”senare”.
Stegvis, testat som helhet
Delarna lanserades en i taget: kort och filter, den tydligare annonsen, att matcha cv:t med annonsen och det anpassade cv:t. Vi gjorde användartester på hela flödet, från sökning till ansökan, så att delarna fungerade tillsammans och inte bara var för sig.
Viktiga designbeslut
Fyra beslut formade de nya jobbannonserna.
- Kort i stället för en listaVarje annons är ett kort med titel, företag, ort, en kort sammanfattning och datum. Användarna kan bedöma en annons innan de öppnar den, och kort fungerar mycket bättre i mobilen än tabellrader.
- Utgå från det vi redan vetMatchade jobb kommer från matchningsprofilen, och sökfältet föreslår roller och kompetenser från profilen och tidigare sökningar. Skriver man något annat blir det en vanlig sökning.
- En tydlig struktur för varje annonsFakta först (företag, ort, tjänst), sedan samma rubriker i samma ordning: arbetsuppgifter, kvalifikationer, meriterande, personliga egenskaper, företaget och hur man ansöker. Sista ansökningsdag och hur man söker ligger bredvid texten.
- AI där beslutet fattasAI-tjänsterna ligger på annonsen, bredvid knappen för att ansöka. Det är där användarna bestämmer sig för att söka och behöver hjälp att göra det bra.
Hela flödet
Från matchningsprofilen till den första intervjun. Steg 2 till 7 är det jag designade i det här arbetet. Matchningsprofilen har ett eget case.
- JobbsökareFyller i matchningsprofilenRoller, kompetenser, orter och ett cv. Grunden för allt som följer.
- TjänstenFöreslår matchade jobbAnnonser som passar profilen, och förslag på att uppdatera den.
- JobbsökareSöker och filtrerarFörslag från profilen och tidigare sökningar, kort och filter.
- JobbsökareLäser annonsenFakta först, samma rubriker varje gång, sista ansökningsdag bredvid texten.
- AI-stödMatchar cv med annonsenFörslag på vad som ska lyftas fram, och en sammanfattning att kopiera.
- AI-stödSkapar ett anpassat cvEn första version att granska, ändra och ladda ner.
- JobbsökareAnsökerSnabbansökan för annonser i samarbete med TRR, eller på arbetsgivarens webbplats, och markerar som sökt.
- ArbetsgivareKallar till intervjuMålet med hela flödet: den första intervjun.
I flödet jag designadeUtanför flödet jag designade
Lösningen, steg för steg
Flödet följer en jobbsökare från sökning till ansökan. Skärmarna kommer från en fungerande prototyp byggd utifrån designen i Figma. Annonser, företag och AI-svar är påhittade. Klicka på en bild för att förstora den.
Fungerande prototypProva självSök med förslag från din matchningsprofil, filtrera och se dina val, öppna en annons och prova de två AI-tjänsterna. På svenska, på dator eller mobil.Hitta: från lista till kort
Sök: förslag man känner igen
Snäva in: matchade jobb och filter
Läs: en annons med struktur
Sök bättre: AI-tjänsterna
Samma flöde i mobilen
UX-beslut: vad och varför
- Visa tillräckligt för att bestämma sigEtt kort visar titel, företag, ort, en sammanfattning på två rader och datum, så att användaren kan avgöra om annonsen är värd att öppna.
- Markera det som är tidskritiskt”Ny” och ”3 dagar kvar” på kortet hjälper användarna att agera i tid.
- Spara och markera som söktEtt bokmärke på varje kort, och en knapp på annonsen för ”Jag har sökt jobbet”, så att användarna kan hålla koll under Sparade och Ansökta.
- Föreslå, tvinga inteFörslagen kommer från matchningsprofilen och tidigare sökningar, men skriver man något annat blir det en vanlig sökning.
- Håll profilen aktuellNär jobbsökarhistoriken och cv:t pekar på bättre matchkriterier erbjuder en banner att uppdatera matchningsprofilen.
- Ett sätt att söka per källaAnnonser från företag som samarbetar med TRR får snabbansökan. Publika annonser länkar till arbetsgivarens egen webbplats.
- Förklara AI:n och låt användaren bestämmaAI-innehåll är märkt, bygger på personens eget cv och profil och kan redigeras innan det används. Tummen upp eller ner hjälper till att förbättra det.
- Hjälp med orden, inte bara rådenFörslagen visar dagens formulering bredvid en bättre, och en motiverande sammanfattning som kan kopieras direkt in i en ansökan.
UI-design: vad och varför
- Byggt på TRR:s designsystemLila för handlingar, Raleway för rubriker och Open Sans för text, med de befintliga komponenterna för kort, filter och knappar.
- Ett kort med tydlig hierarkiKällan i liten text, en fet titel, företag och ort, sedan sammanfattningen. Blicken går från vad till vem till var.
- Synlig källa”I samarbete med TRR” i blått och ”Publik annons” i grått, så att användarna direkt ser vilka annonser som går att söka direkt.
- Fakta i en liten tabellFöretag, ort och tjänst ligger i en kort tabell med ikoner, så att det grundläggande hittas utan att läsa.
- Ett igenkännbart tecken för AIAI-tjänsterna har samma gnistikon och ett mjukt lila kort, så att de sticker ut från annonsen utan att konkurrera med knappen för att ansöka.
Resultatet
Där det landade
- De nya korten, filtren, de tydligare annonserna och båda AI-tjänsterna lanserades stegvis på TRR.
- Hela flödet, från sökning till ansökan, testades med användare.
- AI-tjänsterna kom från designsprintar där teamet valde de satsningar som mest sannolikt hjälpte användarna till en första intervju, och som gick att bygga på kort tid.
Vad jag tar med mig
AI är mest användbar när någon ska agera. Att lägga den på annonsen, bredvid knappen för att ansöka, gjorde den till en del av ansökan i stället för ett separat verktyg som man behövde hitta.
Designsprintar med hela teamet gjorde det lättare att säga nej. När alla hade sett koncepten och kriterierna blev valet av de få satsningar som kunde lanseras snabbt ett gemensamt beslut.