Opgavebeskrivelse
Til dette eksamensprojekt arbejdede vi i grupper af højs 4 personer med en reel kunde: Liwira – en lokal butik, der sælger interiør, delikatesser og kunsthåndværk. Liwira var tidligere en del af Pejsemontering, men skulle nu stå på egne ben med en selvstændig identitet og digital tilstedeværelse. Vores opgave gik ud på at udvikle en komplet løsning i form af en interaktiv webshop og et design, der understøtter Liwiras værdier og æstetik.
Vi skulle arbejde ud fra SCRUM-metoden og bruge vores viden fra hele 2. semester. Projektet strakte sig over fire uger og havde følgende afleveringskrav:
- En mundtlig, individuel eksamen baseret på alt det ovenstående
- En interaktiv prototype kodet i HTML, CSS og JavaScript
- Et design system udviklet i Figma
- Visuel identitet og content (herunder billeder og videooptagelser)
- En akademisk rapport sat op i InDesign, der dokumenterer research, designproces og valg
- En individuel procesbeskrivelse (proces portfolio skal opdateres)
- En video, hvor vi forklarer vores egen JavaScript-funktion
Idésamling of Forberedelse
Vi startede med at gennemføre en brugertest for at få indblik i, hvordan målgruppen navigerede på hjemmesiden, og hvad der Vi begyndte med at lave en gruppekontrakt og fordele roller. Jeg blev SCRUM master og havde ansvar for koordinering og projektstyring. Jeg lavede et SCRUM-board i Notion og oprettede en delt kalender, hvor vi alle kunne notere vores tilgængelighed.
Anja var gruppeleder og hjalp med at holde styr på struktur og dokumentation.
Vi startede med en grundig researchfase, hvor vi lavede en kvantitativ spørgeskemaundersøgelse og fulgte op med kvalitative interviews. Det gav os både bred og dyb indsigt i vores målgruppe, og vi kunne bruge det som afsæt til idéudvikling og koncept.
Samtidig tog vi hurtigt kontakt til klienten og fik feedback på vores første idéer – både visuelt og funktionelt. Jeg lavede en shotliste til videooptagelser (A-rolls og B-rolls), og vi planlagde en halv dag i butikken til at skyde indhold. Den visuelle del var vigtig, da Liwira-brandet lægger vægt på stemning, nærvær og æstetik.
Vi brugte også meget energi på at få den akademiske rapport godt fra start, fordi vi vidste, det ville spare os tid senere. Rapportens struktur og fordeling af afsnit blev lagt tidligt, og alle noter og dokumentation blev samlet i et fælles dokument i en delt drev mappe.
Proces
Da vi nåede frem til midtvejspitchen, havde vi desværre ikke så meget visuelt klar endnu. Fokus havde været på research, videooptagelser og planlægning, så vi kom lidt bagud i forhold til design og udvikling. Det gav os et wake-up call.
Jeg valgte at skifte fra Notion til Trello, da projektet blev for stort til Notions gratis version. I Trello havde vi bedre overblik over: ikke startet, i gang, in til gennemgang, færdig og backlog. Desuden, kunne der oprettes ubegrænsede antal opgaver, i modsætning til Notion.
Samtidig gik jeg i gang med at udvikle det visuelle udtryk i Figma. Jeg startede med low-fidelity wireframes, som jeg hurtigt udviklede videre til high-fidelity mockups og senere til det endelige design. Jeg lavede også vores farvepalette, user flow, design system, styletile, interface inventory og visualiserede persona’erne.
Desværre endte mange af designopgaverne med at lande på mig ret pludseligt, hvilket var en udfordring, fordi det skabte tidspres og betød, at jeg ikke havde så meget tid til at iterere og forfine. Men jeg gjorde mit bedste og fik hjælp fra Anja.
Vi besluttede at fokusere på at kode forsiden og integrere udvalgte JavaScript-funktioner, som hver især skulle vise pensumforståelse. Jeg kodede en popup, der vises 5 sekunder efter indlæsning og kan lukkes. Derefter vises en rabatknap, som åbner popup’en igen. Jeg byggede også en funktion, der kontrollerer, om en e-mail allerede er tilmeldt nyhedsbrevet – og hele flowet virkede som det skulle. Det var fedt at kunne gennemskue og forstå sin egen kode og få den til at fungere.
document.addEventListener("DOMContentLoaded", function () {
const popup = document.getElementById("popup");
const closeBtn = document.getElementById("closeBtn");
const reopenBtn = document.getElementById("reopenPopup");
const form = document.getElementById("newsletterForm");
// Simulerede tilmeldte e-mails
const registeredEmails = ["test@example.com", "hello@liwira.dk"];
// Vis popup efter 5 sekunder
setTimeout(function () {
popup.style.display = "flex";
}, 5000);
// Luk popup
closeBtn.addEventListener("click", function () {
popup.style.display = "none";
reopenBtn.classList.remove("hidden");
});
// Genåbn popup
reopenBtn.addEventListener("click", function () {
popup.style.display = "flex";
reopenBtn.classList.add("hidden");
});
// Fake formularhåndtering med loop og if
form.addEventListener("submit", function (e) {
e.preventDefault();
const name = document.getElementById("name").value;
const email = document.getElementById("email").value.toLowerCase();
let alreadyRegistered = false;
for (let i = 0; i < registeredEmails.length; i++) {
if (email === registeredEmails[i]) {
alreadyRegistered = true;
break;
}
}
if (alreadyRegistered) {
form.innerHTML = "<p>Du er allerede tilmeldt – tjek din mail for rabatkoden!</p>";
} else {
form.innerHTML = "<p>Tak for din tilmelding! Du vil få din rabatkode per mail</p>";
}
});
});Til sidst stod jeg for at sætte den akademiske rapport op i InDesign. Anja havde lavet det indholdsmæssige forarbejde og proofreadet teksten i Word, så jeg kunne fokusere på det grafiske og layout.
Produkt
Link til prototype: https://www.figma.com/proto/ow6lcTfnyKFBXM1GGQZ575/WEBSITE?node-id=0-1&t=idv3qICfMJMhyxOr-1
Link til Github: https://github.com/JinxitNow/Projekt-5.git
Reflektion
Det her har uden tvivl været det mest omfattende og intense projekt, vi har haft indtil nu. Jeg har lært virkelig meget – både teknisk og i forhold til samarbejde og projektstyring. Der har været tidspunkter, hvor det var sjovt og spændende, og andre hvor det var ret presset.
Som SCRUM master havde jeg ansvar for at holde overblik og skabe struktur i gruppen, og det var nyt for mig. Jeg lærte meget om, hvordan man koordinerer opgaver og prøver at få alles tid og bidrag til at hænge sammen. Samtidig stod jeg også for meget af designarbejdet – fra wireframes og farvevalg til design system og mockups – og det var lidt overvældende, at så mange af de opgaver endte hos mig på én gang. Men det gav mig også noget selvtillid at se, at jeg faktisk kunne tage det ansvar og få tingene færdige.
Jeg lavede vores popup i JavaScript, som skulle være funktionel. Det var første gang, jeg kunne få lov til at lave noget andet end headeren/navigationen, og jeg blev faktisk rigtig glad, da det hele virkede, og jeg forstod, hvad jeg havde lavet.
Når det så er sagt, så var det også lidt svært, at arbejdet med rapporten og den skriftlige del endte med at være noget, som Anja og jeg tog mest af. Vi havde i forvejen mange andre opgaver, og selvom vi prøvede at sige fra og få de andre til at tage mere ansvar, så lykkedes det ikke helt. Det var en af de ting, der gjorde, at vi begge følte os ekstra pressede – især i den sidste uge, hvor det hele skulle samles.
Hvis jeg kunne gøre noget anderledes, ville jeg gerne have haft en tydeligere fordeling af opgaver fra starten – og være hurtigere til at sige til, når noget begyndte at blive for meget. Jeg ville også gerne have haft lidt mere tid til at forfine mit design og arbejde mere med JavaScript, men med den tid vi havde, er jeg stadig rigtig stolt af det, vi fik lavet.
Alt i alt føler jeg, at jeg både har lært at tage ansvar og være en del af et større team – og det føles som et vigtigt skridt fremad.