Titel: Wacky Zack Eksamensprojekt 2. semester Multimediedesigner uddannelsen - Lyngby
Faktaark Gruppe 8: Titel: URL: Wacky Zack http://www.mknmedia.dk/arkiv/wackyzack/index.html Morten Korshavn mail: morten@mknmedia.dk http://mknmedia.dk/arkiv/portfolio/sitewackyzack.html Hold: Clmul-b12e 2. semester forår 2013 Vejledere: Jesper Hinchely Ivan Frederiksen Merete Lindemann Thomas Bügel Hartmann Ivan Rosenvinge Frederiksen Charlotte Morell Jørgensen Morten Rold Ian Wisler-Poulsen Frederik David Tang Ditlev Vestergaard Skanderby Morten Møller Nielsen mail: morten.moeller.nielsen@gmail.com http://weblabs.dk/wackyzack.html Oliver Schrøder mail: ols3650@gmail.com http://creativeolivers.dk/2sem4pro.html Mikael Lund Kristensen mail: mlk@graphicweb.dk http://graphicweb.dk/2sem.html
Indholdfortegnelse Indledning... s. 1 Problemformulering... s. 2 Afgrænsning... s. 2 Metode... s. 3 Teori... s. 3 Udvikling... s. 3 Modellering (UML)... s. 6 Kommunikation... s. 6 Projektet... s. 7 Ressourcer... s. 7 Gantt-chart (projektplan)... s. 7 Estimering... s. 7 Implementeringsplan... s. 7 Kommunikation... s. 8 Målgruppe... s. 8 Segmentering... s. 8 Spørgeskema... s. 11 Model... s. 12 Markedsføring... s. 13 De 4 P er... s. 13 Boston model... s. 14 Kreativitet... s. 15 Idegenerering... s. 15 Logo... s. 15 Designbrief... s. 16 Visuel identitet... s. 17 Branding & Image... s. 17 Website... s. 18 Twitter Bootstrap... s. 18 Web optimering... s. 20 Usability... s. 21 Brugertest... s. 21 Perspektivering... s. 24 Konklusion... s. 24 Litteraturliste... s. 25 Bilag 01: Estimering... s. 26 02: Gantt-chart... s. 27 03: Gantt-chart (Færdigt projekt)... s. 28 04: Kritiske vej... s. 29 05: Økonomi over projektudvikling... s. 30 06: Implementeringsplan... s. 31 07: Risiko-analyse... s. 32 08: Interessent-analyse... s. 33 09: FURPS+... s. 34 10: SMUK model... s. 35 11: Spørgeskema... s. 36 12: Moodboards... s. 37 13: Visuel identitet... s. 38 14: Mock-up (website)... s. 39 15: Grid system & Instagram feed... s. 40 16: Instagram & CSS/HTML og Javascript... s. 41 17: Sitemap... s. 42 18: Merchandise... s. 43
Indledning Hummel planlægger i 2014 at relanchere hacky sacken under navnet Wacky Zack. De ønsker en kampagne som har fokus på børns udvikling og sundhed gennem leg. Målgruppen er større børn i alderen 12-16 år, og målet er at fremme glæden ved og lysten til at udfolde sig fysisk. Vi er blevet hyret til at skabe et website som er visuelt appellerende til målgruppen. Hjemmesiden skal fungere som en platform for dialog omkring produktet og opfordre til at brugerne bidrager med deres egne oplevelser med brug af af dette. For at sælge konceptet til de unge vil sitet derfor integrere medier, såsom Facebook, Youtube og Instagram. Disse forventes at være målgruppen bekendte og skal skabe hype og en community følelse omkring Wacky Zacken. Brugerne skal være i stand til, via Youtube, at uploade videoer til sitet, hvor de laver forskellige tricks med Wacky Zacken. Disse kan naturligvis videredeles på Facebook. De bedste videoer vil desuden blive belønnet med præmier gennem konkurrencer. Sitet vil derudover indeholde et interview med en profil fra hacky sack sportens verden, samt sider med tips og tricks. Slutteligt er det et krav at vores site gør brug af analyseværktøj, som gør det muligt at registrere og analysere den trafik, der genereres derpå. Hummel - Firmaprofil Sportsmærket Hummel blev oprindeligt grundlagt i 1923 i Hamborg, Tyskland. I 1980 bliver firmaet 100% dansk ejet og bliver op gennem dette årti især forbundet med det danske fodboldlandshold, som de sponsorerer. Op gennem Hummel logo 1990 erne oplever Hummel økonomisk tilbagegang. Firmaet opkøbes i 1999 af finansmanden Christian Stadil, som ved hjælp af innovativ marketing, vender den økonomiske udvikling. Han skaber bl.a. en retro bølge ved at genintroducere de 70 er inspirerede Hummel dragter. Disse bliver et kæmpe hit verden over. Dette skyldes bl.a. at kendisser fra hele verden begynder at tage Hummel brandet til sig. Velgørenhedsprojekter under navnet Company Karma bliver også introduceret. Projekterne har det formål at støtte op om glæden ved sport og derigennem hjælpe folk i nød. Hummel har i den forbindelse arbejdet sammen med WWF, Røde Kors, Red Barnet m.fl. I dag er Hummel et multinationalt selskab med filialer i mere end 40 lande verden over. Hummel ønsker desuden vores forslag til design af: Flyers Plakater Merchandice 1
Problemformulering Der opfindes ofte nye diller til børn. Nogle tager afsæt i allerede opfundet og afprøvet legetøj, mens andre opstår som en del af nye trends og tendenser. I dag bruger mange børn meget tid foran computeren. Dette bevirker at mange ikke får dyrket nok motion i hverdagen og den fysisk udfoldelse bliver forsømt. Vores virksomhed (fiktiv) er derfor blevet ansat af tøjproducenten Hummel, som ønsker at bringe den aldrende hacky sack/footbag dille tilbage i mere moderne klæder. Målet med kampagnen er at vise børn muligheden for at skabe sammenspil mellem nye digitale medier (f.eks. Facebook) og den fysiske leg med Wacky Zacken. Hovedspørgsmål: Hvordan kan vi, som multimediedesignere, skabe en målrettet kampagne til unge, som øger interessen for Wacky Zacken? Underspørgsmål: Hvordan kan vi integrere medier som Facebook og Youtube således brugerne delagtiggøres i brugen af vores site? Afgrænsning I denne opgave vil vi gøre rede for de metodiske og teoretiske overvejelser, der ligger til grund for vores Wacky Zack website og kampagne. Da sitet er en prototype vil bruger- og usability tests først blive udført i vores næste iterative proces (tidsrummet mellem afleveringsdato og den mundtlige eksaminationsdato). Vi vil dog præsentere de testmetoder vi agter at bruge i opgaven. Vores design til tablet og mobil vil ligeledes blive færdiggjort i dette tidsrum. Enkelte features på websitet heller ikke virke i praksis, men kun være præsenteret visuelt. Dette gælder webshoppen og Facebook integrationen på Fællesskab siden. Vores økonomiske skøn er udelukkende lavet i forhold til projektets udvikling. Der er derfor ikke taget højde for eksempelvis merchandice, da Hummel selv ville stå for dette. 2
Metode Vi har i vores indledning beskrevet, hvordan Hummel vil skabe opmærksomhed omkring Wacky Zacken. Vi vil i dette afsnit beskrive hvilke metoder og teknikker vi har valgt at benytte i forbindelse med projektet. Vi vil tage udgangspunkt i spiralmodellen som udviklingsproces. Herefter vi vil bruge PBS og WBS til vores Gantt-chart, hvor vi tilføjer ressourcer og bruger PERT til at estimere vores tidsplan. Vi vil udarbejde en risiko og interessent analyse, så vi har overblik over vigtige interessenter og risici i projektet. For at kvalitetssikre vores projekt vil vi udarbejde en FURPS+ tjekliste, som vi kan holde op imod vores produkt, for at kunne se om krav er opnåede. Vi vil analysere vores kommunikation, for at få et klart billede af afsendere, modtagere og hvilke medier der skal tages hensyn til. I denne sammenhæng laver vi en kommunikationsmodel og en kommunikationsplan. I vores kreative proces bruger vi teknikker som brainstorm/mindmap, håndskitser og mock-ups, for at danne os et visuelt indtryk af kampagnen. Når vi har afstemt enighed i gruppen, udarbejder vi et design brief som kan præsenteres for kunden. Når projektet er klar til aflevering til kunden, vil vi have tilføjet udkast til overordnet visuel identitet, samt skitser af merchandise og plakater til events. Til at bygge vores website vil vi bruge et framework der hedder Bootstrap. Det sparer os for en masse standard arbejde, og har samtidig fokus på responsive design. Vi vil bruge teknikker i koden til at optimere websitet til søgemaskiner (SEO) og vi vil gøre brug af Google Analytics på siden. Til sidst vil vi gennemføre en række tests af websitet. Her vil vi validere vores HTML kode og udføre en række brugertests, for at se om websitet opfylder krav vedrørende brugervenlighed. Teori Vi vil i dette afsnit beskrive og begrunde hvilken teori vi har brugt under udviklingen af Wacky Zack kampagnen. Systemudvikling Med nutidens hastigt voksende informationsteknologi og firmaernes krav til forandring, er det et vigtigt at have fokus på at lægge den helt rigtige udviklingsstrategi for et kommende projekt. Hvilken metode eller model der anvendes, kan have store konsekvenser både for økonomi og tid. Hvis man ikke er med på beatet, bliver man hurtigt overhalet af de nærmeste konkurrenter. Systemudvikling består af fem overordnede kategorier (Communication, Planning, Modeling, Construction, Deployment). Hver kategori har yderligere underopgaver, som sammen skaber forståelse for problemområdet i kategorien. Tidligere udviklingsprojekter var præget af kaos og udviklingsmodeller blev introduceret i software projekter, for at skabe et fundament som projektteamet kunne arbejde ud fra. 3
Lineær udvikling Vandfaldsmodellen så dagens lys tilbage i 1970, hvor den blev meget populær inden for systemudvikling. Den ligger op til, at man slavisk følger faserne i en lineær proces, og først går videre til næste fase efter veldefineret dokumentation af krav. Fordelen ved at vælge denne metode er, at kravspecifikation og problemområde er veldefineret inden man går i gang med at udvikle på sit projekt. Når der er helt konkrete krav og velkendt problemområde for udviklingsgruppen, er denne metode anvendelig. Ulempen ved denne metode opstår, når man har et udviklingsprojekt med stor usikkerhed, udefinerede krav og risiko for løbende ændringer. Her kan vandfaldsmodellen få fatale konsekvenser, både hvad angår tidshorisont og økonomiske konsekvenser, da man i sidste ende kan risikere at skulle starte forfra. Der er lavet en analyse af (Bra94) der dokumentere at i visse projekter har der været brugt mere ventetid end produktionstid. Et eksempel kunne være et team bestående af programører der ikke kan komme i gang med deres del af projektet, da teamet bag analysen ikke er blevet rettidig færdig med deres del. Iterativ og inkrementel udvikling Iterativ udvikling skal forstås som gentagelser af udviklingsforløb i et projekt. Når man tilføjer inkrementel udvikling i en iterativ proces, vil man løbende udvikle små bider af projektet/produktet og til sidst stå med et færdigt projekt/produkt. Den iterative tankegang bygger på at man hurtigt kommer i gang med at udvikle på det produkt, som skal bygges. For ikke at bruge unødige ressourcer på dokumentation, kan man tage de allerede fastlagte krav og starte med at bygge den første prototype. COMMUNICATION PLANNING MODELING Iterativ og inkrementel udvikling passer rigtig godt i mange af nutidens projekter. Da nutidens krav til forandring stadig sætter højere krav til virksomheder. KRAV CONSTRUCTION Agil udvikling project initiation requirements gathering Vandfaldsmodellen PLANLÆGNING estimating scheduling tracking DESIGN analysis design IMPLEMENTATION code test DEPLOYMENT VEDLIGEHOLDELSE delivery support feedback Agil udvikling er forskellige metodikker fra den iterative proces, men bare i en lettere udgave. De mest almidelige metoder inden for agil udvikling er SCRUM, XP (Extreme programming) og FDD (Feature Driven Development). Disse metoder er kendte for at have en mere tidsbestemt iteration i planlægningen. Fordelen ved at anvende Agil udvikling er, når man har et udefineret problemområde og en stor risiko for ændringer undervejs i sit projekt. Her vil et gensidigt godt samarbejde med kunden, og et kompetent udviklingsteam, kunne levere en prototype der giver mulighed 4
for videreudvikling. Ulempen ved brug af denne udviklingsmetode kan opstå i forbindelse med mindre projekter, hvor den bliver for omfattende. The Agile Manifesto Individuals and interactions over processes and tools Working software over comprehensive documentation Customer collaboration over contract negotiation Responding to change over following a plan PLANLÆGNING DESIGN Vores valg: Spiralmodellen Vi har valgt at gøre brug af spiralmodellen i dette projekt, fordi modellen opfylder vores krav til en iterativ og inkrementel proces. Spiralmodellen blev opfundet af Barry Boehm i 1988. Spiralmodellen har fokus på fem overordnede faser (Communication, Planning, Modeling, Construction og Deployment). Spiralen starter fra centrum og løber igennem de fem faser, hvorefter næste iteration gennemløbes for at tilføje ny værdi til projektet. Vi finder denne metode attraktiv, da vi har et godt overblik over hvad projektet/kampagnen skal indeholde. Ydermere har projektgruppen erfaring med udvikling af websites, KOMMUNIKATION IMPLEMENTATION LAUNCH Spiral modellen 5
UML (Unified Modeling Language) UML er et internationalt standardiseret modellerings sprog, som bruges til at give et visuelt overblik over strukturen i et system. Det blev udviklet af Grady Booch, Ivar Jacobsen og James Rumbaugh, tilbage i starten af 1990 erne. I 1997 blev det accepteret som en standard af OMG (Object Management Group) i version 1.0. UML er blevet videreudviklet siden hen, og i 2005 kom UML2.0 som er den version der bruges i dag. Ved at inddrage UML i vores projekt, gør vi brug af en international standard der tager hensyn til at kommende systemudviklere kan aflæse og forstå vores projekt. Det vil give kvalitet i projektet, at anvende kendte standarder. Philip Kotlers kommunikationsmodel udvider Laswells, som vi før beskrev. Indkodning og afkodning er tilføjet. Førstnævnte beskriver budskabets form, mens afkodningen viser hvorledes budskabet forstås af modtageren. Elementet støj repræsenterer udenforstående faktorer, som kan påvirke projektet. Det kan f.eks. være andre medier, som går ind interfererer med vores kommunikation til målgruppen. Afsenderen skal have et klart billede af, hvilken målgruppe, han/hun ønsker at ramme. Kommunikation skal være tilpasset målgruppen, så den ønskede respons opnåes. Det kræver bl.a. at afsenderens budskab bringes via et medie, som målgruppen kan relatere til. Afsender Indkodning Budskab Afkodning Modtager Kommunikation MEDIER Harold D. Laswell lavede en formel under 2 verdenskrig, som efterfølgende bliver beskrevet som kanylemodellen. Kanylemodellen er bygget op omkring 5 faser Støj WHO SAY WHAT IN WHICH CHANNEL TO WHOM WITH WHAT EFFECT FEEDBACK Phillip Kotlers kommunikationsmodel FEEDBACK AFSENDER BUDSKAB MEDIE MODTAGER EFFEKT Laswells kommunikationsmodel 6
Projektet Vi vil i dette afsnit beskrive hvordan vi har planlagt vores projektperiode. Her har vi lavet både risiko- og interessent analyse (se bilag 07 og 08), for at afdække potentielle risici og hvilke interessenter der skal være fokus på. Ressourcer Når et projekt startes, er det vigtigt at sammensætte et team, for at afdække hvilke ressourcer projektet kan drage nytte af. Da dette er et eksamensprojekt er vi bundet af, at sammensætte et team bestående af studerende fra multimediedesigner uddannelsen. Vi har valgt en gruppe bestående af fire studerende, der udgør projektteamet for Hummel s Wacky Zack kampagne. Gantt-chart (projektplan) Vi har startet med at lave en PBS (Product Breakdown Structure), og efterfølgende lavet en WBS (Work Breakdown Structure) for at få klarlagt hvad der skal til, for at opfylde projektet s mål. WBS og vores estimerede skøn er lagt ind i Microsoft-project for derved kunne fremvise et Gantt-chart over projektet (se bilag 02). Grundet tekniske problemer med Microsoft Project har vi ikke været i stand til at fremvise den kritiske vej på det første Gantt-chart. Den fremgår dog af det endelige (se bilag 03 og 04), for at vise at vi bevidste om visualiseringen af denne. Estimering Estimering spiller en vigtig rolle, når man ønsker at få et billede af projektets tidshorisont. Vi kan ikke komme med en præcis tidshorisont, men ved at anvende nogle teknikker kan vi komme med et mere præcist skøn på projektets tidshorisont. Ved hjælp af PERT (Project Evaluation and Review Technique) har vi givet vores skøn på hvad en given opgave tager af tid. Her er A det mest optimistiske skøn, B er middel og C det mest pessimistiske. Vi har udregnet vores estimat for vores projektperiode, for at finde usikkerheden om vores tidsplan holder. Formlen for udregningen er (se bilag 01 med udregning): A + 3B + C / 5 = M (Middel estimat) C A / 5 = S (Usikkerhed) Vi har desuden lavet et skøn på økonomien i projektforløbet (se bilag 05). Implementeringsplan Vi har udarbejdet en visuel præsentation af vores implementeringsplan (se bilag 06) over et seks måneders kampagneforløb. Da dette projekt ikke er hele den endelige Wacky Zack kampagne, har vi illustreret hvilke andre medier, der integreres for at få så meget fokus på kampagnen som muligt. Kampagnen vil løbende blive udviklet, hvor website og bannerannoncer er de første reklamefremstød. Herefter udarbejdes og opsættes plakater i bybilledet for de kommende events og den store finale til sidst. 7
Kommunikation Målgruppe Vores primære målgruppe for Wacky Zack kampagnen er større børn i alderen 12-16 år. Den sekundære målgruppe er deres forældre, som må medtænkes, når man ønsker at sælge et produkt til børn. I vores analyse af målgruppen har vi dels benyttet os af tal fra Dansk Statisik samt foretaget en kvantitativ spørgeskema undersøgelse af målgruppen. Tallene fra Dansk Statistik går ikke under 16 år og dækker dermed ikke vores målgruppe fuldstændigt. Vi har alligevel valgt at bruge tallene, da vi mener de kan pejle os i den rigtige retning hvad angår unges internetvaner. Statistik Ifølge tal fra rapporten Befolkningens brug af Internet - 2010 (lavet af Dansk Statistik) fremgår det af afsnit 3.7 at omtrent en tredjedel af danskerne mellem 16-74 år uploader selvskabt indhold (f.eks. video) til websites for at dele det med andre. Dette rangerer Danmark på en førsteplads i EU. I afsnit 3.8 vedrørende Online Sociale Netværkstjenester viser at 92% af unge i alderen 16-19 år er aktive på mindst ét socialt medie. Facebook er den foretrukne tjeneste. Vi ønsker at brugerne af vores site skal optage videoer af dem selv, hvor de er aktive med Wacky Zacken. Vi tænker at videoerne primært vil blive filmet med mobiltelefoner. Tal fra rapporten viser også at de unge (i alderen 16-19 år) er de mest aktive med mobilen både på nettet og med det indbyggede kamera. Desuden er denne aldersgruppe den hyppigste bruger af det mobile net. De forskellige Wacky Zack produkter vil kunne købes gennem en shop på vores hjemmeside. Danmark er på en andenplads i EU, når det kommer til nethandel (afsnit 3.12). Da vores primære målgruppe er børn i alderen 12-16 år, vil det at handle via nettet dog kun være aktuelt for de ældste, samt vores sekundære målgruppe, forældrene. Varerne skal derfor også finde vej til butikkerne, hvor de kan erhverves i traditionel forstand. Segmentering Med segmentering menes en opdeling af markedet i ensartede grupper (segmenter). Man ønsker at finde forbrugere med ensartede kendetegn (f.eks. alder, køn, værdier, holdninger, forbrug, livsstil og adfærd). En virksomhed kan rette sin markedsføring mod et eller flere segmenter og derigennem opnå flere fordele. Målgruppen kan påvirkes, via kommunikation da virksomheden kan tale målgruppens sprog. Derudover kan en evt. kampagne eller et produkt nemmere skræddersyes til målgruppens behov og krav. En grundig segmentering giver altså virksomheden mulighed for at udnytte sine ressourcer bedre, da denne i højere grad kan målrette kommunikation samt produkter til de forbrugere, der er de potentielle kunder. Segmenteringsproces 1. Markedsbeskrivelse Hummel ønsker at relancere hacky sacken under navnet Wacky Zack i 2014. Den oprindelige dille så dagens lys i starten af 70 erne. Hummel 8
har før haft stor succes med deres retro produkter og ved at give Wacky Zacken en street og sporty kant regner virksomheden med at kunne tiltrække større børn i alderen 12-16 år. Wacky Zacken skal i første omgang kun lanceres i Danmark. Der er mange andre diller på markedet ( Fang Bolden er f.eks. ekstremt populær lige nu), så konkurrencen er hård. Ved at integrere medier, som er målgruppen bekendt, regner Hummel med at kunne fange dennes opmærksomhed. Med en kampagne hvor sundhed og trivsel er i fokus forventer Hummel yderligere at kunne tiltrække børnenes forældre. 2. Segementeringsvariabler I det følgende gør vi brug af en række segmenteringsvariabler. Disse bruges til at afdække de kendetegn, der beskriver den enkelte forbruger (f.eks. alder, indkomst, bopæl, og livsstil). - De sociodemografiske variable (de mere eller mindre synlige kendetegn, som forbrugere har) Variabel Alder Bopæl Livsfase Uddannelse Arbejde Indkomst 12-16 år Hjemmeboende Pubertet Folkeskole Den ældre del af målgruppen kan have fritidsjob Afhængigt af forældres indkomst og evt. fritidsjob - Adfærdsorienterede variable (forhold relateret til vores forbrug, holdning til brands og lyst og evne til forandring) Variabel Variabel Medie- og indkøbsvaner Loyalitet overfor brands Forbrugshyppighed Forandringsvillighed Er meget mediebevidste og er flittige brugere af diverse sociale net-communities. Er vokset op med disse nye medier og mestrer derfor brugen af disse teknologier. Indkøbsvanerne er præget af spontanitet og påvirkes af den sociale omgangskreds En del af målgruppen vil være i besiddelse af betalingskort (aldersgrænsen er 13 år) og kan derfor selv benytte webshoppen. De børn som ikke har dette til rådighed må købe varen i butikker eller få deres forældres hjælp, hvis varer skal erhverves online Er mode- og trendbevidste. Er loyale overfor mærker, men er samtidig nemt påvirkelige. Derfor kan loyaliteten være kortvarig Forbrugsorienteret Er interesseret i og modtagelige overfor nye trends og tendenser. Segmenteringsmatrix Med udgangspunkt i ovenstående variabler har vi udarbejdet en segmenteringsmatrix. Vi har taget udgangspunkt i de mest variabler, som vi mener er mest relevante for vores produkt. I forhold til vores kampagne er det vigtigt med en målgruppe, som er teknologi-orienteret, åben overfor nye tendenser. og forbrugsoriente- 9
ret Da vores site lægger op til interaktion med brugerne via sociale medier, samt køb via webshop vil dette segment have vores primære fokus. 3. SMUK model (se bilag 10) Vi har benyttet SMUK-modellen til afklare hvilke segment(er), der er mest egnet som målgruppe for kampagnen. VIRKSOMHED VIRKSOMHED VIRKSOMHED VIRKSOMHED (S) Segmentents størrelse og vækst Ifølge Danmarks Statistik udgør de 10-19 årige pr. 2013, andet kvartal 691.292. Vores målgruppe (de 12-16 årige) må altså udgøre en stor del af denne pulje. 1 2 3 2 1 (M) Mulighed for kontakt med segmentet Ved at benytte sociale medier kan vi nemt og gratis få direkte kontakt med målgruppen. UDIFFERENTIERET Målgruppestrategi DIFFERENTIERET KONCENTRERET ONE-TO-ONE (U) Udgifter ved bearbejdning af segmentet Da kommunikationen med målgruppen primært vil foregå via de sociale medier, vil omkostninger forbundet hermed være relativt få. Reklame i bybilledet i forbindelse med launch (plakater, flyers osv) vil selvfølgelig koste. (K) Konkurrencen om segmentet Konkurrencen om segmentet må antages at være hård. Bl.a. fordi der er mange andre diller på markedet og fordi målgruppen er letpåvirkelig hvad angår trends og tendenser. Målgruppestrategi I dette afsnit vil vi gøre rede de målgruppestrategier som indgår i følgende illustration, samt hvilken vi mener passer bedst til vores kampagne. Målgruppestrategien bestemmer hvor mange segmenter der skal være en del af virksomhedens målgruppe. Den udifferentierede markedsføring kendetegner sig ved at henvende sig på samme måde til alle segmenter uden skelen til forskelligheder. Virksomheden regner med at samtlige brugere af produktet vil have nogenlunde det samme forhold til det. Den differentierede markedsføring tager netop højde for forskelligheder er segmenterne imellem, hvorfor virksomheden udarbejder forskellige marketingstrategier alt efter kundens behov. Vi mener den koncentrerede markedsføring passer vores kampagne bedst. Her er kommunikationen målrettet udvalgte segmenter med særlige behov og krav, som er nemme at identificere på markedet. Vores målgruppe er meget afgrænset og markedsføringen i vores kampagne foregår primært via kanaler, som de unge benytter sig af. 10
Den sidste strategi i vores illustration er One-to-one markedsføring, som er den mest målrettede. Her tilpasses produktet til den enkelte forbruger, hvilket bevirker at man ikke segmenterer. Hver forbruger anskues som unik og repræsenterer derfor sit eget segment. Spørgeskema Vi har foretaget en spørgeskema undersøgelse i forbindelse med projektet (se bilag 11) for at undersøge karakteristika for vores målgruppe. Vi har benyttet sitet www.enalyzer.dk til dette formål. En undersøgelse af denne slags er kvantitativ, hvilket betyder at den information man får tilbage gennem undersøgelsen er målbar. Spørgsmålene i skemaet omhandler personlig data, økonomi, fritid, internet- og indkøbsvaner og svarene er blevet brugt til at forstå og beskrive brugerne. Resultaterne har været med til at give os et bedre billede af de 12-16 årige. Spørgeskema - analyse Vi har, som tidligere nævnt, gennemført en spørgeskema undersøgelse for vores målgruppe. Undersøgelsen blev foretaget via sitet www. enalyzer.dk og fik i alt 20 besvarelser. Vores målgruppes størrelse taget i betragtning, er dette er naturligvis ikke nok besvarelser til at kunne give fuldstændigt billede af dennes vaner (der er f.eks. ingen besvarelser fra 12 og 13 årige). I dette afsnit vil vi fremhæve enkelte spørgsmål fra undersøgelsen. Vi spørger de unge hvorvidt de har et betalingskort eller ej. Til vores overraskelse svarer hele 90% at de er i besiddelse af sådan et. Dette skyldes nok at det primært er de 16 årige der har besvaret undersøgelsen. Samtidig svarer 80% ja til spørgsmålet om, hvorvidt de køber varer online. Disse besvarelser passer godt til vores koncept med integration af en webshop på vores site. Derudover har 95% af de adspurgte mere end 101 kr til forbrug om måneden. De unges mediebrug er meget lig tallene fra rapporten Befolkningens brug af internet - 2010 lavet af Danmarks Statistik. 100% af respondenterne svarer ja til at være brugere af sociale medier, såsom Facebook, Youtube og Instagram. 85% af de adspurgte uploader videoer og billeder til nettet. Alle vores respondenter dyrker sport én eller flere gange om ugen. Det er dog kun 40%, som svarer ja til at dele oplevelser fra sport eller fritidsaktiviteter på nettet via sociale medier. Det kunne tyde på at samspillet mellem fritidsaktiviteter og de sociale medier skal være nemmere for de unge at gå til. Vi ønsker derfor at skabe et community på vores site, som ved hjælp af høj brugervenlighed bygger bro mellem den digitale og fysiske verden. Da dette er et skoleprojekt med begrænsede ressourcer, har vi alligevel valgt at bruge undersøgelsen i vores målgruppeanalyse. Havde dette været et rigtigt projekt ville Hummel eller vores egen virksomhed højst sandsynlig have hyret et eksternt firma til at varetage undersøgelsen. 11
Kommunikationsmodel For at synliggøre vores kampagnes kommunikation til henholdsvis primær og sekundær målgruppe, har vi benyttet en hybrid mellem Harold D. Laswells og Philip Kotlers kommunikationsmodeller. Modellen nedenfor illustrerer hvorledes kommunikation og samspil med website og sociale medier går to veje. Kommunikationen mellem de forskellige medier og målgrupperne kan, som illustreret, blive påvirket af støj. Støjen er faktorer uden for projektet, som påvirker afsenderens budskab til modtageren. Det er derfor afgørende at vores kommunikation er præcis og strømlinet, så der ikke opstår støj internt i kampagnen. Vores forskellige profiler på sociale medier bærer, som eksempel, samme logo og tekst som vores primære site. Dette sikrer at brugerne ikke er i tvivl om at at de er havnet på den officielle Wacky Zack Facebook side.?! STØJ OS SEKUNDÆR MODTAGER WEBSITE AFSENDER PRODUKT PRIMÆR MODTAGER ØNSKET EFFEKT SOCIALE MEDIER FEEDBACK RESPONS Kommunikationsmodel 12
Markedsføring PRODUKT PRIS Wacky Zack bliver lavet i samarbejde med Hummel, og vil blive markedsført til unge i alderen 12-16 år som er forburgerne af produktet og forældrene som er køberne i de fleste tilfælde. Markedsføringen vil ske via arrangementer og events som holdes rundt om i landet i løbet af sommeren og plakater som sættes op i bybilledet. Der vil til de forskellige events være mulighed for at prøve og spille med en Wacky Zack hvor der er træner på som lære en tricks og giver tips, man vil også kunne købe diverse merchandise til arrangementerne. Plakaterne som sættes op i bybilledet vil have datoer og sted for de forskellige events, så folk ved hvor de skal gå hen for at opleve Wacky Zacken og blive klogere. Plakaterne er lavet i en trashy-street stil, som giver blikfang i byen og appelere til de unge. Da målgruppen ikke selv tjener så mange penge, vil der også være behov for at appelere til forældrene som skal købe produktet, dette vil også ske igennem de forskellige arrangementer der afholdes, forældrene kan være med til at deltage og selv prøve Wacky Zacken, dette vil også skabe et bånd mellem forældrene og deres barns hobbyer, og derved gøre dem mere åbne overfor et køb af Wacky Zack. De 4 p er for Wacky Zacken vil se således ud: PROMOTION De 4 P er Produkt: MÅLGRUPPE DISTRIBUTION (PLACE) Funktion/kvalitet: Wacky Zacken er et fysisk produkt, som har en funktions- og smagsmæssig kvalitet hos forbrugeren. Wacky Zacken skal kunne holde til at der spilles med den uden at den går i stykker, den skal desuden være designmæssigt flot at se på og appelere til unge. Sortiment: Der vil være 3 typer af Wacky Zacks. der vil være til begyndere-, øvede- og prospillere, der vil derudover også være tøj i form af t-shirts og sko og merchandise som nøgleringe og plakater. Emballage: Der vil til Wacky Zacken ikke være nogen emballage som sådan, man vil dog ved køb af flere ting få en pose med. 13
Mærke: Wacky Zack vil bære Hummels mærke, og vil derfor er være mere attraktivt at købe for nogle folk, fordi det er lavet i samarbejde med et kendt mærke. Service: Der vil ikke være nogen service der med følger Wacky Zacken eller dets merchandise. Promotion: Reklame: Wacky Zacken vil blive solgt via reklamer i diverse ungdoms blade,tv spots og plakater i bybilledet. Grunden til at der reklameres de tre steder er at de unge som er målgruppen læser mange ungdomds blade og ser meget TV, og plakaterne i bybilledet vil de se når de er på vej til og fra skole. Personligt salg: Der vil til de forskellige events være mulighed for at købe Wacky Zack ting i pop-up shops. Markedsføring via sociale medier: Wacky Zack vil blive markedsført med konkurrencer via Instagram og en Facebook side hvor man kan se events, læse opdateringer og se nye ting omkring Wacky Zack. Pris: Prisen på Wacky Zack bliver sat nogenlunde lavt, en Wacky Zack koster mellem 59-69kr alt efter om den skal være til begyndere eller pro. T-shirts og sko vil koste det samme som Hummels egne vare. Plakater og nøgleringe vil også ligge på et lavt pris niveau, hvor en plakat koster 29kr og en nøglering 49kr. Efter noget tid med Wacky Zack på markedet vil man skulle kigge på prisfølsomheden alt efter hvordan varen har klaret sig, kan det være at man skal sætte prisen op eller ned. Distribution(place): Wacky Zacken og merchandise vil hovedsageligt kun blive solgt på webshoppen, men der vil til de forskellige events være mulighed for at købe Wacky Zack ting i pop-up shops. Boston model Hvis vi tager et kig på Boston modellen, så vil Wacky Zack ligge som et spørgsmåltegn, det er en ny idé fra Hummel, med et stort vækst potentiale og en lille markedsandel. Hvis markedsandelen vokser og folk køber Wacky Zacken, så skal de investerer flere penge i projektet, så det opnår stor success og bliver til en stjerne i Boston modellen, og derved bliver en success der kan blive på toppen i langt tid. Markedsvækst Boston model Markedsandele 14
Kreativitet Vi vil i dette afsnit gøre rede for den kreative proces, og ideudvikling i vores projekt. Som inspiration til idégenerering har vi udarbejdet moodboards (se bilag 12). Idégenerering Vi har valgt at bruge teknikker som Brainstorm og Mindmap til at skabe idéer til vores projekt. Logo Vi har lavet et logo (Se bilag 13), som er bygget op af tre elementer Wacky, Zack samt det gamle Hummel logo (humlebien). Elementerne repræsenterer forskellige stilarter, som tilsammen udgør konceptet bag kampagnen. WACKY er lavet med den robuste skrifttype Roboto Slab. Vi har valgt denne font for at signalere styrke fra sportens verden. Samtidig leder denne skrifttype tankerne hen på de emblemer, som bruges i forbindelse med sport på de Amerikanske colleges. ZACK er udformet som et graffiti-tag, for at visualisere det personlige præg, som vi ønsker at give brugerne i brugen af produktet. Graffiti stilen forbindes også i høj grad med 80 erne, hvor den originale hacky sack havde sin storhedstid. Derudover har Hummel før haft stor succes, med deres retro produkter. Ovenstående elementer er parret med det gamle humlebi logo fra Hummel. Ved at sammensmelte disse forskellige stilarter, styrker vi den visuelle stil for kampagnen. Mock-up (Website) Vi har udarbejdet mock-ups af websitet i den indledende fase, for at danne os et overblik over design, struktur og stilart (se bilag 14). Vores mock-up er blevet brugt som skabelon til vores endelige website. Dog har den løbende udvikling af projektet tilføjet nye ideer og designvalg. Mindmap 15
Designbrief Med udgangspunkt i de forrige analyser, har vi udarbjedet et design brief, som beskriver Wacky Zack kampagnen og kravene til vores website. Wacky Zack - sommerens dille 2014 Hummel ønsker at sommerens dille 2014 skal være en relancering af Hacky Sacken; nu med navnet Wacky Zack. Firmaets har siden årtusindeskiftet haft stor succes med deres retro produkter (f.eks. deres 70 er inspirerede træningsdragter) og produket skal ses som en forlængelse af netop dette image. Wacky Zacken er en modernisering af Hacky Sacken, som netop havde sin storhedstid i 70 erne og 80 erne. Wacky Zacken skal være sjov og nem at lege med, og invitere til fysisk aktivitet for børn i alderen 12-16 år. Vores opgave Vi skal, som multimediedesignere, skabe et site, der signalerer netop disse værdier. Hjemmesiden skal appellere til vores målgruppe hvad angår design og indhold være nem at navigere rundt på. Sitet vil derfor integrere sociale medier og derved fungere som et fællesskab/ community for brugerne, hvor de kan inspirere hinanden og brande sig selv gennem upload af billeder og video. Brugerne skal føle sig som medskabere af sitet. På den måde bliver vores website en katalysator, som forhåbentlig giver de unge lyst til at udfolde sig fysisk i hverdagen. Øvrige produkter Konkurrencer, events og reklame i bylivet i forbindelse med launch skal skabe opmærksomhed omkring Wacky Zack. Wacky Zacken vil blive lavet i forskellige designs, materialer og hårdhed alt efter hvor svær den skal være at spille med. Derudover vil der også blive lavet andet merchandise i form af sko og t-shirts med Wacky Zack/Hummel logo på. Skoene vil være specielt lavet med formål på at spille med Wacky Zacken. Produkt og merchandise vil blive lanceret på vores hjemmeside, hvor det vil være muligt at købe det gennem en webshop. De vil også være tilgængelige i butikker. Design overvejelser Website og rapport skal have den samme visuelle stil. Det skal være tydeligt at de er en del af den samme kampagne. Den visuelle stil skal være en blanding af noget unikt for projektet og filosofien bag Hummels nuværende image og brand. Det unikke skal være et trashy og street look, som henvender sig til de unge. Vores valg af farver vil være inspireret af dem Hummel allerede bruger. Designet på hjemmesiden vil være i stil med Hummels eget: råt og simpelt. På den måde vil brugeren kunne se en tydelig visuel sammenhæng til Hummels øvrige sider/produkter. 16
Visuel identitet Vi har bestræbt os på at skabe en visuel identitet for Wacky Zack kampagnen, som på den ene side er i tråd med Hummels nuværende stil, og på den anden implementerer et street look, som appellerer til unge. Vi vil her beskrive hvilke stilmæssige valg vi har truffet i forbindelse med vores kampagne (se bilag 13). Vores forslag til merchandise kan ses i bilag 18. Farver Vi har valgt fem farver som grundelementer i projektet. De er valgt med inspiration fra Hummels nuværende produkter. Vi har haft fokus på at finde nogle dæmpede farver med god indbyrdes kontrast. Typografi Vi har valgt at benytte os af Googles webfonts på vores site. Brødtekst er sans-serif fonten Open Sans. Overskrifter er serif-fonten Roboto Slab (som også er brugt i logoet). I nyhedsboksene nederst på siden har vi benyttet fonten Lato og på plakaterne Impact. Sitet er ikke proppet med tekst, da brugerne er børn og unge. Tekst er som oftest punktopstillet eller kortfattet. Der er derimod masser af visuelle indtryk i form af billeder, hvilket beskrives i næste afsnit. Billeder og video For at gøre websitet ekstra indbydende har vi valgt at gøre brug af billeder og video. Billederne er på nuværende tidspunkt fundet på nettet og redigeret i Photoshop. Hvis projektet skulle realiseres i virkeligheden ville vi hyre en fotograf, for at bruge originale billeder og få et endnu mere professionelt look. Det ville også styrke Hummels image og brand. Grafik Vi har benyttet os af forskellige symboler/infographics for at gøre vores site mindre tekst-tungt og dermed tydeliggøre vores kommunikation til vores brugere. Vores site indeholder på den måde den information, der er relevant for brugeren, men i en webvenlig og kompakt udgave De forskellige symboler er et gennemgående tema og er i samme visuelle stil, for at give et strømlinet udtryk. Branding & Image Branding og image er højt prioteret hos Hummel. Vi har derfor forsøgt at udarbejde et website og kampagne, der holder tråd med stilen hos Hummel. Hummel har et rigtig godt image ud ad til, og i selve virksomheden. Hummel går meget op i at ting gøres på en positiv måde og at ingen folk føler sig stødt af det de laver. Hummel sponsorerer flere fodboldog håndboldhold verden rundt; små som store. Hummels brand og image er bygget op omkring god energi og sjæl. De benytter sig af god storytelling til at sælge deres produkter verden over. Wacky Zacken vil, lige som Hummel, også blive lanceret som et produkt med god energi, sjæl og karma, Wacky Zacken skal forbindes med det sociale aktivitet og sundhed. Alle skal føle at de kan være en del af fællesskabet. 17
Website Twitter Boostrap Vi har valgt at bygge vores website op via Boostrap; et CSS framework kreeret af Twitter som hjælp til pænere og mere overskueligt design. Twitter Boostrap er et frit tilgængeligt projekt som giver de nødvendige midler, til at lave et flot website. Arbejdsproces For at få styr på websitets udseende lavede vi et råt mockup, med navigation og inddeling af forskellige elementer på sitet (Slideshow, videoer, nyheder etc.). På denne måde havde vi et godt udgangspunkt til det færdige websites look (se bilag 14). Sitet er delt op i to dele: Hovedsite og butik. Alle undersider er bygget op omkring et gridsystem som yder til vores opbygning og komposition. Spalterne kan derfor deles helt fra 1-12 uden at påvirke designet (se bilag 15) Navigation Vi har valgt at placere vores elementer efter normerne indenfor design af websites. Her kan man se at vores website identifikation ligger i toppen af venstre hjørne samt hovedmenu linjen i toppen. I vores webshop har vi lavet en ekstra menu med kategorier over produkterne der føres. Dette har vi valgt at gøre, da dette også er en norm for websitets opsætning og giver brugeren en nemmere forståelse for hvor de befinder sig på websitet. Desuden har de hele tiden mulighed for at se de forskellige produktkategorier. For at give brugeren en nemmere oversigt over sektionerne på websitet, har vi valgt at bruge en anden baggrundsfarve i navigationen (grøn i hovedmenu og blå i undermenu) på undersiden de befinder sig på. På denne måde bliver det mere overskueligt for brugeren hvilken underside de præcist befinder sig på. Vi har derudover udarbejdet et sitemap, som illustrerer websitets struktur (se bilag 17). Billede-feed (Instagram) Vi har på sitet valgt at bruge et billede feed via det sociale medie Instagram. Her kan brugeren uploade billeder via mobil app en til Instagram, hvorefter billedet kommer direkte ind på websitet på undersiden fællesskab. Der bruges et feed fra jquery for at hente billederne fra instagram. I vores script tag skal vi derfor definere hvilke tags som brugeren skal bruge, for at billederne kommer ind på websitet. Derudover skal vi også detaljere hvor mange billeder vi vil vise på websitet og vores Client-ID (udleveret af Instagram s app afdeling). I vores script skriver vi da (se bilag 15 og 16) wacky zack ved funktionen hash 20 ved funktionen show 09f29769d8614746ae537bb2bb6dd8d5 ved funktionen Client ID Vi får derved en funktion på websitet der henter vores klients identifikation/bruger fra Instagram og definerer at vi vil vise de 20 nyeste billeder fra tjenesten, som indeholder hashtagget #wackyzack. I vores CSS fil har vi også mulighed for at afgøre hvor store thumbnails-billederne skal være. I vores tilfælde har vi valgt at lave dem 199 x 199 pixels (se bilag 16). 18
Derudover kan vi også bestemme hvordan vores ramme og kommentarfelt skal se ud, når man klikker på de forskellige billeder. Vi har valgt at lave det hvidt og gråt så det passer til vores design på websitet (se bilag 16). Da scriptet er lidt tungt med mange funktioner der skal hentes hos 3. part, har vi lagt scriptet i bunden af vores kode. Derved indlæser sitet hurtigere og skaber mindre ventetid for brugeren. Javascript form På vores website bruger vi flere formularer som er valideret med javascript. Her har vi bla. lavet en upload formular på vores side fællesskab hvor brugerne skal have mulighed for at uploade et video link til vores website. For at sikre os at brugeren ikke uploader noget forkert, laver vi derfor java validering på de forskellige felter i formularen. Javascriptet checker at felterne bliver udfyldt korrekt ifølge vores funktion. Via et ER-Diagram fandt vi ud af hvordan vores funktion skulle fungere. NAVN E-MAIL URL KOMMENTAR FALSE FALSE FALSE FALSE Opdeling af elementer (videoer og webshop) På vores undersider videoer og webshop har vi valgt at dele de forskellige elementer op med en outline på de forskellige indholdsbokse. Vi har valgt at bruge denne metode, da vi har en masse funktionsknapper til hvert element. Brugeren bliver derfor ikke forvirret over knapperne, men kan ifølge reglen om lukkethed se at funktionsknapperne tilhører det pågældende element. Til vores elementer i indholdsboksene har vi brugt et pop up feed, for at få brugeren fokuseret på den video/billede de har klikket på. På denne måde reducerer vi støjen fra websitet ved at lave en sort baggrund med en gennemsigtigheds effekt så websitet bliver dæmpet i baggrunden. Pop up boksen er sat op med et simpelt åben/lukke system i javascript. Funktionen er at vi kalder på vores boks samt vores baggrund via ID, som vi har defineret størrelse og udseende på i CSS (se bilag 16: CSS: Boks og baggrund). Derefter har vi en funktion der ved klik funktion hvilket som helst sted på sitet, lukker/blocker ID boksene igen. (se bilag: Javascript: Åben/luk funktion) Til sidst har vi lagt vores div bokse til elementerne i bunden af sitet, så de ikke forstyrrer resten af HTML-dokumentet (se bilag 16: HTML: Pop up div). SUBMIT Tilstandsdiagram 19
Web optimering Google analytics Som et krav har vi inkluderet google analytics på websitet, for at kunne hive data ud til senere brug. Dette er en fordel, for at se hvordan brugerne opfører sig på sitet. Her kan man se antal besøgende, både i alt på sitet, men også per måned. Dette giver et godt indblik i hvornår man skal brande og reklamere, hvis besøgsantal falder. Derudover kan man se data på hvor folk kommer fra. Dette er også en fordel, da man ville kunne se hvor produktet er en succes. De steder hvor websitet ikke er så udbredt, ville man kunne reklamere på et højere plan for at skabe større succes for produktet. Search Engine Optimization (SEO): For at optimere mest muligt til søgemaskiner har vi brugt forskellige elementer. På vores billeder har vi inkluderet alt tags med relevante ord, for at få sitet så højt rangeret i søgemaskinerne som muligt. I vores overskrifter har vi lavet relevante tekster, der refererer bedst til de forskellige undersider. Derudover beskriver vi ord som wacky zack og footbag så meget som muligt på sitet, da dette er vores primære søgeord. Vi har inkluderet meta tags, da flere søgemaskiner stadig indekserer deres website ud fra disse kriterier. Her har vi valgt essentielle ord så som footbag, wacky zack, webshop, tricks. Yahoo er bla. en af de større søgemaskiner, som stadig bliver brugt, der indekserer via meta tags. 20
Usability For at sikre at vores site har en høj grad af brugervenlighed har vi benyttet bogen Usability - Testmetoder til mere brugervenlige websites på internettet. Vores undersøgelsesdesign består af tre typer brugertests herfra: ekspertvurdering (Heuristic inspection), kortsortering og gangstertest. Vi har altså valgt at sammensætte vores undersøgelse af flere testmetoder, for at opnå det bedst mulige vurderingsgrundlag. Dette kaldes metodetrianguleing og kan illustreres på følgende måde: PROBLEM/ FORHINDRING Disse tests vil give os feedback og viden, om brugerens forståelse af websitets informationsarkitektur. Informationsarkitektur udgør: Den samlede struktur: Den sammenhæng, der udgør websitets struktur (f.eks. hierakier, niveauer og grupperinger) Værktøjer til at bevæge sig rundt i strukturen: Navigation/menuer og sitemap Navngivning og sprog: Det, der står på knapper, overskrifter og andre hjælpemidler til indholdet Søgning: Opbygning og funktion af websitets søgemaskine Ekspertvurdering En ekspertvurdering også kaldet Heuristisk Evaluering har til formål, at forudse fejl og mangler, som kan skabe problemer for brugerne af et website. Testen bygges op omkring to typer Illustration af ekspertvurdering af eksperter. Den ene ekspert er os selv, og den anden ekspert vil komme fra målgruppen, som har indgående kendskab til de emner sitet beskæftiger sig med. Sidstnævnte skal have kendskab til: EKSPERTVURDERING KORTSORTERING GANGSTER-TEST Metodetriangulering - den information og de servicer, som websitet vil tilbyde - den kontekst, som websitet vil blive benyttet i - de brugere, som vil benytte websitet 21
En ekspertvurdering er billigere og mindre ressourcekrævende, end en egentlig brugertest. Testen egner sig derfor godt til, at give et overblik over mulige problemer i websitets kommunikation og design. Det er vigtigt, at en testen bliver helhedsorienteret og systematisk. Vi har derfor delt den op i to dele, som vedrører informationsarkitektur og interaktionsdesign. Interaktionsdesignet udgør de tekniske byggeklodser, som brugergrænsefladen er bygget op af: funktionalitet, farver, knapper, menuer og grafiske elementer der giver brugeren mulighed for at foretage valg. Udførelsen af testen er delt op i tre faser. Første fase bruges til briefing/planlægning af ekspertpanel, med information om hvorledes testen skal foretages. I anden fase gennemgåes testen individuelt og det anbefales at siden der testes gennemgåes to gange. I den sidste tredje fase mødes ekspertpanelet og drøfter resultaterne fra deres individuelle tests. Testen varer ca. 1-2 timer. Testen foregår på den måde at man tegner websitets struktur og derefter laver man nogle kort, hvorpå man skriver alle sidernes titler. Når man har gjort det, skal testpersonen ved hjælp af kortene prøve at danne menuen, som han/hun mener den vil give mening. Gangstertest For at teste navigationen på vores website vil vi udføre en Gangster Test med repræsentanter fra vores målgruppe. I Gangster Testen sendes deltageren ind på en underside på den hjemmeside man ønsker at teste. Illustration af gangstertest Siden er naturligvis ukendt for deltageren. Fra denne side skal han/hun udføre følgende opgaver: 1. Websitets identifikation: Hvilket website befinder du dig på? (Se efter logo eller anden identifikation af afsenderen.) Kortsortering Vi har også planlagt at lave en kortsorteringstest, som bruges til at teste en hjemmesides struktur (betydning af og sammenhæng mellem menuer, knapper og sidetitler). En fordel ved kortsorteringstesten er, at den ikke kræver så mange ressourcer og at den er hurtig og enkel at lave. Illustration af kortsortering 2. Sektioner: Hvilke overordnede sektioner findes på websitet? (Se efter designets måde at anvise, hvad der er hvad på websitet.) 3. Underside: Hvilken underside befinder du dig på? (Se efter sidens titel eller beskrivelse.) 4. Lokal navigation: Hvilke muligheder har du på dette niveau/ hvilke undersider findes på samme niveau? (Se efter menuer, genveje, knapper og funktioner.) 5. Placerings-indikatorer: Hvor er du i den samlede struktur/ Hvordan er du kommet hertil? 22
(Se efter brødkrummesti, overblik i navigation, markering af aktuel placering.) 6. Søgefunktion: Kan du søge, og hvor kan du det? (Se efter, om søgefeltet er let af identificere.) Testpersonen tildeler de forskellige spørgsmål point ud fra følgende skala: 0 point: Denne information fremgår slet ikke af undersiden 1 point: 2 point: Denne information fremgår kun delvis af undersiden / den er svær at finde Denne information kunne fremgå tydeligere på undersiden 3 point Denne information fremgår tydeligt på undersiden Maksimum scoren er altså 18 point. Det er dog ikke altid et tegn på at man har lavet et dårligt design, hvis scoren er under det maksimale. Dette kan skyldes at testens spørgsmål ikke nødvendigvis passer på ens site, da nogle sider ikke gør brug af alle de features som nævnes deri. 23
Perspektivering I dette afsnit vil gøre rede for en række tiltag der fremadrettet kunne gøres eller undersøges i forhold til vores kampagne. Vi gør brug af en kvantitativ spørgeskema undersøgelse i denne opgave. Man kunne med fordel lave en kvalitativ undersøgelse af målgruppen for at understøtte den kvantitative og derigennem få et mere nuanceret billede af de 12-16 årige. Dette kunne gøres ved hjælp af interviews med repræsentanter for målgruppen. Vi præsenterer en række brugertests i opgaven. Disse skal naturligvis udføres i praksis, så man sikrer at ens site lever op til brugernes forventninger i forhold til usability og design. En anden interessant faktor er målgruppens brug af sociale medier. Facebook er eksempelvis populært lige nu, men vil brugen af sociale medier ændre sig? Teknologiske trends og tendenser er en foranderlig størrelse, hvilket kan kræve omstillingsparathed i kommunikationen samt kampagnens udformning. Man kunne også se på kampagnens målgruppestrategi. Ville det f.eks. være fordelagtigt på sigt at vælge en anden? Man kunne evt. gøre det muligt at personliggøre Wacky Zacken med forskellige covers. Denne differentierede markedsføring kunne muligvis sprede dillen til flere forskellige segmenter. Konklusion Vi har i denne opgave søgt at besvare følgende hovedspørgsmål: - Hvordan kan vi som multimediedesignere skabe en målrettet kampagne til unge, som øger interessen for Wacky Zacken? Vi har brugt diverse metoder og teorier til at skabe en Wacky Zack kampagne, som vi mener dels er i tråd med Hummels nuværende image og brand, men også har sit eget særpræg. For at skabe et appellerende site til børn i alderen 12-16 år har vi undersøgt målgruppen ved hjælp af spørgeskema og statistik. Vi har integreret sociale medier (Facebook, Youtube og Instagram) på vores site. Vores målgruppe er bekendte med disse communities og brugen af dem. Vores underspørgsmål lyder: - Hvordan kan vi integrere medier som Facebook og Youtube således brugerne delagtiggøres i brugen af vores site? Vores Wacky Zack kampagne giver et bud på, hvordan sociale medier kan integreres på et website med det formål at skabe et fællesskab omkring et produkt. Brugerne kan dele deres oplevelser med Wacky Zacken online, hvilket skaber samspil til den fysiske leg med produktet. 24
Litteraturliste Bøger Usability - Testmetoder til mere brugervenlige websites på internettet. Gregersen, Ole og Wisler-Poulsen, Ian. Grafisk Litteratur. 1. udgave, 2. oplag. 2011. ISBN: 978-87-91171-93-2. 20 Designprincipper. Wisler-Poulsen, Ian. 1. udgave, 1. oplag. Grafisk Litteratur. 2012. ISBN: 978-87-91171-75-8. Digital Media Management - En helhedsorienteret metode. Fischer, Louise Harder og Oosterbaan, Marie. Nyt Teknisk Forlag. 3. udgave, 1. oplag. 2010. ISBN: 978-87-571-2723-2. Strategisk Projektledelse - Styr på udviklingen. Munk-Madsen, Andreas. Forlaget Marko. 1. udgave, 3. oplag. 1996. ISBN: 87-91649-08-0. Marketing Management - Kort og godt. Zigler, Christian Oxholm. Samfundslitteratur. 4. udgave. 2005. ISBN: 978-87-593-1158-5. Den Gode Opgave. Rienecker, Lotte og Jørgensen, Peter Stray. Forlaget Samfundslitteratur. 3. udgave, 2. oplag. 2008. ISBN: 978-87-593-11-64-6. Befolkningens brug af internet. Danmarks Statistik. 2010. Software Engineering - A Practitioner s Approach. Pressman, Roger. McGraw-Hill International. 7. udgave. 2010. ISBN: 978-007-126782-3. Applying Uml and Patterns - An introduction to object-oriented analysis and design and iterative development. Larman, Craig. Pearson Education, Inc. 3. udgave.2005. ISBN: 0-13-148906-2. Web http://twitter.github.io/bootstrap/ http://thenounproject.com http://www.enalyzer.dk http://lab.systime.dk/wp-content/uploads/8_segmentering_og_maalgruppevalg.pdf http://www.wikipedia.com 25
Bilag 01 Estimering ID Beskrivelse Predecessors A (optimistisk) B (middel) C (pessimistisk) M (forventet tid) S (usikkerhed) 2 Brainstorm / Mindmap 1 1.5 2 1.5 0.2 3 Projekt planlægning 2 4 7 3.8 1 5 Problemformulering 1 1.5 2 1,5 0,2 6 Indledning 1 1,5 3 1,7 0,4 7 Metode 6 3 5 8 5,2 1 8 Teori 7 5 7 8 6,8 0,6 9 Interresent analyse 0,5 1 1,5 1 0,2 10 Kommunikation 8 2 4 9 4,6 1,4 11 Designbrief 1 2 4 2,2 0,6 13 Implementeringsplan 3 1 2 3 2 0,4 14 FURPS+ 1 1,5 2 1,5 0,2 15 Moodboard 0,5 1 2 1,1 0,3 16 Informationsdesign 1,5 2 3 2,1 0,3 17 Interaktionsdesign 1,5 2 3 2,1 0,3 18 Præsentationsdesign 1,5 2 3 2,1 0,3 19 Kode 1 2 3 2 0,4 20 Google Analytics / Webmaster 1,5 2 2,5 2 0,2 21 Konklusion / Refleksion 16, 17, 18, 19,... 1 2 2,5 1,9 0,3 23 Logo design 2 5 11 5.6 1.8 24 Photoshop 6 7 8 7 0,4 25 Illustrator 6 7 8 7 0,4 27 Mock-up 2 5 10 5,4 1,6 28 Stor skærm 27 24 40 56 40 6,4 29 Tablet 28 8 16 24 16 3,2 30 Mobil 28 5 8 13 8,4 1,6 31 Javascript 28SS 8 12 16 12 1,6 32 SEO 28SS 1 2 4 2,2 0,6 33 Validering 29 0,5 1 2 1,1 0,3 34 Ekspertvurdering 33 1 1 1 1 0 26
Bilag 02 Gantt-chart 27
Bilag 03 Gantt-chart (Færdigt projekt) 28
Bilag 04 Kritiske vej 29
Bilag 05 Økonomi over projektudvikling 30
Bilag 06 Implementeringsplan MARTS APRIL MAJ JUNI JULI AUGUST IDE TEST PLAKATER EVENTS EVENTS EVENTS KAMPAGNE WEBSITE UDARBEJDELSE AARHUS ODENSE KØBENHAVN ANALYSE PROTOTYPE WEBSITE BANNER MØDE KONSTRUKTION COMPLETE UDARBEJDELSE FEEDBACK MERCHANDISE AFSLUTNING PRINT TEAMWORK WEBSITE BANNER PLAKATER PLAKATER KONKURRENCE PROJEKT LAUNCH LAUNCH OPSÆTNING OPSÆTNING KØBENHAVN PROJECT DONE 31
Bilag 07 Risiko-analyse Eksamens projekt 2. Semester Udfyldt af: Morten Korshavn, Morten Møller, Mikael Kristensen og Oliver Schrøder Dato: 10.05.2013 Hvad kan gå galt? Konsekvenser for projektet (K) Sandsynlighed (S) Risikotal (K x S) Forebyggende Handlinger: Afbødende Misforstået projektbeskrivelse 5 2 10 Sikre at alle har adgang til projektbeskrivelsen, og de har læst og forstået den. Projektet vil have fejl og mangler, og vil ikke leve op til de krav der bliver stillet Mangler i det færdige produkt 3 3 9 Sikre at mål og opgaver er lavet fuldt ud. Det færdige produkt vil ikke være tilfredsstillende. Misforstået målgruppe 4 3 12 Dårligt resultat i test 2 3 6 Deadline overskrides 5 1 5 Lave en målgruppe analyse der er godt defineret, så der ikke opstår misforståelser. Sikre at testen er forståelig og der gives instrukser i hvordan den skal udfyldes korrekt. Lave en tidsplan og projektplan for hvad vi skal nå til hvilket dage. Det færdige produkt vil ikke ramme den rigtige målgruppe og vil derfor ikke opfylde kravene i opgaven. Testen vil give et forkert syn og vil ikke kunne bruges. Projektet vil blive uoverskueligt og i værste tilfælde ikke kunne nå at blive færdigt. Sygdom/ikke fremmøde i teamet 3 3 9 Have hinandens kontakt informationer, så hvis en bliver syg/ forsinket skal personen kontakte teamet. Det vil skadet teamets produktivitet og i værste tilfælde sætte tidsplanen ud. Manglende kompetencer i teamet 4 3 12 Finde ud af hvad vi er gode til og uddele arbejde efter det. Dårligt slutprodukt hvis vores kompetencer bruges forkert. Dårligt sprog/formulering i produktet 2 3 6 Bruge sproget målgruppen bruger. Målgruppen finder produktet kedeligt/forstår ikke budskabet. Sandsynlighed Ignorerbar 0-1% Meget lille 1-20% Lille 20-40% Middel 40-60% Stor 60-80% Meget stor 80-100% Point 0 1 2 3 4 5 32
Bilag 08 Interessent-analyse Projekt: Sommerens store dille 2014 - eksamen Interessent Kunden Målgruppe Projektmedlemmer Undervisere Kommende arbejdsgiver/kunder Andre/ kommende studerende Interessenten kan opleve følgende FORDELE ved projektet Vi overholder deadlines/mål/ aftaler Et produkt der er målrettet målgruppen og opfylder behov i form af visuel værdi, brugervenlighed og information Læring, samarbejde og planlægning Vi har forstået opgaven og projektets færdige mål og at vi har udviklet os fagligt i forhold der til. Interessenten kan opleve følgende ULEMPER ved projektet Vi ikke kan udfylde kundens behov Misforstår budskabet der skal gives til målgruppen. Ikke tilfredstillende produkt Dårlig kommunikation og samarbejde, samt misforståelser og uoverensstemmelser Udfyldt af: Morten Korshavn, Morten Møller, Mikael Kristensen og Oliver Schrøder Samlet vurdering af interessentens bidrag/position Vigtig Vigtig Vigtig Håndtering af interessenten Løbende feedback og samtale/ kommunikation Lave målgruppe analyse og brugertest med målgruppen i fokus Grundig planlægning, uddeling og samarbejde af opgaver og mål Misforståelse af opgaven Vigtig Udviser arbejdslyst og initiativ samt kommunikation om evt. problemer Finde nye samarbejdspartnere Projektmedlemmernes kunne Mindre vigtigt Opdatering af vores portfolio Inspiration Ingen Mindre vigtigt Upload til internettet 33
Bilag 09 FURPS+ Krav Spørgsmål Mål Opnået Functionality: Online Hvornår skal websitet være tilgængeligt? Fredag den 31/5-13 skal kunden kunne bruge anvende første prototype af websitet. Hjælp Vil online hjælp være nødvendig? Information skal fremgå tydeligt på websitet, så en hjælpe menu kan undværes. Søgemaskiner Er SEO en nødvendighed? Websitet skal optimeres til søgemaskiner. Websitet skal ligge i toppen af søgeresultater, der omhandler hacky-sack. Sprog Hvilke sprog skal websitet understøtte? Dansk version er et krav. Flere internationale sprog vil forbedre internationale brugeres forståelse af information. Usability: Æstetik Skal websitet findes interesant. Jo mere interresant websitet findes, jo mere information læser brugeren. Navigation Hvordan skal man kunne navigere? Klikbar menubar Sammenhæng Reliability: Troværdighed Performance: Er der særlige krav til sammenhæng af websitet? Hvor stor grad af troværdighed skal prioriteres på websitet? Jo større grad af konsekvens i brugergrænsefladen, jo bedre genkendelse får brugeren af websitet. Websitet skal fremstå professionelt og troværdigt, da der er fokus på brandet Hummel. Load hastighed Skal der være fokus på load hastighed? Jo hurtigere websitet loades jo bedre brugertilfredshed. Optimering Supportability: Kode Kompatibilitet Vil det være nødvendigt at optimere billeder og andre elementer til websitet? Skal det være muligt at kunne redigere i koden senere? Hvilke medier skal websitet kunne anvendes på? Alle billeder og andre elementer skal være optimeret til web, får at opnå så høj load hastighed af websitet som muligt. Ved konsekvent brug af meningsfyldte kommentarer i kode-filerne, vil det fremme overskueligheden, for senere at skulle ændre information eller funktioner. Websitet skal kunne anvendes på mobil, tablet og computer (stor skærm). 34
Bilag 10 SMUK model STØRRELSE OG VÆKST MULIGHEDER FOR BEARBEJDNING MÅLGRUPPEVALG KONKURRENCE- SITUATIONEN I SEGMENTET UDGIFTER VED BEARBEJDNING 35
Bilag 11 Spørgeskema 36
Bilag 12 Moodboards Afsender Modtager 37
Bilag 13 Visuel identitet Open Sans - regular Open Sans - bold Open Sans - italic Lato - regular Lato - bold Lato - italic R: 0 G: 174 B: 244 R: 168 G: 25 B: 44 R: 158 G: 214 B: 36 R: 25 G: 68 B: 150 R: 203 G: 200 B: 204 Lato - regular Lato - bold Impact - regular Logo Logo med Hummel bomærke 38
Bilag 14 Mock-up (Website) 39
Bilag 15 Grid system & Instagram feed 40
Bilag 16 Instagram & CSS/HTML/Javascript 41
Bilag 17 Sitemap Internt Eksternt Sociale medier FORSIDE FACEBOOK TIPS & TRICKS INFORMATION SHOP KONKURRENCE COMMUNITY INSTAGRAM YOU-TUBE MERCHANDISE BOLDE SKO T - SHIRT VILKÅR TILBUD KONTAKT 42
Bilag 18 Merchandise Plakater T-Shirt Sandaler Nøglering Bolde 43