Gruppe

Helena, Jakob, Sandra, Justine og mig. Gruppekontrakt fremgår af nedenstående:

Opgaven

Opstart og midtvejspitch

Efter Kick-off til Projekt 4 blev gruppen samlet og vi fik lavet gruppekontrakt, skema for møder, brainstorm, herunder valg af organisation, hvilke problemstillinger kunne der være, og hvordan kunne de løses. Valget faldt på organisationen Dyrenes Beskyttelse.

I vores brainstorm-fase påbegyndte vi af lave et KANBAN-board med opgaver, som senere blevet lavet om til SCRUM og projektplan efter midtvejspitch. Vi lavede en ansvarsfordeling af de overordnede emner og tildeling af de første opgaver. Derefter gik tiden med at udarbejde lave research, spørgeskema til brug for kvantitative/kvalitative målgruppeundersøgelser og jeg gennemgik vores pensum og satte det ind i et dokument, så vi havde overblik over pensum i.f.t. hvilke metoder og emner vi skulle arbejde ud fra. Jeg påbegyndte at beskrive metoderne/analyse omkring præattentive attributter, WCAG, adfærdsdesign.

Vi skulle også forberede materiale til midtvejspitch, hvor vi kunne få feedback fra resten af klassen/holdet samt en underviser. Udfordringen på dette tidspunkt var problemformuleringen og om vores idéer til content og produktet var gode nok eller der skulle arbejdes videre med nogle andre ideér.

Vi fik konstruktiv feedback bl.a. omformulering af problemformulering, undersøge sms i.f.t. GDPR (udsende sms hver fredag til dem der har doneret) – men har de ressourcer til at tage billederne? Undersøge hvad andre gør i.f.t. at fastholde donorerne. Undersøge BMC og kan vi lave noget der minder om Spotify-wrapped 1 gang årligt. 

Mere end midtvejs

Vi valgte at gå videre med idéen om en ny kampagneside, som skulle være mere involverende i.f.t. målgruppen og på baggrund heraf blev der udviklet wireframes i Figma, der skulle forestille en kampagne for “Fredagsslik til dyrene”.

Efter midtvejspitch blev vi klogere på at bruge et andet projektstyringsværktøj fremfor KANBAN.

SCRUM-board i Notion blev oprettet, og så skulle alle opgaver fra KANBAN/projektplan oprettes og fordeles herefter. Der blev lavet 4 sprint.

Vi arbejdede meget individuelt på opgaverne. Content-delen stod 2 af gruppemedlemmerne for og vi andre 3 arbejdede med henholdsvis Figma, brugerundersøgelser samt HTML/CSS. Her er nogle eksempler på de opgaver der blev lavet:

Jeg gik i gang med opstart af HTML/CSS og samt lavede et par interviews (brugerundersøgelse) og skrev videre på testplan, testscript til en evt. brugertest af vores nye produkt “en kampagneside – Fredagsslik til dyrene”, samt skrevet lidt videre på metode/analyse i.f.t. bl.a. tilgængelighed, præattentive attributter og adfærdsdesign. Det var bevidst at vi ikke brugte JQuery i.f.m. kodningen, da vi fandt det lidt besværligt at bruge i.f.m. Javascript-projektet.

I forbindelse med at analysere og komme med løsningsforslag på Dyrenes Beskyttelses hjemmeside (landingpage) blev jeg fan af brugen af udviklerværktøjet “lighthouse”, som er et godt værktøj, når man skal arbejde med tilgængelighed, SEO-optimering og ikke mindst fejlfinding og forbedringer af en hjemmeside:

Afslutning – det sidste sprint

Der blev brainstormet på hvilke javascript-kodestykker vi kunne bruge på vores kampagneside og vi fik fordelt det således, at alle have et script der ville opfylde pensum. Jeg skulle stå for kodning af en karrusel (slideshow med billeder) med dertilhørende video, der forklarede koden. Jeg er ikke tilfreds med visningen af slideshowet ved mobilvisning, da meningen var at der skulle slideshowet kun vise et billede af gangen, men nu viser den 4 billeder af gangen. Det er en ting jeg vil være opmærksom på næste gang jeg skal kode et slideshow, der skal jeg huske at arbejde ud fra “mobile-first”-princippet med mediaqueries i VSC. Videoen kan ses her: https://youtu.be/On6amqbM5co

Der var lidt udfordringer i.f.t. at få hele kampagnesiden færdig før påske, så vi nåede ikke at udføre brugertest på den. Jeg havde dog udarbejdet testplan og testscript til brug for sådan en test, hvor der skulle have været 5 testpersoner til en think-aloud-test. Efter testen kunne vi have analyseret resultaterne/besvarelserne og på baggrund heraf kommet med eventuelle forbedringer til siden.

Kampagnesiden kan ses her: https://jakobmediaportfolio.dk/projekt4/

Content-video og UCL markedsføringsvideo blev udfærdiget af andre gruppemedlemmer, men fremgår nedenfor:

Vi mødtes dagen før afleveringen, hvor der lige blev vendt hvad der manglede at blive gjort og nogle i gruppen sørgede for at få ryddet op i vores Visual Studio Code mappe samt på vores fællesdrev, så der blev overblik over hvad der evt. manglede.

Den akademiske rapport blev udfærdiget i InDesign, og det færdige resultat blev således:

Præsentation af projekt

Præsentationen af projektet vil foregå 2 dage efter afleveringen. Her vil vi præsentere vores løsning med faglig argumentation for valg. Vi har d. 22/4 holdet onlinemøde på Discord, hvor vi har aftalt hvem der præsenterer de forskellige emner i projektet.

Ved præsentationen, vil jeg, hvis det er muligt at foretage brugertest af kampagnesiden inden, præsentere testresultater og herigennem validere konceptet og komme med eventuelle forbedringsforslag.

Refleksion

Det startede egentligt godt ud, og så skete der et eller andet der gjorde, at kommunikationen og “teamfølelsen/fællesskabsfølelsen” forsvandt, og det blev svært at nå ind til hinanden.

Alle arbejdede hver for sig med hvert sit, og der var ikke meget kommunikation eller involvering/feedback mellem os. De fysiske møder blev hurtigt “afskaffet”, da vi ikke samarbejdede omkring opgaveløsningen, men man arbejdede stort set individuelt eller 2 og 2. Der blev også kun afholdt gangske få online møder. Den manglende kommunikation gav ekko, når vi endelig mødtes fysisk på skolen, da det virkede som om ingen havde lyst til at sige noget. Set i bagspejlet burde der i hvert fald have været 3 onlinemøder ugentligt for lige at se hinanden i øjnene og hver isæt skulle have haft taletid for lige at orientere resten af gruppen i.f.t. hvad man arbejdede på.

Jeg ville have ønsket at jeg havde haft mulighed for at lære mere omkring brugen af Figma, og ligeledes kunne opgaven omkring Content have været sjov at lave sammen som gruppe. Opgaven kunne sagtens have været fordelt således, at 1 kunne lave indholdsstrategi, 1 kunne lave storyboard til video, 1 kunne lave reels, 2 kunne filme og redigere.

I de sidste to uger af projektet blev jeg ramt af nogle personlige problemer;

Min far blev indlagt med hjertestop og har svævet mellem liv og død siden, han har fået pacemaker men nu er der stødt et par hjerneblødninger til, som lægerne ikke helt kan få styr på grundet pacemakeren, medicin og påske, samtidig måtte vi sige akut farvel til vores 9-årige hund, som døde inden vi nåede ind til dyrlægen. Dertil kommer at jeg er værge for min syge moster i Sønderborg, som er hjerneskadet og som jeg lige har fået installeret på plejehjem, men det er hun ikke helt tilfreds med, så hun/personalet ringer konstant om dit og dat, plus jeg lige har min datters konfirmation d. 4/5 der skal være styr på, så jeg er er lidt mere end træt, nærmest udkørt og vældig frustreret.

Jeg orienterede min gruppe om min situation, som udviste forståelse for min situation. Jeg har forsøgt at fokuserer, men har ikke haft overskud til ret meget siden den 10/4. Det fremgår af log-bogen, hvad jeg har arbejdet med.

Jeg tror at vores forskelligheder/alder/kemi og den måde vi hver især arbejder på ikke var et godt match. Jeg tænker ikke, at jeg er den eneste der sidder tilbage med den følelse, men vi er alle den erfaring rigere.

Vi arbejdede med indholdsproduktioner, hvor vi skulle igennem tre iterationer af processen.

Gruppe: Lucas, Christoffer, Justine og jeg.

Vi valgte casen omkring UCL, nærmere betegnet Medialab.

Research

• Hvilke sociale medier anvendes der?

Facebook, Instagram (UCL, ikke medialab), Tiktok (UCL, er død/inaktiv)

• Hvilken type indhold anvendes nu?

Tekst, billeder, (+ videoer på ucls Tiktok, + videoer på Instagram af privatpersoner)

• Er der nogle trends der er oplagte at følge?

TikTok er et meget populært medie, hvis ikke det mest brugte kommercielle medie til small businesses. Facebook bliver brugt mest i Danmark og er godt til at give potentielle nye studerende et indblik.

Konkrete video trends: Hurtig gennemgang, ikke for meget interview, timelapse, voiceover, journey and goal (vise process og resultatet)

Konkrete billed trends: Billeder af ting i brug (monkey see, monkey do)

• Målgruppe?

Studerende, lærer, potentielle nye studerende (udefrakommende)

• Hvordan anvendes identiteten?

Fælles design i ting, ikke så meget fælles identitet

Proces, produkt og refleksion

Vi fik ret hurtigt brainstormet vores idéer og vi var alle enige om at det skulle være en video der ville vise hele Medialabs faciliteter, og at det kunne være fedt, hvis det var et one-shot, således at det ville være som at man selv går ind i Medialab.

Vi brugte god tid på at få sat hele Medialab op og finde ud af et storyboard/timeline i.f.t. hvordan vi skulle gøre det, da vi hver især fik flere roller i.f.m. optagelsen. Vi lavede flere prøver i.f.t. filmning og timing og små ting der skulle rettes/justeres og iscenesættes på anden vis. Ved at vi brugte tiden på at sætte rigtigt op, og teste om vores idéer kunne lade sig at gøre, gjorde at vi kunne lave et one-take, som vi var tilfredse med.

Bagefter skulle vi præsentere vores video for de andre teams og have silent feedback, som vi så kunne tage med hjem, hvor vi skulle redigere videoen færdig.

Da der var tale om et one-take, så har jeg ikke redigeret i videoens længde, men fokuseret på tekst og musik. Videoen er tiltænkt UCL’s website, og kan ses her:

Det var nok en af de sjoveste og fedeste opgaver vi længe har haft, dels fordi vi havde “fri leg” indenfor et felt, så fantasien kunne få frit spil.

Der var en rigtig god gruppedynamik og vi havde det sjovt.

Det vi alle måtte konstatere var, at det var rigtig svært at få videoen redigeret i Adobe Premiere Pro / After effects. Personligt kan jeg godt mærke at det er nogle programmer jeg har brug for at lege mere med for at få forståelsen af brugen, og hvordan de fungerer. Jeg endte med at anvende programmet Clipchamp til at redigere videoen, ellers var det ikke lykkedes at aflevere opgaven rettidigt.

Det kunne have været fint hvis vi havde vidst lidt på forhånd at vi skulle bruge Premiere Pro/AfterEffect, eller havde haft lidt undervisning/repetition af brugen af programmerne inden denne workshop.

Vores oplæg:

Gruppen bestod af: Justine, Helena, Sandra og jeg.

Vi valgte hjemmesiden: https://pandaplanner.com/?srsltid=AfmBOorsW2Q_LphSMVroYePhi4fz_1PKAlWZrh4jQbVFlbfnTwHPIzHr

Begrundelse for valget af netop denne side

• Der var flere elementer på siden som krævede javascript.

Vi har arbejdet med følgende Javascript:

• Helena: Back-to-top-button
• Sandra: Pop-up
• Justine: Navigation
• Anja: Slideshow

Link til prototypen: https://jkayser.dk/Java/

Link til Github: https://github.com/JinxitNow/Javascript.git

Link til youtube-video: https://youtu.be/h0EYxz-DLC4

Refleksion:

Ej lidt sjov opgave, da vi på baggrund af sidste uges undervisning i Javascript selv skulle kode en allerede eksisterende side med Javascript. I forbindelse med undervisningen kunne jeg ikke få et slideshow til at virke, så det tog jeg i.f.m. projektet, og det lykkedes meget godt.

Ved at arbejde med et konkret kodestykke, som jeg kunne gå i dybden med, gjorde at jeg fik en bedre forståelse af hvad Javascript er og kan sammen med HTML og CSS.

Vi mødtes i gruppen stort set hver formiddag, hvor vi så kunne arbejde videre hjemme. Vi brugte hinanden til sparring, og hvor langt vi var hver i sær.

Gruppen var lidt ramt af forskellige udfordringer, en havde været syg hele ugen hvor der var undervisning, en anden havde en meget syg far og det betød, at Justine og jeg var lidt alene omkring beslutningerne, da vi fik udleveret projektet.

Dernæst var dialogen ikke ret meget til stede, selvom vi havde aftalt at mødes på Discord.

Udfordringen i gruppen kom rigtigt da der skulle laves en video der skulle forklare et kodestykke, da ingen egentligt havde lyst til at lave den, så vi brugte lang tid på at ikke snakke om hvem der så skulle tage den.

Så jeg valgte at tage opgaven på mig, selvom jeg vidste at det ville være svært, især at forklare en andens kode fremfor min egen. Jeg gav det et skud i.f.t. at forklare Helenas kodestykke omkring Back-to-top-button, men jeg kunne ikke fylde tiden ud, så videoen blev for kort. De andre bød ikke ind med at de ville prøve, så det endte med at vi gik hver til sit, og jeg lavede videoen hjemme med udgangspunkt i det kodestykke som jeg havde stået for – slideshowet.

At jeg påtog mig opgaven med at lave videoen var grænseoverskridende, men faktisk meget godt for mig alligevel, da det jo gav mig øvelse i at forklare dels en andens kode og dernæst min egen kode.

Jeg valgte at kigge på tendenserne indenfor gourmet slik, og designede en prototype af min egen side for mine egne produkter i programmet Figma. Resultatet blev således:

Designet skulle afleveres og vi skulle modtage feedback fra to andre medstuderende, og også selv give feedback til to medstuderende.

Feedback som tages til efterretning:

“Lækre billeder, og en dejlig lækker rød farve der både skaber blikfang ift. contrasten med den lyse baggrund. God skrifttype ift. mediet (hjemmeside). Du har en meget struktureret opstilling ift. din hjemmesides layout. Det er helt klart noget der vil være nemt at kode. Synes måske det er ærgerligt at du mister afstanden ift. din gutters nede i de nederste billeder.”

og…

“Virkelig en fin hjemmeside og app, der er meget overskuelig og nem at bruge! Der er hvad man skal bruge i menubar ift. navigation til shop, historie og kontakt. Hvis jeg skal sætte en finger på noget, så er det blot at der på hjemmesiden ikke er samme højre padding fra de aflange billeder, som på de fire kvadratiske billeder under den røde bjælke. Jeg har forsøgt at tegne i PS (vedhæftet): De røde streger er de aflange og kvadratiske billeder, der ikke har lige langt ud til højre kant. De blå streger er afstanden mellem de fire billeder, der evt. også kunne gøres lige stor. Men det er småting. Jeg synes det er virkelig godt arbejde! Og man kan godt se brugen af grids :-)”

Refleksion:

Dagen gik alt for stærkt, og jeg kunne sagtens have brugt mere tid, men desværre var der ikke afsat en “hel” dag til denne workshop, da den lå på en fredag.

På første semester fik jeg ikke arbejdet ret meget i Figma, så var lidt udfordret på programmet, men øvelse gør mester.

På baggrund af feedback kan jeg godt se hvad der menes i.f.t. padding og grids og har efterfølgende rettet lidt: