Dette projekt indebar udarbejdelsen af min egen præsentationsportfolio-hjemmeside, udviklet fra bunden ved hjælp af HTML og CSS, som en del af mit eksamensprojekt. Et centralt krav i dette projekt var den grundige anvendelse af design thinking-metodikken.
Discovery Fase 1
Den indledende fase fokuserede på en dybdegående forståelse af projektets mål: at skabe en personlig præsentationsportfolio. Fokus var på at afdække behov, ønsker og den overordnede vision for hjemmesiden, før nogen konkrete design- eller kodningsbeslutninger blev truffet. Dette indebar research, indsamling af inspiration fra andre websites osv. – her stak Google’s software design meget ud som en kilde til inspiration grundet min forkærlighed for netop deres gren af minimalisme. Der blev også defineret nøgleord, der skulle kendetegne både mig og mit arbejde, samt en indledende udforskning af, hvem min målgruppe primært ville være. Målet var at fremme kreativ, åbensindet udforskning og bygge et solidt fundament af forståelse.
Interpretation Fase 2
I denne fase blev indsigterne fra Discovery-fasen analyseret og tygget på for at definere en klar retning og et meningsfuldt designfundament. Jeg besluttede mig tidligt for at anvende en minimalistisk tilgang, da det er en æstetik, jeg personligt værdsætter højt. Minimalisme kan også bidrage til en mere overskuelig kodningsproces, men det er ikke nødvendigvis en nemmere opgave designmæssigt, da vellykket minimalisme kræver stor præcision og omtanke. Udfordringen ligger ofte mere i den kreative og psykologiske afdeling, hvilket er områder, jeg føler mig hjemme i.
Påstand: God minimalisme er designmæssigt sværere, end man tror. Understøttelse: Designeksperter som John Maeda (“The Laws of Simplicity”) og Dieter Rams (“Less, but better”) argumenterer for, at det kræver dyb forståelse og omhyggelig overvejelse at opnå effektiv minimalisme. Hver eneste element skal have en klar funktion og berettigelse. (Kilde: Designteori og anerkendte designeres filosofier).
Persona og målgruppe Baseret på fortolkningen af mine mål og den ønskede stil, definerede jeg min målgruppe mere præcist. Jeg valgte at sigte relativt bredt som freelancer, men den kan primært beskrives således: Jeg henvender mig til passionerede iværksættere, som brænder for et produkt og søger hjælp til at brande det. Mere specifikt henvender jeg mig til personer, hvis produkt befinder sig inden for tech (smarte apps, innovative tech-produkter, boligprodukter som lamper og køkkenmaskiner osv.), high-end fashion og lifestyle produkter med design som centralt element. På min portefølje lægger jeg vægt på, at jeg har egenskaber inden for design, tone of voice, æstetisk design, konceptudvikling, logodesign, produktfotografi, sociale medier og generel kreativ markedsføring mm.
På min “Om mig”-side nævner jeg også følgende kompetencer:
Concept and Branding Strategy
Creative Marketing, Physical Prototyping
Product Photography
Visual Design
Persona Development
Interactive Design Psychology
Product Design
Market Research
UI/UX Psychology
User Testing
Adobe Firefly AI
Figma
Adobe Photoshop
Adobe Premiere Pro.
Her er en persona-beskrivelse, der blev udarbejdet i denne fase:
Persona: Navn: Anna Rolle:
Startup Founder Baggrund: Anna er en iværksætter, der lancerer sit første produkt – en cykelhjelm med indbygget varmelegeme, lys og headset. Hun har en teknisk baggrund og en passion for cykling, men begrænset erfaring med branding og marketing.
Mål: Etablere en stærk brandidentitet, nå ud til early adopters og skabe opmærksomhed omkring sin innovative hjelm.
Udfordringer: Ingen eksisterende brandingprofil, begrænsede ressourcer og usikkerhed om, hvordan produktet skal positioneres på markedet.
Behov: Klar vejledning i branding, effektive strategier til at tiltrække opmærksomhed og støtte til at opbygge et genkendeligt og troværdigt brand gennem visuel identitet, tone of voice, kreativ marketing, sociale medier, influencer-samarbejder osv.
Ideation Fase 3
Med en klarere forståelse for projektets retning og målgruppe, fokuserede denne fase på at generere en bred vifte af idéer og koncepter. Her eksperimenterede jeg frit med forskellige designveje og visuelle udtryk.
Der blev udforsket potentielle farveskemaer, og forskellige koncepter for layout og brugerflow blev skitseret. Det var også her, et tidligt udkast til et design, som jeg senere valgte ikke at gå videre med, tog form.
Disse tidlige, mere abstrakte idéer og koncepter blev derefter præsenteret ved et “silent feedback”-arrangement. Dette arrangement viste sig at være yderst værdifuldt, da det skabte en platform for at modtage ærlig og anonym feedback på de overordnede designretninger og koncepter fra flere forskellige perspektiver, hvilket sikrede, at kritikken var objektiv, inden der blev lagt for meget arbejde i konkrete udarbejdelser.
Experimentation Fase 4 (Eksperimentering & Prototyping)
På baggrund af den valgte retning og feedbacken fra idéfasen, begyndte den konkrete udformning og prototypeudvikling. Farvepaletten blev endeligt valgt. Det var i denne fase, at arbejdet med style tiles og wireframes fandt sted for at visualisere sidens struktur og æstetik.
Efter denne mere detaljerede planlægning og visualisering begyndte processen med at kode hjemmesiden. Kodning var ikke en opgave, der faldt mig naturligt, så jeg gjorde en bevidst indsats for at starte tidligt for at undgå stress senere i processen. Med hjælp fra AI til at forklare koncepter og forbedre forståelsen fik jeg succesfuldt bygget det grundlæggende layout og rammeværk for hele hjemmesiden, inklusive dens kernefunktioner. Selvom det oprindeligt var frustrerende, blev jeg mere komfortabel med at kode. Jo mere jeg arbejdede med koden, desto mere intuitiv blev min forståelse, da jeg begyndte at genkende mønstre, og hvordan forskellige elementer interagerede. Dette hjalp med at mindske den indledende følelse af at være overvældet af dens kompleksitet.
Ud fra den valgte farvepalette og de færdige wireframes fik jeg hurtigt kodet et framework for siden, som jeg var rigtig tilfreds med. Derefter handlede det om at bygge nogle undersider til mine porteføljeprojekter, der fulgte samme stil. Selve brødteksten og de korrekte billeder ventede jeg i første omgang med at perfektionere, da jeg anså det for en “nemmere” del. Heraf var “tone of voice” det vigtigste, men da jeg har et naturligt flair for dette og nyder at lege med det, gemte jeg denne del som en slags “dessert” og fokuserede i stedet på andre mere presserende opgaver som at færdiggøre procesportfolioen og lære om hosting og GitHub-deling.
Jeg havde også en opgave i at kontakte firmaet Clutch Nutrition for at høre, om det var acceptabelt, at jeg brugte et udkast til et redesign og rebranding af deres produkt Clutch Mindset (en energidrik uden koffein) på min hjemmeside. Jeg havde tidligere været i dialog med dem om et potentielt samarbejde, som dog ikke blev realiseret grundet forskellige visioner for projektets retning. De gav tilladelse, så længe det tydeligt blev nævnt, at det var et forslag/udkast og ikke en reel repræsentation af firmaet. Udover Clutch-projektet valgte jeg ét yderligere projekt fra min private historik, der fokuserede på at skabe et stærkt logo og visuelt udtryk for et (i denne kontekst fiktivt) brand kaldet “Roll”. De resterende fire projekter stammede fra min uddannelse: tone of voice, konceptudvikling, produktfotografi og hjemmeside-redesign.
Landingsside Billedet i toppen af min landingsside, som er det første, brugeren møder, blev bevidst valgt med teksten “Why is this text important?” på et stort billboard. Formålet var at fange folks nysgerrighed og øjeblikkeligt stille dem et simpelt, men yderst relevant spørgsmål. Dette peger på min overbevisning om, at teksten på en stor billboardreklame (og i overført betydning, al kommunikation) er yderst vigtig, og læseren forventes at få en forståelse af hvorfor på deres færd gennem resten af hjemmesiden.
Påstand: At stille spørgsmål og vække nysgerrighed kan fange brugerens opmærksomhed.
Understøttelse: “Curiosity Gap”-princippet inden for copywriting og marketing postulerer, at ved at præsentere information, der skaber et hul i brugerens viden, motiveres de til at søge svaret og dermed engagere sig yderligere. (Kilde: Marketing- og kommunikationsteori, f.eks. George Loewensteins teorier om nysgerrighed).
Påstand: Teksten på en billboardreklame (og vigtig kommunikation) er meget vigtig.
Understøttelse: Effektiviteten af out-of-home (OOH) reklamer som billboards afhænger i høj grad af et klart, koncist og virkningsfuldt budskab, da eksponeringstiden ofte er kort. Vigtigheden af stærkt verbalt indhold er et kerneprincip i al markedsføring. (Kilde: Reklame- og marketingteori).
Generelt benytter hjemmesiden designprincipper som C.R.A.P. (Contrast, Repetition, Alignment, Proximity) og A.I.D.A.-modellen (Attention, Interest, Desire, Action) for at sikre, at det visuelle og skriftlige indhold er tydeligt, behageligt, intuitivt og ubesværet at navigere i. Der er altså lagt vægt på god kontrast og på at sikre, at elementer er korrekt justeret (alignment) og har passende afstand (proximity), samt at overskrifter tydeligt fremstår som overskrifter og brødtekst som brødtekst. Knapper er designet, så de tydeligt forstås som interaktive elementer.
Påstand: C.R.A.P.-principperne sikrer tydeligt, behageligt og intuitivt visuelt design.
Understøttelse: Robin Williams’ C.R.A.P. designprincipper er bredt anerkendt inden for grafisk design for at skabe visuel orden, hierarki og klarhed, hvilket forbedrer læsbarhed og brugerforståelse. (Kilde: “The Non-Designer’s Design Book” af Robin Williams og generel designteori).
Påstand: A.I.D.A.-modellen hjælper med at strukturere indhold, så det er fængende og leder brugeren mod et mål.
Understøttelse: A.I.D.A.-modellen er en klassisk marketingmodel, der beskriver de kognitive faser, en person gennemgår under købsprocessen eller interaktionen med et budskab. Anvendt på webdesign hjælper den med at guide brugerens opmærksomhed og interesse mod en ønsket handling. (Kilde: Marketing- og kommunikationsteori).
Påstand: Tydelige visuelle signaler for interaktive elementer som knapper er vigtige for brugervenligheden.
Understøttelse: Don Normans koncept om “affordances” i design understreger, at et objekts (eller et digitalt elements) egenskaber skal kommunikere, hvordan det kan bruges. En knap skal ligne en knap for at invitere til klik. (Kilde: “The Design of Everyday Things” af Don Norman, UX-design principper).
Det er gjort guidende og fængende at scrolle på siden, så brugeren føres derhen, hvor vedkommende ønsker, og det er gjort psykologisk tiltrækkende at interagere med klikbare elementer. Der er også hover-animationer på de fleste elementer, hvilket skaber en mere stimulerende og positiv brugeroplevelse, samtidig med at det signalerer teknisk kompetence.
Påstand: Psykologiske principper kan gøre interaktion mere tiltrækkende. Understøttelse: Principper fra adfærdspsykologi og interaktionsdesign, såsom brugen af visuelt hierarki, call-to-actions og feedbackmekanismer (som hover-effekter), anvendes til at guide brugeradfærd og øge engagement. (Kilde: UX-psykologi, adfærdsdesign).
Påstand: Hover-animationer kan skabe en mere stimulerende oplevelse og signalere teknisk kompetence.
Understøttelse: Mikrointeraktioner, såsom hover-effekter, giver visuel feedback, forbedrer fornemmelsen af direkte manipulation og kan gøre brugergrænsefladen mere levende og responsiv. En veludført animation kan også give et indtryk af professionalisme og omhu for detaljen. (Kilde: Artikler om UX/UI-design, betydningen af mikrointeraktioner).
Så var hjemmesiden egentlig klar i sin første version (før brugertest fasen i “Evolution”).
Evolution Fase 5
Den nuværende version af min præsentationsportefølge markerer et vigtigt skridt, men Evolution-fasen er en vedvarende proces med fokus på kontinuerlig forbedring. For at sikre, at hjemmesiden ikke kun er funktionel, men også intuitiv og engagerende, er mit næste centrale skridt at gennemføre kvalitative brugertests.
Jeg planlægger specifikt at anvende “think aloud”-metoden. Gennem disse tests vil jeg observere og lytte til brugere, mens de navigerer på hjemmesiden, for at få direkte indsigt i deres tankeprocesser, vurdere sidens intuitivitet og forstå den følelsesmæssige reaktion, designet og indholdet fremkalder. De indsigter, jeg opnår herfra, vil danne grundlag for konkrete justeringer og videreudvikling, så hjemmesiden bedst muligt opfylder sin mission og skaber en positiv oplevelse for den besøgende. Jeg vil selvfølgelig teste på personer så tæt på målgruppen som muligt.
Refleksion
Den primære tekniske udvikling har ligget i at styrke mine færdigheder inden for HTML og CSS. Selvom kodnings-delen viste sig at være en betydelig udfordring – til tider føltes det meget kringlet, uinteressant og svært at huske de specifikke kommandoer – lykkedes det mig at bygge siden i den stil og funktion, jeg kunne ønske mig. Det at “gå totalt død i kode” var en reel frustration, men også en påmindelse om vigtigheden af vedholdenhed.
Design Thinking-processen har jeg været fan af fra starten af uddannelsen, og dette projekt har kun bestyrket min positive holdning. Alle faser føles vigtige for helheden, men jeg oplevede især faserne Interpretation og Experimentation som givende og værdiskabende for projektets retning og udformning. “Silent Feedback”-arrangementet var et konkret eksempel på en værdifuld aktivitet. En fremtidig udfordring, jeg dog er ret bevidst om, er den praktiske gennemførsel af brugertests på en måde, der minimerer bias og kan lade sig gøre inden for en stram tidsramme, især når man skal finde testpersoner UDEN for sit eget netværk.
Jeg er fortsat stor tilhænger af minimalisme og føler, jeg har et godt flair for denne æstetik, hvilket også afspejles i hjemmesidens design. Jeg er oprigtigt stolt af det endelige visuelle udtryk; jeg synes, siden er blevet meget pæn og lækker med de bevægelige elementer og smooth animationer. Dette var fra starten et vigtigt mål for mig.
En konkret ting, jeg har lært om min arbejdsproces, er værdien af en tidlig og klar opgaveliste. Mod projektets slutning lavede jeg en detaljeret liste med de resterende opgaver, prioriteret med stjerner efter “tyngde”, og jeg ville ønske, jeg havde implementeret dette system lidt tidligere. Det er et råd, jeg vil tage med mig: “Lav listen med ting, du mangler, og husk at have det sjovt med at få den krydset af,”.
Gennem forløbet har jeg trukket på – og fået bekræftet – mine styrker inden for kreativitet, logisk og rationel tænkning, evnen til at træffe hurtige, gode beslutninger samt at bevare et godt humør og aktivt mindske frustration, selv når det var svært. Jeg har også været rigtig god til at søge information på nettet gennem youtube, ai, google og vores snapchat og discord grupper, og det er en evne, jeg klart ser stor fordel i. Så det vil jeg blive ved med i fremtidige projekter.