Redesign av portefølje
Jeg ble kontaktet av en front-end utvikler som ønsket et redesign av porteføljen sin. Målet var å skape en stilren, brukervennlig og profesjonell plattform som fremhever utviklerens ferdigheter på en tydelig og engasjerende måte.
Om prosjektet
- Plattform
- Nettside
- Periode
- Des 2024 - jan 2025
- Oppdrag
- Freelance for en front-end utvikler
I korte trekk
En stilren portefølje som gjør det enkelt å finne frem til arbeidet.
Bakgrunn
Utvikleren ville ha en mer profesjonell og brukervennlig portefølje.
En front-end utvikler kontaktet meg for å redesigne porteføljen sin med mål om å skape en mer profesjonell og brukervennlig plattform for å vise frem arbeidet sitt. Porteføljen skulle ikke bare være visuelt tiltalende, men også effektiv i å kommunisere kompetanse og prosjekter til potensielle arbeidsgivere og kunder.
Designprosessen
Behovsanalyse, wireframes og tre iterasjoner av en prototype i Figma.
Behovsanalyse og wireframes
Jeg startet med en behovsanalyse for å forstå utviklerens mål, hvilke prosjekter som skulle fremheves, og hvilke funksjoner som var viktigst. For å sikre en optimal struktur tok jeg inspirasjon fra Nielsen Norman Group sine anbefalinger for UX-porteføljer (NNG Group, 2023). Deres forskning understreker viktigheten av tydelig navigasjon, konsise prosjekthistorier og en enkel, men strategisk oppbygning av innholdet. Dette hjalp meg med å sette opp wireframes som prioriterte brukervennlighet og effektiv kommunikasjon.
Prototyping og iterasjoner
For å sikre en sømløs overgang fra design til kode utviklet jeg en interaktiv prototype i Figma. Dette ga utvikleren en realistisk forhåndsvisning av hvordan porteføljen ville fungere og gjorde det enklere å teste interaksjoner før implementering. Muligheten til å bytte mellom lys og mørk modus ble også implementert i prototypen, slik at utvikleren kunne teste funksjonaliteten før lansering. Prosjektet gikk gjennom tre iterasjoner, hvor jeg utførte brukertester for å identifisere forbedringspunkter. Jeg jobbet tett med utvikleren gjennom hele prosessen, slik at han kunne komme med innspill og sikre at løsningen både fungerte optimalt teknisk og oppfylte hans behov. Dette iterative arbeidet sikret en brukersentrert tilnærming og et resultat som var både funksjonelt og visuelt gjennomført.
Løsning
Tydeligere navigasjon, bedre struktur og lys/mørk modus.
Navigasjon og struktur
Header og navigasjon
For å gjøre navigasjonen intuitiv og brukervennlig designet jeg en fiksert navigasjonsmeny som gjør at menyen alltid er synlig mens brukeren scroller. Dette er basert på NNG Groups forskning på sticky headers (NNG Group, 2023), som viser at brukere navigerer mer effektivt når de har konstant tilgang til hovedmenyen. Jeg la også til en visuell understrekning av hvilken side brukeren er på, for å gi bedre kontekst og redusere kognitiv belastning. Dette hjelper brukerne med å forstå hvor de befinner seg i porteføljen til enhver tid.
For prosjektsidene implementerte jeg navigasjonssti (breadcrumbs), slik at brukerne enkelt kan se hvordan de havnet der de befinner seg, og navigere tilbake uten forvirring. Dette følger prinsippet om «Recognition Over Recall», der designet hjelper brukeren å gjenkjenne stedet i strukturen fremfor å huske det selv.
Struktur og brukervennlighet
Under arbeidet oppdaget jeg at utvikleren ikke hadde en egen Kontakt-side eller footer, noe som kunne gjøre det vanskelig for potensielle arbeidsgivere å nå ut. Basert på UX-prinsipper, og fokus på tilgjengelighet, la jeg til en enkel og oversiktlig kontaktside. I tillegg ble en footer lagt til for å samle all viktig informasjon og gjøre navigasjonen lettere.
Inspirasjonen kom fra NNG Groups forskning på footere (NNG Group, 2023), som viser hvordan en godt designet footer kan forbedre brukeropplevelsen ved å tilby en fleksibel måte å navigere på. Dette følger prinsippet om «Flexibility of Use», slik at brukere enkelt finner veien videre, på den måten den som bruker siden måtte ønske.
Tilgjengelighet
Lys og mørk modus
Jeg valgte å implementere lys og mørk modus i porteføljen for å gi brukerne muligheten til å tilpasse brukeropplevelsen etter deres personlige preferanser og behov. Forskning viser at mørk modus kan redusere øyeanstrengelse, spesielt i svakt belyste omgivelser, og dermed forbedre lesbarheten for brukere som bruker porteføljen over lengre tid (Nielsen Norman Group, 2023). På den andre siden fungerer lys modus bedre i godt opplyste omgivelser og kan også bidra til å øke lesbarheten i visse situasjoner (W3C, 2020). Ved å tilby begge alternativene gir nettsiden brukeren valgfrihet til å tilpasse grensesnittet etter egne behov og sikre en komfortabel brukeropplevelse under alle lysforhold.
Valget om å inkludere muligheten for lys og mørk modus er også i tråd med WACA-prinsippene for tilgjengelighet, som understreker viktigheten av å designe nettsteder som er tilpasset forskjellige brukerbehov og preferanser. Dette prinsippet støtter inkluderende design og bidrar til en bedre opplevelse for brukere med lysømfintlighet eller migrene, som kan ha vanskelig for å bruke grensesnitt med høy lysstyrke (W3C, 2020).
Min læring fra prosessen
Hva jeg lærte av å designe for en utvikler.
