Database login - Bruger: madebythomsen_dk Kode: VQcKpxYz

Transkript

1 Database login - Bruger: madebythomsen_dk Kode: VQcKpxYz Google analytics login - Bruger: recordpusher2017@gmail.com Kode: recordpusher Projekt titel - 3. sem eksamen Selvvalgt titel - RecordPusher Gruppemedlemer - Cecilie Stark Olesen, Jonas Enghave Thomsen, Benjamin Nikolaj Jørgensen og Simone Didriksen Wordpress login - rp.madebythomsen.dk Bruger: admin kode: recordpusher Domæne login - One.com Bruger: thomsen.jet@gmail.com Kode: recordpusher Gruppe 7 Afleveringsdato - 06/ Institution - Erhvervsakademiet Lillebælt - MMD Odense Vejledere - Michael Bjørn Koch, René Birkholm Knudsen, Jens Berg og Marc Kurt Altfuldisch.Antal anslag Link til prototype -

2 ABSTRACT: RecordPusher is a small store located in Odense that sells records and relevant equipment. The store also has a webshop, which the assignment has mainly revolved around. The study investigates how a new visual identity could be made and implemented in a new website for RecordPusher. With the use of both visual- and communicative tools the study found that the main target group should be the streaming generation (age 16-29), as this target group is easy to reach through concentrated marketing via use of social media. The visual identity was created with the six parameters of the visual system, based on a lot of research and user tests, which all ended up in a simple, well-structured child theme, wordpress website.

3 Indledning...1 Problemformulering...2 Problemstillinger...3 Afgrænsning (Simone)...4 Metoder...5 Project management (Cecilie)...8 Projektplan (Cecilie)...9 Stakeholder map (Cecilie)...9 Gruppekontrakt (Cecilie)...9 Risikoanalyse (Cecilie)...9 Scrum (Cecilie)...9 Essensen af RecordPusher...23 Emotional selling proposition (Jonas)...24 Business model canvas (Cecilie)...24 Value proposition canvas (Cecilie)...25 Mission, vision og værdier (Simone)...25 Delkonklusion (Cecilie)...26 Websitets struktur...27 Brugertests (Benjamin)...28 UI patterns (Cecilie)...29 Wireframes (Jonas)...29 Delkonklusion (Cecilie)...30 Research og valg af segment...10 Desk- og field research (Simone)...11 SMP (Simone)...11 Delkonklusion (Cecilie)...14 Mødet med målgruppen...15 Scenarie og storyboard (Jonas)...16 Customer journey (Benjamin)...16 Medieplan (Simone)...17 Delkonklusion (Cecilie)...18 Mål, konkurrenter og effekt...19 Formål med kommunikation SMART mål (Simone)...20 Effektmåling (Simone)...21 Positioneringskort (Simone)...21 Delkonklusion (Cecilie)...22 Websitets design...31 Mockup 1 vs. Mockup 2 (Simone)...32 Det visuelle system (Cecilie)...33 C.R.A.P. (Cecilie)...34 Delkonklusion (Cecilie)...35 Systemets struktur...36 UML Use case diagram og scenarier (Benjamin)...37 SEO (Jonas)...37 E/R diagram (Cecilie)...38 Delkonklusion (Cecilie)...39

4 Prototype...40 Wordpress (Jonas)...41 Plugins (Jonas)...41 Databaser (Simone)...42 CRUD (Simone)...42 PHP (Cecilie)...43 JavaScript & jquery (Benjamin)...44 Refleksioner (Simone)...45 Konklusion (Cecilie)...46 Referenceliste...48 Bilag...53 Bilag 1: Projektplan...54 Bilag 2: Stakeholder map...55 Bilag 3: Gruppekontrakt...56 Bilag 4: Risikoanalyse...59 Bilag 5: Scrumboard...60 Bilag 6: Spørgeskema udsendt gennem RecordPusher...61 Bilag 7: Spørgeskema udsendt i den fysiske butik...62 Bilag 8: korrespondance med Bo...63 Bilag 9: Dybdegående interview med Bo...64 Bilag 10: korrespondance med IFPI...65 Bilag 11: UI patterns...66 Bilag 12: Visual research...67 Bilag 13: Musikselskaber s Bilag 14: Segmenteringsmatrix...69 Bilag 15: SMUK model...70 Bilag 16: Persona...71 Bilag 17: Opsamling på svar fra det unge segment...72 Bilag 18: Costumer journey...73 Bilag 19: Gennemsnit af nye kunder i Bilag 20: Business model canvas...75 Bilag 21: Value proposition canvas...76 Bilag 22: Cart sorting test...77 Bilag 23: Gruppens samlede cart sorting...79 Bilag 24: Think a.loud test...80 Bilag 25: Wireframes...81 Bilag 26: Mockup Bilag 27: Mockup Bilag 28: Mockup 1 VS. Mockup 2 spørgeskema...85 Bilag 29: Moodboard...86 Bilag 30: Storyboard til video...87 Bilag 31: Use case diagram...88 Bilag 32: Use case scenarier...89 Bilag 33: UML test...90 Bilag 34: E/R Diagram...91

5 INDLEDNING RecordPusher er en lille butik på Overgade i hjertet af Odense, med tilhørende webshop og café. RecordPusher forhandler både ny og gammel vinyl, merchandise og forskelligt relevant udstyr. Butikken har eksisteret siden 2013 og er drevet med stor passion og engagement af Bo Ellegaard. RecordPusher har stort fokus på kundeservice, udvalg, lave priser og hurtig levering. Med dette i tankerne fokuseres der på et enkelt spørgsmål: 1

6 PROBLEMFORMULERING Hvordan laves og implementeres en ny visuel identitet til RecordPusher, som udvider kundekredsen? 2

7 PROBLEMSTILLINGER Hvordan tilrettelægges en kommunikationsstrategi til den mest attraktive målgruppe for RecordPusher? Hvilke visuelle virkemidler kan benyttes til at skabe et brugervenligt website som appellerer til målgruppen? Hvordan laves en webshop for RecordPusher, ved hjælp af en database? 3

8 AFGRÆNSNING: RecordPusher sælger plader til folk over hele verdenen, men eftersom, at dette salg er minimalt holder denne opgave fokus på det danske vinylmarked, og de forbedringer der kan skabes der. Desuden skal det nævnes, at RecordPusher er en enkeltmandsvirksomhed og derfor er det ikke realistisk at opsætte større kampagner hverken fysisk i form af plakater osv. eller på de sociale medier, da tiden ikke er til det. Der vil dog holdes fokus på en vedvarende aktivitet på de sociale medier. 4

9 METODER 5

10 Project management En projektplan er med dets elementer yderst vigtig for, at projektet kan blive gennemført med succes (Larson and Larson, n.d.). Projektplanen indeholder f.eks. et stakeholder map som visualiserer hvilke stakeholdere der er, hvor stor betydning de har, og hvor tæt en relation de har til projektet (Rolighed Andersen et al., 2011, s.36). Derudover indeholder den også en gruppekontrakt som fastslår gruppens interne spilleregler og dermed mindsker uoverensstemmelser og konflikter i gruppen (University of Waterloo, 2013), samt en risikoanalyse som laves for at vurdere hvilke risici der er i projektet, hvor stor risikoen er og hvordan disse kan løses (Mannaz, n.d.). Scrum Scrum er en agil arbejdsmetode som medvirker til at danne et overblik over alle dele af projektet. Selve formålet med Scrum er, at få så meget værdi som muligt ud af det ydede indsats (Scrummaster.dk, 2016). SMP Segmenteringsprocessen og SMP s formål er, at finde frem til den målgruppe der mest effektivt kan markedsføres til (SEGMENTERING OG MÅLGRUPPEVALG, n.d.). Persona For at kunne rette kommunikationen bedst muligt mod målgruppen, laves en persona for at give et bedre indtryk af denne (Kristiansen, 2013). Scenarier & storyboards Scenarier og storyboards er et værktøj der hjælper med at skabe forståelse for de behov og problemer som brugeren kan opleve. Dette er vigtigt for at skabe den bedst mulige brugeroplevelse (Admin, 2013). Customer journey Customer journey er en model som bruges til at beskrive forskellige berøringspunkter og interaktioner brugeren har med et produkt eller virksomhed (Offsey, S. 2016). Positioneringskort Positioneringskortet bruges til at placere en virksomhed og dennes produkt det sted virksomheden ønsker at målgruppen skal forbinde virksomheden og produktet, set i forhold til konkurrenterne (HHXnoter, 2013). ESP Emotional selling proposition bruges når et produkt eller en virksomhed skal definere, fokusset på at skabe en positiv opfattelse af produktet/virksomheden (Ivaekstdk, 2011). Business model canvas Et business model canvas bruges til at få indsigt og overblik over de mest betydningsfulde grundsten af forretningen. Dette foregår gennem de ni elementer: value proposition, key partners, key activites, key resources customer relationships, channels, customer segments, cost structure og revenue streams (Bendtsen, 2012). Desk research Desk research er en metode til at indsamle informationer der allerede findes. Dette kan for eksempel være en artikel (Businessdictionary.com, 2016b). Field research Field research er, modsat desk research, en metode til at indsamle informationer, der ikke allerede findes. For eksempel egne spørgeskemaer, brugerundersøgelser eller interviews (Businessdictionary.com, 2016a). SMART-mål SMART-modellen anvendes til at definere et specifikt mål og deadline for f.eks. en kampagne (Buskbjerg, M. 2016). Effektmåling Effektmåling er en metode der bruges til at måle effekten af kommunikationen. Ved hjælp af effektmåling kan det undersøges om den ønskede effekt af f.eks. en kampagne er opnået, og i hvilket omfang (Marek, 2016). Value proposition canvas Value proposition canvas giver et overblik over hvor, og i hvor høj grad, det value proposition et firma tilbyder, matcher med kundernes ønsker og behov (Strategyzer, 2017). 6

11 Vision, mission og værdier Analyseformen bruges til at klarlægge hvad og hvem virksomheden er, og hvad der arbejdes hen imod for at opnå det endelige mål (Rolighed Andersen et al., 2011, s.59-62). Card sorting Card sorting er en test som bruges til at hjælpe med at designe og evaluere informationsarkitekturen af et website (Optimal workshop, 2015). Think aloud En think aloud test bruges til undersøge brugernes forventninger og identificere hvilke elementer af systemet der forvirrer brugeren (Nielsen, J, 2012). UI patterns UI patterns bliver brugt i forbindelse med design af brugergrænseflader, for at mindske eventuelle designproblemer og skabe sammenhæng (Toxboe and contributors, 2007). Wireframe Wireframes er simple illustrationer af funktioner, struktur og indhold på et website (Redweb, 2017). Mockup Mockups visualiserer funktionaliteten af et website og muliggør afprøvning af et design (Landa, 2014, s. 87). Brug af mockups gør det nemmere at ændre elementer og prøve ideer af, inden kodningsprocessen (Humbrecht, 2016). Det visuelle system Det visuelle system er et værktøj som bruges til udviklingen af en visuel identitet. Som udgangspunkt, består det visuelle system af parametrene: billeder, logo, farver, grafiske elementer, typografi og tone of voice (Havmoeller.wordpress.com, 2007). C.R.A.P C.R.A.P. består af fire designprincipper: contrast, repetition, alignment og proximity, og benyttes til at optimere designet og sikre sammenhæng gennem dette (Gregory and Mark, 2011). UML Unified modeling language forkortes UML. Det er en grafisk metode til at vise hvordan softwaren er opbygget på et website (Podeswa, 2009). Use case diagram Et use case diagram viser aktørens interaktion med systement (UML 2 use case diagrams: An agile introduction, n.d.). Use case scenarier Use case scenarier er en metode til at afdække krav til et nyt eller eksisterende system (Arkitekturguiden, 2017). E/R diagram E/R diagram står for Entitets/Relations-diagram og bruges til at illustrere relationerne mellem de forskellige entiteter i en database (Iftek.dk, n.d.). SEO Search engine optimization består af forskellige virkemidler til at optimere et websites ranking på Google og andre søgemaskiner (Concept-idk, 2017). PHP PHP er en forkortelse for Hypertext Preprocesser. PHP køres på serveren og udfaldet sendes tilbage til klienten som almindelig HTML (nemprogrammering.dk B, 2011). JavaScript Javascript bruges til at gøre et website interaktivt og bliver udført direkte på klienten, afhængig af brugerens input (Hvad Er Javascript?, 2011). jquery jquery er et open source javascript bibliotek som gør det lettere at bruge JavaScript (jquery.org, n.d.). WordPress Wordpress er et CMS-system, som bruges til at strukturere og styre indhold på en given website (Nemprogrammering.dk D, n.d.). Plugins Plugins bruges som en form for udvidelse af WordPress funktioner, hvor der blandt andet kan tilføjes yderligere features alt afhængigt af ens behov (Christian, 2012). 7

12 PROJECT MANAGEMENT 8

13 Projektplan (Cecilie) Når det kommer til project management, er en fyldestgørende projektplan en af de vigtigste elementer (Larson and Larson, n.d.). Gruppens brug af projektplanen har sørget for et godt overblik over projektet gennem hele processen (Bilag 1). Stakeholder map (Cecilie) Stakeholder map et danner et visuelt overblik over forretningens netværk og de stakeholdere der har indvirkning på forretningen (Rolighed Andersen et al., 2011, s.36). Projektets stakeholder map er lavet med RecordPusher i fokus, hvorfor RecordPusher er placeret i midten (Bilag 2). Af interne, pengebaserede stakeholdere, findes medarbejderne og chefen, Bo. Bo er placeret helt tæt på RecordPusher, da han har den største indflydelse på forretningen, i og med det er ham der tager alle beslutninger for forretningen. Derudover, er medarbejderne også placeret under interne pengebaseret, i og med de i nogen grad også har indflydelse på RecordPusher, og bliver lønnet. Af eksterne, pengebaserede stakeholdere, findes alle RecordPushers samarbejdspartnere. Her er alle samarbejdspartnere/leverandører/ pladeselskaber vigtige for RecordPushers produkter, og er dermed placeret tæt på centrum. Sidst er gruppen, pressen og de bands der holder releaseparty ved RecordPusher, placeret under eksterne, ikkepengebaserede stakeholdere. De bands der holder releaseparty i forretningen, ligger forholdsvis tæt på centrum. De er placeret der, i og med det har betydning for opmærksomheden omkring RecordPusher. Gruppen ligger lidt længere ude, da de har en indflydelse på RecordPushers visuelle identitet mm.. Aller yderst ligger pressen, fordi de ikke har specielt stor indflydelse på RecordPusher, da der ikke så ofte er omtale af forretningen i pressen. Gruppekontrakt (Cecilie) Med gruppekontrakten sikres der, at alle gruppemedlemmer har en fælles forståelse for hvilke mål der skal nås, samt hvordan processen skal foregå (University of Waterloo, 2013). Gruppen har dermed benyttet kontrakten til, i fællesskab, at fastsætte nogle normer og interne spilleregler for gruppens samarbejde, allerede inden projektets start (Bilag 3). Risikoanalyse (Cecilie) Risikoanalysen er et redskab som bruges internt i gruppen for at vurdere, bedømme og løse de risici der kan opstå i forbindelse med projektet (Mannaz, n.d.). Ved at bruge risikoanalysen kan gruppen dermed skabe et overblik over potentielle risici og løsninger, allerede inden projektets start og dermed komme hurtigt og godt videre, hvis der opstår problemer (Bilag 4). Scrum (Cecilie) Den agile metode Scrum hjælper med at skabe et overblik over projektet. Opgaverne er opdelt i iterationer, for at få så meget som muligt ud af den ydede indsats (Scrummaster. dk, 2016). Gruppen har benyttet Scrum i form af daglige Scrum-møder, holdt af Scrum masteren, samt til fordeling af arbejdsopgaver gruppemedlemmerne imellem. Der er arbejdet ud fra en prioriteret backlog, og opgaverne er inddelt i ugentlige sprints. Brugen af Scrum har sikret gruppen et overblik og tidsestimat over hele projektperioden (Bilag 5). 9

14 RESEARCH OG VALG AF SEGMENT 10

15 Som første led af processen, har gruppen foretaget en masse forskellig research for at finde ud af hvilke segmenter RecordPusher har og hvilket segment det er mest relevant at arbejde med. Desk- og field research (Simone) For at finde de forskellige segmenter for RecordPusher og derved finde frem til den ønskede målgruppe, er der benyttet både desk- og field research. Ved field research er der udsendt et spørgeskema, som har givet indblik i, hvem der interesserer sig for vinyl og hvorfor (Bilag 6), samt et spørgeskema der giver en forståelse for, hvorfor man vælger at handle i butikken eller på nettet (Bilag 7). Foruden dette, er der blevet stillet en række spørgsmål til klienten både pr. mail (Bilag 8) og ved et interview (Bilag 9). Gennem desk research har det været muligt at finde ud af aldersgruppernes fordeling når det kommer til at lytte til vinyl, samt give et overblik over det stigende salg af vinyl gennem årene (Bilag 10). Desuden er der ved hjælp af Pinterest undersøgt forskellige UI patterns for at give et overblik over, hvilke løsninger der findes i forbindelse med at lave en funktionel og brugervenlig webshop (Bilag 11). Til slut er der også lavet en visuel research der efterfølgende har ligget til grund for de valg der er truffet i de seks parametre i det visuelle system (Bilag 12). SMP (Simone) Ved at arbejde med segmentering kan en virksomhed opnå en række fordele, da man ved at kende sin målgruppe kan påvirke denne gennem kommunikationen, fordi man kan tale målgruppens sprog. Virksomhedens ressourcer udnyttes bedre, da kommunikationen kan rettes mod potentielle kunder fremfor at forsøge at nå ud til alle. Dermed kan der altså fokuseres på målgruppens behov og krav (SEGMENTERING OG MÅLGRUPPE VALG, s.165, n.d.). Fase 1 Beskrivelse af relevante forhold for produktet på markedet Da hovedfokusset med samarbejdet er at skabe en ny visuel identitet, der kan udvide kundekredsen, vil det udelukkende være konkurrencesituationen set i forhold til salg via nettet der vil blive belyst. Her er konkurrencen stor, da vinyl udbydes af mange webshops i både ind- og udland. Vinylen er nemlig blevet let tilgængelig på et marked der er i stor udvikling (Nordby, G. G., 2014). Omsætningen fra vinylsalget, af det fysiske salg, i Danmark udgjorde i 2000 blot 0,04%, hvor det i 2015 udgjorde 16,5% (Bilag 13). Salget af vinyl stiger altså år for år og det viser sig, at det ikke kun er generationerne fra vinylens opståen, der er skyld i disse stigninger. De vinylinteresserede kommer i alle aldre, hvilket der er blevet oplyst gennem en korrespondance med Pernille Møller Poulsen, Kommunikationskonsulent, fra IFPI Danmark (Bilag 10). En endnu ikke-offentliggjort rapport lavet over 2016 viser, at 12% af de årige danskere lytter til musik på vinyl i 2016, hvor fordelingen af disse ser således ud: 16-29: 7 % lytter til musik på vinyl 30-39: 13 % lytter til musik på vinyl 40-49: 10 % lytter til musik på vinyl 50-59: 14 % lytter til musik på vinyl 60-70: 20 % lytter til musik på vinyl Dette viser, at der er flere segmenter, der kunne være interessante at arbejde med, for at fremme onlinesalget og udvide kundekredsen. 11

16 Fase 2 Valg af segmenteringskriterierne Segmentkriterierne beskriver forbrugernes indkomst, alder, køn, livsstil mm. (SEGMENTERING OG MÅLGRUPPE VALG, n.d.). Det er i denne fase, at relevante segmentkriterier udvælges for at finde projektets målgruppe. De segmentkriterier der i denne sammen hæng er hensigtsmæssige, er de sociale, psykografiske, teknografiske og de adfærdsmæssige, da det er mest relevant at vide, hvilken aldersgruppe fokusset skal ligge på samt, hvilke holdninger og adfærd de har. Disse er sat ind i en segmenteringsmatrix for at give et bedre overblik (Bilag 14). Segmentkriterierne er valgt på baggrund af en omfattende field- og desk research der består af førnævnte korrespondance, samt egne spørgeskemaer, der har fået mere end 600 besvarelser, sendt ud til vinylinteresserede (Bilag 6), for at give en bedre forståelse for adfærden og holdningerne hos vinylinteresserede. Foruden dette er markedet for vinyl og dets udvikling gennem årene også researchet på. Ud fra segmenteringsmatrixen kan der defineres 3 segmenter, disse er: Streaming generationen (første streaming tjeneste kom i 2001) årige CD generationen (CD en udkom omkring 1982) årige årige Vinyl generationen (vinyler udkom omkring 1948) årige årige Navnene er givet da de 3 segmenter hver især aldersmæssigt passer til det pågældende musikmedies udgivelse. Altså skal det ikke forstås som, at dette segment udelukkende har gjort brug af ét medie til musik, men derimod blot er vokset op med mediet som det mest brugte på markedet på daværende tidspunkt. Fase 3 vurdering af segmen tets attraktivitet, SMUK Når de 3 segmenter er fundet sættes alle ind i en SMUK-model (Bilag 15), for at finde den mest attraktive målgruppe at arbejde med (SEGMENT ERING OG MÅLGRUPPEVALG, n.d.). Ud fra SMUK-modellen kan det konkluderes at streaming generationen er det mest attraktive segment at vælge som målgruppe, da man her har de bedste muligheder for at komme i kontakt med segmentet samt holde udgifterne nede. Udgifterne kan holdes nede da man med dette segment kan bruge sociale medier til at skabe opmærksomhed (Mediernes udvikling i Danmark, 2017). Derudover er det også dette, unge segment som skal videreføre vinylen, så den ikke uddør med de ældre segmenter. Fase 4 valg af målgruppestrategi Målgruppestrategien for RecordPusher skal findes og eftersom, at der i dette forløb kun vil være valgt et enkelt segment til målgruppen, giver det mest mening at arbejde med koncentreret markedsføring. 12

17 Ved koncentreret markedsføring forstås det, at virksomheden koncentrerer sig om et enkelt eller udvalgte segmenter med særlige behov og krav (SEGMENT ERING OG MÅLGRUPPEVALG, n.d.). I dette tilfælde holdes fokusset på det unge segment fra år, da der her er mulighed for at udvide kundekredsen. Kommunikationen målrettes ved at lave en persona (Bilag 16), der repræsenterer målgruppen og derved giver et bedre indblik i de behov og interesser målgruppen har (Kristiansen, 2013). Personaen for målgruppen er baseret på et spørgeskema, der er sendt ud blandt RecordPushers egne følgere på Facebook. Dette er efterfølgende blevet opdateret i et nyt skema således, at det kun indeholder svar fra det valgte segment på årige (Bilag 17) og et der har ligget i den fysiske butik (Bilag 7). 13

18 DELKONKLUSION: Gennem brugen af SMP, er det slået fast at konkurrencesituationen er stor, set i forhold til salg af vinyl, da mange webshops udbyder produktet. Samtidig, er interessen for vinyl steget i alle aldersgrupper, som dermed giver flere forskellige potentielle segmenter at arbejde med. For gruppen har de relevante segmentkriterier været: de sociale, psykografiske, teknografiske og adfærdsmæssige, og baseret på forskellig research, undersøgelser og segmenteringsmatrixen, kunne tre segmenter opstilles: streaming generationen (16-29 år), CD generationen (30-49 år) og vinyl generationen (50+). Gennem SMUK-modellen, blev det klart at det mest attraktive segment er streaming generationen, da dette segment er nemt at imødekomme gennem koncentreret markedsføring, fordi segmentet er meget tilstede på de sociale medier. Til sidst kreerede gruppen en persona, baseret på forskellige undersøgelser. 14

19 MØDET MED MÅLGRUPPEN 15

20 Med segmentet på plads, arbejdede gruppen videre mod at finde ud af, hvordan dette segment bedst kan mødes. Scenarie og storyboard (Jonas) Først og fremmest skulle gruppen have et bedre indblik i de problemer og behov som brugeren oplever. For at opnå dette, bruges der scenarie og storyboard. Disse værktøjer er med til at hjælpe gruppen med at opnå en bedre brugeroplevelse. Scenarier er med til at fortælle historien bag personaen og problemet for en given målgruppe, hvorimod storyboardet er med til at give et indblik i personaens problemer og behov, via visualisering af personaens følelser (Admin, 2013). Ved hjælp af disse værktøjer vil gruppen opnå en dybere forståelse for den valgte målgruppes problemer og behov, som projektet vil afhjælpe målgruppen med. Customer journeyen beskriver peronaens oplevelser før, under og efter mødet med RecordPusher. Der bliver i personaens rejse fokuseret på at give et overblik over hele oplevelsen med RecordPusher. Målet med customer journey er at finde ud af mere om målgruppen og hvordan man bedst rammer denne (Bilag 18). Customer journey (Benjamin) Baseret på forståelsen for personaens problemer og behov, kan man ved hjælp af customer journey finde ud af hvordan man bedst får fat i målgruppen (Offsey, S., 2016). En customer journey viser rejsen fra den første kontakt, gennem processen og ind i et længere forhold. Scenarie og storyboard 16

21 Medieplan (Simone) Den ovenstående customer journey giver som sagt et eksempel på en rejse en potentiel kunde kan have med RecordPusher. I eksemplet er Facebook den primære kilde til kendskabet til RecordPusher. RecordPusher skal benytte de sociale medier, særligt Facebook og Instagram, flittigt, da det er her segmentet befinder sig (Mediernes udvikling i Danmark, 2017) og da det er netop disse medier der bliver brugt mest som distributionskilde til content marketing. De sociale medier, er ifølge 75% af en række adspurgte, det mest effektive format at bruge til indhold (Laursen, 2016, s.23). Her er der især tale om Facebook der, i samme undersøgelse, ligger på 88% og dermed er det mest populære sociale medie at bruge til indhold. Instagram har siden 2015 vundet fremgang på 8 procentpoint og ligger derfor på 45% i 2016 (Laursen, 2016, s.24). Det er derfor vigtigt at RecordPusher holder sig aktiv på netop disse to medier. Dette sker ved jævnlige opdateringer, fra ejeren af butik og webshop, i forbindelse med events i den fysiske butik samt ved pladeudgivelser og nyheder om sjældnere plader der er blevet tilgængelige på webshoppen/butikken. Der bør som udgangspunkt være to opslag i ugen, men indholdet skal være relevant, så er der intet nyt at fortælle, bør der ikke laves et opslag. Her er det især vigtigt at holde fast i ideen om fællesskabet og stemningen ved vinyl, og derfor bør billederne ikke kun være af et pladecover, men rettere stemningsbilleder fra butikken, evt. med et billede fra tidligere events, eller en ny udgivelse på billedet, hvis det er dette opslaget skal handle om. At bruge billeder med en fortælling bag er af stor relevans, da mennesker gennem billeder og fortællinger husker og gemmer information bedre. Visuelle oplevelser huskes bedre end noget andet - dette kaldes Pictorial Superiority Effect (PSE) og er et vigtigt element inden for neuro web design (Tokyo web designs, 2008). Medieplanen for de sociale medier spiller en stor rolle i at opnå SMARTmålet da der er gode muligheder for at øge opmærksom på RecordPusher her. Her ses et eksempel på et facebook opslag der har relevant indhold, er forbundet til den fysiske butik og som samtidig forsøger at være i øjenhøjde med målgruppen. Der er en klar fortælling bag billedet der gør at målgruppen husker budskabet bedre grundet PSE effekten. 17

22 DELKONKLUSION: I løbet af denne fase er det gennem arbejdet med både scenarie, storyboard og customer journey blevet tydeligt, at de sociale medier har en stor rolle i promoveringen af RecordPusher og det nye website. samt vigtigheden af et overskueligt site. Dette gælder især da gruppens fokus ligger på segmentet: streaming generationen (16-29 år), og disse er nemme at møde på de sociale medier. Baseret på undersøgelser, er det især medierne Facebook og Instagram som skal bruges til at nå målgruppen. Her skal indholdet af opslagene overvejes nøje, så de klart udtrykker RecordPushers ESP, om fællesskab i musikken. 18

23 MÅL, KONKURRENTER OG EFFEKT 19

24 Efter arbejdet med hvordan målgruppen bedst mødes, arbejdede gruppen henimod at definere et decideret mål for kommunikationen og effekten af denne, samt hvordan RecordPusher står i forhold til konkurrenterne. Formål med kommunikation - SMART mål (Simone) SMART modellen anvendes til at specificere projektets mål og deadline (Buskbjerg, M. 2016). I den forbindelse er det specifikke mål at få 100 nye kunder, i gennemsnit, pr. måned, hvilket er et realistisk mål da RecordPushers webshop, i gennemsnit, havde 68 nye kunder pr. måned i 2016 (Bilag 19). De 100 nye kunder kommer ikke nødvendigvis fra det valgte segment streaming-generationen, fokusset er blot holdt på denne generation i forbindelse med at skabe en ny og mere tiltalende visuel identitet for RecordPusher, da dette segment viser en øget interesse for vinyl. Det er i den forbindelse interessant at arbejde med netop denne målgruppe og derigennem forsøge at udbrede kendskabet og interessen for vinyl endnu mere. 20

25 Effektmåling (Simone) Effektmåling er en metode, der bruges til at finde ud af om den ønskede effekt er opnået i forbindelse med den kommunikationsplan, der er lagt for virksomheden. Det er her relevant at benytte google analytics, da man her kan få konkrete tal der kan bruges til at afgøre om kommunikationsplanen er succesfuld. Til RecordPusher bliver der især holdt fokus på antal unikke besøgende for at se om kundekredsen udbredes. Målingerne findes i Google Analytics hvor der kan kigges på trafik og acquisition, hvor det også er muligt at finde ud af, hvor de besøgende på siden kommer fra. Her er det selvfølgelig også interessant at se på konverteringsraten - altså, hvor mange besøgende der faktisk foretager et køb på RecordPushers webshop. Dette kan så holdes op mod antal unikke besøgende, hvilket kan give et godt billede af, hvor mange nye kunder der kommer til, i en given periode. Man kan altså ved hjælp af google analytics se om SMART målene er succesfulde. Positioneringskort (Simone) Positioneringskortet bruges til at placere en virksomhed og dennes produkt i forhold til konkurrenterne og derved sammenligne dem (HHXnoter, 2013). I forbindelse med muligheden for at opnå målet i SMART-modellen, er det væsentligt at kigge på konkurrenter. For at kunne afgøre, hvorvidt målet er realistisk, har det været nødvendigt at finde RecordPushers position, set i forhold til konkurrenter. RecordPushers og konkurrenternes position er målt udfra parametrene dårlig/god kundeservice og billigt/dyrt og set herudfra, har RecordPusher en god position. Den primære konkurrent er Moby Disc, der også har gode anmeldelser og priser og desuden også er lokaliseret i Odense. For at forbedre mulighederne for at opnå SMART-målet er der fokus på at lave et nyt og mere tiltalende design af websitet. Placeringerne af virksomhederne er valgt udfra virksomhedernes anmeldelser på trustpilot og Facebook samt en sammenligning af priser på forskellige plader. Moby Disc og RecordPusher deler pladsen, dette er blot svært at illustrere med logoerne. 21

26 DELKONKLUSION: Ved at arbejde med det specifikke mål for kommunikationen, nemlig at recordpusher.com får 100 nye kunder i gennemsnit pr. måned, har det vist sig at være væsentligt for gruppen også at kigge på konkurrenter, for at se om målet er realistisk. Positioneringskortet gjorde det muligt at klarlægge RecordPushers placering i forhold til konkurrenterne, og viste, at RecordPusher ligger klart i front - både når det drejer sig om pris og service. For efterfølgende at se om målet for kommunikationen bliver nået, skal effekten senere hen måles gennem Google Analytics, hvor der skal kigges på trafik og acqusition. 22

27 ESSENSEN AF RECORDPUSHER 23

28 Med det specifikke mål og forholdet til konkurrenterne på plads, arbejdede gruppen videre med at finde ind til essensen af RecordPusher, hvad virksomheden kan tilbyde og hvad den står inde for. Emotional selling proposition (Jonas) For at skille sig ud fra konkurrenterne er det vigtigt at sende et stærkt budskab, så kunderne vælger dit produkt frem for konkurrentens. Her spiller ESP en vigtig rolle, da det via dette redskab er muligt at skabe en positiv opfattelse af RecordPusher (Rolighed Andersen et al., 2011, s. 372). RecordPushers ESP kommer derfor til at have hovedfokus på dét, at være en del af fællesskabet. Her kunne de mange events som RecordPusher har, komme til at spille en særlig rolle til selve identiteten for RecordPusher. Derudover kommer der også til at være en del fokus på Bo s ekspertise og passion på dette område samt hans unikke service og vejledning, som er at finde i butikken. Dette vil websitet prøve at fremhæve på den bedst mulige måde. Business model canvas (Cecilie) Udfra RecordPushers ESP, blev der kreeret et business model canvas (Bilag 20). Et business model canvas er bygget op af 9 elementer, som alle beskriver forskellige områder af forretningen (Bendtsen, 2012). Dette er benyttet for at skabe overblik over de forretningsrelaterede elementer i RecordPusher, samt samspillet mellem disse. Ved value proposition er der fokus på dét, som skaber værdi hos RecordPushers målgruppe. Herunder findes det store udvalg af brugt, ny og sjælden vinyl, samt tilbehør, og RecordPusher s ESP: ejerens passion og store viden omkring musik, god kundeservice og en stærk fællesskabsfølelse. Den gode kundeservice gør sig både gældende på webshoppen, hvor der er tale om en kort kunderelation såvel som i den fysiske butik, hvor kunderelationen er tæt, med både nye og tilbagevendende kunder. Dette findes under customer relation. Selve customer segment-delen består af tre forskellige segmenter: det primære, udvalgte segment som er den musikinteresserede streaming generation, fra år og de to sekundære segmenter CD generationen, som består af musikinteresserede fra år og Vinyl generationen, som består af musikinteresserede på 50+. Måden hvorpå man når ud til disse segmenter, findes under channels, som består af sociale medier, webshoppen og den fysiske butik. Alt dette bliver muliggjort ved hjælp af de key partners RecordPusher har. Her findes både store og små danske labels, udenlandske leverandører og private samlere. RecordPushers key activities består hovedsageligt af salg online og i den fysiske butik, men samtidig også af afholdelse af events, opdatering af sociale medier, vedligeholdelse af websitet, samt betjening i den tilstødende café. Dette kræver også nogle key resources, som er ekstra medarbejdere ved events, ejerens ekspertise og passion for musik samt den fysiske butik og websitet. RecordPushers cost structure består af husleje, opkøb af plader og udstyr, køb af varer til caféen, facebookannoncer, domæne til hwebsitet og løn. Disse udgifter bliver dækket af punkterne under revenue streams, nemlig salg af plader og udstyr, samt salg i caféen. 24

29 Value proposition canvas (Cecilie) Et value proposition canvas er inddelt i value proposition og customer segment, som derudover er inddelt i hver 3 felter. Canvas et er en businessmodel som er brugt i samspil med business model canvas et, for at sikre, at RecordPushers value proposition også er i overensstemmelse med de ønsker og behov deres kundebase har (Strategyzer, 2017). Den overordnede inddeling i value proposition og customer segment, er trukket ud fra det ovenstående business model canvas, og ved value proposition er der fokus på dét, som skaber værdi hos RecordPushers målgruppe (Bilag 21). Herunder findes RecordPushers ESP, med det store udvalg af brugt, ny og sjælden vinyl, samt tilbehør, og ejerens passion og store viden omkring musik, samt en god kundeservice. Ved customer segment, er der fokus på gruppens primære segment: den musikinteresserede streaming generation, fra år. Baseret på informationer om segmentet fra gruppens spørgeskema (Bilag 17), er der fundet frem til streaming generationens customer jobs, som involverer at finde spændende vinyler og dyrke det fællesskab der ligger i, at samle på LP er. Dog har RecordPusher blandt andet nogle tilsvarende pain relievers, som består af fair priser og en helt unik kvalitets-oplevelse af musikken. Segmentet har dog mangle flere gains end pains, ved at lytte til vinyl, og går især op i at have en stor samling af vinyl og det unikke ved at høre musik på lige netop dén platform. Disse gains bliver matchet af RecordPushers store udvalg, fællesskab og store ekspertise. Udover disse, er der også samtlige gains som bliver opfyldt helt generelt af LP en som medie. Mission, vision og værdier (Simone) Udfra RecordPushers ESP og value proposition, udformede gruppen mission, vision og værdier. Analysen bruges til at klarlægge det endelige mål, samt hvad RecordPusher er og hvordan der arbejdes hen imod dette. Det er her grundlaget skabes og målene for RecordPusher defineres (Rolighed Andersen et al., 2011, s.59-62). MISSIONEN er at skabe en webshop der dyrker fællesskabet i musikken samtidig med, at der holdes fokus på den gode kundeservice og de lave priser. VISIONEN er at skabe en webshop der emmer af passionen for musik og fællesskab der lægger op til at deltage aktivt i udviklingen af musik på vinyl markedet. En af de vigtigste VÆRDIER er den gode kundeservice. RecordPusher viser engagement i sine kunder og yder en ekstra service for at hjælpe til at højne musikinteressen hos kunderne. Man skal som kunde kunne mærke passion for musik og engagementet hos RecordPusher. Deres pains er imidlertid baseret på det mere tidskrævende aspekt og, at det er dyrere end f.eks. streamingtjenester. 25

30 DELKONKLUSION: Gennem denne fase er gruppen blevet klogere på essensen af RecordPusher og hvordan dette bliver matchet med det primære segment. Det unikke ved RecordPusher, er blandt andet dens ESP. ESP et omhandler især ejerens ekspertise og passion, samt fællesskabsfølelsen ved at lytte til vinyl. Dette ESP er videreført i business model canvas et, hvor dét, sammen med RecordPusher s store udvalg af vinyl, tilsammen udgør value proposition et. Dette proposition blev hovedfokusset i det efterfølgende value proposition canvas, som endeligt gav mulighed for at matche det primære segments behov, med RecordPushers tilbud og dermed give et overblik over, at RecordPusher kan dække samtlige behov hos streaming generationen. Med alt dette på plads, blev essensen af RecordPusher stadfæstet i vision, mission og værdier og derefter kunne websitets opbygning påbegyndes. 26

31 WEBSITETS STRUKTUR 27

32 I denne fase påbegyndes websitets struktur og opbygning, igennem resultater af brugertests og research på blandt andet UI patterns, for at sikre et brugervenligt website. Brugertests (Benjamin) Under projektet har det været vigtigt at forholde sig til information architecture (IA). Dette bruges for at få noget struktur på informationen der er tilgængelig på websitet. Til dette bruges forskellige brugertests. I dette forløb har det været relevant at lave en card sorting- og think aloud test. Da card sorting testen var udført, lavede testpersonerne en think aloud test, hvor testdeltagerne for første gang så websitet. Card sorting Card sorting er en brugertest der hjælper med at visualisere, hvordan brugerne kategoriserer de emner, der vises på websitet. Samtidig hjælper testen med at designe og vurdere informationsarkitekturen på et website. Det hjælper med at forstå brugerens forventninger til websitet. Formålet med testen er at finde en måde menupunkterne på websitet kan opbygges (Usability.gov, 2017). Til testen blev der brugt post-it sedler, papir og mobil til at optage testen, samt til at tage billeder af deltagernes endelige resultat. Inden for card sorting findes der to metoder der kan bruges: åben og lukket (Spencer, 2017). Til gruppens test, blev der valgt en åben card sorting, hvor deltagerne fik en bunke sedler med de eksisterende menupunkter på og nogle blanke, så de selv kunne tilføje, slette og samskrive punkter. Inden testen, blev der kort fortalt at card sorting en skulle bruges til en pladeforretning. Deltagerne blev bedt om at gruppére emnerne, så der for dem, var en struktur i menupunkterne (Bilag 22). Baseret på testdeltagernes resultater, lavede gruppen efterfølgende en fælles card sorting test. Ud fra en kombination af disse, blev der til slut lavet en færdig menulinje til det nye website (Bilag 23). Selvom mange af testdeltagerne placerede genre som et menupunkt, valgte gruppen at genrerne skal være et filtreringssystem inde under menupunktet vinyl, for at skabe et mere overskueligt website som er nemt at navigere på. Testpersonerne savnede desuden også en menubar som er til stede på alle siderne, så de altid kan navigere rundt. Dette vil derfor også blive medtaget på det nye website. Gruppen har valgt helt at fjerne menupunktet samt indholdet merchandise da RecordPusher bør fokusere på musikken og vinyl. At sælge ting som en filmplakat kan svække professionalismen og virker malplaceret når man tænker på, hvad RecordPusher sælger og står for. Think aloud test Efter testdeltagerne havde lavet card sorting, lavede de en think aloud test (Bilag 24). I en think aloud test, spørges testdeltagerne til brugen af websitet, da testdeltagerne skal navigere rundt på websitet imens de tænker højt, og fortæller alt de gør samt hvorfor de gør det (Nielsen, J, 2012). Inden testen var der valgt 5 scenarier som testpersoner skulle udføre: 1. Find RecordPushers fysiske adresse 2. Find pladen On hold af XX 3. Find produktet Guns N Roses bar stool 4. Hvor meget skal man bestille for at få gratis fragt i Danmark? 5. Find blog indlægget Let s celebrate the 40 th anniversary punk! 28

33 Testen viser generelt at Recordpusher.com er nem at finde rundt på, når testpersonerne er på forsiden, men når de kommer ind under et menupunkt kan de ikke finde tilbage til forsiden. Alle testdeltagerne havde problemer med at finde blogindlægget Let s celebrate the 40 th anniversary punk! og en af testdeltagerne kunne slet ikke finde det. Ejeren af RecordPusher siger, at bloggen er god for hans SEO (Bilag 9). Dermed konkluderer gruppen, at bloggen fortsat skal være en del af Recordpusher.com, men skal laves på en helt ny måde, på det nye website. På landingpagen ligger alle menupunkterne fremme, og det skaber overskuelighed, men samtidig er der for mange informationer. Det ses blandt andet når testdeltagerne skal begynde at navigere rundt, hvor de har svært ved at finde tingene. Dette ses blandt andet da en af testdeltagerne skulle finde RecordPusher s adresse, og først går ind under about us, før han tilslut finder adressen under contact. Dette illustrerer vigtigheden af strukturen og sammenhængen mellem menupunkterne, og har givet gruppen en forståelse af at der skal sorteres ud i indholdet på websitet. UI patterns (Cecilie) I forbindelse med brugertests og design af brugergrænseflader, benyttes UI patterns som en slags skabelon, med en fast designstruktur til diverse elementer, som kan afhjælpe eventuelle designproblemer (Toxboe and contributors, 2007). For at få inspiration og finde de bedste designløsninger og sammenhæng mellem forskellige elementer på RecordPushers website, har gruppen først og fremmest foretaget en desk research på pinterest, med fokus på især filtreringssystemer, knapper, sociale ikoner og anmeldelser (Bilag 11). Filtreringssystemet er især baseret på diverse filtreringssystemer fra webshops der forhandler tøj, da der her, ligesom hos RecordPusher, er mange forskellige informationer man skal kunne filtrere efter. Knapperne på websitet skal have afrundede hjørner, for ikke at virke for skarpe, mens de sociale ikoner skal være helt runde. Wireframes (Jonas) For at spare en masse arbejde er der benyttet wireframes som er et værktøj der bruges til at udforme skelettet af webshoppen - både til tablet/mobil og desktop (Bilag 25). Hvad der er særlig godt ved dette værktøj er, at hele idéen til websitet bliver visualiseret. Dette er med til at give overblik over, hvilket indhold der skal være tilgængeligt på diverse sider (Stender, n.d.). 29

34 DELKONKLUSION: Ved hjælp af forskellige metoder, har fasen givet gruppen en generel idé om websitets struktur og opbygning. Først og fremmest blev der foretaget to forskellige brugertests: card sorting, for at se hvordan testdeltagerne strukturerer informationen i en menu og think aloud, for at få en idé om, hvad der for brugeren er logisk at have placeret hvor, på websitet. Ud fra disse resultater og gruppens egne resultater blev informationen således struktureret. Efterfølgende blev der researchet på forskellige UI patterns, for at give en sammenhæng mellem designet på websitet, i form af blandt andet afrundede hjørner på knapper, runde sociale ikoner og et overskueligt filtreringssystem. Til slut blev der kreeret wireframes over websitet, for at give et visuelt overblik over den overordnede struktur på websitet. 30

35 WEBSITETS DESIGN 31

36 Efter strukturen og opbygningen på websitet var på plads, begyndte gruppen at arbejde med designet og det visuelle system som skal repræsentere RecordPusher og implementeres i prototypen. Mockup 1 vs. mockup 2 (Simone) Med strukturen af indholdet på websitet på plads, fokuserede gruppen på design. I forbindelse med designet er der lavet et mockup af hele websitet og dets opbygning, for at give et bedre billede af det færdige resultat (Bilag 26). Gruppen havde en snak med ejeren af RecordPusher om mockup et og det tilhørende visuelle system. Her blev der talt om ønsker og ændringer til designet, opbygningen og logoet. Det blev klart, at ejeren ønskede et mere simpelt design end det aktuelle og han kom i den forbindelse med et eksempel på en side han fandt mere efter sine tanker og ønsker (TurntableLab.com, n.d.). Derfor blev et alternativt mockup, samt logo, lavet med et helt nyt design, der lå mere i stil med ejerens ønske (Bilag 27). For at efterprøve om gruppens valgte segment var enige med ejeren, havde gruppen efterfølgende en snak med flere testpersoner i målgruppen, hvor de blev spurgt ind til, hvilket design de fandt bedst og hvorfor (Bilag 28). Kort kan det sammentrækkes, at de adspurgte finder designet simpelt, professionelt og overskueligt. Det simple design tillader kunden at holde fokus på produktet. Dette resulteret i, at mockup nr.2 blev det endelige valg til websitet. 32

37 Det visuelle system (Cecilie) Efter valget af den overordnede stil på mockup et, blev detaljerne af RecordPushers visuelle identitet manifesteret gennem seks forskellige parametre af det visuelle system, som er essentielle for at skabe en rød tråd gennem hele identiteten (Havmoeller. wordpress.com, 2007). De designmæssige valg ved hvert parameter, er truffet ud fra en visuel research, foretaget på pinterest (Bilag 12), og derefter samlet i et moodboard (Bilag 29). Typografi Websitet består af to forskellige typografier: microsoft yi baiti og roboto. Microsoft yi baiti bruges til overskrifter, som desuden altid er skrevet med versaler, for at skabe opmærksomhed. Begge typografier er meget simple og er desuden sans serif, for at gøre dem nemme at læse på en skærm (Kole, 2013). Billeder På websitet vil billederne af produkterne være dominerende og i farve. Dog vil der samtidig være nogle billeder fra den fysiske butik, en GIF af en vinylplade, en videosekvens fra den fysiske butik, holdt i sort/hvid, samt en præsentationsvideo af forretningen med ejeren. Især præsentationsvideoen, baseret på et storyboard (Bilag 30), er valgt for at føre stemningen fra den fysiske butik videre på websitet og med tanke på neuro web design, fungere som storytelling (Fraas, 2012, s.85). Dette vil appellere til pathos hos kunderne og dermed også give dem en følelse af forretningens ESP - nemlig god service og den stærke fællesskabsfølelse. Grafiske elementer I og med der er så mange billeder på websitet, er der ikke brugt nogle grafiske elementer. Dette er valgt, for ikke at gøre websitet for visuelt tung. Desuden skal RecordPushers visuelle identitet være meget simpel både i farver og generelt layout, og der er derfor ikke behov for nogle grafiske elementer. Farver På websitet er der ikke brugt så mange farver, da der i forvejen er mange forskellige billeder. Derfor er der valgt sort (#000000), hvid (#FFFFFF) og orange (#F2B33F). Med en hvid baggrund og sorte overskrifter og brødtekst, fungerer den klare orange farve som call to action. Denne findes derfor blandt andet på tilføj til kurv -knapperne og tilmeld -knappen ved nyhedsbrevet i footeren. Logo RecordPushers logo er et logotype (Landa, 2014, s.378). Dette er valgt, for at videreføre det simple design fra websitet. Logoet er skrevet med microsoft yi baiti i hvid (#FFFFFF) og ordet er delt op, så record står med en lidt tykkere font end pusher, for at skabe mere fokus på essensen af forretningen - nemlig plader. Tone of voice Websitets tone of voice appellerer til logos og ethos hos kunderne, da den er direkte og informativ, samt professionel og samtidig uformel. Derudover er der opfordrende call to action-statements i video-banneret på landingpagen. 33

38 C.R.A.P. (Cecilie) I forbindelse med det visuelle system, skal der også tages højde for C.R.A.P., når dette skal implementeres på websitet. C.R.A.P. består af de 4 designprincipper: contrast, repetition, alignment og proximity, og bruges til at få overblik over sammenhængen i et design og benyttes desuden som et redskab til at vurdere hvilke elementer i designet der virker og ikke virker (Gregory and Mark, 2011). Derfor har gruppen foretaget en overordnet analyse af C.R.A.P.-principperne på websitet. På websitet findes kontrasten blandt andet i overskrifter der bliver skrevet udelukkende med versaler, mens brødteksten er en blanding af versaler og minuskler. Derudover står de orange call to actionknapper også i klar kontrast til de ellers nedtonede farver på websitet. Knapperne står med deres afrundede hjørner desuden i kontrast til de kvadratiske produktbilleder. De nedtonede, sort/hvide farver findes også på billederne fra den fysisk butik, som står i kontrast til farverne på produktbillederne. Udover repetitionen af de to typografier, er der også klar sammenhæng mellem knapperne, som alle har afrundede hjørner, og de runde sociale ikoner. En tydelig sammenhæng ses også mellem det generelle layout af landingpagen og produktsiderne, der alle har linjer af tre eller fire billeder, med en lille tekst under. For at skabe en visuel ro på websitet, er alt indholdet alignet med menulinjens bredde i headeren og der fremgår en tydelig opdeling og sammenhæng mellem afsnittene på siden. 34

39 DELKONKLUSION: Som første skridt på vejen til det endelige design, blev der lavet et visuelt system og et logo baseret på forskellig research, og dernæst et mockup. Efter en snak med RecordPushers ejer og test på målgruppen, blev designet dog lavet om, til et mere simpelt, professionelt og overskueligt ét. For at kunne lave det endelige design af mockup et, blev der endnu engang kigget på parametrene i det visuelle system, samt logoet, og begge ting blev forenklet - både i stil og farve. Desuden blev de fire principper af C.R.A.P. overvejet, når det kom til opstillingen af mockup et. Alt sammen for at sikre et visuelt overskueligt design som harmonerer og appellerer til både målgruppe og RecordPushers ejer. 35

40 SYSTEMETS STRUKTUR 36

41 Inden prototypen påbegyndes, har gruppen benyttet sig af forskellige virkemidler til at klarlægge krav til systemets funktioner. UML - Use case diagram og -scenarier (Benjamin) For at kunne snakke sammen mellem de forskellige mennesker som har med et websitet at gøre, bruges UML. Det er en standard måde at vise konstruktionen af et websitet på. Det viser individuelle komponenter af systemet og hvordan systemet kører (Unified modeling language, 2005). Et use case diagram er en visuel måde at vise interaktionerne mellem aktøren og funktionerne i et system (WhatIs. com, 2015). I use case diagrammet for RecordPusher, er der user og admin som kan interagerer med RecordPusher s website ved at søge, købe varer, tilmelde nyhedsbrev og se sider (BILAG 38). Dertil er der lavet to use case scenarier. Det ene lyder: user kommer ind på RecordPushers website og finder en bestemt vare som er på lager. Der er et basic flow of events - user finder produktet, lægger det i kurven, betaler og modtager derefter en bekræftelse på mail. Alternative flows opstår hvis serveren er nede, hvorefter user får en fejlmelding på skærmen om udsolgt. Det andet use case scenarie er, at user læser et opslag på bloggen. Basic flow et er, at serveren virker, user går ind på websitet og læser det nyeste blogindlæg. Alternative flows opstår hvis serveren er nede, hvorefter user får en fejlmelding på skærmen. Gruppens scenarie er en fiktiv opgave som kunne være virkelighed. Opgaverne er specifikke begivenheder som hjælper gruppen med at forstå brugeren. I gruppens udviklingsfase var det vigtigt at få testet slutbrugerens interaktion med systemet. Ved at lave use case scenarierne kunne der laves et basic flow og et alternativt flow for brugeren af RecordPusher s website. Gennem samtaler med RecordPushers ejer, målgruppens respons ved brugertests og gruppens egne krav til det nye website, er der oprettet en product requirement list. Listen er senere blevet testet af personer fra målgruppen, for at sikre at kravene er opfyldt. Product requirements: Websitet skal være responsivt Instagram skal implementeres på websitet Nyhedsbrev Filtreringssystem Søg -felt Præsentationsvideo af RecordPusher Menulinje på alle sider UML test udføres for at beskrive interaktionen mellem system og bruger og er et redskab til at definere strukturen i et system. Det hjælper udvikleren med at forstå, hvilket syn andre har på et system (Test Case Generation, UML 2017). Gruppen har udført en UML brugertest på tre test deltagere fra det valgte segment, hvori de skulle tjekke hvorvidt product requirements var opfyldt (BILAG 39). Funktionerne på websitet blev testet for at gruppen kunne arbejde videre med eventuelle fejl og mangler. De 7 test kriterier gruppen havde opstillet, kunne test deltagerne udføre. Test kriterierne til systemet er: søge, læg i kurv, filtrér varer og tilmeld nyhedsbrev. Brugertestgruppen udførte en meget simpel test, da der var opstillet to valgmuligheder, virker og virker ikke. Hvorefter det var nemt for gruppen at se, at alle deltagerne havde afkrydset virker, ved samtlige requirements. Testen kunne bruges til at forventningsafstemme gruppen til brugeren, samt teste om der mangler noget. 37

42 SEO (Jonas) For at være så synlig som overhovedet muligt er det vigtigt at benytte sig af SEO (Group, 2003). Jo mere synlig RecordPusher er, jo større er chancen for at få flere kunder. Eftersom der er blevet fravalgt at bruge GoogleAdWords, er det derfor endnu mere vigtigt med SEO for at opnå en høj ranking ved Google når der foretages en organic search. For at opnå den bedst mulige ranking er derfor valgt nogle specifikke nøgleord, som har til formål at kommunikere budskabet for RecordPusher. Disse nøgleord skal bruges blandt teksterne der bliver skrevet på websiden. Derudover er det også vigtigt at overveje, hvad der bliver skrevet i selve koden som fx title- og alt-tags, da de er med til at bestemme rankingen. Derfor indeholder gruppens tags ofte følgende nøgleord: Vinyl, events, blog og udstyr. Da der er valgt at bruge pluginnet Yoast, er der kun mulighed for at placere et fokussøgeord, selvom det havde været mere optimalt at bruge flere. Yoast giver mulighed for at justere SEO en uden at have erfaring med kodning. Dette er med til at gøre det nemmere for klienten, hvis der engang skal ændres i SEO en. Det er muligt at tilføje flere fokussøgeord vha. Yoast, men det kræves en premium version, som klienten kan købe, hvis dette ønskes. Med SEO på plads, var næste skridt på vejen til at kode websitet et E/R diagram. E/R diagram (Cecilie) Inden der kreeres en database, laves der et E/R diagram, som giver et overblik over hvilke entiteter der er, og hvilken relation de forskellige har til hinanden (Iftek.dk n.d.). I forbindelse med oprettelsen af databasen til RecordPusher, er der ligeledes blevet benyttet et E/R diagram, til at visualisere opbygningen. Da websitet er lavet ved hjælp af et wordpresstema og plug-in et: Woocommerce, er entiteterne pre-definerede, og diagrammet er derfor lavet over de tre overordnede entiteter: kunder, produkter og ansatte (BILAG 40). Diagrammet viser de nødvendige attributter fra alle tre, samt den unikke primærnøgle, som på diagrammet er vist, ved at være understreget. Mellem entiteterne: ansatte og produkter, er kardinaliteten én til mange, mens der mellem entiteterne: kunder og produkter, er et mange til mange forhold. Den optimale kardinalitet er én til én, og for at opnå dette, er der oprettet yderligere én entitet i mellem, altså lavet en 1. normalform. Mellem kunder og produkter er der for eksempel lavet en entitet kaldet ordre, hvori datoen for ordren og lager-statussen findes. For at ordren skal kunne gennemføres, skal der bruges oplysninger om både produkt og kunde. Disse bliver trukket ind i entiteten gennem primærnøglerne, som dermed bliver fremmednøgler i den nye entitet. Dermed undgår man blandt andet redundant data, og kardinaliteten mellem entiteterne ændres. 38

43 DELKONKLUSION: Som det sidste led inden gruppen kunne kreere prototypen på websitet, blev der lagt vægt på systemets funktioner. Disse blev illustreret gennem et use case diagram og to use case scenarier. Derudover blev der lagt vægt på SEO, i form af blandt andet nøgleordene: vinyl, events, blog og udstyr samt vigtigheden i at skrive relevant info i title-, meta- og alt-tags. Med dette på plads, blev der oprettet et E/R diagram, som illustrerer relationen mellem de tre vigtigste entiteter for prototypens database, nemlig: kunder, varer og ansatte. Efterfølgende var gruppen klar til at lave prototypen. 39

44 PROTOTYPE 40

45 Wordpress (Jonas) Som det digitale produkt er der blevet valgt at levere en WordPress-shop til RecordPusher. WordPress-shoppen kommer til at fungere som en erstatning for den tidligere webshop, som ejeren så kan lave ændringer på som han lyster. Ved at vælge CMS (Content Management System) systemet WordPress, er det dermed blevet gjort ekstra nemt for RecordPusher, hvis der skal ske senere ændringer, da det er forholdsvis lige til at ændre små ting som f.eks. farver på en knap (Nemprogrammering.dk D, n.d.). En af fordelene ved at vælge et CMS-system er, at designet og indholdet er adskilt, så hvis ejeren engang skulle få lyst til et nyt design, så behøver han ikke at bekymre sig om indholdet, hvis der skal skiftes design på webshoppen (Wordpressserver, n.d.). Dermed er det også muligt at bevare det moderne udseende, da den nemt kan ændres, så designet ikke bliver forældet. Andre fordele ved et CMS-system, er at flere kan gå ind og ændre i indholdet på webshoppen uden at have programmeringsevner, da indholdet er adskilt fra den del. Derudover så gemmes alt data i en database, som kan være positivt afhængig af, hvad der foretrækkes. Nogle negative aspekter kunne være sikkerheden omkring WordPress, da det er blevet misbrugt af nogle hackere de seneste par år (Glasscanopy, 2014). Det er et af de negative aspekter ved at være open-source som WordPress. Til gengæld så ligger det også tilgængeligt for mange andre brugere som gør at sikkerheden blot bliver endnu bedre, da der er mange som hjælper til, med at gøre WordPress bedre og mere sikkert. Wordpress bruger blandt andet Bootstrap som er et framework til udvikling af websider (Getbootstrap, 2017). Bootstrap gør det blandt andet nemt at lave responsivt design. Dermed er der ikke behov for at lægge lige så mange timer i, at gøre websiden responsiv, da Bootstrap gør det for dig. For at få det til at se ud som mockupen, er der behov for at lave, eller finde, et tema. Et tema er det design som den ønskede webside får, dvs. sidelayout, font, farver, knapper osv (Nemprogrammering.dk D, n.d.). I dette tilfælde er der valgt ikke at lave eget tema, men at finde et allerede eksisterende tema. Tanken var dog i første omgang at lave eget tema, men efter lidt research, blev der fundet et tema som mindede meget om mockupen, derfor blev der valgt at lave et child theme i stedet for. Der er derfor tale om, at der ikke er blevet lavet et tema fra gruppens side af. Webshoppen er lavet vha. det der kaldes for et child theme (Wordpress.org, n.d.), dvs. hvor der bruges et tredjeparts tema, hvorefter der så laves tilpasninger, så det passer til RecordPusher og gruppens ønsker. Ved at bruge et child theme elimineres risikoen for at ændringerne bliver overruled af andet kode, når WordPress eller temaet bliver opdateret. Dette er lavet ved at lave en ekstra folder inde under themes, som i dette tilfælde hedder shop-isle-child. Den har dette navn, da det er det oprindelige temas navn er Shop-isle. I denne mappe bliver alle de filer, som der er blevet ændret i placeret, og dermed undgår man at miste noget til opdateringer. Plugins (Jonas) Blandt de plugins der er valgt, er Woocommerce blandt en af de mest interessante. Woocommerce giver mulighed for at lave en webshop uden det store besvær. Det er nemt og enkelt for ejeren at bruge, da erfaring med kodning ikke er nødvendig. Ved at bruge Woocommerce er der også blevet sørget for at bruge nogle af de moderne værktøjer som der er til rådighed i denne tid. Før i tiden skulle webshoppen kodes fra bunden af, men i dag er der flere værktøjer, som kan gøre det, uden den større kendskab til kodning. 41

46 Dermed sørges der også for, at RecordPusher nemt og trygt kan lave ændringer i produkterne f.eks uden at skulle have en til at gøre det for ham. Derudover er der brugt Yoast, som er et plugin der hjælper med at forbedre SEO en på websiden. Ved at bruge Yoast har klienten mulighed for selv at gå ind og tilpasse SEO en, hvis der ønskes ændringer senere hen. Sammen med Yoast er Google Analytics også sat op, så vores klient også kan få gavn af det værktøj. Vha. Google Analytics er det muligt at undersøge og evt. optimere en given webside. Derved kan der ses, hvordan det står til for ens websiden ved at kigge på trafikken til websiden, og dermed opnå evt. opnå mere salg. Hvad Analytics bl.a. kan gøre er at give informationer omkring, hvilken målgruppe der besøger websiden og, hvordan de opfører sig. Fx kommer størstedelen fra de sociale medier? Eller er der bestemt et sted, hvor mange besøgende hopper fra? Dette kan værktøjet bl.a. hjælpe med at finde ud af. Derfor er Google Analytics et must have nu om dage, da det giver mange oplysninger og kan besvare mange spørgsmål, hvis der fx sker pludselig nedgang i antal besøgende. Databaser (Simone) En database er en organiseret samling af data, der bruges til at skabe struktur. Dataen kan være kundeoplysninger og ordrer som er tilfældet for dette projekt, hvor der er tale om en database for en webshop (Digitalbevaring, 2011). Her bruges der en relationel database, hvor informationen er opdelt i tabeller, kaldet entiteter, som relaterer til hinanden. Entiteterne består af kolonner samt rækker, der også kaldes en record eller en tuple. En række indeholder alle oplysningerne om én bestemt entitet som f.eks. en kunde. Hver entitet, har en primærnøgle. Denne skaber en unik identifikation for hver enkelt række, som f.eks. vil en kunde kunne identificeres på enten en eller et login når de handler på en webshop. En fremmednøgle er et felt i en entitet, der peger på primærnøglen i en anden entitet og på den måde skaber relationen mellem de to entiteter. Et eksempel på dette er, at en entitet der indeholder kundeoplysninger og en anden indeholder produktoplysninger. Disse to har begge en primærnøgle i form af et kunde ID og et varenr., og de kan sammen optræde i en entitet, hvor de så vil fremstå som fremmednøgler, der peger på hver deres primærnøgle. Man kan på denne måde normalisere databasen og undgå et mange til mange (N:M) forhold, der ikke kan implementeres i et databasesystem, og i stedet få 2 en til mange (1:N) forhold. Dette er nødvendigt at gøre da en kunde kan købe flere produkter og et produkt kan købes af flere personer, derfor er det et mange til mange forhold. CRUD (Simone) CRUD står for create, read, update og delete, og beskriver de mest basale forespørgsler man kan sende til en database (Techopedia, n.d). Et eksempel på dette er en produktdatabase til en webshop - Her tilføjes (create) nye produktdetaljer, der tilgås (read) eksisterende produkters detaljer, der modificeres (update) eksisterende data for produkterne og der slettes (delete) produktdetaljer, hvis et produkt er udgået. Kommandoerne tilsvarende disse funktioner i SQL er INSERT, SELECT, UPDATE og DELETE. INSERT tilføjer nye data, SELECT henter eksisterende data, UPDATE modificerer eksisterende data og DELETE fjerner entiteter eller data. SQL står for Structured Query Language og er sproget der bruges til at styre relationelle databaser (SQL (Structured Query Language), 2016). 42

47 Eksemplerne nedenfor viser, hvad der sker, hvis en kunde, der er logget ind på webshoppen, interagerer med systemet. På gruppens website er det ikke muligt at logge ind ved køb på webshoppen da dette ikke var en del af requirement listen og det derfor er blevet nedprioriteret i processen. Det er dog hensigtsmæssigt at få integreret da dette gør købsprocessen lettere for tilbagevendende kunder. Eksemplet bruges dog alligevel da det giver en god forståelse for CRUD. CREATE - Et eksempel på dette ville se således ud, hvis man lægger en vare i kurven: mysql_query( INSERT INTO kurv(kunde_id, vare_nr) VALUES( $kunde_id, $vare_nr ); ) Mysql_query funktionen udfører INSERT INTO forespørgslen i MySQL databasen. For at sikre at den valgte vare, i dette tilfælde en vinylplade bliver tilknyttet den rigtige bruger, indsættes kunde_id med vare_nr i kurven. $kunde_id og $vare_nr i VALUES sikrer, at det er den bruger der er logget ind som tilknyttes den vinylplade som lige er blevet udvalgt. READ - Eksemplet her viser hvordan kundens navn, adresse og login oplysninger hentes: $row = mysql_query( SELECT navn, adresse, brugernavn, adgangskode FROM kunde WHERE kunde_id=.$_session[ kunde_id ]. ; ); Mysql_query funktionen udfører SELECT forespørgslen i MySQL databasen. Brugerens navn, adresse og login oplysninger hentes fra tabellen kunder. Dette tilknyttes den kunde_id hvis bruger er logget på og har en session. UPDATE - Får en kunde ny adresse skal dette opdateres i kunde tabellen: mysql_query( UPDATE kunde SET adresse = $nyadresse WHERE kunde_id=.$_session[ kunde_id ]. ; ); Mysql_query funktionen udfører UPDATE forespørgslen i MySQL databasen. Kunde tabellen opdateres og adresse tuplen bliver udskiftet med en ny adresse ($nyadresse) som tilhører brugeren der er logget på og har en session. DELETE - Har kunden fortrudt en vare i kurven slettes denne: mysql_query ( DELETE FROM kurv WHERE vare_nr= $vare_nr AND kunde_id= $kunde_id LIMIT 1; ); Mysql_query funktionen udfører DELETE forespørgslen i MySQL databasen. Vinylpladen, som den første kunde har valgt, slettes fra kurven og varen slettes fra tabellen kurv. MySQL er en databaseserver, også kaldet et relational management system (RDBMS), der er baseret på SQL (nemprogrammering. dk A, 2011). Ved hjælp af dette system er det muligt at gemme og opbevare datainput fra et website og senere hen trække dem ud og anvende på websitet når der er brug for dem. Alle forespørgsler der laves til databasen går igennem databaseserveren. PHP (Cecilie) PHP er en forkortelse for hypertext preprocessor og er et scripting-sprog. PHP minder umiddelbart meget om JavaScript 43

48 i opbygningen, men hvor JavaScript køres direkte på klienten, køres PHP på serveren, hvorefter der bliver sendt HTML tilbage til klienten (nemprogrammering.dk B, 2011). Denne egenskab gør PHP yderst brugbar ved f.eks. login-systemer, formularer og mange andre interaktive, databasedrevede webapplikationer. Derudover kan PHP også mindske mængden af HTML der skal skrives, når det f.eks. kommer til en header, som skal være til stede på alle sider af et website. Skrives den i PHP, skal man kun lave eventuelle ændringer ét sted fremfor mange, ved bare at include headeren i sine HTML-dokumenter. Som et eksempel på gruppens brug af PHP, kan følgende eksempel inddrages: <?php function my_theme_enqueue_styles() { $parent_style = parent-style ; wp_enqueue_style( $parent_style, get_ template_directory_uri(). /style.css ); } wp_enqueue_style( child-style, ); get_stylesheet_directory_uri(). /style.css, array( $parent_style ), wp_get_theme()->get( Version ) add_action( wp_enqueue_scripts, my_theme_ enqueue_styles );?> Eksemplet findes i mappen tilhørende child theme et, i functions.php og illustrerer hvordan der via PHP bliver kaldt på CSS en fra det oprindelige tema, til gruppens oprettede child theme, og sørget for at dette bliver indlæst først. Dette skal indlæses først, for at sikre, at det er child-themet s CSS der bliver vist, med de ændringer gruppen har lavet. <?php indikerer som det første, at der er tale om PHP, og bliver afsluttet til slut med?>. Eksemplet starter med en function. I og med både parent- og child-theme et indeholder CSS, skal begge disse inkluderes, hvilket bliver gjort ved hjælp af de eksisterende enqueuefunktioner. Functionen inkluderer blandt andet variablen: $parent_style = parent-style, som peger på parent theme et, hvorefter det første wp_enqueue_style indeholder både denne variable og stien dertil. Det næste wp_ enqueue_style indeholder child-style, og stien til stylesheet et for child-theme et. Herinde findes der også et array som indeholder variablen $parent_style og wp_get_theme()- >get( Version ), som handler om versionen af det brugte tema. Dernæst bliver funktionen afsluttet og det hele bliver kaldt via add_ action( wp_enqueue_scripts, my_theme_ enqueue_styles );. JavaScript og jquery (Benjamin) jquery er et open source bibliotek af javascript elementer som alle kan bruge. Gruppen har brugt flere elementer fra jquery for at gøre websitet mere brugervenligt og harmonisk. Til at gøre et website interaktivt og dynamisk bruges jquery. Brugerens input ændre indholdet på ens websitet (Nemprogrammering.dk C, 2011). JavaScript er et meget brugt scripting sprog der bliver læst og udført af browseren. Til at gøre javascript nemmere at bruge er jquery kommet til. I gruppens wordpress child-theme bruges Javascript. Et eksempel kunne være to top knappen nede i bunden af siden. Til totop knappen, bruges der JavaScript til når brugeren er i bunden kan trykke på og en glidende bevægelse går op i toppen af siden. $( a[href= #totop ] ).click(function() { animate({ scrolltop: 0 }, slow ); }); $( html, body ). return false; Href en er sat til at linke til totop på websitet. Der skrives Click for at brugeren kan klikke på knappen. Funktionen udføre en begivenhed hver gang den udløses. HTML og body er for at funktionen både virker i firefox, internet explorer og browsere i webkit class som safari og chrome. ScrollTop gør at knappen får siden til at gå op til 0. Tilsidst har den en slow for at den gør bevægelsen glidende og langsomt. 44

49 REFLEKSIONER: I forbindelse med projektet er den agile metode scrum blevet brugt, for at kunne bevare overblikket under hele forløbet. Det kan dog konkluderes, at fordi forløbet har været så langt, har det været en udfordring at styre projektet og holde overblik hele vejen igennem. Dette har resulteret i, at scrum boardet ikke er blevet benyttet til fulde eller er blevet inddelt i de sprints der først var tiltænkt det. Hvad det har været brugt til er en huskeliste, der på sin vis har givet et overblik over det der har været vigtigt at huske, samt hvilke opgaver det enkelte gruppemedlem skal lave, er i gang med, og er færdig med. En anden ting der især skal holdes fokus på i fremtidige projekter er jævnligt at være i kontakt med klienten såvel som målgruppen, omkring behov og ønsker til design og udtryk. Gruppen blev alt for langt henne i designprocessen klar over, at ønskerne til designets stil og udtryk ikke var det samme som først antaget og man blev derfor nødt til at re-designe for at skabe et design der tiltalte både klient og målgruppe mere. Hvad der kan konkluderes ud fra dette er, at det er af stor vigtighed jævnligt at være i kontakt med klient såvel som målgruppen for hele tiden at være sikker på at designet er på rette vej og på den måde tiltaler begge parter. 45

50 KONKLUSION

51 KONKLUSION: Ved hjælp af forskellige kommunikationsværktøjer fandt gruppen frem til, hvilke segmenter der kunne være interessante at målrette kommunikationen til. Gennem en SMUK-model viste det sig, at det mest attraktive segment er streaming generationen (16-29 år). Dette segment har i forvejen en stigende interesse for vinyl, samtidig med at segmentet er nemt at ramme gennem koncentreret markedsføring, da segmentet er meget tilstede på sociale medier. Netop vigtigheden ved brugen af især Facebook og Instagram, blev klarlagt gennem scenarie, storyboard og customer journey. Indholdet som RecordPusher skal poste på de sociale medier, skal især udtrykke virksomhedens ESP. ESP et blev tydeligt gennem gruppens brug af business model canvas, og omhandler ejerens passion og ekspertise, samt fællesskabet der er i at lytte til vinyl. Ved hjælp af value proposition canvas et blev det klart, at RecordPusher har hvad der skal til, for at matche segmentets ønsker og behov, og er placeret højt i forhold til sine konkurrenter, når der måles på pris og service. Dette gjorde blandt andet, at det specifikke mål, om at recordpusher.com får 100 nye kunder, i gennemsnit, pr. måned blev realistisk. Med målet defineret, blev websitets struktur, opbygning og brugervenlighed defineret, gennem blandt andet brugertests. Både en think aloud- og en cardsorting-test blev udført af personer fra segmentet på RecordPushers eksiterende website. Sammen med research af UI patterns, blev vigtigheden af blandt andet en menu der går igen på alle siderne på websitet og generel struktur på indholdet slået fast. Dernæst havde gruppen fokus på de seks parametre i det visuelle system baseret på forskellig research, som efterfølgende blev implementeret i et mockup. Dette blev diskuteret med ejeren af RecordPusher, som ønskede at gå i en anden retning. Derpå blev der lavet et nyt visuelt system og mockup med fokus på C.R.A.P., og både det gamle og nye mockup blev testet på forskellige personer fra segmentet. Segmentet fandt det nye design mere simpelt, professionelt, overskueligt og helt generelt mere tiltalende, med sine sort/ hvide og orange farver og brug af neuro web design i form af blandt andet storytelling i videoer. Tilslut blev prototypen kreeret ved hjælp af HTML5, CSS, Javascript/jQuery og PHP, i form af et child theme, med en eksisterende database i wordpress. 47

52 REFERENCELISTE 48

53 Admin (2013). Scenarios and Storyboards. Available at: (Accessed: 4. april 2017) Alex Denning (2016) What is WooCommerce? Getting started with the best free ecommerce plugin. Available at: (Accessed 30 May 2017) Arkitekturguiden (2015) Use cases Available at: (Accessed: 24 maj 2017) Bendtsen, J. (2012) Business model canvas og Alexander Osterwalder. Available at: (Accessed: 13. marts 2017) Businessdictionary.com (2016a) What is field research? Definition and meaning Available at: (Accessed: 27. marts 2017) Businessdictionary.com (2016b) What is desk research? Definition and meaning Available at: (Accessed: 27.marts 2017) Buskbjerg, M. (2016) SMART modellen til målsætning. Available at: (Accessed: 4. april 2017) Christian (2012) Hvad er et plugin? Available at: (Accessed 30 May 2017) Concept-idk (2017) Hvad er SEO optimering / Søgemaskineoptimering? Available at: (Accessed: 21. marts 2017) Digitalbevaring.dk (2011) Databaser Available at: (Accessed: 22. maj 2017) Fraas, S. (2012) Rich media - er det bare flødeskum? Available at: (Accessed: 24. maj 2017) Glasscanopy. (2014) Website Development: The Pros and Cons of Using a CMS. Available at: (Accessed 30 May 2017) Getbootstrap. (2017) Home. Available at: (Accessed 30 May 2017). Gregory and Mark (2011) It s all C.R.A.P.: Four principles of design. Available at: (Accessed: 5. april 2017) Gremillion, Ben (N.D.). A Hands-On Guide to Mobile-First Design. Studio by UXPin. Available at: (Accessed 5. april 2017) Havmoeller.wordpress.com (2007) Hvad er visuel identitet? Available at: (Accessed: 29. marts 2017) HHXnoter (2013) Positionering og differentiering. Available at: (Accessed: 29. marts 2017) 49

54 Humbrecht, R. (2016) What s a Website Mockup? - professional graphic & web design. Available at: blog/post/whats-a-website-mockup/ (Accessed: 2. april 2017) Iftek.dk (n.d.) Database Modellering - Informationsteknologi. Available at: (Accessed: 22. maj 2017) IVAEKST.dk (2015) DERFOR SKAL DU BRUGE GOOGLE ANALYTICS. Available at: (Accessed 31 May 2017) Ivaekstdk (2011) FIND DINE UNIKKE FORDELE (USP) POSITIONERING - DINE KONKURRENCEMÆSSIGE FORDELE. Available at: (Accessed: 21. marts 2017) jquery.org (n.d.) What is jquery? Available at: Jquery.com, (Accessed: 24. maj 2017) Kole, S. (2013) Serif vs. Sans: the final battle I Webdesigner depot. Available at: (Accessed: 29. marts 2017) Kristiansen, C. (2013) Available at: (Accessed: 20. marts 2017) Landa, R. (2014) Graphic design solutions. 5th edn. United States: Wadsworth Publishing Co. Larson, E. and Larson, R. (n.d.) How to create a clear project plan. Available at: (Accessed: 27. marts 2017) Laursen, J. (2016) Content Marketing i Danmark Available at: (Accessed: 24. maj 2017) Mannaz (n.d.) Risikoanalyse - Mannaz - Kurser og uddannelser. Available at: (Accessed: 27. marts 2017) Marek, L. (2016) Kampagner: Sådan måler du effekten, 26 October. Available at: (Accessed: 29. marts 2017) Mediernes udvikling i Danmark (2017) Brug af sociale medier 2016 n.d. Available at: (Accessed 5. april 2017) Nem programmering A (2011) Hvad er MySQL? Available at: (Accessed 23. maj 2017) Nem programmering B (2011) Hvad er PHP? Available at: (Accessed 23. maj 2017) 50

55 Nemprogrammering.dk C (2011) Hvad er javascript? Available at: (Accessed: 27. marts 2017) Nemprogrammering.dk D (2011) Hvad er WordPress? Available from: (Accessed: 30. maj 2017) Nielsen, J(2012) Thinking Aloud: The 1# Usability tool Available at: (Accessed: 24. maj 2017) Nordby, G. G. (2014) Rekordhøjt salg af vinyl. Available at: (Accessed: 28 Maj 2017) Offsey, S. (2016). How to Build a Customer Journey Map that Works CustomerThink. Available at: (Accessed 4. marts 2017) Optimal Workshop(2015) Getting Started With Card Sorting. Available at: (Accessed: 24. maj 2017) Podeswa, H. (2009) UML for the IT business analyst: A practical guide to object-oriented requirements gathering. 2nd edn. Course Technology/Cengage Learning Rolighed Andersen, F., Warming Jensen, B., Jepsen, K., Risgaard Olsen, M. and Schmalz, P. (2011) International markedsføring. 4.udgave edn. TROJKA ScrumMaster.Dk (2016) Hvorfor bruge Scrum? Available at: (Accessed: 23. maj 2017) SEGMENTERING OG MÅLGRUPPE-VALG. (n.d.). 1st ed. E-bog Available at: (13. marts 2017) Spencer, Donna (2017). Card Sorting: A Definitive Guide. Boxes and Arrows. Available at: (Accessed: 29. Maj 2017) Sirkin, J (2016) SQL (Structured Query Language) Available at: (Accessed: 23. maj 2017) Stender, B. (n.d.) Hvad er en wireframe og hvorfor skal du bruge det? Aktuelt. Available at: (Accessed: 5. april 2017) Strategyzer (2017) Value Proposition Canvas. Available at: (Accessed: 13. marts 2017) Techopedia (n.d.) What is Create, Retrieve, Update and Delete (CRUD) Available at: (Accessed: 23. maj 2017) Test Case Generation, UML, And Eclipse (2017) Available at: (Accessed: 26. maj 2017) Tokyo web designs (2008) Book review- Neuro web design: what makes them click? Available at: (Accessed 24. maj 2017) 51

56 Toxboe, A. and contributors (2007) UI-Patterns.Com. Available at: (Accessed: 4. marts 2017) TurntableLab.com (n.d) TurntableLab. Available at: (Accessed: 19. maj 2017) UML 2 Use Case Diagrams: An Agile Introduction (n.d) Available at: (Accessed: 29. marts 2017) Unified modeling language (2005) Available at: (Accessed: 20. maj 2017) University of Waterloo (2013) Making group contracts. Available at: (Accessed: 27. marts 2017) Usability.gov (n.d.) Card sorting. Available at: (Accessed: 29. marts 2017) Wordpressserver (n.d.) Hvad er WordPress. Available at: (Accessed 30 May 2017) Wordpress.org (n.d.) Child Themes. Available at: (Accessed 30 May 2017) 52

57 BILAG 53

58 Bilag 1: Projektplan Projektplan Projekttitel RecordPusher Projektoverblik 1. Projekt formål (målsætning) og omfang (hvad er formålet med projekt, og hvad dækker projektet) Formålet med projektet er, at lave en ny visuel identitet til RecordPusher, som skaber og fastholder kunder. Derfor er det vigtigt at holde fokus på en rød tråd mellem målgruppen og design, samt brugervenlighed på websitet. 2. Leverancer (hvad skal der leveres/output) En video der promoverer RecordPusher En rapport Hjemmeside med webshop En designmanual 3. Succeskriterier (hvad vil gøre projektet til en succes, både projekt og gruppe arbejdsmæssig, hvilke kriterier skal imødekommes) Gruppens succeskriterie er, at vi igennem hele projektet har et godt internt samarbejde baseret på god kommunikation, tillid og gensidig respekt. Vi arbejder sammen som ét team og lægger alle sammen hårdt arbejde i projektet, samt hjælper og supplerer hinanden med de forskellige kompetencer vi hver især har. Succeskriteriet for projektet er, at vi får lavet et godt produkt som vi selv er stolte af og som ligger over middel på karakterskalaen, men som samtidig imødekommer klientens ønsker. Projektorganisation 1. Ressourcer (hvilke ressourcer er tilgængelig, fysiske, finansielle, menneskelige, immaterielle [som lovgivning, patent] (de ressourcer som er relevante i projektet) -Individuelle færdigheder inden for Adobe pakken, HTML5, CSS3, JavaScript & PHP. -Lokaler, computere, kamera. -Gruppens netværk, undervisere, klient. -Materialer fra RecordPusher 2. Tidsplan med milepæle (trello el.lign) (udførlig tidsplan, herunder hvad der skal være færdigt ved sprints afslutningerne som milepæle) Se SCRUM board på Trello: 3. Organisering (hvordan er projektet organiseret, brug gerne SCRUM terminologi) Projektejer: RecordPusher SCRUM master: Simone Didriksen Projektleder: Cecilie Stark Projektdeltagere: Simone Didriksen, Cecilie Stark, Jonas Thomsen, Benjamin Jørgensen. Ansvarsfordeling: Noteret i gruppekontrakten. 54

59 Bilag 2: Stakeholder map 55

60 Bilag 3: Gruppekontrakt 56

61 57

62 58

63 Bilag 4: Risikoanalyse 59

64 Bilag 5: Scrumboard 60

65 Bilag 6: Spørgeskema udsendt gennem RecordPusher Gennem RecordPushers egen Facebook side blev et spørgeskema udsendt. Dette handlede om, hvorfor man har en interesse for vinyl, køb af vinyl og hvordan man har fået interessen. Der kom 611 besvarelser og det fulde spørgeskema kan ses her: 61

66 Bilag 7: Spørgeskema udsendt i den fysiske butik Der kom omkring 15 besvarelser - dette er et udpluk, der viser de generelle fællestræk. 62

67 Bilag 8: korrespondance med Bo 63

68 Bilag 9: Dybdegående Interview med Bo Gruppen var nede i butikken og stille flere dybdegående spørgsmål til Bo for at få en bedre forståelse for konceptet og hans eget syn på det. Dette blev optaget på en mobil til senere brug. Hele interviewet kan høres her: 64

69 Bilag 10: korrespondance med IFPI 65

70 Bilag 11: UI Patterns Her ses et udpluk af boardet for UI patterns research. Det fulde boardet kan ses her: 66

71 Bilag 12: Visual research Her ses et udpluk af den visuelle research, det fulde board kan ses her: 67

72 Bilag 13: Musikselskaber s.26 Her ses den side IFPI henviste til, den fulde udgivelse kan findes her: 68

73 Bilag 14: Segmenteringsmatrix 69

74 Bilag 15: SMUK model 70

75 Bilag 16: Persona 71

76 Bilag 17: Opsamling på svar fra det unge segment Dette spørgeskema er udtrækket af alle de besvarelser gruppen har modtaget, fra spørgeskemaet udsendt på RecordPushers egen Facebook side, i aldersgruppen fra år. Samlet er der 188 besvarelser og det fulde spørgeskema kan ses her: 72

77 Bilag 18: Costumer journey 73

78 Bilag 19: Gennemsnit af nye kunder i 2016 Disse oplysninger er hentet fra Bo s Shopify konto, der henter data fra, og styrer, =817 nye kunder = 68 nye kunder pr. mdr. webshoppen

79 Bilag 20: Business model canvas 75

80 Bilag 21: Value proposition canvas 76

81 Bilag 22: Card sorting test Billederne af de resterende testpersoners cart sortings er vist på næste side. AnneSofie 77

82 Sandra Stine Diego Kristian 78

83 Bilag 23: Gruppens samlede Cartsorting 79

84 Bilag 24: Think Aloud test Her ses et overblik over Think Aloud testen og de samlede data. De enkelte testpersonernes think aloud kan ses via følgende links: Stine Henrik Kristian Annasofie Diego Sandra 80

85 Bilag 25: Wireframes 81

86 82

87 Bilag 26: Mockup 1 Via linket ses den fulde mockup for det første udkast til designet der blev lavet: 83

88 Bilag 27: Mockup 2 Via linket ses den fulde mockup for det alternative design der blev lavet: 84

89 Bilag 28: Mockup 1 vs. Mockup 2 Spørgeskema Efter samtalen med Bo fandt gruppen frem til, at designet skulle en anden vej end det første udkast, derfor blev et alternativt design lavet. Gruppen opsøgte herefter målgruppen og bad dem se på de to mockups og derefter udfylde spørgeskemaet omkring dem. Det gav 27 besvarelser i alt Spørgeskemaet er simpelt og uden store uddybninger da gruppen var tilstede tl at besvare evt. spørgsmål eller tvivl ved alle testpersonernes besvarelser. Det fulde skema kan ses her: 85

90 Bilag 29: Moodboard 86

91 Bilag 30: Storyboard til video 87

92 Bilag 31: Use case diagram 88

93 Bilag 32: Use case Scenarier Use Case Scenarie 1 Køb et bestemt produkt på RecordPushers website (kunden ved hvad de leder efter) Primary actors: Kunde Admin (En der opdaterer hjemmesiden, samt har styr på lager/sender afsted) Preconditions: Serveren virker Varen er på lager Basic flow of events: 1. Kunden går ind på websitet 2. Kunden søger og finder produktet 3. Kunden vælger antal og lægger i kurv 4. Kunden går ind i kurven 5. Kunden går til betaling og udfylder oplysninger 6. Kunden gennemfører købet 7. Kunden modtager mail med bekræftelse Use Case Scenarie 2 Læs blog Primary actors: Læser Admin (En der opdaterer blog) Preconditions: Serveren virker Basic flow of events: 1. Læseren går ind på websitet 2. Læseren går ind på bloggen 3. Læseren læser det nyeste blogindlæg Alternative flows 1a. Serveren er nede 1a1. Kunden får en fejlmelding på skærmen. ( 3a. websitet er ikke opdateret) Alternative flows 1a. Serveren er nede 1a1. Kunden får en fejlmelding på skærmen. 2a. Produktet er udsolgt 2a1. Kunden får en besked om Udsolgt 89

94 Bilag 33: UML test 90

95 Bilag 34: E/R Diagram 91