Alla arbeten

UX/UI-design · Savvy Match · UX/UI-design för en mobilapp

Matcha jobbsökande med företag – enkelt, med ett svep åt vänster eller höger

Som produktdesigner hjälpte jag till att göra grundarnas idé om rättvis och fördomsfri rekrytering till en native mobilapp för kandidater och arbetsgivare. Jag designade användar­flödena, från wireframes och prototyper till färdigt UI, och byggde ett design­system så att upplevelsen höll ihop och kunde skalas upp.

Min roll
Produktdesigner
År
2021–2022
Bransch
Rekrytering
Företag
Savvy Match
Team
De två grundarna och utvecklarna
Plattform
Mobilapp, iOS och Android
Verktyg
Figma
Fyra mobilskärmar från Savvy Match-appen: startskärmen, matchningskriterier, ett jobbkort att svepa och profilen

Kort version

Utmaningen

Kandidater förbisågs på grund av kön, ålder och etnicitet. Grundarna ville i stället ha en plattform som matchar på kompetens, kulturell passform och potential.

Vad jag gjorde

Jag designade användar­flödena och tjänsten för kandidater och arbetsgivare, definierade MVP:n tillsammans med grundarna och byggde design­systemet.

Vad jag levererade

Utvecklings­klart UI för en native app, med specifikationer, interaktiva prototyper och dokumentation av design­systemet för utvecklarna. Appen har lanserats sedan dess. Min del var flödena, upplevelsen och överlämningen till utvecklarna.

Det här gjorde jag som produktdesigner

Research och riktning

Desk research om matchningsplattformar och rekrytering fri från fördomar, med grundarnas djupa insikt i rekrytering som grund.

Användarresor och wireframes

Centrala användarresor för kandidater och arbetsgivare, först som lo-fi-wireframes som vi förfinade tillsammans med grundarna.

UI-design för iOS och Android

Färdiga skärmar i Figma för kandidatens hela resa, från registrering till chatt.

Interaktionsdesign

Ett kort att svepa, med tre tydliga val, matchningskriterier som chips som går att lägga till och ta bort, och korta onboarding-steg.

Design­system

Färger, typografi, ikoner och komponenter, byggda medan jag designade flödena, så att appen höll ihop och kunde växa.

Överlämning till utvecklarna

Designspecifikationer, interaktiva prototyper och dokumentation av design­systemet, med stöd under utvecklingen.

01

Utmaningen

De två grundarna kom till mig med ett tydligt uppdrag: att förändra rekrytering genom att ta bort fördomar och diskriminering. Efter många år i branschen hade de sett kandidater förbises på grund av kön, ålder och etnicitet.

Deras vision var en plattform som matchar kandidater och företag på kompetens, kulturell passform och potential. De hade djup rekryteringskunskap från båda sidor, kandidatens och arbetsgivarens.

Designen behövde få match­ningen att kännas enkel och rättvis, utan att tappa det som krävs för en relevant matchning.

02

Så arbetade jag

Min roll var att designa användar­flödena och tjänsten för kandidater och arbetsgivare, redo för utvecklarna att bygga. Vi definierade MVP:n tillsammans, och jag arbetade i fyra steg.

  1. ResearchDesk research om olika matchningsplattformar och bästa praxis för rekrytering fri från fördomar. Grundarna bidrog med de viktigaste insikterna från sin erfarenhet, och de blev grunden för kärnfunktionerna.
  2. Sätta designriktningenJag kartlade de centrala användarresorna för kandidater och arbetsgivare och gjorde lo-fi-wireframes av de viktigaste interaktionerna. Riktningen förfinade vi tillsammans med grundarna.
  3. Designa helhetsupplevelsenJag designade hela upplevelsen och den visuella identiteten i löpande iterationer med grundarna, och byggde ett design­system för komponenter, typografi och interaktioner.
  4. ImplementeringJag arbetade nära utvecklarna med detaljerade designspecifikationer, interaktiva prototyper och dokumentation från design­systemet, och fanns kvar för att svara på frågor och förfina detaljer.
03

Appen, flöde för flöde

Kandidatens resa, från första skärmen till samtal med ett företag. Alla skärmar är på svenska. Klicka på ett flöde för att förstora det.

Skapa konto och logga in

Fem mobilskärmar: Savvy Matchs startskärm, språkval, inloggning, skapa konto med e-post, Google eller Apple, och en fyrsiffrig verifieringskod
Ett språkval, sedan logga in eller skapa konto med e-post, Google eller Apple, och bekräfta med en kod.

Onboarding: vad du letar efter

Fem mobilskärmar: en inbjudan att ange kriterier för bättre jobbförslag, hur och var du vill arbeta, vilka områden som intresserar dig, en sammanfattning av matchningskriterierna som chips och det första matchade jobbet
En kort inbjudan som går att hoppa över, sedan tre frågor med stegindikator. Kriterierna sammanfattas som chips som går att ta bort eller lägga till innan de första matchade jobben visas.

Agera på jobbmöjligheter

Fyra mobilskärmar: ett jobbkort med matchning i procent, kortet som sveps, en dialog efter visat intresse och en bekräftelse på att intresset har skickats
Varje jobb är ett kort med match­ningen i procent, matchningskriterierna och tre val: inte intresserad, intresserad och spara. När du visar intresse får du en tydlig bekräftelse på vad som händer härnäst.

Profil och matchningskriterier

Fem mobilskärmar: profilen med foto, kontaktuppgifter och om mig, uppladdning av ett dokument, fliken för matchningskriterier samt listor över sparade jobb och jobb där intresse visats
Profilen och matchningskriterierna ligger sida vid sida i två flikar, så att kandidaten när som helst kan uppdatera vad hen letar efter.

Sparade jobb och chatt

Fyra mobilskärmar: sparade jobb, en lista med chattar med företag och ett samtal med ett företag som innehåller en möteslänk
Sparade jobb, visat intresse och jobb du tackat nej till samlas på ett ställe. När ett företag hör av sig fortsätter samtalet i appen.
04

Design­system

Jag byggde design­systemet medan jag designade flödena. Det höll komponenter, typografi och interaktioner konsekventa och gjorde det lättare att bygga vidare på appen.

En tavla med komponenter: inmatningsfält, chips, alternativ, steppers, knappar, avatarer, accordions, dialoger, navigering, badges och jobbkortets layout
Komponenter och layouter. Inmatningsfält, chips, knappar, steppers, dialoger, navigering och jobbkortet, var och en i sina varianter.
Färgpalett för bakgrund, yta, handling, fel, varning, info, lyckat och text, en typografiskala och Savvy Match-logotypen i mörkt och ljust
Färg, typografi och logotyp. Djup marinblå för varumärket, en klar lila för handlingar och markeringar, och fullständiga uppsättningar för fel, varning, info och lyckat.
Ett ark med ikoner och deras namn
Ikoner. En namngiven uppsättning för hela appen.

Vad jag tar med mig

Det var väldigt roligt att vara med i det här projektet, och jag är stolt över att ha hjälpt till att skapa en plattform för en rättvisare och fördomsfri rekrytering.

Att arbeta så nära grundare som kände sitt område så väl gjorde att deras insikter formade produkten från första dagen. Min del var att omsätta den kunskapen i flöden och skärmar som kändes enkla att använda.

Nästa case · Produkt- & UX-ledarskap · Baemingo Jag ledde produkt och design så att restauranger kunde växa med plattformen, och Baemingo kunde växa med dem