Introduktion
01
Klienten
Den Blå Festival er en jazz/blues festival med beliggenhed i Aalborg. Festivalen tager sted over 5 dage, og har et stort udbud af forskellige koncerter og flere koncertsteder. I 2023 var der 71 events, som var fordelt på 22 lokationer.
Min rolle
Mit team fik opgaven at lave en webapp, for at give festivalgængere et overblik over spillesteder og koncerter og andre vigtige informationer. Webappen skal fungere som et værktøj, som deltagere kan bruge både før og imens til planlægning. Min rolle i projektet var ved hjælp af forskellige metoder at komme på den bedst mulige løsning til hvordan en webapp kunne se ud.
Problemet
Det hele store problem ved Den Blå Festival er hvordan de viser deres kunstere/spillesteder. De viser dem nemlig vha. en PDF fil som åbner i et nyt vindue hvor der er en oversigt med 64 forskellige spillesteder. De ville være oplagt at have en webapp hvor brugere kan gå ind og se hvem der spiller hvor/hvornår, istedet for at skulle scrolle igennem så mange sider.
Research
02
Segmentering
Det første step i processen var at lave en segmentering, her startede vi med de objektive kriterier. Her kom vi frem til at vores eventuelle brugere nok bor i Nordjylland, og at det er folk i aldersgruppen 16+ fordi der er alkohol involveret. I forhold til subjektive kriterier, kom vi frem til det er mennesker med en interesse for at høre musik, behov for fællesskab og at opleve noget Musik kultur.
Interview guide
Ud fra den målgruppe vi trak ud af segmenteringen, laver vi interviewguide.
Intro
- Interviewer introducerer sig selv og formål
- Fortæl lidt om dig selv?
-
Har du selv en relation til musik?
- Hvilken slags musik lytter du til?
Motivation
-
Har du været til et musikarrangement før? (live musik,
festivaler, koncerter)
- Hvilket?- Hvem var du sammen med?
-
Hvad motiverer dig til at deltage i musikarrangementer?
- Giv et eksempel på en god oplevelse da du var afsted- Hvad glæder du dig til næste gang du skal afsted
Tilrettelæggelse
- Hvilke tanker og forventninger havde du inden du tog afsted?
- Har du tidligere oplevet udfordringer eller frustrationer, når du forsøger at finde koncertoplysninger online?
- Hvilke praktiske informationer er vigtige for dig at viden inden du tager afsted?
Tematisk analyse
Efter vi har interviewet vores personer, transkribere vi og analysere det. Vi finder sammenhængene temaer, ud fra det interviewpersonerne har sagt. Nedenunder har vi fundet nogle citater, og skrevet et passende tema
Fælles temaer
- Fælleskab
- Hygge/stemning
- Musik
Personaer
Ud fra interview og tematisk analyse laver vi personaer. Dette giver os et overblik hvem eventuelle brugere er, og hvad de kigger efter på webappen. Vi fandt frem til 2 personaer, som afspejler vores interviewpersoner meget godt.
Alder: 35
Køn: Mand
Job: Bankrådgiver
Status: Gift
Bopæl: Nørresundby
Allan
Mål: Lave flere sociale ting
Allan indrømmer at han tit kan føle sig distræt, og derfor kan han have svært ved at have overblik over informationer samt at planlægge ting generelt. Allan har derfor brug for at kunne tilgå informationer der nemme og overskuelige for at kunne planlægge ting bedre.
“Med en travl hverdag og begrænset tid til at planlægge, er det virkelig en hjælp at have en app, der gør det nemt og overskueligt at holde styr på alle de nødvendige informationer. På den måde kan jeg nemt samle vennerne, planlægge sociale aktiviteter og få lidt mere tid til fællesskab, selvom arbejdet og familielivet fylder meget”
Alder:23
Køn: Kvinde
Job: Pædagog
Status: Single
Bopæl: Aalborg
Anja
Mål: Skabe nye minder
Anja er normalt hende i vennekredsen som organiserer alle turene når de skal afsted. Hun kan derfor ikke lide hvis praktiske oplysninger såsom åbningstider og lokationer ikke er lettilgængelig. Anja kan godt blive overvældet, hvis der er for mange unødvendige informationer, som kan gøre det svært for hende at finde det hun har brug for.
"Med en travl hverdag og ansvar for at organisere venindeturene, er det vigtigt for mig at have en app, der gør det nemt at finde de praktiske informationer. Når jeg endelig har tid til at være social, vil jeg bare kunne slappe af og nyde tiden med vennerne uden at skulle bekymre mig om små detaljer.”
Affinity Diagram
Det næste trin i processen er affinity diagrammet. Her startede vi med at brainstorme ideer til indhold, de grønne post its er vores egne ideer og blå post its er elementer som var på siden i forvejen. Efter det inddeler vi alle post its ud fra ligheder, uden at tænke på overordnede kategorier. Til sidst skabes der sammenhænge baseret på klassifikationsskemaet.
Content sitemap
Nu kan der laves content sitemap, som organiseres ud fra vores affinity diagram. Her indsættes der hvad der specifikt skal stå på hver side, og hvor CTA’er og entrypoints skal føre hen.
Design
03
Wireframes
Ud fra sketches er vi i fællesskab kommet frem til wireframes. Disse wireframes har god variation i design, og genbruger komponenter. Her har vi taget brug af Iterativ designproces.
Forside
Program
Praktisk
Kontakt
Kode realisering
04
Accordion
Der er generelt ikke blevet brugt noget meget kompliceret kode i dette projekt, da det var på et tidspunkt hvor vi først lige var begyndt at lære JavaScript. Derfor er består det meste af projektet af HTML og CSS. Dog er der nogle JS sektioner der kunne være interrasant at gå igennem.
Koden starter med en if statement som tjekker om URLen indeholder praktiskInformation. Så vælger den alle elementer med klassen PraktisAccordion og gemmer dem i variablen accordion. Hvis if statement er true, så looper den igennem et for loop og hvert element i accordion får en click eventlistener. Hvis elementet bliver klikket på får elementet en active class og dermed åbner accordion.
if (window.location.href.includes("praktiskInformation")) {
let accordion = document.getElementsByClassName("PraktisAccordion");
let i;
for (i = 0; i accordion.length; i++) {
accordion[i].addEventListener("click", function () {
this.classList.toggle("active");
let information = this.nextElementSibling;
if (information.style.display === "block") {
information.style.display = "none";
} else {
information.style.display = "block";
}
});
}
}
let slideshow = 0;
showSlides();
function showSlides() {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
for (i = 0; i slides.length; i++) {
slides[i].style.display = "none";
}
slideshow++;
if (slideshow > slides.length) {
slideshow = 1;
}
for (i = 0; i dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideshow - 1].style.display = "block";
dots[slideshow - 1].className += " active";
setTimeout(showSlides, 3000);
}
Slideshow
Starter med at lave en variabel, som er = 0. også kalder den funktionen showSlides(). Inde i showSlides() vælges alle elementer med class mySlides og gemmes i variablen slides. det samme gælder elementer med klassen dot. Koden skjuler først alle slides ved at sætte deres display til "none". hvis antallet af slides overstiger, sættes det tilbage til 1. Efter fjernes klassen active fra alle dots. Til sidst kaldes showSlides() igen og efter 3 sekunder fortsætter slideshowet automatisk.
Endelige Produkt
05
Program
Overskuelig oversigt over koncert programmet, hvor man kan sortere efter dage, derudover er kunstnere sorteret fra A-Z. Ideen var at man skulle kunne trykke på A-Z.
Spillesteder
Nu er der flere informationer omkring hvert spillested, hvilket giver et større overblik. Udover det er der også et billede, som visuelt viser spillestedet.
Kort over festivalsplads
Nu har brugeren mulighed for at se et live kort, med oversigt over alle spillesteder. Dette gør det nemmere at finde rundt til de forskellige steder.
Brugertest
06
Think aloud test
Vi testede vores design på fire potentielle brugere og brugte et test script til at sikre, at vi kom godt rundt om alle vigtige områder af oplevelsen. Under testen stødte vi på problemer med to af spørgsmålene, som viste sig at skabe forvirring og var svære for brugerne at besvare. Nedenfor beskriver vi de to problemer, ser nærmere på, hvordan de påvirkede brugernes forståelse, og vurderer, hvor alvorlige vi synes, udfordringerne er. Målet er at justere designet, så det bliver mere intuitivt og nemmere at gå til.
Problem 1 - Task 6
Det er ikke åbenlyst for brugeren hvad der koster penge, og hvad der er gratis
Anbefaling:
Vi skriver hvad der koster penge, og hvad der er gratis
Alvorlighed:
Problem 2 - Task 4
Brugerene havde svært ved at finde frivillig sektonen, som ligger på kontakt siden.
Anbefaling:
Vi kunne lave en ny accordion, som svarer på dette spørgsmål.
Alvorlighed:
Reflektion
07
Hvad har jeg lært?
Jeg har helt klart lært en masse af dette projekt, det er første gang jeg arbejder med at skulle lave en webapp. Dog er mange af de forskellige processer det samme, men det er første gange jeg arbejder med at skabe personaer. Disse personaer har helt klart bragt en nyt perspektiv til ens fremgangsmåde, og hjælper med at komme med nye ideer til ens design. Noget jeg syntes er særlig vellykket er vores teamwork i gruppen, der har igennem hele processen været en positiv ånd og drive til at lave et godt produkt. Hvis jeg skulle highlighte noget som man kunne gøre bedre, ville det nok være at ligge mere fokus i at gøre produktet mere webapp agtig. Vi kunne feks. have tilføjet en navigation bar nede i bunden.