Brainiacs rapport

TITELBLAD

Må projektet offentliggøres: Ja. Eksamensprojekt 2. semester sommer 2022

Projekt periode: 2. maj 2022 - 30. maj 2022 Multimediedesigneruddannelsen Erhvervsakademi Aarhus

BRAINIACS ONLINE IDENTITET

Afleveringsdato: 30/5 2022

Anslag: 30.944 inkl. mellemrum sider: 23

UDARBEJDET AF: Michael Hovgaard Eaamhovg@students.eaaa.dk

Gerda Navickaite eaagena@students.eaaa.dk

Henrik Jacobsen eaahoj@students.eaaa.dk

Mie Pedersen eaamgp@students.eaaa.dk

VEJLEDERE: Heidi Lisbeth Larho Hanne Skjærlund Andersen Per Thykjær Jensen

Prototype:

Github:

Video:

INDLEDNING (MIE)

Digitale platforme er det nye og det vokser sig kun større og større i forhold til erhvervsmarkedet. Det er på alle fronter vi ser en udvikling, og alle virksomheder, skoler og institutioner bliver mere og mere digitaliseret. Det er derfor super vigtig at man lægger en god grundsten online, hvis man starter virksomhed. Det er det som vi vil hjælpe Brainiacs med, det er at slå sig fast online i form af en inspirerende og gennem ført hjemmeside, for at hjælpe deres startup på vej, på bedst mulig vis, det vil vi gøre ved at hjælpe af en gennemarbejdet research hvor vi kan fastlægge os på en målgrup pe, derudfra kan så arbejde videre med indhold og design til hjemmesiden, da vi vil ramme målgruppen og Brainiacs ønsker på bedst mulig vis

PROBLEMFORMULERING

Hvordan kan vi skabe en online tilstedeværelse for brainiacs, så det skaber en værdi for både virksomheden og brugerne?

• Hvordan kan vi skabe en attraktiv digital løsning for brainiacs og dens brugere samt nye brugere?

• Hvordan kan vi igennem en digital løsning øge kendskabet til brainiacs og dets ydelser samt skabe en god visuel identitet .

• Hvordan kan vi få brainiacs til at adskille sig fra konkurrenter (fremvise deres styrker)?

METODE (GERDA)

I begyndelsen af vores projekt udarbejdede vi en Trello plan1 der hjalp os med at skabe et overblik over, hvad der skulle laves. Vi har fordelt opgaverne imellem os, og havde derfor altid styr på hvem der skulle lave hvad, og hvornår man var blevet færdig med opgaven.

Vi startede med at lave en analyse af virksomheden og målgruppen, hvor vi har ­udarbejdet både desk- og fieldresearch. Efter vi havde samlet alt data ind og fået et godt indblik i virksomheden og målgruppen, begyndte vi på at lave målgruppeanalyse, hvor vi har anvendt SMP-modellen og Smuk-analyse, som har gjort det nemmere for os at vælge den primære målgruppe ud fra de valgte segmenter. Da vi har besluttet os for målgruppen, begyndte vi på at lave Personaer for at skabe os et godt billede af hvem vores brugere er, og hvad deres behov var. Derefter gik vi i gang med at lave Value Proposition Canvas, for at få endnu mere indsigt i målgruppens og virksomhedens behov.

Da vi havde ret godt styr på vores målgruppe, udarbejdede vi en Tone of voice2, som fortæller os hvilken tone Brainiacs vil have, så den rammer målgruppen. Derefter blev der udarbejdet et Sweetspot, så vi kunne finde et overlap til både det som målgruppen og virksomheden ønsker.

I begyndelsen af designprocessen har vi udarbejdet et Creative brief3, for at fastlægge nogle rammer for hvordan vi gerne vil have vores hjemmeside til at fremstå.

1 Bilag 1. Trello plan

2 Bilag 2. Tone of voice.

3 Bilag 3. Creative Brief.

Derudover har vi udarbejdet en Designmanual1, som en guide til hvordan vores design skal være og hvilke regler der skal overholdes. Efter at vi havde styr på det, har vi brugt Adobe XD, hvor vi kunne alle sammen være med til at udarbejdede mockups både til web og mobil version af hjemmesiden.

For at vi alle sammen kunne være med til at kode hjemmesiden, har vi brugt Github Collaboratory. Her har vi fordelt elementerne imellem os som skulle kodes, og hver gang at vi havde ændret på noget, har vi brugt push og pull til at vi alle sammen kunne se de ændringer der blev lavet på hjemmesiden undervejs i vores kodnings proces.

RESEARCH (MICHAEL)

SMP - Målgruppeanalyse

For at fastsætte hvilket segment der er mest værdiskabende, anvendes SMUK-analyse; på ”ufaglærte ildsjæle” og ”de afviste”, for at fastsætte hvilket segment der skal være den primære målgruppe. De ufaglærte ildsjæle er de personer som Mikkel igennem interviewet2 beskriver, som værende dem som bare ikke kan lade være, personer der har været noget igennem og kommer med noget kant og karakter. der ikke nødvendigvis har den store skolelyst eller den økonomisk mulighed.De afviste dækker over de personer som har i forvejen søgt ind på andre filmskoler, men af en eller anden årsag ikke er kommet ind som ville tage dette kursus for at øge chancen for at kunne søge ind til det næste hold, som Brainwave DC har haft en del af før.

Smuk-modellen er baseret på 4 punkter som tilsammen giver en score, hvor målgruppen med den højeste score er mest fordelagtigt at arbejde videre med som primære målgruppe. Fordelen ved at anvende denne model, er at det kan give noget klarhed på området, og basere sig på research. Problematikken ved modellen er at det er baseret på en subjektiv score og kan derfor varierer i score.

Størrelse og vækst

Netop dette, kan være svært at give en korrekt score på hos “ildsjæle”, da der ikke fin des statistikker for hvor mange af dem der findes der falder i den anden gruppe også. Derimod er der en del tal fra vores desk-research, som viser det præcise antal af afvi ste hvert semester. Igennem interviewet med vores ekspert, fortalte han at der findes masse af ildsjælene der mangler en chance. Da der ikke findes findes data på dette, score ”de afviste” højst.

Mulighed for bearbejdning

Der kigges på segmenternes distributionskanaler; hvem og hvordan kan man nå ud til dem. Fælles for segmenterne er, at de er lette at ramme. Der findes en del ord der bliver brugt i søgemaskiner (SEO) som går igen, hos dem begge. ”ildsjælene” scorer dog højere da de er mere villige til at finde alle muligheder for at komme ind i branchen ifølge vores ekspert.

1 Bilag Designmanual

2 Bilag Interview Mikkel

Udgifter ved bearbejdning

Score begge segmenter ens, da udgifterne forbundet med arbejdet er ens. Der skal fo kuseres på SEO, samt SoMe, eksterne distributionskanaler for at få udbredt budskabet bedst muligt.

Konkurrencesituationen i segmentet

Det er her den store forskel på segmenterne ses. Der er langt flere skoler som “de afviste” kan søge ind på, hvis den første skole ikke går som forventet. Hvori mod ”ildsjælene” ofte ikke besidder de skolemæssige kompetencer eller økonomiske adgangskrav der forventes til at gøre det samme.

ANALYSE AF MARKEDET

Desk research

Optagne i 2021 på film relaterede uddannelser.

I 2021 blev der optaget 50 elever ud af 502 ansøgere på medieproduktion og ledelses uddannelsen i København. Ud af de 502 ansøgere havde 208 af dem sat uddannelsen som deres første prioritet.

På medietilrettelæggelse og tv uddannelsen blev der i 2021 optaget 37 elever ud af 496 ansøgere. Ud af de 496 ansøgere havde 273 af dem sat uddannelsen som første prioritet.

På visuel kommunikations uddannelsen blev der i 2021 optaget 95 elever ud af 801 ansøgere. Ud af de 801 ansøgere havde 382 elever sat den som deres førsteprioritet. 1

KONKURRENTANALYSE (MIE)

Identificering af nærmeste konkurrenter: Brainiacs nærmeste konkurrenter er dem som befinder sig i Aarhus, som tilbyder samme form for service som Brainiacs.

Herunder kigger vi på virksomhederne: Aarhus Filmværksted Potemkin

SUPER8

Sammenligning af produkter/ydelser, priser, service mm. Aarhus Filmværksted: Tilbyder forskellige workshops indenfor filmmaking som er gratis.2

Potemkin: Tilbyder 20 ugers selv betalt uddannelsesforløb inden for filmmaking. 3

SUPER8: Tilbyder en alternativ filmuddannelse, hvor undervisningen foregår over 2 dage hveranden uge, uddannelsen er ikke SU berettiget og betales via kontingentbetaling.4

1 https://www.ug.dk/kot-tal 2 https://www.afv.dk/hjem.html http://potemkinfilm.dk/ http://super8.dk/

Hvor er konkurrenterne bedre end Brainiacs

Fælles for alle 3 ovenstående konkurrenter er at de allerede har lagt sig på markedet og derfor allerede har en kendskab til hvordan man driver kurserne, de har derudover også et stabilt kundegrundlag. Aarhus Filmværksted tilbyder en gratis service, hvor Brainiacs koster 15000,- så her er det vigtig vi viser at Brainiacs er de 15000,værd, fremfor Aarhus filmværksted gratis workshops. Potemkin tilbyder 2 forskellige sværhedsgrader uddannelser, hvor Brainiacs “kun” tilbyder en.

SUPER8 tilbyder et mere fokuseret forløb, i form af at det er en deltidsuddannelse som forløber sig over 3 år, de tilbyder derfor en bredere viden gennem undervisningen, og kan nå mere end Brainiacs.

Hvad gør de dårligere end Brainiacs

Aarhus filmværksted tilbyder gratis workshops, derfor vil der være en mulighed for at undervisningen ikke er lige så fokuseret og passioneret som hos Brainiacs. Hos Potemkin strækker uddannelsen sig over længere tid end hos Brainiacs, og er selvbetalt, derfor vil det tage længere tid at få den samme viden som man får hos Brainiacs, som tilbyder et hurtigere og mere intenst forløb for en billigere pris.

Hvor gør I det samme Fælles for Brainiacs og de nærmeste konkurrenter er at de alle tilbyder en form for ud dannelse indenfor filmmaking og alle er placeret i Aarhus C.

FIELD RESEARCH (MICHAEL)

Der er udarbejdet nogle få specifikke spørgsmål som vi manglede svar på, ellers er der foretaget interview af både ejer samt medarbejder hos Brainwave DC som er hoved virksomheden for Brainiacs. Interviewet havde en mere fri tilgang hvor snakken førte hen. Da alt information om hvad deres passion og drivkraft var skulle have frit lejde til at komme frem. Til ejeren blev interviewet forsøgt at dreje sig ind på hvad hans vision og hvad han tænker, for at give os som designer adgang til hans forventning, ønsker og drømme. Der blev fortalt en del om hans nye projekt, som han ønskede online tilstedeværelse på. Begge interviewet blev optaget og efterfølgende transkriptet ned1. Udbyttet af denne form for interview tillod en mere dybdegående samtale og førte til mere fri snak og masser af ekstra information.

Denne interviewform blev ligeledes brugt under interviewene af de ansatte i brainwave DC. Samtalen med den fri og åbne form gav en forståelse for målgruppen, da Bra inwave DC ønsker samme drive som de allerede ansatte. Samtalen blev optaget og transskriberet Bilag X. Vi brugte interviewet for at kunne få indblik i hvordan og hvorfor de havde valgt at gå filmbranchen. Vi lærte om deres valg og veje, og hvordan at den traditionelle vej til arbejdet i filmbranchen ikke var appellerende for dem. De ansattes processer og læringsmetoder er drivkraften for hvorfor Brainwave DC har valgt at ville udvikle et talentprojekt, da dette passer bedst til de mere hands-on personer der har drive og interesse for film/reklame branchen.

VALUE PROPOSITION CANVAS (HENRIK)

Ud fra vores Value Proposition Canvas, har vi undersøgt hvad vores målgruppe ger ne vil opnå med Brainiac, og hvordan Brainiac kan hjælpe målgruppen med at opnå deres mål. Vi startede med at finde ud af hvad målgruppen egentlig gerne vil, ved at brainstorme customer jobs, gains og pains. Her fandt vi ud af at vores målgruppe er personer der gerne ville lærer, eller udvide deres færdigheder inden for filmproduktion, men som ikke har de nødvendige adgangskrav til konventionelle filmskoler. Derudover er der er også en del af målgruppen som lider af f.eks. ADHD, som ikke passer ind i en traditionel undervisningsform, men som vil drage nytte af en mere praktisk tilgang. Grundlæggende vil Brainiacs være åbne for alle der brænder for filmproduktion, og som gerne vil udvide deres kompetencer, på en praktisk og ”hands on” tilgang.

En af de grundlæggende aspekter for Brainiacs, er at der skal være meget lidt teoretisk tavleundervisning, da det ikke resonere med det principielle koncept omkring Brainiacs. Derudover er det vigtigt for målgruppen at de rent økonomisk har mulighed for at mel de sig til. Dette vil Brainiacs gøre ved at tilbyde forløbet til en pris, som man kan få råd til med f.eks. et job som tjener, på 3 måneder. Vi ønsker at kunne formidle Brainiacs’ stærke drive til at hjælpe og udvikle fremtidens filmproducenter gennem en fed og lidt provokerende hjemmeside samt SoMe content.

PERSONA’S (HENRIK)

Ud fra vores samlede research, og målgruppeanalyse, har vi kreeret 3 forskellige personaer. Disse 3 personaer repræsentere, på hver deres måde, de ildsjæle som brænder for filmkunsten, men som ikke har mulighederne for at komme på konventionelle film skoler.

De 3 personaer har fået forskellige personligheder, for at vise den diversitet der er i de mennesker der gerne vil have en karriere inden for filmbranchen. F.eks. har man Mar kus og Emily som er de mere udadvendte, ekstroverte personer, mens man har Jesper som er den mere stille og introverte type.

MÅLGRUPPEVALG (MICHAEL)

Vurdering af segmenter

De to segmenter er begge værdiskabende at arbejde videre med i fremtiden, men der ses størst mulighed for at kunne komme godt fra start med ”ildsjælene” og derfor bliver disse vores primære målgruppe. De afviste bliver sekundære målgruppe, som kan pushes på et senere tidspunkt i processen.

VALG AF MÅLGRUPPESTRATEGI (MIE)

Tone of voice guide - TOV1

Vores tone of voice guide er lavet på baggrund af konceptet og målgruppen, hvem er det vi gerne vil ramme og hvordan gør vi det bedst muligt igennem vores måde at kom munikerer på hen over forskellige platforme, her primært på vores hjemmeside. Vores tone of voice guide indeholder relevant information om virksomheden, herunder missio nen og visionen for Brainiacs, derudover har vi valgt at medtage en SWOT-analyse, så der er et overblik over hvor vi er stærke og svage, i henhold til hvordan vi kan styrke os igennem kommunikationen på vores platforme, primært hjemmesiden. Den indeholder nøgleord og værdier som repræsenterer Brainiacs, og dette er også disse vi vil formidle inde på vore hjemmesiden. Derudover har vi valgt hvilket sprog vi primært vil kommunikerer på, formalitet, grammatik og teknisk/fagligt sprog.

Sweetspot (GERDA)

Med udgangspunkt i vores research har vi udarbejdet et Sweetspot analyse af brugerens grundlæggende og underliggende behov, samt Brainiacs vision og værdier. Brainiacs Sweetspot er at udvikle unge talenter så de kan få sig en drømmekarriere.

SEO (GERDA)

Vores SEO-research er lavet for at bedre forstå vores målgruppe, og hvordan de vil søge efter indhold. Vi har brugt købstragtmodellen, for at finde de relevante keywords og følge de trin, som Brainiacs vil typisk gennemgå inden de vil tilmelde sig.

Awareness

Filmskoler, Filmuddannelser, Filmbranchen, Videoproduktion kurser/workshops, Hvor kan jeg finde den rigtig filmskole? Hvilke filmskoler/kurser er der i Aarhus?

Interest

Talentudviklingsprogram, Talentudviklingsprogrammer i Aarhus, Læring med den professionelle team, hands-on læring, kreativt kursusforløb

Consideration

Faglighed, Pris, Værdier, Hvem er undervisere/kursusleder?

Evaluation

Talentudviklingsprogram vs traditionelle filmskoler, Hvad koster det at tilmelde sig til talentudviklingsprogram? Hvad er muligheder efter endt kursus?, Hvad synes de andre om talentudviklingsprogram?

Decision

Adgangskrav, Hvad kan man bruge talentudviklingsprogram til?

Purchase

Tilmelding/optagelse

Repeat

Ansættelse i brainiacs, Freelance, Fuldtidsansatte, Udvide Brainiacs

Loyalty

Branding af Brainiacs, Brainiacs shop, salg af brainiacs logo t-shirt, Instagram, Facebook, Vimeo

Advocacy

Hvad synes de tidligere Brainiacs om talentudviklingsprogram?

POSITIONERING (MICHAEL)

Vurdering af mulige positioner Igennem hjemmesiden, skal der skabes løbende content fra kursister - hver projekt der laves skal publiceres på hjemmesiden, således der content at kunne SEO optimere på, og holde siden opdateret. Disse videoer skal linkes til i gennem andre kommunikationskanaler så som Facebook, som har store dele af målgruppen. Der er gode muligheder for at benytte sig af Instagram, hvor content skal være et øjebliksbillede af hverdagen som kursist.

DESIGN

CREATIVE BRIEF1 (MIE)

Vi lavede vores creative brief for at vi alle havde en ide om hvordan vi overordnet set gerne ville have hjemmesiden til at se ud, hvilken, stil tone og følelse, samt en samling over vores målgruppe. Vores creative brief har vi valgt skal indeholde væsentlig information om virksomheden, vores formål med hjemmesiden, hvad er det vi gerne vil opnå med at lave en hjemmeside, målgruppen for produktet, hvilken tone vil vi ramme, hvilken type hjemmeside har vi valgt at gå med samt vores moodboards og en tidshorisont.

Creative briefen har vi brugt til at holde os indenfor konkrete rammer i forhold til konceptet og bestemte valg igennem vores design process.

Moodboards

Vi startede vores designproces med at hver især udarbejde et moodboard, for at samle de tanker og ideer vi havde omkring Brainiacs. Efter at vi havde besøgt Braini acs kontor, samt fået indsigt i interviews, har vi alle sammen fået flere forskellige ideer angående farver, stemning og logoet. Så blev vi enige om, at vi vil gerne skabe en re belsk og provokerende stemning, men uden at vise det direkte. Derfor har vi overvejet et mørkt tema, Pitbull hoved som logo og en grøn farve som et symbol på greenscreen og grøn omstilling.

Analoge processer

Efter vi havde diskuteret i gruppen for hvad det er vi gerne vil have på hjemmesiden, begyndte vi at skitsere ideerne ned og se hvordan vores indhold kunne præsenteres bedst muligt. Vi har lavet wireframes, for at skabe et nemt overblik over hvordan alle sider på hjemmesiden kunne se ud. På forsiden blev vi enige om at der skulle være en intro video, for at fange brugerens opmærksomhed, og så et logo i midten af videoen for at gøre Brainiacs mere genkendelige.

Desuden skulle der være lidt information om Brainiacs, så brugeren kunne nemt danne sig et overblik over hvad Brainiacs er og står for. Derefter har vi overvejet at lave en quiz, hvor brugere kunne teste dem selv, og om de passer ind til Brainiacs ved at sva re på nogle spørgsmål. Spillet kunne både være godt for vores brugere og virksomhe den, da virksomheden kunne få indsigt i noget data, og brugere kunne være sikker på at de er landet det rigtige sted. Til sidst på forsiden syntes vi det var en god ide at vise et galleri af tidligere studie projekter, så brugere kunne se hvad det er man laver som Brainiac.

Desuden har vi valgt at have 7 undersider som er undervisning, studie projekter, om Brainiacs, tilmelding, mød undervisere, ofte stillede spørgsmål og så en kontakt side. Dette har vi valgt på baggrund af vores desk og field research, hvor vi har fundet ud af hvilke informationer, der var vigtige at have på en hjemmeside for de unge talenter der gerne vil være en del af Brainiacs.

Fonte og farver (GERDA)

Vi har valgt at have 6 grundfarver i vores design, hvor 2 af dem er mørke baggrundsfarver, og de 4 andre farver er til tekst, CTA-knapper og illustrationer. Den lysegrøn og hvid farve har god kontrast til den mørkegrøn og sort farve, og derfor skaber de sam men en god farvekombination. Vores farvevalg er taget på grund af den stemning vi fik, da vi besøgte Brainiacs kontor og efter vi havde spurgt personalet om hvilke farver de syntes passede bedst til Brainiacs. De syntes at den grønne farve passede rigtig godt til Brainiacs, da det handler om folk der er åbne og vil kæmpe for det de tror er rigtigt, ligesom de folk der kæmper for grøn omstilling.

I forhold til fonte, har vi valgt at have ”Helvetica Neue Regular” til brødtekster, da vi syntes at den sans serif var enkel, letlæselig og overskuelig som gør det nemmere for brugeren at læse informationer på hjemmesiden. For at fange brugerens opmærk somhed, har vi valgt at have ”Keep Calm Medium” typografi til overskrifter som også er en sans serif, og den står stærkt i sig selv og dermed passer også rigtig godt med det som Brainiacs står for.

Designmanual1

Vores designmanual har vi lavet for at holde styr på vores design og hvad vi må og ikke må. Den er lavet, på baggrund af de valg vi har truffet sammen i designproces sen. Den indeholder, de forskellige elementer som logo, farver, typografier, billeder, infografik og illustrationer, så man kan få et godt billede af vores visuelle identitet til Brainiacs.

Illustrationer og Motion graphics (GERDA)

Vi har lavet illustrationerne med fokus på vores logo, da vi gerne vil skabe den visuel le identitet for hjemmesiden, samtidig have at logoet bliver hurtig genkendt og husket. Vi tog særlig udgangspunkt i pitbullens hjerne, hvor vi har lavet en tidslinje illustration i Adobe illustrator. Den har vi lavet for at fange brugerens opmærksomhed og pege på de forskellige faser, som Brainiacs skal gå igennem.

Derefter har vi lavet en Motion Graphics i Adobe Animate ved brug af keyframes på scale. Animationen har vi lavet for at skabe et overblik og vise hvilke forskellige kompetencer er vigtige at have, hvis man gerne vil være en Brainiac.

Ikoner (MIE)

De ikoner der er lavet til Brainiacs er taget ud fra at bruge samme type streg som vi bruger i logoet, det er vigtig at vi viser en rød tråd imellem vores design af elementer.

Vi har valgt at lave ikonerne som vektorgrafik, så de kan skaleres op og ned i størrel se uden at miste information i grafikken, derudover er har vi meget video på siden, så ved at lave vores ikoner i vektor grafik, gør det at vi ikke gør siden tungere end højest nødvendigt da vektorgrafik fylder langt mindre i kilobyte end pixelgrafik gør.

Wireframes og mockups (MIE)

Vi lavede vores wireframes med henblik at holde styr på vores overordnede layout, så vi hurtigere ville kunne ændre i bokse og elementers placering på vores site, vi testede løbende vores layout på vores kunde, og derfor var vores wireframes gode til at kunne lave hurtige tilrettelser på den feedback vi fik.

Efter vores færdige wireframes, gik vi videre til at lave mockup af hjemmesiden, så vi kunne se farvevalg, billedstil, overskrifter, skrifttyper, logo og layout sammensat og for at se om det fungerede som vi håbede på. Vi havde 2 muligheder til vores forside layout hvor vi endte med at lave en A/B splittest, og endte ud i at vælge forside mulig hed nr. 2. Denne mulighed blev valgt ud fra kommentarerne omkring logisk tilgang til en hjemmeside og genkendelighed.

Logo (MIE)

Vi har designet logoet ud fra vores kundes ønske, de havde inden projektstart købt en pitbull maske, som de ville have skulle være Brainiacs maskot, den ide arbejdede vi videre med.

Vi startede med at udarbejde et design som var meget klassisk logo design, og meget skandinavisk i stilen, vi testede det på kunden, hvor konklusionen var at det ikke passede helt ind i den stil og vision som virksomheden har for deres brand, ud fra kommentarerne designede vi et nyt logo. I det nye logo medtog vi hjernen og en mere genkendelig version af en pitbull samt et gammel filmkamera som var en del af hjer nen. Vi gik tilbage til kunden og testede designet, der var nogle finjusteringer, kunden ville gerne have at hjernen i pitbullen blev gjort mindre, at filmkameraet blev slettet og at den fik øjne, da de ville have illusionen af at man bliver holdt øje med, vi lavede tilrettelserne i logoet, og gik tilbage og testede på kunden, her fik vi grønt lys, og ren tegnede derefter logoet.

Card Sorting & IA1 (MIE)

Da vi havde researchet på vores målgruppe, lavede vi en lukket kortsortering, vi gav vores testpersoner faste hovedpunkter og underpunkter, hvor de så skulle placerer underpunkterne under de hovedemner som de synes var mest logiske. Efter endt test, lavede vi vores informationsarkitektur til vore hjemmeside, så vi havde styr på hvilken information og sider vi skulle have i vores navigation Test (MIE)

Lukket kortsortering test

Vi lavede en lukket kortsorterings test, for at finde ud af hvor vores testpersoner men te at det var logisk at placere de forskellige emner i vores navigation, dette gav os et indblik og en mulighed for at lave vore informationsarkitektur som optimal og logisk for brugeren som muligt.

A/B splittest

Vi har lavet en A/B splittest for at vælge vores forside layout til hjemmesiden. Dette gjorde vi ud fra at vi havde 2 valgmuligheder til en forside. A/B splittest gav det resultat at vi gik med forside nr. 2, dette blev valgt ud fra kommentarerne omkring en logisk og ligetil tilgang til når man møder en hjemmeside, og at det var den som gav det hurtigste og bedste blikfang for målgruppen.

Usability test

Efter vores A/B splittest lavede vi en usability test på vores XD prototype, for at finde ud af om vores knapper var placeret strategisk i forhold til at få målgruppen til at ende der hvor vi gerne ville have de skulle ende, dette blev gjort ved at vores testpersoner fik stillet til opgave at finde frem til en bestemt information på hjemmesiden, og de skulle derigennem prøve at navigerer sig frem til informationen. Dette gav et godt ind blik i om vores overskrift valg, call to action valg og placering af elementer på hjemme siden, gav mening.

Herovideo (HENRIK)

Til hjemmesidens forside, er der anvendt en herovideo som det første man ser på hjemmesiden. Herovideoen er et showreel af diverse reklame- og musikvideoer som BrainWaveDC har produceret i tidens løb. På den måde viser vi hvad det er man kommer man til at arbejde med under kursusforløbet, inden man potentielt tilmelder sig. Selve showreelet er klippet i Premiere Pro, og her har vi brugt tidligere musik- og reklamevideoer, som BrainWaveDC har lavet gennem tiden2 (indsæt fodnote/link: https:// vimeo.com/brainwavedc).

Vi har forsøgt at klippe videoen på en måde, så bevægelserne i de enkelte musik- og reklamevideoer, flyder sammen, f.eks. hvis der er to videoer hvor der et element der bliver savet/skåret over, eller noget som falder ned. Samtidig er der også lagt musik over, som der også er blevet klippet efter i forhold til beatet. På den måde skabes der er et flow, selvom klippene er meget forskellige, i det at det er et bredt mix af både musikvideoer og reklamespots.

På selve hjemmesiden vil musikken være slået fra, da det ellers kan blive for støjende og forvirrende. Til andet content, som f.eks. sociale medier ville musikken snildt kunne anvendes.

1 Bilag 7. Informations arkitektur

2 https://vimeo.com/brainwavedc

Billedstil (HENRIK)

Til vores billeder har vi taget udgangspunkt i BrainWaveDC’s kontor og arbejdsmiljø, for at vise potentielle elever hvordan det arbejdsmiljø de kommer ind i, ser ud. Det er f.eks. billeder af folk der sidder og klipper film, eller stemningsbilleder af hele BrainWa veDC’s office space.

Over billederne er der lagt et grønt, transparent filter henover, for at få billederne til at passe ind i den visuelle identitet.

Programmering (MICHAEL)

Siden er opbygget med JQuery library, for at kunne skabe vores eget framework, der tager inspiration fra hvordan React side-opbygning fungerer.

Index.html udsnit: linje 17

Dette gøres for at gruppen kan optimere arbejde på samme side men uden at rode i hinandens koder. For at kunne drage fuldt udbytte af denne arbejdsmåde bruger vi GitHub repo. Så vi konstant kan holde siden opdateret, og hjælpe hinanden hvis der opstår problemer.

Dette gøres for at gruppen kan optimere arbejde på samme side men uden at rode i hinandens koder. For at kunne drage fuldt udbytte af denne arbejdsmåde bruger vi GitHub repo. Så vi ko fra JS/main.js udsnit: linje 6-12

scriptet virker således at $ indhenter Jquery som en funktion, som søger efter elementer med data-include, som den indhenter filen fra mappe root/elements/ hvor matcher den data som er givet til den. eksempel: Index.html linje 26

<div data-include=”nav” … dette genkendes jquery og derfor gør den følgende: Søger i mappen elements efter nav + .html Loader data der matcher ind i denne div.

Jquery sørger for at indsætte både den linket CSS fil, og tilhørende javascript, da disse står i dokumentet den loader. Denne metode er især praktisk når der skal ­indhentes de samme elementer på flere undersider såsom navigation og footer. ­Metoden gør også at det er lettere at identificere problemer og rette til.­

Placering af diverse elementer styres igennem main.css hvor der benyttes af grid.

På denne måde kan det let rettes til hvor elementerne skal placeres uden at ændre i html strukturen. blot ved at ændre i grid-template-areas.

main.css linje 37-41

Grid-area bliver så tildelt til body tagget. Hvor der laves nested grid. For at kunne ­placeres de elementer der skal ind i dette område. Her kommer id’et på tagget ind i spil, da dette id skal tildeles et grid-area som placere elementet i griddet der matcher.

main.css linke 46-52

Således har vi anvendt jquery til at indhente elementer ind på vores side og placeret dem.

KONKLUSION

Vi har skabt en digital platform og identitet for Brainiacs, det har vi gjort ved at fastsætte en målgruppe ved hjælp af vores research, hvor vi blandt andet kggede på om der er belæg for at starte et talentudviklingsprogram for filmmaking entuti aster, i vores research kunne vi se at tallene for ansøgerer og optagende på de gengse filmuddannelser ikke hang sammen, og der derfor ville være en stor efterspørgelse efter en alternativ vej ind i filmuniverset. Herefter undersøgte vi videre på målgruppen og endte med vores resultater, på en letterer bred målgruppe af blandet køn, etnicitet og geografisk placering i alderen 16 - 30 år. Vi har skabt en inspirerende og informativ hjemmeside til Brainiacs, vi har designet hjemmesiden efter målgruppen og derfor valgt at designe i mørke og rene toner, som fremhæver og skaber blikfang på det vigtige indhold på siden. I vores designproces har det været vigtig for at finde frem til en løsning som både var inspirerende af udseende og indhold, men stadig med en logisk og naturlig tilgang til hvordan man ville klik ke sig igennem overskrifter for at finde frem til den valgte information, vi har derfor valgt at lave en hierarkisk informations arkitektur som natlurligt vil hjælpe brugeren frem til specifik indhold og information. Ved hjælp af hjemmesiden hjælper vi til at øge kendskabet, da vi har undersøgt Keywords til SEO på siden, som vil hjælpe Brainiacs til at dukke op som en mulighed for de brugerer som søger efter en alter nativ vej ind i filmmaking branchen. Vi har skabt en god visuel identitet som er nem at bygge viderer på, der er skabt et genkendeligt logo, som man vil forbinde med Brainiacs, i logoet er der lagt vægt på at fremhæve den unge målgruppe, det skulle derfor være et logo som var fedt at se på samtidig med at det havde en sammen hæng med Brainiacs, da Brainiacs i forvejen havde en ide om en pitbull gjorde vi ideen til virkelighed ved at skabe en sammenkobling mellem Brainiacs og pitbullen. Logoet er med til at skabe den visuelle identitet for Brainiacs, da det vil være på vandmærke, merch og brugt i forkskellige sammenhænge, vi har derudover igennem siden brugt hele og dele af logoet til at skabe forskellige ikoner, så der hele tiden i rejsen på siden, skabes en rød tråd til Brainiacs. Vi har valgt at fremvise Brainiacs styrker ved at lave en historie side som dokumenterer rejsen fra ide til virkelighed og som fortæller om skaberen bag Brainiacs, historien er med til at vise de kompetencer som ligger grundstenen for læringen hos Brainiacs, derudover har vi også valgt at lave en quiz, som resulterer i om du Brainiacs i blodet.

LITTERATURLISTE

Bøger

Dabner D., Stewart S., Vickress A., 2020, Graphic design school. London: Thames & Hudson Ltd.

Rold M., 2019, Interfacedesign. Frederiksberg C: Samfundslitteratur. Robbins J. Niederst,,2018, Learning Web Design, 5th Edition Californien: O’Reilly Media inc.

McGrath M., 2020, JavaScript in easy steps 6th edition Warwickshire: In Easy Steps Limited

Flanagan D., 2020, JavaScript The Definitive Guide, 7th Edition, Californien: O’reilly Medie inc.

Andersen F. Rolighed, Jensen B. Warming, Olsen M. Risgaard, Olsen S. Østergaard, Post-Lundgaard M., Hassinggaard I, International markedsføring 6. udgave TROJKA

Hjemmesider

Videoer

1. Rand-Hendriksen, 2019, CSS advanced layout with grid, [Online] April 2019, https://www.linkedin.com/learning/css-advanced-layouts-with-grid?u=68595258 [Til gået 11. December]

2. Jenkins S., 2016, Design Aesthetics for the web, 2016 [Online] September 2016, https://www.linkedin.com/learning/design-aesthetics-for-the-web?u=68595258 [Tilgået 11. December]

3. Duffy T., 2019 Vanilla Javascripts Mobile game programming, [Online] August 2019, https://www.linkedin.com/learning/vanilla-javascript-mobile-game-program ming?u=68595258 [tilgået 11. December]

4. Simmons J., 2020, HTML Essential training, [Online] February 2020, https:// www.linkedin.com/learning/html-essential-training-4?u=68595258 [Tilgået 11. De cember]

5. Rand-Hendriksen M., 2021, JavaScript Essential training, [Online] January 2021, https://www.linkedin.com/learning/javascript-essential-training?u=68595258 [Tilgået 11. December]

6. Chellman J., 2020, JavaScript for web designer, [Online] February 2020, htt ps://www.linkedin.com/learning/javascript-for-web-designers-3?u=68595258 [Tilgået 11. December]

BILAG

Bilag 1. Trello plan

Bilag 2. Tone of voice (se ekstra materiale)

Bilag 3. Creative Brief (se ekstra materiale)

Bilag 4. Designmanual (se ekstra materiale)

Bilag 5. Interview med founder Mikkel (se ekstra materiale)

Bilag 6. Interview med persona Brainiacs (se ekstra materiale)

Bilag 7. Informations arkitektur

Bilag 8. Serviceværdikæde for Brainiacs (se ekstra materiale)

Danmarks statestik https://www.ug.dk/kot-tal

Aarhus filmværksted https://www.afv.dk/hjem.html

Potemkin http://potemkinfilm.dk/

SUPER8 http://super8.dk/

VIMEO BRAINWAVE https://vimeo.com/brainwavedc