På 3 semester forgår eksamen over hele semestret. I dette projekt skal vi for første gang prøve self at finde og arbejde sammen med en klient. Vi er i alt 4 i gruppen to med valgfaget front-end – Kirja og mig, samt to med content valgfaget – Nikoline og Jakob. Der var to forskellige eksamens former som vi kunne vælge i mellem at lave i år, Novel eller Classic. I gruppen blev vi enige om at skulle lave Classic, hvilket blandt andet vil sige vi skal skrive en rapport og ikke skal til en gruppe eksamen.
Eksamens beskrivelse
Fra eksamens beskrivelsen:
De studerende afleverer i teams den/de udarbejdede produktion(er) og én rapport. Den studerende vil arbejde med eksamensprojektet gennem det meste af semesteret. Den mundtlige prøve er individuel og tager afsæt i den/de afleverede produktion(er) og teamets rapport.
Den studerende går til mundtlig prøve i det valgfag, den studerende selv har valgt. Projektet beskrevet i dette dokument er én af to mulige projekter, som den studerende kan vælge imellem.
Dette projekt har fokus på et skriftligt gruppeprodukt og dertilhørende multimedieproduktion(er), som har valgfagsspecifikke krav.
Projekt styring
Projektet startede ud med lidt af det praktiske først. Der blev udarbejde en gruppe kontrak, som vi alle skrev under. I starten af projektet var gruppen lidt anderledes. I stedet for Jakob havde vi Alice som en del af teamet, og var derfor også hende vi først udarbejde en kontrakt sammen med. Men det ændrede sig en måned inde i semesteret også blev Jacob en del af teamet, og derfor blev der udarbejde en ny kontrakt.
I kontrakten indelte vi også roller i gruppen, som passer til den projekt styrings form som vi valgte at arbejde med nemlig SCRUM:
Nikoline – Er projekt owner, hun har den generalle kontakt med klienten og søger for at skrive alle vores opgaver i projekt packlogen – det generalle overblik over opgaven og om vi når i mål.
Mig – Jeg er scrum master, jeg søger for at planlægge sprintene og havde det daglige overblik, ordføre til daylig scrum, og fordele opgaver (Hvis der er behov).
Kirja og Jacob er sammen med os andre udvikler.
Finde en klient
For at finde en klient lavede vi en liste med en masse virksomheder som vi tænke kunne være spændene at arbejde med. Herefter kontaktede vi dem alle sammen. Vi ringede til dem som det var muligt og ellers skrev en Mails til dem. Flere virksomheder var interesseret, men dsv møde vi mange udfordringer nogle havde ikke tid, andre havde ikke en real problemstilling og et sted lyd det mere til de havde en plan for hvad vi skulle lave for dem mere end at det var os der skulle finde en løsning.
Men heldigvis var vi til møde med Heidi som arbejder med kommunikation for Odense idrætspark. Vi havde et super godt møde med hende, der var både god kemi og de havde en helt sikker noget som vi kunne arbejde med.
Problemformulering
Hvilke tiltag er nødvendige for at gøre Odense Idrætspark/Odense Kommune mere synlig og genkendelig for borgerne?
- Hvordan kan Odense Idrætspark nå ud til forskellige målgrupper (fx borgere, foreninger, skoler) og gøre dem bevidste om de eksisterende tilbud?
- Hvilke kanaler og medier er mest effektive til at skabe opmærksomhed og øge salget af Odense Idrætsparks aktiviteter og faciliteter?
- Hvordan kan kommunikationsindsatsen struktureres, så den er realistisk at gennemføre med begrænsede ressourcer, men stadig skaber resultater?
SCRUM
Efter at havde fundet en klient at arbejde med var det muligt at begynde at følge scrum mere end bare at fordele rollerne. Derfor blev der udarbejde product-backloggen, med mulighed for at kunne tilføje flere opgaver. En sprint backlog med opgaver fordelt i prioriteringsrækkefølge og med tids estimat på, samt hvem der udføre opgaven. Labelsene fra sprint backloggen bliver også sat over på et scrumbord hvor det er muligt at rykke dem fra “not done” til “i proces” “done”. Definitionen af done er når alle gruppemedlemer har sagt god til en opgave. Hver projekt dag holdes der daylig scrum i starten af dagen hvor vi hver især gennemgår hvad der er blevet udarbejde og hvad vi skal lave resten ad dagen.
Der bliver udført sprints som består af to uger. Her er det min opgave at tage optager fra product-backloggen og føre dem ind derved lave en sprint backlog. Det vil også sige at det er mig som har haft ansvaret for hvornår vi mødes i gruppen for at arbejde, og fordeling ad opgaver hvis ikke de bliver taget af sig selv. Efter hvert sprint er der udført Sprint review med fokus på hvordan det er gået med opgaven og nå vores mål i sprintet. Der er blevet taget noter undervejs i mødet og kan ses i figma linket. Derefter har vi udført Retrospective hvor vi har haft mere fokus på hvordan vi har arbejde i gruppen og hvad vi kan gøre for at forbedre processen.
Product-Backlog
Product-Bacloggen indeholder alle de opgaver som der skal udføres i projektet. Det er her Nikoline ligger opgaver ind løbende hvis der kommer flere ting ind som der skal nåes. Den følger design thinking, med prioteringer af opgaver for at havde en fornemmelse af ca i processen opgaverne skal udføres, også selvom design thinking kan kræve at man nogle gange går frem og tilbage i processerne. Der er også lavet en done backlog bare så vi kan se alle de ting som vi er færdige med. Nedenfor kan der ses udsnip af backlogsende.
Link: https://www.figma.com/design/AEMoWnFZtehnhfymlm1Rgp/Scrum?node-id=34-278&t=50lXmPY4eroGcoA2-1
Sprint backlog
Scrumbord
Design thinking
I projektet har vi fuld design thinkings 5 faser, discorvey, interpatation, ideation, expermentation og evulation. Her under vil jeg beskriver overordnet hvad vi har arbejde med i de forskellige faser og vores process. Der er ikke uddybelse af modeller, det kan ses i selve rapporten
Discorvey
Helt til at starte med så har vi skulle havde en masse recherch, det gælder generelt omkring Odense Idrætspark, boger i Odense Kommune samt deres målgruppe. For at finde ud af alle de ting har vi blandt andet være ude at lave interview, her stillede vi os ved nogle af idrætsparkens faciliteter. På den måde for at forstå de personer som i forvejen benytter sig af Odense Idrætspark.
Der ud over lavede vi et spøgerskema som der blev sendt ud til forskellige mennesker. For at sikre at det ikke er et spøgerskema som bare blev sendt ud til hvem som helst meldte vi os bandt andet ind i FB grupper, bland andet en som hedder hjælp i bolbro og spurgte om de ville svare på spøgerskemaet. Formålet med at sende det spøgerskema ud var at få en overordnende forståles af bogerne i Odenses kendskab og brug af Odense idrætspark, samt generalt demigrafiske informationer, som senere kunne bruges til at definere en målgruppe.
Vi lavede brugertest på Odenses Idrætspark og Aktiv Odense. Formålet med at lave var at teste hvordan bruger opfatter de hjemmesider i forvejen, både stemning og udsende, men også om siderne er brugervenlige. Noget som også var virkelig vigtigt at teste hvordan brugerne adskilte de to sider og om de forstod formålet med hver side.
Selvom det er super vigtigt at forstå og finde en målgruppe har vi også brugt virkelig lang tid på at gør os kloger på Odense idrætspark. Det har vræret ved blandt andet at lave en Interface Invertory for at få overblik over deres hjemmesider samt sociale medier. Vi har undersøgt deres medier altså deres post samt følgere.
Odense idrætspark er et sted som tilbyder aktiviteter hvor man kan være aktiv og møde andre mennekser. Derfor har vi også være inde at undersøge hvordan tendenser i samfundet ser ud i forhold til at være aktiv. Hvordan personer i forskellige aldersgrupper er aktive, om de overhoved er aktive og hvad der kan fra holde dem at at være aktive.
1 Pitch
Det var også i denne her fase vi havde vores første Pitch. Den lå d.23/9 hvor vi præcenterede vores klient, os selv i gruppen, vores scrum samt den da værende problemformulering. Her fik vi blandt andet feedback på vores problemformulering, den var for bed. Det kunne give os problemer med at nå i mål når den var så bred og meget vi skulle nå her på semesteret. Derfor har vi efterfølgende tilpassede med bedre med hjælp fra vejleder.
Interpation
I interpation fasen bliver der analyseret på alt den data som vi har skaffede os fra Discovery fasen,
Personaer
Derfra blev der udviklede to personaere en primær og sekundær persona. Louise og Klara har været gennemgående i hele projektet og alt vi har udarbejde har været med fokus på de to personaer. På den måder sikre vi en løsning som har brugerne i fokus
Forrentnings modeller
For at få endnu bedre forståelse for Odense idrætspark og hvordan vores løsning kan påvirke dem har vi udarbejde en del forskellige forretnings modeller. Nogle af de udarbejde modellerne kan ses under visuelt men ikke forklarede yderligere. Vi har brugt en række modeller som Golden Circle, BMC, VPC, User stories, Userflow, PESTEL, Porter’s Five Forces og Content Sweet Spot for at få styr på både idé, målgruppe og retning. De har hjulpet os med at forstå problemet bedre, finde ud af hvad brugerne har brug for, og skabe en løsning, der faktisk giver mening for Odense Idrætspark. I den akdademiske raport er resultater af alle modellerne og forklaringer på hvordan vi har benytte dem
Idation
Idation fasen er hvor hvor vi virkelig starte med at komme igang med at producere ud fra information fra de tidligere faser.
Brainstorm
Vi sad alle sammen og udviklede en barinstorm. Der blev lavet to forskelleige barinstormes for at kunne fokusere vores ideer, men kan godt se nu at det måske havde været en bedre ida at samlede brainstormen for at kunne åbne op for endnu flere ideer. Jeg tror vi har ret converded thinking da vi lavede brainstormen efter at havde samlet og analyserede på at det data.
Moodbords
Vi udarbejde hvor vores moodbord til at starte med også sammenligede vi dem efter, ahumenterede for vores valg, og lavede et samlende moodbord. Først ses vores alles 4 moodbords og nedenunder ses det fælles udarbejde.
Styletile
Ud fra moodbordsene er der blevet udarbejde en styletile. I styletilen er der taget højde for den visuelle identitet og brugervenmig. Det betyder at farverne lever op til WACH regler om kontraster og det sammen med fontesne skal være læsbare for alle. Der ud over har der også været fokus på symbolig og den overordnede stemning
Eksperimentation
Wayreframes
Her begynde vi også at udarbejde wayreframes. Til at starte med var det helt low-fi wayreframes med små skidser og ideer som så senere blev kom over og blevet lavet i figma. Her producerede vi igen 4 forskellellige så vi havde muligehed for at kunne lave noget A og B testning målgruppen så vi hele tiden søgere for at havde brugeren i fokus. Her under kan de 4 wayreframes ses. Det var C som havde flest stemmer. Derfor gik vi vidre dem den wayreframe og forbedre den med de feedback vi fik sammen med
Prototype
Den valgte wireframe blev lavet til en prototype, med højde for det feedback som vi fik fra A og B testene. Da prototypen var blevet udarbejde lavede vi den første brugertest så vi kunne lave yderlige forbedringer inden siden skulle kodes og vi bruge flere reasurser.
Forbedrede prototype
Der blev udført brugertest på 6 forskellige personer som lå i målgruppen. Der uf fra fik vi nogle gode indput pg opsivation på hvordan brugeren benytter siden og derefter lavede yderligere forbedringer så den var klar til at blive kodet. Det var blandt andet ting som mere bekræftelses ved tilmelding af hold og en uoverskulig aktivitets oversigt som blev over i flere små bider.
Pitch 2
Til pitch 2 som blev hold d. 3/11 præsenterede vi vores projekt foran underviser og andre grupper. Her fortale vi om nogen af de modeller som vi benytter, hvordan det går i gruppen, vores udfordringer og hvad vi har producerede i denne del af processen. Der var feedback fra de andre grupper samt underviser. Det var blandt andet feedback på content og lidt igen at vi skal fokusere på lidt mindre og ikke kan redde alt. Der var også lige lidt med nogen af de modeller som vi brugte med stavefejl…
Kommunikation og indhold
Vi har også brugt modeller som STEPPS, TMK-modellen, SMART, Metrics Map, Storytelling, Indholdsplan og Indholdskoncept for at få styr på, hvordan vi kommunikerer vores løsning og rammer målgruppen bedst muligt. De har hjulpet os med at finde ud af, hvad der gør vores indhold interessant, hvordan vi planlægger det, og hvordan vi måler effekten af det. På den måde har vi kunnet lave en kommunikation, der både fanger opmærksomheden og passer til Odense Idrætsparks mål. Det er dog godt nok Jacob og Nikoline som har taget sig at det gode arbejde på de fronder, mens mig og Kirja har haft mere fokus på den degitale løsning.
Frontend
Jeg er jo på frontend det her semester hvilket betyder at kodning betyder en del mere på det her semester for mig. I projektet bruger vi virkelig meget af det vi har lært på det her semester. Generalt er der mange regler som vi lærte på 1 og 2 semester ikke længer gælder fordi koden bare er anderledes. Det hele er meget mere fokuseret på små dele af kode ja compunenter som man så stykker sammen som lego klodser og bygger kode. Vi arbejder med vue og i det her projekt med rouder link. Der ud over laver vi også API kald til vores Fairebase database. I den forbindelse anvender vi også CROD, men det står der mere om i rapporten.
Generelt er koden meget mere genbrugelig i forhold til det vi er van til. Ved at tilføje compunenter til App kan vi fx havde en fest header og footer på alle sider, og vi behøver kun at ændre i compunentet for at det tilpasser sig de andre steder.
I vores digitale løsning har vi lavet en aktivitet kalender så man kan se hvad der forgår også kan melde dig til. Den del af koden var det første som blev udviklet da vi havde et projekt hvor der blandt andet var krav om at vi skulle lave et API kald. Der kan læses mere omkring projektet på linket, hvor der er beskrivet brugen af database:
Efter projektet lavede vi nogle tilpasninger og forbedringer til hold oversigten. Nu passer designet til det udarbejde styletilee og der kommer yderlige raspons så når trykker på knappen, så man bedre forstår at man faktisk tilmelder og afmelder sig hold. Se billeder under
Kirja og mig arbejder sammen omkring koden over Github. Her under findes links til vore Github så kan hele vores kode undersøges . Det er generalt blevet meget nemmer at arbejde sammen om ens kode når man nu når det hele bliver kodet mere compunent baseret. Så er det ikke særlig tit vi oplever at overskride hinandens arbejde eller at der bliver fetchede noget forkert.
Sass
Vi koder i SASS, fordi det gør vores CSS mere overskuelig og effektiv. Det giver os mulighed for at bruge variabler, nesting og mixins, så vi slipper for at gentage os selv hele tiden. Det betyder, at vi kan arbejde hurtigere, holde koden mere organiseret og nemmere ændre farver, fonte eller layouts senere i processen. Her under kan der ses noget af vores genbrugelige sass, som bare har gjort vores kode meget nemmere! Det er vores primære knap, som vi ved hjælp af mixin bare kan genbruge gennem hele koden ved at hente og referere til styleshiet og knappen ved at skrive
@use ‘../assets/_buttons.scss’ as b;
og derefter
.btn {
@include b.button (b.$button-primary);
}
I billedet kan det ses at vi gør det samme med bude farver og fonts som vi henter og kan refere til igen og igen. Knappen er lavet media Q så knappen på forhånd er responsiv.
Compunenter og App
Som sagt koder vi alt som kan vi i compunenter hvilket gør at selve vue siderne ikke har så meget kode på selve siderne. Det gør hele koden meget mere overskuelig og genbruglig. Der ud over så er der også App, når vi ligger indhold der så ligger det sig på alle sider. Det vil sige at vores header og footer component ligger inde i App og nu altid bliver vist uanset hvilken vue side man er inde på.
Det er også blevet muligt at lave genbrugelige sektioner, her har vi blandt andet en mærke og lyseblå genbuglig sektion samt en header. På den måde kan vi bare importere compunentet og selv tilføje billeder og tekst. Så er der allrede lavet style og sikrede at det hele fungere responsivt. Super nemt! Det første billede er den mærkeblå sention og under er et udklip af hvordan den bliver brugt.
Evulation
I evaluationsfasen handler det om at teste og vurdere vores løsning for at se, om den rent faktisk fungerer for brugerne. Vi skal indsamle feedback, observere hvordan folk bruger løsningen og finde ud af, hvad der virker godt, og hvad der skal forbedres. Det er altså her, vi får bekræftet, om vores idé løser problemet
Reflektion
Det har været virkelig spændene at arbejde sammen med en klient på den her måde det har vi ikke gjort før. På den mådes føles det hele endnu mere vigtigt at producere noget godt. Hedi har været virkelig god at arbejde sammen med, hun har givet os hurtige svar og generalt har der været god stemning. Til en anden gang tror jeg godt vi kan udnytte det endnu mere at havde en klient som vi har kontakten med. Tror det har noget at gøre med det ikke er noget som vi er van til fra vores tidligere projekter.
Det har været et spænede at arbejde med Odense Idrætspark, og føler det er det her projekt jeg nok har været mest stolt af at udarbejde. Det er tydeligt at vi bare lære mere og mere, og at vores færdigheder bliver bedre fordi vi har gjort det flere gange.
Så har det været mega fedt at lære alt det nye kode som vi har kunne bruge i projektet. Selvom det har været meget der skal læres så har det virkeligt også givet os mange øjn-åbner. Som vi også har fået afvide flere gange så er den måde vi koder på nu minder mere som det man gør i branchen. Hvilket jo bare er så fedt at kunne. Det ville være løgn at sige det hele bare er gået godt med kodning, der kan jo ikke undgået at der kommer fejl og man bare ikke forstår hvad der sker til at starte med. Men alt i alt er det jo med til at gøre os klogere.
Sammenarbejdet i gruppen var godt den første stykke tid, men desværre kom der lidt udfordringer med nogle deadlines som ikke blev overholdt og opgaver som ikke blev udført helt ordenligt… Her var jeg lidt hård dsv fordi det ikke er første gang vi har oplevet det i et projekt, hvor det bare er gået rigtigt meget ud over os andre. Det ville jeg bare ikke havde skulle ske igen! Derfor gik jeg til underviserne som heldigvis tog det hele meget seriøst og som hjalp på det hele. Derefter var der god stemning og vi kom i mål med det hele, hvilket jo er det vigtigste.
Vi har alligvel hyggede os gennem hel det hele så her kommer der nogle stemnings billeder for processen.