Redesign av portefølje

Designprosessen

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.

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-prisnipper, 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.

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).