Projekt 4

Vores opgave i projekt 4 var at som en gruppe, skulle vi udvikle en løsning for UCL. Vi skulle igennem interviews forstår UCL’s elever og opdag eventuelle løsninger til deres hverdags problemer.

Til at starte med satte vi os ned og lavede en gruppekontrakt, samt risikoanalyse og interesseanalyse.

Derefter satte Danni en github op, hvor jeg klargjorde mappestrukturen og html siderne. Jeg delte CSS og JS filerne op i 5, da vi er 5 i gruppen. Så vi ville have mindst mulige merge konflikter.

Planlægning og logbog

Vi har brugt SCRUM til at planlægge og opdele vores opgaver, med daglig reviews og møder.

Vi har alle sammen arbejdet om at skrive logbog.

Interview og data indsamling

Sammen i gruppen, satte vi os til at lave et spørgeskema.

1. Spørgeskemaet:
   1. Køn:
   2. Alder:
   3. Studie og semester:
   4. Kan du nemt finde rundt på campus? hvorfor/hvorfor ikke?
   5. Da du startede på studiet synes så det var nemt at finde rundt på campus? Vidste du hvor printere, medialab, fablab, toiletter osv. var henne.
   6. Hvis du ikke havde rundtur på skolen, tror du så du kunne finde vej rundt omkring?
   7. Hvordan synes du de sociale arrangementer er på campus? 
   8. Synes du det var svært at møde nye mennesker, da du startede på studiet?
   9. Synes du der er nok arrangementer på studiet?
   10. Vil du gerne møde flere nye mennesker nu?
   11. Synes du det er nemt at strukturere din tid, så man kan have et balanceret fritids/arbejdsliv
   12. Kunne du tænke dig at få tilbudt hjælp til at strukturere din tid?
   13. Hvad er din holdning til at skole og undervisning informationer er spredt ud på flere platforme (it’sLearning, TimeEdit, mail, UCL.dk, instagram)

Affinity map

Vi tog alle vores interviews, som vores kvalitative undersøgelse og formulerede dem til punkter vi smed på posters under et affinity map. Vi fandt 3 hovede kategorier ud fra alle de svar vi fik og satte derefter posterne under. Vi fik til sidst dannet 3 problemstillinger, som elever på skolen oplever.

Udfra vores Affinity map, valgte vi at gå med emnet “Problemer med at finde rundt på skolen”, som er en opsumering af største antal af post it notes der referede til det problem.

Brainstorming

• 

• 

• 

• 

• 

Udfra de forskellige forslag, blev vi enige om min. Hvor jeg derefter definerede den noget mere med Tore, efter en omgang feedback.

Første brugertest

Tore og jeg satte os til at lave de første brugertests, hvilket man kan finde her https://blog.athaxdesigns.com/semester-2/mini-papir-prototype/

Moodboard

Jeg og tore satte os til at lave moodboard og visualboard. Tore satte sig til at lave at lave moodboard og jeg satte mig til at lave et visual board.

User matrix, User scenario mapping og User flows

Inden vi begyndte at design vores app, satte vi først informations struktueren i orden. Som det første lavede vi en Usermatrix.

Derefter lavede vi en user mapping scenario, for at lave et form for et flow af hvordan brugeren navigere appen og hvad der vil ske, kunne ske og evnetuelt kunne ske.

Vi alle lavde en userflow hver, af hvert userflow der fandtes i vores app. Dette er mit meget low-fi userflow, hvor man kommer forbi loading screen, klikker på en bygning, en etage og så ser et kort til man er kommet til sin destination.

Wireframes, Low-fi og high fi prototype

Jeg og Tore satte os til at lave et low-fi wireframe, jeg lavede de øverste frames og han lavede profil og login.

Med base fundementationen sat på plads, begyndte jeg at arbejde med en high-fi prototype.

Her havde Simon farvelagt loading siden, hvor Tore senere havde tilføjet noget mere, så det passede bedre med UCL temaet. Danni havde produceret 3D renderet til forsiden, hvor man på prototypen kunne klikke på en af bygningerne. Udover det har jeg stort set designet og sat resten af UI elemterne op, med gestalt principperne i tankerne samt vores low-fi prototype.

Der jeg blev færdig med vores første version, havde vi endnu en brugertest, hvor vi ville få brugerne til at navigere igennem siden. Her fik vi noget data, vi kunne arbjede med til at udberede vores app. Derudover brugte vi en metode, som hedder heatmap. Det er en metode, der læser hvad der vejer mest på skærmen.

• 

• 

Med vores heatmap, fik vi lavet et endnu mere uniformt flow for øjene med fokus på de vigtigste elementer i fokus. Du kan blandt andet se baggrunds elementet i baggrunden, som har alt for meget meget fokus på sig i det første artboard. Udover det arbejde jeg med Simon på en løsning om at gøre det mere klart at man kunne klikke på etager og bygninger, hvor de 2 første blev løsningen.

Prototype – high-fi v2

Her tilføjede jeg vores nye ændringer.

Prototype – high-fi v3

Efter at jeg havde opdateret diverse elementer, såsom vores popup, etage side tog en sidste brugertest igen. Med vores sidste brugertest, fandt vi frem til at vi skulle have mindre fokus på nogle elementer.

Såsom søgefeltet tog alt for meget opmærksmhed når man havde søgt, eller når man ville begynde på at browse.

• 

• 

Eller at vores logud knap havde alt for meget opmærksomhed.

• 

• 

Efter jeg havde lavet de rettelser og noget oprydning, blev dette vores endelige prototype.

HTML og CSS

Jeg stod for den primære HTML og CSS kode, her fik jeg mit team til at bruge BEM css for en bedre struktur.

Her har jeg sørget for at have en masse Meta data, som er generelt og specificeret imod Facebook og twitter. Har også delt CSS op i flere filer, så vi slippede for for mange merge konflikter. Hvor jeg til sidst mergede alle relevante css og js filer.

Jeg har også skrevet en stor del af css’et. Her har jeg valgt at bruge rootkit, for at gøre det nemmere for os selv. Med rootkit kan man hurtigt ændre alle farverne på hjemmesiden da det fungere, som en variable der indeholder en css regel. Derudover har jeg kommenteret kode, så resten af mit team kan følge med.

Javascript

Her er de 3 blocks af javascript, som jeg har skrevet. Ved brug af eventlisteners, har jeg kunne holde øje med hvad der bliver klikket på med appen og reagere efter det.

Refleksion

Projektet var super spændende at arbejde med og det var dejligt at kunne udvikle sig inden for UX og UI design. Her lærte jeg at gå dybere ned i brugertest og de fantastiske resultater man kan få ud fra dem. Jeg lærte også at være bedre til at sammenarbejder med andre mennesker og udvikle mig på det punkt generelt. Jeg fik også udfordret mig selv med JavaScript ved brug af event listener og jeg er helt klart blevet bedre til at bruge det. Alt i alt var det super fedt at genere idéer, optimere og finalizer et produkt, det var meget læringsfuldt.