Semester 3 eksamen

Til vores 3 Semester eksamen opgave, skulle vi vælge en klient. Her fik vi scoret HLTV der er en enorm esports hjemmeside med 6.5 millioner besøgende om måneden, som vores klient. HLTV er en virksomhed, som viser esport data omkring Counter-Strike: Global Offensive, det kan f.eks. være spillere eller hold spil.

Vi startede med at opdatere teamkontrakten for at inkludere Khanapol og jeg. Kasper, Danni og Tore’s team var utrolige modne og nogle rigtige gode mennesker, de så at Khanapol og jeg var endt alene og her tog de os ind. Det er vi uendelige taknemlige for, med det skrev vi vores styrker, svagheder ind i deres teamkontrakt og blev opdateret om teamets krav til hinanden.

Research

Efter vi havde vores første møde med vores klient og havde fået bedre forståelse for deres virksomhed, samt besøgt og undersøgt hvordan CSGO verdenen fungerede, satte vi os sammen om at lave en KWHL for at få et overblik over hvad vi vidste og hvad vi skulle finde ud af.

Spørgeskema

Bagefter begyndte vi på at udbygge vores spørgeskema. Vi startede med at snakke om hvad ville give mening at stille spørgsmål omkring og tog udgangspunkt i vores KWHL. Her gav jeg nogle forslag på om vi ikke også skulle spørge ind til eventuelle frustrationer brugere har oplevet med UI / UX designet, havde de nogle yndlings features og hvis de selv kunne ændre på noget hvad ville det være? Her benyttede vi os af google forms til at skabe vores spørgeskema

Det næste step var at finde steder vi kunne dele vores spørgeskema, hver medlem af teamet delte spørgeskemaet hvor enden det gav mening at dele den altså CSGO baseret fansider og grupper.

Første omgang fik vi meget få antal af svar, cirka 62 svar. Det synes jeg ikke var godt nok og jeg begav mig ud for at undersøge hvordan det kunne være fordi det kunne ikke passe.

Her havde jeg en fornemmelse af det kunne have noget at gøre med hvordan vi havde formuleret vores besked til CSGO spillerene. Jeg skiftede teksten “Vi er en gruppe på fem” til “Vi er et team” og der blev tilføjet et mål, som “Vi mangler kun 38 respondenter”, da det ønskede mål var 100 respondenter. Den nye besked blev sendt ud til de samme grupper og resulterede i 454 ekstra svar. Altså en total svars antal på 516 cirka.

Med det kunne vi begynde på vores affinity map.

Med vores affinity diagram, begyndte vi at håndtere den store mængde af data vi fik igennem spørgeskamaet. Her lærte jeg at i stedet for vi bare skulle gå ind og finde ting i svarende fra spørgeskemaet, skulle vi havde aftalt hvem der tog hvilken sektioner. Vi endte nemlig op med mange post-it notes duplikationer fra samme svar.

Brainstorming

Med affinity diagrammet kunne vi brainstorm, idéer der ville kunne løse de problemer der opstår hos brugerne. Vi fandt hvilken retning vi ville gå og blev enige om at lave en hjemmeside, der skulle være widget baseret. Her ville vi bruge WordPress, som backend og vue3.js, som frontend.

Vores primære løsning til HLTV, var at kunne lave noget vi kalder UI personalization. Med UI personalization kunne brugere, selv vælge imellem de mange tusinder af moduler der findes på hjemmesiden, som de har brug for. Dermed kunne de få lige præcis den information der gav mening til dem.

Ved siden af det, for nyere besøgende ville vi lave nogle forhåndslavet opsætninger af moduler, som brugere kunne vælge imellem, indtil de dykkede ned og lavede deres eget.

Der ville være 3 at vælge imellem, events fokuseret, nyheds fokuseret og betting fokuseret forhåndslavet opsætninger og hvor den fjerde ville være at de kunne lave deres eget.

Persona

Her lavede jeg fundamentet for persona’en Anders Guldtoft, som er i den lidt ældre målgruppe og var basereret på den indsamlede data.

Visual board for det nye layout

Jeg lavede Visual board for det nye layout, som reflekterede det modulære design vi ville lave, samt enkeltheden vi gerne ville ramme.

UI Inventory

Jeg lavede et UI Inventory af HLTV’s UI elementer med lidt hjælp fra Danni, for at få et overblik over hvad der eksisterede af elementer og det blev meget tydeligt at der er alt for mange liste designs.

Her er et eksempel på 3 liste designs der minder meget om hinanden.

Userflow

Tore og jeg satte os til at arbejde på Userflow delen, noget af det første vi gjorde var at lave user tasks.

Her lavede jeg en usertask på hvordan en bruger kunne opdage et event og følge den.

derefter for at få en forståelse for hvordan en persona kunne navigere usertasken på, lavede jeg en user scenario mapping, hvor jeg reflekterede over en brugeres rejse igennem usertasken.

Derefter begyndte vi at tegne wireframes og udtænke designet

Her brainstormede vi hvordan vi skulle vise det relevante content først.

Vi kom frem til en smart løsning med at vise det data, man var interesseret i først og derefter alt andet

Her kan ma se nogle iterationer af designet jeg har lavet, hvor vi til sidste ender tilbage til deres originale farve og mindre headers, da de tog for meget opmærksomhed.

Her kommer jeg til et endelig design, hvor indholdet på højre side skal afhænge af hvad man vælger i listen på venstre side.

Vue framework

På grund af hjemmesiden var så enorm, med mange forskellige moduler forslog jeg at vi skulle bruge Vue. Det passede perfekt med hvordan man kunne gøre hvert modul til et component og at vi alle sammen kunne lave hver vores egne moduler og flere til.

Her brugte vi Vue igennem CLI, for at få adgang til deres router package, men også smarte funktionaliteter såsom ESLint og prettier. Det der er så smart ved det, er at når man er fem så kan koden hurtigt blive rodet, der kan være mange ubrugte variabler og forskellige måder at opstille koden på. Her har vi en præcis og stringent måde at gøre det med.

Meget mere læse venneligt, end hvis de var side om side.

siden alle modulerne, har stort set samme setup lavede jeg nogle predefineret classes, som man kunne bygge et modul op med. Det gjorde jeg så teamet hurtigere kunne komme i gang med at lave deres moduler, i stedet for at designe/kode det samme om og om igen.

Det var i starten lidt forvirrende for dem, det havde ikke gået op for mig at det kun gav mening for mig fordi jeg havde lavet det. Så skulle havde givet dem et rundown/kursus i hvordan det fungerede inden vi satte os til at kode det.

Scss

Har ikke brugt Scss før, så det var en fed udfordring at tage til sig. Kan specielt godt lide hvordan man kan referere til parent css navnet ved hjælp af & og hvordan man kan nest relateret css regler med hinanden.

Havde også benyttet mig af partials, hvilket er fedt nok når man gerne vil opdele scss/css’en op.

Event page

Har lavet mit event modul til at være dynamisk, den henter alt data ud fra en json fil midlertidigt. Det var meningen at den skulle hente det fra en MySQL database, men det blev mere kompliceret end jeg troede. Så til mine forbedringer, vil jeg forsøge igen.

Det næste jeg gør med dataen er at formatere dem ind i et nyt array og nye objekter, hvor alt er delt op alt efter om det er relevant eller other. Titler og undertitel er også generet igennem objektet. Jeg bruger metoden filter, til at separere efter hvad der står om der er true eller false i relevant key. Meningen var at det skulle være efter hvilket teams man har valgt at følge, men det her viser konceptet.

Til sidst og ikke mindst, bliver alt kørt igennem et par loops, som generere event modul konventet for mig.

Til at fremvise konceptmæssigt favorit funktionaliteten, brugte jeg localStorage. Når man klikker på en stjerne bliver en nøgle opdateret med et stringify’ed array af alle de favoriseret muligheder.

jeg lærte om hvordan jeg kunne snakke til localstorage, med JS og hvordan jeg kunne håndtere et array med værdier. Blandt andet af finde index’et på en bestemt værdi og derefter fjerne den fra arrayet. Eller at smide en ny værdi ind i et array.

Refleksion

Det var et super fedt projekt at arbejde på, vi fik en enorm klient hvilket også gjorde det til en enorm opgave. Vi havde ikke forudset hvor stor opgaven var også hvor kompleks den var, hvilket endt ud i at vi flere gange røg ud på en tangent der gjorde at vi skulle spole tilbage.

Vores planlægning skulle havde været bedre, men vi vidste heller ikke at den skulle havde været det. Vi har nemlig aldrig haft muligheden for at håndtere sådan et enormt projekt før.

Det var helt klart meget lærerigt og kommunikation blev især meget vigtigt i sådan et stort projekt, vi havde desværre en i gruppen der ikke var lige så interesseret i at kommunikere. Der blev forsøgt at opmuntre personen til det uden resultater, det endte så desværre med at gå ud over resten af teamets kampgejst og derefter blev folk mere stresset end nødvendigt.

Jeg ved ikke rigtig hvordan man skulle håndtere sådan noget, når en person ikke virker til at være interesseret i at prøve. En ting vi snakkede om, var at tage en personlig snak med personen. Vi fik aldrig gjort det, måske ville det havde ændret på noget.

Udover hvor stort et projekt det var, var det spændende jeg fik genopfrisket meget Vue og håndtering af localStorage og hvordan jeg kunne udnytte det til at lave et koncept på en datadrevet løsning.