RAPPORT. John Bull Pub Aalborg. Afsluttende projekt Multimediedesign 4. semester 2013 Iben Krogh, Line Jacobsen & Jonas E. Hansen

Transkript

1 John Bull Pub Aalborg Afsluttende projekt Multimediedesign 4. semester 2013 Iben Krogh, Line Jacobsen & Jonas E. Hansen

2 Iben Krogh Line Jacobsen Jonas E. Hansen

3 INDHOLD Side 9 Indledning Side 14 Undersøgelse Side 18 Foranalyse Side 9 Projektets sammensætning Side 14 Design Side 18 Interessentanalyse Side 9 Virksomhedsprofil Side 15 Realisering Side 20 Markedsanalyse Side 9 1. møde med John Bull Side 16 Vandfald Side 20 Bar industrien Side 10 Projektbeskrivelse Side 20 Omverdensanalyse Side 11 Problemformulering Side 21 Den uafhængige verden Side 11 Projektstyring Side 21 PESTLE Side 12 Risikoanalyse Side 23 Den afhængige verden Side 13 Metode HOME Side 24 Virksomheden Side 14 Foranalyse Side 24 SWOT

4 INDHOLD Side 26 Porters Five Forces Side 36 Undersøgelse Side 43 Kommunikation Side 28 Konkurrentanalyse Side 36 Tænke-højt-test på Side 43 Kommunikationsmål gammel hjemmeside Side 29 Konklusion af Side 43 Kommunikationsplanlægning markedsanalyse Side 37 Idégenerering Side 44 Lasswell Side 29 Målgruppen Side 38 Medievalg Side 45 Kommunikationsmiljøet Side 30 Minerva Side 38 Hjemmeside Side 46 Research Analyse og Side 31 ConZoom Side 38 App Designbrief Side møde med John Bull Side 39 Plakat + Flyer + Stempelkort Side 39 Unique Selling Points Side 40 Personas

5 INDHOLD Side 48 Design Side møde med John Bull Side 68 Farvevalg Side 48 Idégenerering i designfasen Side layout udkast udvalg og Side 69 Billedvalg events Side 48 Indhold Side 69 Gangster test på den Side møde med John Bull nye hjemmeside Side 49 Guidelines Side 62 Design af prototype - hjemme- Side 71 Tænke-højt-test på den Side 51 Layout side nye hjemmeside Side 52 Low-fi Side 62 Fokusområder Side 72 Design af prototype App Side 55 Scenarier Side 63 Opbygning Side 72 Low-fi test Side 57 Logo-ændring Side 63 Gestalt lovene Side 73 Fokusområder Side layout udkast - forside Side 64 Sidernes opsætning Side 74 Opbygning Side 60 Moodboard - design Side 67 Fontvalg Side 74 Gestaltlovene

6 INDHOLD Side 74 Menupunkternes opsætning Side 84 Realisering Side 95 Facebook interaktion Side 77 Semiotik Side møde med John Bull Side 97 EU cookie lov Side 78 Fontvalg Side 84 User cases Side 98 Browser-kompatibilitet Side 78 Farvevalg Side 85 Kodning af hjemmeside Side 100 W3C validering Side 78 Usability test App Side 86 Forside Side 101 Videreudvikling og rettelser Side 79 Trykte medier Side 87 Undersider Side 101 Vedligeholdelse Side 79 Plakat Side 87 Responsive desig6 Side 102 Liste over plugins og scripts brugt Side 82 Flyer (Bilag 13) Side 89 Css Side 103 App ens CMS system Side 83 Stempelkort (Bilag 14) Side 90 Wordpress Side 104 Designmanual Side 83 Semiotik Side 94 Nyhedsbrev/konkurrence database

7 INDHOLD Side 104 Budget Side 108 Konklusion Bilag Side 106 Refleksion Vedlagt Vedlagt Designmanual Plakater Bilag 1 Bilag 2 Bilag 3 Bilag 4 Microsoft Project, tidsplan 2. kundemøde John Bulls gamle hjemmeside Tænkte-højt-test på gammel Vedlagt Flyer Bilag 5 hjemmeside 2. Idégenerering i Vedlagt Stempelkort Bilag 6 Bilag 7 undersøgelsesfasen Feature liste Layout udkast Bilag 8 3. kundemøde Bilag 9 Design af prototype - hjemmeside Bilag 10 Design af prototype app Bilag 11 Plakat månedens øl Bilag 12 Plakat information om ny app Bilag 13 Flyer Bilag 14 Stempelkort

8

9 INDLEDNING Projektets sammensætning Gruppen er sammensat på baggrund af forskellige kompetencer, som kan bidrage med forskellige færdigheder til projektet. Line Jacobsen på designdelen, Jonas Hansen på interaktionsdelen og Iben Krogh på projektlederdelen. Gruppen har ligeledes forskellige farver i Insights; gul, grøn og blå, hvilket vidner om forskellige kompetencer (insightskurser.dk). Projektstarten har været præget af forskellige projektmetaforer (Busch et al. 2011:41). Der er en blanding af metaforerne Foggy og Movie, hvor det ikke vides, hvilke midler der skal bruges til målet, men der blot eksisterer en ide, som er kommet fra projektbeskrivelsen. Yderligere er der en viden om, at projektet skal indeholde noget teknisk, hvilket højst sandsynligt inkluderer en hjemmeside, men det vides endnu ikke, hvad denne skal indeholde. Virksomhedsprofil John Bull er en engelsk pub i hjertet af Aalborg. Her findes Nordjyllands største udvalg af internationale og danske ølmærker. De har et utal af kendte og ukendte whiskyer, samt et stort udvalg af cognac og rom. Derudover har de introduceret Månedens Øl, hvor kunder hver måned har mulighed for at smage på en ny øl fra nogle af verdens bedste bryghuse. John Bull har live musik hver lørdag med både danske og internationale musikere. Desuden er der også musikarrangementer på udvalgte torsdage og fredage. John Bull tilbyder sportsunderholdning hver uge, hvor de viser alle vigtige opgør direkte på storskærme. John Bull blev åbnet i år Pubben ligger midt i Aalborg tæt ved havnen, hvor der om sommeren er mulighed for at sidde udenfor også. John Bull er en autentisk, engelsk pub med charme, varme og atmosfære. Udover deres egen hjemmeside, bruger de deres Facebook side meget for at holde folk opdateret og informeret om forskellige nyheder og arrangementer. John Bull befinder sig på et konkurrencepræget marked og i et område med mange udbydere (Nikolaj, John Bull). 1. møde med John Bull 1. møde med John Bull havde til formål at finde ud af, om der var inter- SIDE 9

10 INDLEDNING esse for, at vi lavede dette projekt for dem. Ideen blev modtaget med en lille skepsis men samtidig åbenhed for deres mulighed for at få lavet analyser, idégenerering, forskellige medier osv. gratis via et skoleprojekt. Godkendelsen fra kunden sætter gang i projektet. Projektbeskrivelse Projektets motivation Projektets motivation er skabt udfra, at John Bull har en hjemmeside, som ikke er nutidig og ikke afspejler deres koncept. På et så konkurrencepræget marked er det vigtigt, at man ikke forsvinder i mængden. Mange i John Bulls målgruppe ved ikke, hvad John Bull står for, hvilket denne evt. undersøger på internettet. Det er derfor vigtigt, at hjemmesiden afspejler John Bull. Projektets formål og resultater Formålet er, at John Bull får en hjemmeside, som er tilpasset deres ydelser og målgruppe. Samtidig vil vi undersøge mulighederne for andre relevante medier. Projektets mål og afgrænsning John Bull står med en hjemmeside, som vil være nutidig og afspejle pubbens koncept og ydelser. Det vil være nemt for dem at tilpasse og redigere siden med nyheder, når det ønskes, da det laves i samme CMS-system, som det de bruger nu. John Bull står med nogle medier, som de kan vælge at bruge for at gøre omverdenen opmærksom på sig selv. Produktet rammer John Bulls målgruppe. Projektet opfylder UCN s krav til rapport og produkt. Projektkoncept og udviklingsmetode Konceptet er tilpasning af John Bulls hjemmeside, så den er nutidig, rammer målgruppen og passer til deres koncept. Opgaven struktureres efter HOME-metoden og vandfaldsmetoden med brugerinteraktion undervejs. Tidsplan og deadline Der er lavet et Microsoft Project dokument med et tidsbudget, som kan findes i bilag (Bilag 1). SIDE 10

11 INDLEDNING Projektorganisering Iben Krogh er projektleder og har det overordnede ansvar for, at projektet skrider stødt fremad som planlagt, og det endelige resultat er tilfredsstillende. Projektets medlemmer er sammensat på baggrund af kvalifikationer: Jonas med interaktion, Line med design, Iben som projektleder. Økonomi og ressourcer Der er lavet et estimat i tidsbudgettet på 702 arbejdstimer + evt. weekendarbejde. 39 hverdage 6 timer pr. person pr. dag (+ evt. weekendarbejde) 350kr. 234 timer pr. person * 3 = 702 arbejdstimer i alt 702 * 350 = kr. Da der ikke er fastlagt en pris fra John Bull, estimeres timelønnen til at være 350kr. Gruppen er på 3 personer og hvis tidsplanen, som giver en arbejdsuge på 30 timer, bliver overholdt, vil det samlede beløb til løn være kr. Timelønnen er taget ud fra, hvad andre freelancere tager i timen, da der ikke bliver givet feriepenge og pension(amino.dk), (udvikleren.dk), (multimedieforum.dk). Budgettet er urealistisk, da projektet er en læringsproces. Senere i rapporten vil der figurere et mere dybdegående budget. Problemformulering Hvordan gøres John Bulls hjemmeside mere oplysende og nutidig for brugeren? Hvilke andre kommunikationsmedier vil være fordelagtige for John Bull at bruge for at trække flere kunder til pubben? Projektstyring Vi har valgt at bruge projektstyringsprogrammet Microsoft Projects, som i praksis har hjulpet virksomheder med at effektivisere deres projekter (microsoft.com). En overordnet plan viser, hvornår de enkelte deadlines bør nås (Bilag 1). Vores milepæle er datoerne: SIDE 11

12 INDLEDNING 23. april: Foranalyserne færdige 6. maj: Undersøgelsesfasen færdig 17. maj: Designfasen færdig 24. maj: Realiseringen færdig Derudover har vi små milepæle i form af møderne med vores vejleder Anne-Mette Busch, hvilket vil føles som en slags opfølgning og pres på for at være kommet længere end forrige møde. Kundemøderne med John Bull vil ligeledes have deadlines, som består i, at vise dem mere samt noget nyt hver gang. milepælene i at blive udført (Fischer & Oosterbaan 2010:84). Nedenstående risikoanalyse viser forskellige risiko scenarier, samt hvordan vi kan løse disse. Hvis nogle af problemstillingerne skubber vores tidsplan har vi heldigvis ugen i sidste ende, hvor der kan tages et par dage fra. Prioritet Risiko Evner: udformer ukvalificeret projekt Forskellige ambitioner i gruppen Udformning af de forkerte produkter Rammer ikke målgruppen Håndteringsteknik Udnyt gruppens forskellige styrker Lav samarbejdsaftale, fastlæg ambitioner Analyser af markedet Analyser og tests Vi vil bestræbe os på at have en uge til sidst, som kun bør bruges på de endelige tests af diverse medier samt grundig gennemgang af rapport. Der er lagt meget vægt på, at få test ind løbende undervejs, så vi hele tiden tester, at vi er på rette spor. Herunder har vi især taget udgangspunkt i at lave testaktiviteter, som ligger tæt på de forskellige aktiviteter (Busch et al. 2011:75). 5. Levering af ubrugbare produkter 6. Forkert CMS-system 7. Forkert fokus 8. Kort produktionstid 9. Forkert design og udformning 10. Urealistiske tekniske forventninger Figur 1: Risikoanalyse Løbende briefing med John Bull Undersøg John Bulls kvalifikationer Undersøg målgruppe og John Bull Opstil realistisk projektplan Hiv John Bull ind fra starten Afstem forventninger fra John Bull + egne kvalifikationer Risikoanalyse I enhver projektplan vil der være risici, som kan forsinke eller forhindre Risikoanalysen gør, at vi vil være rustet til eventuelle hindringer undervejs i projektet. SIDE 12

13 INDLEDNING Metode HOME Projektet bearbejdes ud fra HOME metoden. HOME metoden er en helhedsorienteret og åben metode, som kan anvendes til udvikling på alle digitale medier. HOME metoden er valgt, da den arbejder både med projektledelse og udvikling af digitale medier. HOME er opbygget efter 4 faser, som er foranalyse, undersøgelse, design og realisering (Fischer & Oosterbaan 2010:42). Foranalyse Undersøgelse Design Realisering Aktivitet produkt proces Kundemøder Informationsindsamling Aktivitet produkt proces Teametablering Planlægning Idéudvikling Research Kommunikationsplanlægning Koncepttest Aktivitet produkt proces Teambuilding Vudering Regulering Information Interaktion Præsentation Brugertest Aktivitet produkt proces Vudering Regulering Projektafslutning Produktion Integration Systemtest Accepttest Projektbeskrivelse produkt proces Dokument Samarbejdsaftale Projektplan Projektbeskrivelse Konceptbeskrivelse Kommunikationsplan Testdokumentation produkt proces Dokument Revudere planer Projektbeskrivelse Informationsstruktur/briefing Flowchart Storyboard proces produkt Dokument Revudere planer Afleveringskontrakt Evalueringsrapport Medieelementer Golden master produkt proces Dokument Figur 2: HOME-model SIDE 13

14 INDLEDNING Foranalyse Vi vil lave en grundig forundersøgelse for at få præciseret, hvilke forhold vi skal have i baghovedet, når medierne og designet vælges. Indledningen startede med en projektbeskrivelse og virksomhedsprofil, som beskriver opgaven med John Bull. Forundersøgelserne består af markedsundersøgelser i forbindelse med en omverdensanalyse og Porters Five Forces, som leder til en konkurrentanalyse. En interessentanalyse vil vise, hvem kampagnen interesserer. Målgruppen vil beskrives udfra segmenteringskriterierne på BTC markedet, livsstilsanalysemodellen Minerva samt ConZoom, som vil oplyse om befolkningen i John Bulls område. Et møde med John Bull vil ligeledes blive lagt ind i denne første del. Undersøgelse John Bulls gamle hjemmeside bør testes for at finde ud af, hvilke gode og dårlige elementer denne indeholder, samt for at finde frem til hvad en ny hjemmeside bør indeholde. Dette vil foregå via tænke-højt-test. Idégenering vil fylde en del i dette afsnit, hvor bl.a. brainstorms og andre metoder vil hjælpe til ideerne, hvilket afsluttes med en begrundelse for medievalgene. Denne generering medfører en udformning af John Bulls USP; unique selling points. Dernæst vil personas beskrives, hvilke er de personer, som alle medier bør ramme, både i denne opgave og for John Bull i fremtiden. De valgte medier skal kommunikeres ud på bedst mulige måde, hvilket forskellige kommunikations rammer vil understøtte. Researchdokumentet og designbriefen vil hjælpe os ind i tankegangen med selve designet og opstille vigtige punkter, vi må have med i overvejelserne inden designfasen påbegyndes. Design Herefter starter designprocessen, som vil indledes med en idé-generering over mulighederne. Scenarier vil opstilles for at finde frem til, om udformningerne giver mening og er tilpasset de enkelte personas og dermed målgruppen. Grundlag for en logo-ændring vil beskrives i dette afsnit. SIDE 14

15 INDLEDNING Et udkast vil laves på nogle af siderne, hvilke understøttes af et moodboard. Kundemøder lægges ind for at sikre, at vi er på rette spor inden designprocessen kommer for langt frem. Skitserne til hele hjemmesiden vil udformes og underbygges af forskellige teorier og modeller i form af bl.a. moodboard, gestalt, semiotik, AIDA m.fl.. Hele designprocessen bygges op omkring foranalysen og undersøgelserne og lægger vægt på at ramme målgruppen. Farve- og fontteori vil underbygge valgene. Forskellige tests i form af Gangster og tænke-højt-test vil teste valgene og give mulighed for at ændre i designet, inden realiseringen påbegyndes. Dernæst designes app en med udgangspunkt i hjemmeside layoutet. En low-fi test vil teste brugervenligheden og navigationen, hvorefter gestalt, semiotik, font- og farvevalg vil understøtte designet. En usability test vil dernæst fastlægge brugervenligheden i app en. Realisering Afsnittet vil starte med et kundemøde, hvor medierne gennemgås for eventuelle rettelser. De brugervenlige valg på hjemmesiden vil underbygges af user cases. En dybdegående beskrivelse af kodningen af hjemmesiden vil figurere, hvor CMS system og funktioner er beskrevet. App ens CMS system forklares efterfulgt af gode råd til John Bull angående producering af denne. Det endelige layout vil herefter figurere i en designmanual med forskellige retningslinjer. Vi vil opstille et budget, som bliver relevant for John Bull, hvis de vælger at gøre brug af vores medier. Udfra hjemmesiden og app en designes plakat, flyer og stempelkort. Refleksioner og en samlet konklusion vil afslutte rapporten. SIDE 15

16 INDLEDNING Projektbeskrivelse produkt proces Dokument Samarbejdsaftale Projektplan Projektbeskrivelse Konceptbeskrivelse Kommunikationsplan Testdokumentation produkt proces Dokument Revudere planer Projektbeskrivelse Informationsstruktur/briefing Flowchart Storyboard proces produkt Dokument Revudere planer Afleveringskontra Evalueringsrappor Medieelementer Golden master Vandfald Vandfaldsmodellen fungerer lineært, og hver fase skal afsluttes, før en ny fase kan påbegyndes. Vi anvender vandfaldsmodellen sammen med HOME. Vandfaldsmodellen er en plandrevet model, hvilket betyder, at alt er planlagt fra starten, se Microsoft Project (Bilag 1). Under designfasen vil der være en del mindre iterationer efter tests hos brugeren og kunden (Fischer & Oosterbaan 2010:43). Vi kombinerer de to modeller, da det er et kort projekt, så vi har brug for faste deadlines. Hvor nogle af de andre modeller kan tage uendelig tid. En anden grund er, at vi ikke har muligheden for at sparre med kunden konstant for at høre, hvad de vil have, men blot kan trække dem ind, når vi har brug for sparring til hovedpunkter. Figur 3: Vandfaldsmodel SIDE 16

17 SIDE 17

18 FORANALYSE Interessentanalyse Interessenterne for projektet er vigtige. Hvis der ingen interessenter var, ville der ikke være grund til at lave projektet. For at finde projektets interessenter har vi valgt at lave en interessentanalyse (Lindberg 2010:145). Vi vil i denne analyse få vist, hvilke roller de forskellige interessenter har, og om der er retningslinjer vi må tage hensyn til. I dette tilfælde er der ingen gidsler. Ressourcepersoner: - John Bull, herunder ejer, bestyrer og medarbejdere. Det er John Bull, som har størst medvirken og indflydelse på projektet i og med, at det er kunden og dem, der skal bruge produktet. - Os selv. Det er os, der har størst medvirken og indflydelse på pr dukterne i samarbejde med kunden. Vi har en interesse i at lave et godt projekt og det bedste produkt til kunden. Eksterne interessenter: - Aalborg Kommune. De har interesse i, at John Bull gør de nye tiltag for at tiltrække turister til Aalborg. - Sponsorater. John Bull er sponsor for både Aab fodbold og ishockey. De har en lille medvirken og lidt indflydelse. De har ikke noget at skulle have sagt i udformningen og er egentlig blot en interessent, fordi de er interesseret i, at det går godt for John Bull, så de vil være sponsorer i fremtiden også. - Fødevarestyrelsen. De har en interesse i, at de overholder de regler, der er omkring fødevarer, og at deres smiley er synlig på pubben og på deres hjemmeside. - Samarbejdspartnere. Deres samarbejdspartnere, herunder bryghuse, har en interesse i, at John Bull har/får et godt image. På den måde kan det også blive attraktivt, et brand, at levere øl til John Bull. - Booking bureau. Det booking bureau, som de bruger til at booke musik, har på samme måde som samarbejdspartnerne en SIDE 18

19 FORANALYSE interesse i, at John Bull får en flottere visuel identitet og et godt image. På den måde kan det også blive attraktivt at spille på John Bull. - Cookie lov. Der er kommet en ny lov om, at det skal oplyses, at ens hjemmeside benytter sig at cookies, og at den besøgende skal godkende dette, når de kommer ind på siden. - Konkurrenter. Konkurrenterne har en lille medvirken og lidt indflydelse. Men de bliver nød at holde øje med, hvad andre gør for at følge med tiden. Grå eminencer: - Kunder - målgruppen. Kunderne er grundlaget for, at John Bull eksisterer. Disse har en lille medvirken i beslutninger men meget indflydelse på, om de nye tiltag bliver en succes. Vi pla lægger en del brugerinteraktion med dem, så de får både indflydelse og lidt medvirken. Men de vil ikke få nogen in virkning i det endelige resultat. - UCN. Skolen har en stor indflydelse, da der er nogle regler og krav, som opgaven skal overholde for at bestå. Det er også i skolens interesse, at gruppen laver et godt projekt, hvilket kan medføre et godt ry for skolen. Gidsler: Ingen Eksterne interessenter: - Aalborg Kommune - Sponsorater - Fødevarestyrelsen - Samarbejdspartnere - Booking bureau - Cookie lov - Konkurrenter Figur 4: Interessentanalyse Indflydelse Ressourcepersoner: - John Bull - Os selv Grå eminencer: - Kunder - UCN SIDE 19

20 FORANALYSE Interessent Interessenten kan opleve fordele ved projektet Interessenten kan opleve ulemper ved projektet Samlet vurdering af interessentens bidrag/position Håndtering af interessenten John Bull Flere kunder og mere synlighed Spild af penge, forvirring for kunden ugenkendelighed Vigtig, da det er dem der skal købe produktet Møder Os selv Glad og tilfreds kunde, godt projekt, og en god karakter Kunden vil ikke have produktet, dårlig projekt og karakter Meget vigtig, det er os, som skal lave projektet Gruppearbejde Kunder Oplevelser, gode øl og samvær Forvirring omkring produkt/ikke brugervenligt Vigtig, da vores undersøgelser påvirker det endelige produkt Brugerundersøgelse, interview Aalborg Kommune Flere turister Lille Sponsorater Blive attraktivt at samarbejde med John Bull John Bull får et dårligt ry Lille Fødevarestyrelsen Lille Smiley ikon på hjemmesiden Samarbejdspartnere Blive attraktivt at samarbejde med John Bull John Bull får et dårligt ry. Lille Booking bureau Blive attraktivt at samarbejde med John Bull John Bull får et dårligt ry. Lille Cookie lov Lile Tilføjes på hjemmesiden Konkurrenter Følge med konkurrenten Lille UCN Godt ry Dårligt ry Lidt vigtig i og med det er dem, som skal give os karakterer. Møde med vejleder. Figur 5: Uddybet interessentanalyse SIDE 20

21 FORANALYSE Markedsanalyse Bar industrien Bar branchen er stor i Danmark og specielt i Aalborg, som har Danmarks længste festgade; Jomfru Ane Gade, der har beliggenhed tæt på John Bull. Der er en bar til hver målgruppe over 16 år, og de forskellige steder har kapacitet på meget få til flere hundrede. En bar er ofte drevet af en selvstændig person, som styrer det hele i de rolige timer og har studerende ansatte i det tidsrum, hvor der er flest kunder. Uddannelsen til bartender sker gennem betalte kurser hos private firmaer, men det er sjældent et krav for at blive ansat (bartenderskolen.dk). For at kunne få en alkoholbevilling skal ejeren have næringsbrev. Næringsbrev kan fås, hvis man er 25 år eller har relevant uddannelse inden for hotel- og restaurations faget (politi.dk). Omverdensanalyse Der er blevet lavet en omverdensanalyse for at forstå, hvilke udestående faktorer der påvirker John Bull og derigennem projektet. Omverdensanalysen er bygget op som kan ses på figuren nedenfor (toolbox.systime.dk). Teknologi AFHÆNGIE OMVERDEN Politiske Kunder VIRKSOMHEDEN Leverandører Massemedier Kulturelle forhold Konkurrenter Mellemhandlere Lovgivningsmæssige Interesseorganisationer Samfundsøkonomiske forhold Figur 6: Omverdensanalyse Den uafhængige verden UAFHÆNGIGE OMVERDEN PESTLE For at undersøge den uafhængige verden er der anvendt en PESTLE analyse. Analysen undersøger faktorer inden for politik, økonomi, social, teknologi, lov og miljø, som påvirker John Bull (books.google.dk), (toolbox.systime.dk). SIDE 21

22 FORANALYSE Miljø Politisk Økonomi Politisk Bar branchen bliver i høj grad påvirket politisk. Regeringen beslutter, hvilken alder der må skænkes alkohol til. Regulering af afgifter kan også påvirke branchen positivt eller negativt, alt efter om de falder eller stiger. Det bliver besluttet fra regeringen, hvor længe en bar må have åbent, og hvor mange timer en ansat må arbejde i træk. Det bliver også reguleret, hvilke ugedage en bar må have længe åbent (evm.dk). Lov PESTLE John Bull Pub Social Branchen er en del af smiley ordningen, hvor bl.a. hygiejne og egenkontrol bliver gennemgået. For at kunne servere alkohol, skal baren have en alkoholbevilling, som skal ansøges hos bevillingsnævnet (findsmiley.dk). Lokalpolitisk bliver en bar også påvirket. I Aalborg kommune er det blevet besluttet, at en øl på en bar, der koster kr. 10 er for lidt, og har derfor sat en minimum pris på kr. 12 (Nikolaj, John Bull). Figur 7: PESTLE analyse Teknologi Økonomi Bar branchen bliver påvirket af høj/lav konjektur. Hvis man ser på finanskrisen i John Bulls tilfælde, bliver de påvirket på en negativ måde. John Bull er en dyr bar og mister kunder under finanskrisen til billigere alternativer (business.dk). SIDE 22

23 FORANALYSE Der er ingen lovbestemt mindsteløn, men som virksomhed med overenskomst skal de følge lønnen, der er aftalt mellem arbejdsgiverorganisationer og fagforeninger (epp.eurostat.ec.europa.eu). Teknologi Teknologier, som kan påvirke John Bull, kan blandt andet være udviklingen af den måde, som øllen bliver leveret og kølet på. Som sports pub med storskærm kan nye tv-signaler påvirke John Bull, samt kampe i ny, større opløsning kan betyde udskiftning af udstyr. Folk søger information og vil opdateres bl.a. via multimedier, hjemmesider, blogs og sociale netværk (dr.dk). Sociokulturelt Man mødes på pub for at være social med venner. En pub kan også bruges til koncert, sportsevents, firmafester og andre sociale events. Der er stor kultur i Danmark for indtagelse af alkohol. De danske unge har gentagende gange haft ry for at drikke mest i verden. I dag kan man næsten altid finde en bar med et tema, som henvender sig til den type, man er (dr.dk), (visitaalborg.dk). Eksempler der kan påvirke John Bull er: - Øget bevidsthed om sundhed - Kampagner med en negativ holdning til alkohol Love Som det kan læses under afsnittet Politisk, er der en del love, som påvirker branchen. Love, som kan påvirke John Bull, kan eksempelvis være alkoholforbud, afskaffelse/ændring af rygeloven, ændringer i lukkeloven (retsinformation.dk). Miljø John Bull skal sortere affald og sende pantflasker retur. Den afhængige verden Kunder John Bulls kunder er forbrugeren. John Bull fokuserer ikke på at sælge til virksomheder, men kan bookes til at afholde mindre firmafester. John Bull har mange enkelte kunder og bliver derfor ikke markant påvirket, hvis en SIDE 23

24 FORANALYSE kunde forsvinder (Nikolaj, John Bull). Konkurrenter Konkurrenterne kan presse John Bull, hvis de f.eks. har billigere produkter eller længere åbningstider. Der kan også ydes bedre service eller sælges de nyeste produkter for at konkurrere (Nikolaj, John Bull). blevet anvendt en SWOT analyse. Den eksterne situation er videreført fra PESTLE analysen Interne situation Leverandør Leverandørerne har en vigtig rolle. John Bull er afhængig af at få leveret øl, så de har noget at sælge og dermed ikke risikerer utilfredse kunder pga. den manglende vare (Nikolaj, John Bull). Mellemhandlere John Bull sælger direkte til kunden og anvender ingen mellemhandlere (Nikolaj, John Bull). Virksomheden Stærke sider (Strengths) Placering Mange stamkunder Live musik Sports events Stort udvalg Nyt udvalg hver måned Gennemført tema Bred målgruppe Figur 7: PESTLE analyse Svage sider (Weaknesses) Placering Pris Mange konkurrenter Manglende identitet på nettet SWOT For at danne et overblik over John Bulls styrker og svagheder er der SIDE 24

25 FORANALYSE Eksterne situation Mulighedsmatrix Muligheder (Opportunities) Trusler (Threats) Sandsynlighed for hændelse Sociale events i Aalborg Sociale medier Sænkning af afgifter på alkohol/sodavand Finans krise Stramning af gældende love Alkohol forbud Øget bevidsthed om sundhed Kampagner med en negativ holdning til alkohol Stor Sociale events i Aalborg Sociale medier Lille Sænkning af afgifter på alkohol/sodavand Figur 7: PESTLE analyse For at danne overblik og gå mere i dybden med muligheder og trusler fra SWOT analysen, er der blevet lavet et muligheds- og et trusselsmatrix (toolbox.systime.dk). Figur 8: SWOT-analyse SIDE 25

26 FORANALYSE Trusselssmatrix Finans krise Stor Sandsynlighed for hændelse Lille Stramning af gældende love Alkoholforbud Øget bevidsthed om sundhed Porters Five Forces Porters Five Forces model viser en ramme for de forhold, der betegner konkurrencevilkårene på markedet. Dette beskrives ud fra indtrængningsbarrierer, substituerende produkter, kundernes forhandlingsmagt, leverandørernes forhandlingsmagt og rivalisering blandt eksisterende. Strategien handler overordnet set om at differentiere sig i forhold til sine konkurrenter (Lindberg 2010:figur 4.7). Figur 9: Trussmatrix Kampagner med en negativ holdning til alkohol Omverdensanalysen viser, at John Bull er truet og afhængig af forskellige elementer i omgivelserne. De trues primært af lovgivninger fra regeringens side om alkoholpolitikker og lukkelove. Hvis fokus på alkohol bliver ændret i Danmark og selve kulturen, er det en stor trussel for John Bull. Dog er dette ude i periferien og ikke en hændelse, som højst sandsynligt sker.analysen vil blive brugt til f.eks. at overholde lovgivninger og krav til produkt. Herunder cookie- og smiley ordning på hjemmesiden. Indtrængningsbarrierer: Der er indtrængningsbarrierer i form at de forskellige lovgivninger og alkoholpolitikken. Samtidig skal der laves aftaler med forskellige leverandører og fundet lokaler. Der er ikke de store omkostninger med at åbne en bar, som store produktionsmaskiner eller lignende. Det er relevant at kunne drive virksomhed, for at baren skal overleve på så konkurrencepræget et marked. Derudover kan man differentiere sig ved f.eks. at give den besøgende en oplevelse udover det sædvanlige, hvis denne besøger netop det omtalte SIDE 26

27 FORANALYSE sted. Det kunne eksempelvis være uden om selve kerneproduktet, hvor der kunne gøres noget anderledes for at blive husket frem for konkurrenterne. Substituerende produkter: Der er mange udbydere på markedet, og det er derfor nemt for kunder at skifte til en konkurrent og dermed substituerende produkt. Det er vigtigt for virksomheder at differentiere sig i forhold til sine konkurrenter for at tiltrække sig kunder. Hos kunderne vil der ofte være meget loyalitet, da de besøgende ofte vælger at besøge et sted, hvor de kan lide behandlingen, stemningen og produkterne. Det er derfor vigtigt, at brugeren er tilfreds med servicen, behandlingen og oplevelsen, og dermed har lyst til at komme igen. Kunden får hos John Bull og konkurrenterne primært stillet sin tørst, men ofte har de besøgende også et socialt anliggende (Nikolaj, John Bull). Derfor er alle andre barer, restaurationer og diverse, substituerende produkter. De besøgende som lægger vægt på irsk stemning og specialøl, finder kun få substituerende produkter i Aalborg. Kundernes forhandlingsmagt Kunderne spiller en vigtig rolle. Det er disse, som pubben lever af. Det er vigtigt, at disse får den oplevelse, som de har betalt for, så de kommer igen og fortæller videre om den gode oplevelse. Priserne varierer meget fra bar til bar, men når der serveres specialøl, kan kunden forvente noget ekstra og dermed en lidt højere pris. Kunderne har dog ikke stor indflydelse på prisen, da denne er stort set fast, for at pubben overhovedet kan eksistere. Hvis der dog ikke er mange kunder, kan det skyldes den store konkurrence fra barerne i Jomfru Ane Gade. John Bull kan evt. ændre nogle af priserne, som vil lokke folk til og dermed give dem den gode oplevelse til at komme igen. Når kunden har fået den gode oplevelse, kan priserne evt. sættes op igen. Leverandørernes forhandlingsmagt Der er mange udbydere af John Bulls produkter, så leverandørerne vil på den vis ikke have en stor forhandlingsmagt, da virksomheden uden de store konsekvenser kan skifte til en lignende leverandør. Dog går John Bull op i at have specialøl, hvilke laves på bestemte bryggerier. Men der SIDE 27

28 FORANALYSE findes mange forskellige specialøl, så det vil være muligt at skifte til en anden leverandør og dermed få en anden specialøl. Der vil være en form for loyalitet og troværdighed i forbindelse med valg af underleverandører, da øl entusiaster selvfølgelig går meget op i at få præcis den øl, de vil have og ikke en anden eller blot en efterligning. Rivalisering blandt de eksisterende aktører Markedet er som sagt meget stort. Det betyder, at der er stor rivalisering blandt de eksisterende aktører. Dog specialiserer John Bull sig ved at tilbyde forskellige andre ydelser end en almindelig bar, såsom sportsarrangementer, live-musik, specialøl osv. Der er konkurrence blandt de barer i Aalborg, som tilbyder samme oplevelse og service som John Bull. Samtidig er der også konkurrence fra de mindre udbydere, da nogle besøgende kan have præferencer for en mere intim oplevelse. Disse er typisk også billigere. Det er dog forskelligt, hvordan mennesker sætter pris på barer. Barerne har en ekstrem bred målgruppe med utallige forskellige ønsker og præferencer for forskellige produkter og oplevelser. John Bull som navn står for nogle uskrevne forhold, hvilket pubben skal leve op til. Konkurrentanalyse Der er mange forskellige værtshuse, barer og diskoteker rundt omkring i Aalborg, hvilket gør konkurrencen hård. Der er udvalgt to af konkurrenterne med to forskellige fokusområder til en nærmere beskrivelse; en med tæt på samme koncept som John Bull, hvor god øl og hygge er i fokus og en med et koncept, hvor drinks og nattelivet er i fokus. The Irish House John Bull er ikke den eneste pub, der har et bredt udvalg af specialøl. Konkurrenten The Irish House ligger på den anden side af gaden. The Irish House åbnede i 2002 i en bygning tilbage fra The Irish House har, som John Bull, også sports events og live-musik. De viser ikke kun fodboldkampe men også Rugby, GAA, cricket, golf m.m. Derudover har The Irish House også mad på menuen. De serverer alt fra burgere til Irish Stew. SIDE 28

29 FORANALYSE De har ikke kun specialøl, men også cocktails, vin og mange forskellige slags whisky. The Irish House byder på god mad og drikke i hyggelige omgivelser (theirishhouse.dk). John Bull har eksisteret i mange år, og har derfor opbygget et navn og brand, som folk kender til. De er truet af nye udbydere på markedet, men disse skal først opbygge et klientel før disse direkte truer John Bull. Pigen & Trompeten Pigen & Trompeten er et diskotek, som ligger midt i Jomfru Ane Gade. Her kommer mange forskellige aldersgrupper, men især unge. Deres menukort består primært af cocktails. Torsdag og fredag er der live-musik, mens der lørdag er diskotek. Udenfor er der afdækket terrasse, hvor man kan sidde og se på nattelivet i Jomfru Ane Gade. På Pigen & Trompeten er der mulighed for at holde privatfest. Det kan f.eks. være en fødselsdagsfest, julefrokost eller polterabend (pigenogtrompeten.dk). Konklusion af markedsanalyse De forskellige analyser viser, at John Bull befinder sig på et meget konkurrencepræget marked. Det er derfor vigtigt, at holde sig nutidig og ikke forsvinde i mængden. De differentierer sig allerede nu fra deres konkurrenter ved at tilbyde specialøl, sportsevents og musikevents. Markedsanalysen har vist, at John Bull bør oplyse omverdenen om deres ydelser, hvor de differentierer sig fra konkurrenterne, hvilket henleder til USP i undersøgelsesfasen. Analyserne ligger ligeledes baggrund for udformningen af målgruppeanalysen, når omverdenens forhold nu er beskrevet. Målgruppen Observationer og samtale med John Bull har resulteret i uddybningen af John Bulls målgruppe.john Bulls målgruppe er meget bred, da de tilbyder en bred vifte af ydelser. Herunder de forskellige øl, events samt opfylder forskellige sociale efterspørgsler. John Bull rammer derfor mange aldersgrupper både mænd og kvinder. John Bulls specifikke målgruppe er de folk, som kommer ind for at få præcis de specialøl, som kun John Bull serverer. Under denne målgruppe er også de folk, som besøger John Bull, når der er en event. SIDE 29

30 FORANALYSE Den sekundære målgruppe er de øvrige personer, som syntes godt om stemningen på John Bull med henblik på det sociale aspekt (Nikolaj, John Bull). Det er vigtigt, at John Bull rammer både den specifikke og den sekundære målgruppe og oplyser begge om de ydelser, som John Bull har. Målgruppen befinder sig på forbrugermarkedet, BTC, hvor der findes fire forskellige hovedsegmenteringsområder: demografiske, geografiske, beskæftigelsesmæssige og livsstilsorienterede (Lindberg 2010:159). Demografi Vores målgruppe befinder sig i det brede aldersinterval 18 til 65 årige. Det er både kvinder og mænd, som kan have mange forskellige uddannelser bag sig og dermed mange forskellige indkomster. Geografi John Bull rammer primært de folk, som bor i Aalborg området. Dog har de også en del turister som gæster, dette både fra ind- og udland. John Bull har tidligere været en kæde, så folk udenbys fra kender muligvis navnet og stedet. Beskæftigelse Målgruppen har mange forskellige beskæftigelser, da den er så bred. Det er folk med fast indtægt, da John Bulls priser ligger i den højere ende i forhold til andre udbydere. Livsstil Målgruppen har en livsstil, hvor kan lide at gå ud. De kan lide oplevelser og gerne i selskab med andre. De sætter pris på kvalitet, hvilket de får gennem John Bulls specialøl. Minerva Målgruppen rammer flere segmenter i Minervamodellen, som er en livsstilsmodel, som PR og reklamebranchen bruger til at inddele kundesegmenter med (samfundsfag.com). Grønne segment Det grønne segment er fællesskabs- og socialt orienteret. De kan lide at gå på pub for fællesskabets skyld og tager ofte af sted for at få en oplevelse. SIDE 30

31 FORANALYSE Rosa segment Det rosa segment har, ligesom det grønne, fokus på gruppe-orientering samt sociale mål som familie, venner og lokalsamfund. De vil gerne støtte de lokale foreninger og gøremål i lokalområdet. De besøger John Bull, da de har tillid til stedet, og da det er et sted de ofte er kommet, hvilket bliver traditionelt for dem. Violette segment Det violette segment er traditionelle men dog også mere spontane. De lægger vægt på spænding og søger oplevelser gennem kroppen og ikke gennem bevidstheden. De knokler for at få råd til at holde fri og ser et besøg på John Bull som en oplevelse, de gerne må nyde, fordi de har gjort sig fortjent til det. ConZoom ConZoom viser, hvilke slags mennesker der bor i forskellige områder. John Bull ligger i et område, hvor der er storbyliv (conzoom.eung). Storbylivet indbefatter mange mennesker året rundt. Beliggenheden rammer både folk som ved, at John Bull er placeret der, men den rammer også folk, som tilfældigt kommer forbi herunder også turister. Pubben ligger meget centralt og med en åben plads foran, som går direkte ned til et åbent og populært havneområde, hvor mange folk færdes. John Bulls både indendørs- og udendørs servering rammer derudover også storbylivet godt. Som det kan ses på billedet på næste side, ligger John Bull omkredset af røde felter. Den normale alder er 23 år til 29 år for den befolkning, som bor omkring John Bull, hvilket betyder, at de for at ramme deres stamgæster skal til andre bydele. De røde felter der omkredser John Bull består mest af to person grupper: storbys liv og unge på vej. Storbys liv og unge på vej er grupper conzoom har lavet for at beskrive en gruppe mennesker, og der er i alt 8 hovedgrupper. ConZoom skriver om storbys liv: Man går gerne ud til arrangementer, i biografen eller lignende. De fleste synes, at der skal afsættes flere penge til kunst og kultur, og man stiller SIDE 31

32 FORANALYSE Figur 11: ConZoom storbyliv gerne krav om høj kvalitet - både i forhold til forbrug, private indkøb og den offentlige sektors forvaltning af danske værdier. SIDE 32

33 FORANALYSE ConZoom skriver om unge på vej: Gruppen kan karakteriseres som særligt kyndige inden for nyere medier, og hvorledes disse skal og kan håndteres. Det er hverdag for Unge på vej at benytte diverse medier og drage fordel deraf. Hvis der skal målrettes noget mod John Bulls største aldersgruppe, skal man finde grupperne; boligejer med overskud, velhavere og senior. På billedet nedenfor ses et conzoom kort, hvor den største gruppering af de førnævnte grupper er markeret med en rød firkant. Markeringen er i Hasseris området i Aalborg. SIDE 33

34 UNDERSØGELSE Figur 12: ConZoom boligejere med overskud, velhavere, senior Målgruppeanalysen viser, at John Bulls markedsføring og medier skal ramme en meget bred målgruppe. Det er vigtigt, at der lægges vægt på SIDE 34

35 UNDERSØGELSE både at ramme den primære og sekundære målgruppe, da begge typer kunder er vigtige. ConZoom viser os, hvor eventuelle kampagner skal målrettes for at ramme den ønskede gruppe, og at der skal markedsføres til de forskellige grupper. De videre analyser og overvejelser kan nu laves med målgruppen i baghovedet, hvilket medfører, at disse tænkes ind fra starten. 2. møde med John Bull 2. møde med kunden blev foretaget for at få en ide om, hvad denne ønsker, forventer og står for. Mødet blev afholdt på John Bull, netop for at opleve stemningen, se kunderne, ydelserne osv. Samtidig er den interviewede ikke placeret uvante steder, hvilket gør, at denne føler sig tryg og kan sige, hvad han mener. Nikolaj (bestyreren) blev stillet en række spørgsmål, som han stille og roligt svarede på (Bilag 2). Alle svarene var relevante og resulterede i en grundlæggende viden om John Bull, historien, ydelserne osv. Figur 13: 2. kundemøde hos John Bull SIDE 35

36 UNDERSØGELSE Svarene lagde især op til at bide mærke i USP som: - 85 forskellige øl - Udendørs servering - Den største udbyder af specialøl i Aalborg Derudover vakte informationen om en udvidelse af målgruppen interesse. De ønsker at ramme de unge noget mere og vil bl.a. satse på studiestarten til august/september Projektet bør tage hensyn til ønskerne om en interaktion mellem hjemmeside og Facebook, mere fokus på galleri, farveønskerne grøn og rød samt de største ydelser hos John Bull. Tænke-højt-test på gammel hjemmeside John Bull s gamle hjemmeside En tænke-højt-test på John Bull s gamle hjemmeside skal hjælpe med at finde frem til, hvad brugerne tænker, når de besøger hjemmesiden (Busch et al. 2011:101). Testen er foregået på den måde, at testpersonerne er blevet sat ved en computer, hvorpå John Bull s hjemmeside stod åben (Bilag 3). Herefter har de fået lov til frit at navigere rundt på siden, mens de er blevet bedt om at tænke højt mht. hvad de ser og syntes. Undervejs blev der stillet spørgsmål som; Hvad forventer du, der er under det menupunkt?, Mangler du noget på den side?. En person i gruppen har stillet spørgsmålene, en har noteret testpersonens navigation, og en har noteret det sagte. Testen har givet et godt indblik i, hvad der bør beholdes på John Bull s hjemmeside, samt hvad der bør ændres, tilføjes og slettes. Testen er foretaget på 5 personer. 2 af dem er såkaldte eksperter, da de er medstuderende og derfor har et blik indenfor design, opstilling osv. De 3 øvrige er tilfældige personer, som ikke har et fagligt blik på hjemmesiden. De 2 eksperter gik mere i dybden med deres kommentarer, men hovedsageligt kom alle 5 med sammenlignelige kommentarer (Bilag 4). Herfra kan noteres hovedpunkter som: - Upopulær grøn farve - kedelig - For stor tekst - Forkerte billeder til de forskellige undersider savner relevante SIDE 36

37 UNDERSØGELSE stemningsbilleder - Ændring i menunavne - Evt. billeder på øl og musik - Fine informationer - Ingen drop-down menu fyld og unødvendig Idégenerering Idégenereringen i undersøgelsesfasen har primært foregået via brainstorms. Som i problemformuleringen er det beskrevet, at selve projektet består i at redesigne John Bulls hjemmeside. Hertil bør der undersøges for yderligere medier, som vil være relevante, opmærksomheds skabende og nutidig for John Bulls målgruppe, og som John Bull med fordel kan vælge at gøre brug af. Det blev grebet an på den måde, at der blev lavet en brainstorm over alle, mulige medier (Bilag 5). De Figur mulige 14: Idégenerering medier fik derefter en gul post-it og blev klistret op på et bord. Dernæst blev fordele for medierne i forhold til John Bull skrevet ned på pinke post-its og ulemper blev skrevet ned på grønne post-its. Dette for at give et indledende overblik over muligheder og problemstillinger i forbindelse med de forskellige medier. SIDE 37

38 UNDERSØGELSE Herefter blev der kigget på de mest relevante medier for John Bull, hvilke havde flest fordele og færrest ulemper. I bagtankerne var 2. møde med Nikolaj, hvor han bl.a. nævnte, at de var tilfredse med deres målgruppe, men samtidig ønsker at ramme de unge mere. Følgende medier blev udvalgt: - Hjemmeside - App - Trykte medier i form af plakat, flyers, stempelkort Medievalg De forskellige medier er valgt ud fra relevansen for John Bull, og hvad de kan drage fordele af. Hjemmeside John Bull skal have en ny hjemmeside, som skal være mere indbydende og nutidig, og som er tilpasset deres målgruppe. Den tidligere hjemmeside fungerede mere som en fast side med standard information, mens Facebook løbende blev opdateret. Et af formålene med den nye hjemmeside er, at den kan spille mere sammen med Facebook. Facebook er et meget brugt socialt medie, hvis medlemsantal stadig er stigende. De har netop rundet en milliard brugere på verdensbasis. I Europa er der 243mio. brugere ((internetworldstats.com) og alene i Danmark 3mio. brugere, hvilket er over halvdelen af alle danskere (business.dk). Den nye hjemmeside bliver udvidet, så der kommer flere ting og funktioner, herunder bl.a. fotogalleri. Fordelene ved at være synlige på netop medietypen internettet omfatter bl.a. (Lindberg 2010:figur 8.10): - Direkte kontakt til kunden - Hurtig tilbagemelding - Interaktivt - Mange kreative muligheder - Mulighed for løbende opdatering App Salget af smartphone er stigende ifølge analyseinstituttet Userneeds. I 2012 foretog de en undersøgelse angående salget af smartphone, hvor resultaterne viser, at salget af smartphones på blot et år er steget fra 33 % til 51 %, og hvis denne tendens fortsætter, vil andelen af smartphones SIDE 38

39 UNDERSØGELSE på det danske marked være på hele 80 % i 2013 (mcb.dk). Det er en af grundene til, at John Bull bør have en app. App en skal ramme den brede målgruppe, men også ramme den yngre, ønskede målgruppe, hvilke formodes at have smartphones. App en vil indeholde de samme informationer som hjemmesiden og være tilkoblet Facebook. Det der bliver opdateret på Facebook, kommer automatisk ind på app en. Et af formålene med app en er at lokke folk ned på John Bull, hvilket vil ske via forskellige former for rabatkort. Herunder f.eks. et stempelkort, hvor kunden får 6. øl gratis. For folk som ikke har en smartphone, skal det være muligt at få et fysisk stempelkort i baren. Plakat + Flyer + Stempelkort John Bull benytter sig ikke meget af trykte medier. Plakater og flyers vil oplyse om de mest relevante ydelser på John Bull samt den nye app og hjemmeside. Plakaterne vil primært hænge indenfor og udenfor på John Bull, mens flyeren vil ligge i baren. Plakaterne og flyers har et hovedmål om at være blikfangende, lokkende og skabe nysgerrighed. Ideen er, at disse medier skal henvise til app en i AppStore og Google.Play i form af en QR-kode. Stempelkortet vil kunden kunne få i baren hos John Bull, hvilket er til folk, som ikke er i besiddelse af en smartphone. Det fungerer på samme måde som stempelkortet i app en. Trykte medier virker gammeldags, men undersøgelser viser, at internettet, mobile marketing og andre new media ikke har skubbet printmedierne væk, men til en vis grad tvunget disse til at redefinere rollerne og opfinde nye strategier (Lindberg 2010:272). De valgte medier vil oplyse omverdenen om John Bull og give målgruppen og kunderne noget ekstra, som disse kan huske John Bull ved. Designet af medierne vil afspejle stemningen hos John Bull og have en rød tråd i designet. Hele kampagnen vil have samme layout og dermed være genkendelige. Unique Selling Points USP kan bruges i forskellige sammenhænge på alle medier. De er vigtige at bruge, da disse kan lokke forskellige interesserede til, som lægger vægt på noget forskelligt. - Den største udbyder af special-øl i Aalborg - 85 forskellige øl SIDE 39

40 UNDERSØGELSE - Forskellige events: musik, sport, øl-smagning - Engelsk pub - Udendørs- og indendørs servering - Slogan: Where good friends meet USP erne er fundet fra samtalerne med John Bull, tænke-højt-testen og markedsanalyserne. Events og øl er John Bulls primære ydelser. De to ydelser gør, at John Bull differentierer sig fra sine konkurrenter. De øvrige punkter supplerer de to primære ydelser og gør, at John Bull rammer så bred en målgruppe med alle sine tilbud til kunden, som kan medføre en følelse af en fuldendt oplevelse. Personas Personas er lavet med udgangspunkt i John Bulls målgruppe samt samtalerne med John Bull, hvor det er blevet beskrevet, hvordan kunderne hos John Bull er. En brugerprofil er et fiktivt billede og identifikation af brugeren, som bruges, når designet skal laves. Det er her muligt at forestille sig brugernes interaktion med hjemmesiden, hvilket scenarier bruges til. Det vil være en uoverkommelig opgave at beskrive alle potentielle brugertyper. Derfor har vi valgt at opstille tre personas, som John Bull kan gøre brug af (borger.dk), (personas.dk). Vi har valgt at lave personas til John Bull, så de kan bruge dem til deres fremtidige markedsføring. Ved at tænke personas beskrivelserne ind i deres markedsføring, bliver det nemmere for dem at ramme de rigtige personer. Det giver også os et overblik over typiske brugere. Bjarne Mogensen, 55 år. Job: Slagteriarbejder Bopæl: Mindre lejlighed i Aalborg Øst. Alder: 55 år Civilstatus: Fraskilt, 3 børn Fritid og hobby: Fiskeri og øl Medieforbrug: TV, avis og andre trykte medier Politisk parti: Dansk Folkeparti Bjarne er 55 år. Han bor i en lejlighed i Aalborg Øst. Han er fraskilt og har Figur 15: Personas: Bjarne SIDE 40

41 UNDERSØGELSE 3 store børn, en søn og 2 døtre. De 2 piger bor i Århus og sønnen bor i København. I alt har han 4 børnebørn. Bjarne har ikke den store interesse for politik, men stemmer dog Dansk Folkeparti til valgene. Bjarne kommer oprindeligt fra Hirtshals, men flyttede til Hjørring i en tidlig alder for at uddanne sig til slagter. Det var i Hjørring han mødte sin ekskone, som han senere flyttede til Aalborg med. Han har arbejdet på Danish Crown i mange år. Bjarne har altid haft en stor interesse indenfor fiskeri, og bruger meget af sin tid på at fiske. Meget af Bjarnes tid bruges på stampubben John Bull. Han går meget op i øl og nyder at sidde udenfor John Bull, med sin øl og læse dagens avis. Gennem sin tid på John Bull har Bjarne fået nogle andre venner på pubben i samme aldersgruppe som ham selv. Selv om Bjarne ikke er så gammel, er han ikke så teknisk anlagt. Bjarne har en ældre Nokia telefon og interesserer sig ikke så meget for mobiler og computere. Martin Skov, 23 år. Job: Studerer økonomi på Aalborg Universitet Bopæl: Aalborg Vestby Alder: 23 år Civilstatus: Single, 0 børn Fritid og hobby: Fodbold, venner Medieforbrug: Computer, smartphone, tv Politisk parti: Venstre Figur 16: Personas: Martin Martin er 23 år og den ældste af en søskende flok på 3. Martin studerer økonomi på Aalborg Universitet. Han kommer oprindeligt fra Brønderslev men flyttede til Aalborg for at studere. Der boede han med sine forældre, Hanne og Ole og sine to søskende, Lærke og Emil. Han gik på Brønderslev Gymnasium på en samfundsfaglig linje. Nu bor han sammen med 3 andre drenge i en lejlighed i Aalborg Vestby tæt på centrum. Mange af Martins venner fra Brønderslev er også flyttet til Aalborg, så dem mødes han med jævnligt. Martin er meget politisk engageret og har for nogle år siden været næstformand i Venstre Ungdom i Aalborg. Men efter han er startet på universitetet har han ikke SIDE 41

42 UNDERSØGELSE haft så meget tid til det. I stedet bruger han sin fritid på at spille fodbold i Aalborg Chang med folk fra studiet. Martin kan godt lide at tage en tur i byen efter en hård uge med studier. Ham og hans studiekammerater kommer en gang i mellem på John Bull, især til sportsaftenerne. Han synes det er et godt sted at gå hen for at være sammen med gutterne. Der er hyggeligt, man kan snakke sammen og rafle. Martin har en smartphone og har mange forskellige app s, som han bruger dagligt. Dorthe Kristensen, 49 år. Job: Social og sundhedshjælper Bopæl: Nedlagt landbrug udenfor Sindal. Alder: 49 år Civilstatus: Gift med Gert, 2 drenge. Fritid og hobby: Strikning og bagning Medieforbrug: TV, radio, avis, computer, smartphone Politisk parti: Socialdemokraterne Figur 17: Personas: Dorthe Dorthe er 49 år og gift med Gert. De bor på en lille gård, et stykke fra Sindal, med deres 2 drenge, Jesper og Kristian. Hun kommer fra Vrå, men flyttede i en tidlig alder sammen Gert i en lejlighed i Sindal. Derefter købte de gården, som de satte i stand sammen. Hun arbejder på Solsiden, en socialpsykiatrisk boform, som social og sundhedsmedhjælper. Når hun ikke arbejder, strikker hun trøjer og tasker. Hun går også meget op i at bage og dyrke grøntsager i hendes drivhus. Hun bruger dagligt computeren til at læse nyheder og se vejrudsigten, samt smartphonen til at tjekke Facebook på. Dorthe og Gert holder begge meget af vin og specialøl. De deler gerne en flaske vin eller får en øl til aftensmaden. De er også af og til til øl-smagning med venner. Når hun en gang i mellem kommer forbi Aalborg, skal hun og veninderne altid forbi deres stampub John Bull. Det er efterhånden blevet en tradition at tage derhen, når de er på tur i Aalborg. De syntes, det er rigtig hyggeligt og ikke skummelt som mange andre værtshuse. Der er mulighed for at snakke og høre noget god musik. De tre personas er lavet udfra, at ramme så bredt som muligt. Alle tre bør bruges i udformningen af de forskellige medier. Hvis medierne rammer de tre personas, rammer de den brede målgruppe, som er målet. De tre personas skal samtidig tænkes ind, så medierne tiltaler alle tre. SIDE 42

43 UNDERSØGELSE Kommunikation Kommunikationsmål Kommunikationsmålene viser, hvad de overordnede mål med kommunikationen er (Lindberg 2010:figur 5.4): - Kendskab til John Bull klargøre via medierne, hvad de står for, deres ydelser mm. - Udvidet målgruppe udforme medierne, så en bred målgruppe rammes og trækkes til pubben. Herunder ønskes det, at de ungeogså rammes. Kommunikationsplanlægning Kommunikationsplanlægningen viser en overordnet plan for, hvordan der bliver kommunikeret med de rette modtagere (Fischer & Oosterbaan 2010:117). Involverede: Gruppen og John Bull Formål: John Bull har til formål at trække flere kunder til pubben. Ved redesign af hjemmesiden samt de nye medier opnår de det formål. Det sekundære formål er, at når kunden er lokket ned på pubben, får de så god en oplevelse, at de har lyst til at komme igen samt fortælle den gode oplevelse videre. Input/Dokumentation: Diverse undersøgelser fra foranalysen og undersøgelsesfasen understøtter de valg, som foretages i designfasen. Aktiviteter: Oplysninger om hjemmeside, Facebook og app figurerer på trykte medier, som hænger på John Bull samt ligger i baren. Samtidig informeres der om app en via hjemmesiden og Facebook. John Bull annoncerer yderligere i diverse magasiner, f.eks. et norsk rejsekatalog, hvori de yderligere kan henvise til de forskellige medier. John Bull har sponsorater på forskellige sportshold/sportsudøvere. De trykte medier skal primært befinde sig på John Bull. Dog lægger vi vægt på, at de trykte medier udformes således, at John Bull har mulighed for at placere dem offentlige steder, hvor målgruppen befinder sig. Eksempelvis kan plakaten hænges forskellige offentlige steder, som SIDE 43

44 UNDERSØGELSE biblioteket, turistinformationer, diverse skoler og blot offentlige opslagstavler, hvor de vil være blikfangende og fortælle modtageren om John Bulls ydelser med målet om at lokke dem ned på pubben. John Bull har ligeledes mulighed for at placere flyeren offentlige steder, hvor målgruppen befinder sig. Herunder også muligheden for at dele flyeren ud i Aalborg gågade. De offentlige steder, hvor målgruppen geografisk befinder sig, kan bl.a. ses i målgruppeanalysen. Output/Dokumentation: Det vil undersøges via Google Analytics, om John Bull får flere besøgende på hjemmesiden efter den yderligere markedsføring. Det vil samtidig undersøges, om disse bliver længere tid på siden efter de nye tiltag. Det vil kunne ses på de besøgende, om der er kommet flere unge. Hvilket også kan måles endnu engang, når man laver forskellige tiltag for at nå nye studerende i august/september. oplevelse når de besøger hjemmesiden nu, end de test vi lavede inden foretaget på det gamle udseende. Ansvarlig: Projektlederen og de øvrige medlemmer af gruppen er ansvarlige for at aflevere de aftalte medier til John Bull samt lave en plan for, hvordan de kan opnå de opsatte mål. Lasswell Lasswell s kommunikationsmodel tager udgangspunkt i, at kommunikation er en overførsel af meddelelser (Fischer & Oosterbaan 2010:24). Disse meddelelser foregår i et transmissionsparadigme i en retning fra venstre mod højre, mens modtageren er en passiv modtager af det sendte budskab. Det vil kunne ses i app ens backend, hvilke styresystemer, som oftest henter app en. Herunder kan det også ses om de bruges. Både i app en WHO SAYS WHAT IN WHICH CHANNEL TO WHOM WITH WHAT EFFECT og fysisk er der lavet stempelkort, som får kunderne til at komme igen og COMMUNICATOR MESSAGE MEDIUM RECEIVER EFFECT udnytte fordele ved disse. Det kan herpå ses, om det lokker folk tilbage til John Bull. Der kan efterfølgende laves test på, om brugeren får en god Hjemmesiden: Figur 18: Lasswells model SIDE 44

45 UNDERSØGELSE John Bull præsenterer sine ydelser via deres hjemmeside til deres målgruppe og omverdenen, som gør disse opmærksomme på de forskellige ydelser, samt giver dem lyst til at besøge John Bull. App en: John Bull præsenterer sine ydelser samt tilbyder andre fordele via en app til sine kunder, hvilket giver kunderne fordele ved at besøge netop John Bull i stedet for en konkurrent. Det skaber samtidig en anderledes omtale om John Bull, da det er noget forholdsvis nyt på markedet. Trykte medier: John Bull gør opmærksom på sine medier og ydelser via trykte medier som plakater, flyers mm. til interesserede, hvilket giver disse lyst til at besøge de yderligere medier. Facebook: Facebook fungerer på en lidt anden måde. Her kan modtageren nemlig handle i et interaktionsparadigme, hvor denne har mulighed for at foretage en interaktion og ikke blot være passiv. Transmissionen viser vigtigheden af, at det rigtige budskab kommunikeres ud til modtageren for at få den rigtige effekt i sidste ende. Den ønskede effekt er, at modtagerne ender med at besøge John Bull. Kommunikationsmiljøet Vi bør være opmærksomme på, at det marked vores kommunikation foregår på, er overfyldt med kommunikation fra konkurrenter og andre udbydere (Fischer & Oosterbaan 2010:129). John Bulls beliggenhed midt i centrum medfører, at der netop er et overfyldt miljø i området. Målgruppen modtager ofte henvendelser fra diverse udbydere af forskellige ydelser. De formodes derfor at være mættet. Dog er mennesker altid interesseret i et godt tilbud. App en vil skabe en anderledes omtale med tilbud, som målgruppen ikke får alle andre steder fra. Dog er dette medie begrænset, så kun folk med smartphones kan få glæde af det, hvilket det fysiske stempelkort vil komplementere. Vores budskab kan forsvinde i mængden. Dog vil vi hovedsageligt oplyse SIDE 45

46 UNDERSØGELSE om det, når modtageren befinder sig på John Bull. Denne får derved en fuldendt oplevelse i øjeblikket og kan fortælle den gode oplevelse og fordelene videre til andre. Målgruppen Se målgruppeanalyse i foranalysen. Research Analyse og Designbrief Vi har udarbejdet en researchanalyse, som vil hjælpe os med at sammenfatte hovedpunkterne inden designet planlægges (Nielsen, Kej & Granholm 2010:100). Researchanalyse Produktet - En ny hjemmeside til John Bull samt tilsvarende app. Derudover Kunden plakater, flyers og stempelkort. Projektet tager 8 uger. Kunden er John Bull, som er en engelsk pub beliggende i Aalborg centrum. Den åbnede i Der er plads til 140 personer indendørs, og 80 personer udendørs. De har det største udvalg af specialøl i Aalborg og forskellige events hver uge. Produktets udbydere Hjemmesiden og app en er produkter. Det er vigtigt at disse fanger målgruppens interesse og gør dem interesseret i at vide mere. Det er derudover også vigtigt, at disse dernæst opfylder modtagerens forventninger, så denne går derfra med en god oplevelse og lysten til at gentage besøget samt fortælle den gode oplevelse videre. Positionsringen, marked og konkurrenterne Der er mange konkurrenter i området især i Jomfru Ane Gade. En udvidet konkurrentbeskrivelse kan ses i foranalysen. Anden reklame og markedsføring Hjemmesiden og app en vil blive markedsført via plakater og flyers, som henviser modtageren til AppStore og Google.Play. Disse medier vil være synlige forskellige, offentlige steder, hvor mange mennesker befinder sig. En designbrief viser overordnede elementer, som bør tænkes igennem SIDE 46

47 UNDERSØGELSE designet af hjemmesiden (Nielsen, Kej & Granholm 2010:105). Designbrief Formål Formålet med hele projektet er, at lokke flere kunder til John Bull. Medierne skal gøre målgruppen opmærksomme på John Bull s store udvalg af specialøl. Derudover skal disse informere den interesserede om de forskellige events, som John Bull tilbyder. Det er vigtigt, at de forskellige medier rammer den rigtige målgruppe og giver denne lyst til at besøge John Bull. Målgruppe Se beskrivelse i foranalysen. Hvad skal modtageren vide? At John Bull tilbyder specialøl. At John Bull har forskellige events i form af musik og sport. At John Bull ligger i Aalborg. At John Bull tilbyder noget ekstra til sine kunder. At John Bull har både udendørs- og indendørs servering. At John Bull tilbyder ydelser til en bred målgruppe. Hvad skal modtageren føle og tænke? Modtageren skal have lyst til at besøge John Bull efter at have set stemningen på de forskellige medier. Medievalg - Ny hjemmeside - App - Plakat, som lokker modtageren til at hente app en. - Flyer, som lokker modtageren til at hente app en. - Stempelkort, som kan bruges i baren på John Bull. Andet John Bull går efter at få et øget kendskab til pubben samt ramme en endnu bredere målgruppe, herunder de unge. Researchanalysen og designbriefen har opsamlet de vigtige punkter inden designet påbegyndes. SIDE 47

48 DESIGN Idégenerering i designfasen Indhold En indholdsopgørelse viser hvilket indhold og hvilke grene, der er på en hjemmeside (Busch et al. 2011:180). Denne opgørelse kan hjælpe med at finde frem til, hvilket indhold der bør medføres fra den gamle hjemmeside til den nye hjemmeside. De punkter med stjerner er det indhold, som bør medtages til den nye hjemmeside. Her er alle informationer om John Bull, produkter og events. Herunder også ideen med månedens øl og tilbud. Samt links til Facebook og Fødevarestyrelsens smiley. Den tidligere brainstorm over indhold til hjemmesiden kombineret med ovenstående indhold samt resultaterne fra tænke-højt-testen kan der nu laves en sitemap over indholdet til den nye hjemmeside. Inden den præcis laves, bliver der lavet en feature-liste, som rammer op, hvilke prioriteter de forskellige funktioner har på hjemmesiden (Busch et al. 2011:167), (Bilag 6). Punkterne med prioritet 1 er vigtige og bør være synlige gennem hele siden. Indholdet tydeliggøres derved inden sitemappen laves (Busch et al. 2011:171). Den nye hjemmeside vil indeholde 6 menupunkter: Forside, Udvalg, Events, Om os, Galleri, Kontakt. Figur 19: Idégenerering i designfasen SIDE 48

49 DESIGN hjemmesiden. Disse underbygger og giver et grundlag for vigtige elementer. Figur 20: Sitemap ny hjemmeside Hvad er funktionen af menulinjen hvad skal den indeholde - Seks vigtige punkter: Forside, Udvalg, Events, Om os, Galleri, Kontakt - Overskueligt genkendeligt med andre hjemmesider - Brugervenlighed - Menuenlinjen er altid synlig og brugeren ved, hvilke muligheder denne har Opdelingen og indholdet har fundet inspiration i den nuværende side kombineret med de nyfundne tiltag. Her er især lagt vægt på de ting, som der kom ud af mødet med John Bull samt interaktionen med brugerne om, hvad de forventer at finde på hjemmesiden og hvor. Guidelines 10 guidelines med forskellige funktioner skal hjælpe med opbygningen af Facebook integration på hjemmesiden - John Bull bruger deres Facebook meget, det samme gør mange i målgruppen. Derfor er det vigtigt at have denne interaktion mellem de to medier - Facebook er synlig på alle sider - Teksten like er en mulighed, som brugeren kender og ved, hvad betyder Farverne skal tiltale den brede målgruppe SIDE 49

50 DESIGN - Mange forskellige interesser og livsstile i målgruppen - Farverne bør tiltale alle i målgruppen, ikke ekstreme farver - Modtageren bør ikke skulle tage stilling til farverne - Farverne skal spille sammen med farverne på selve baren hos John Bull Det er vigtigt, at udvalg siden er overskuelig - Det er noget af det vigtigste, at de forskellige øl er præsenteret på hjemmesiden - Skal være nemt og hurtigt at overskue - Nogle øl skal kunne have mere information end andre Sproget skal passe til brugeren - Brugervenligt sprog skal ramme alle i målgruppen, nemt at forstå - Hjemmesiden bruger samme uformelle sprog som brugeren - Dansk, men meningen er, at det skal laves på engelsk og norsk også Feedback om brugerens placering - Det valgte menupunkt bliver markeret på en måde, så brugeren kan se hvor denne er - Menulinjen vil være synlig på alle sider, så brugeren hurtigt kan fornemme sine muligheder - Brugervenligt Det er vigtigt, at event siden er overskuelig - Event siden er noget af det vigtigste på hjemmesiden - Skal være nemt og hurtigt at overskue - Alle events skal være samlet, men markeres som forskellige via f.eks. forskellige farver Månedens øl bruges meget - Månedens øl bør have markant placering Hjemmesiden bruges som en oplysningsside - Nemt, overskueligt og brugervenligt - Skal bl.a. ramme en målgruppe, som ikke nødvendigvis er meget tekniske - Relevant information på siden, som er nemt at finde SIDE 50

51 DESIGN John Bull skal selv kunne lave alt på hjemmesiden i fremtiden - Vigtigt med et brugervenligt backend-system - Nemt at tilføje nyheder, nye øl osv. - Opdateringer opdateres automatisk f.eks. vha. dato-specificering Dette giver os mulighed for at få inspiration fra andre sider, som allerede eksisterer og fungerer. Herunder nogle af de store hjemmesider, som højst sandsynligt har haft store mediebureauer til at lave deres side. De 10 guidelines skal tænkes ind når layoutet designes. Punkterne fortæller, hvad hjemmesiden bør indeholde, samt hvordan den bør indeholde dem. Layout De 10 guidelines har givet retningslinjer for, hvad hjemmesiden bør indeholde. Det bliver derved nemmere at tænke over mulige layouts, når noget af indholdet er i baghovedet. Moodboard - opbygning Alle i gruppen fik til opgave at surfe på nettet i 2 timer. Her skulle findes internetsider, som kunne give inspiration til forskellige funktioner, layout og generelt bare ideer. Figur 21: Moodboard del 1 SIDE 51

52 DESIGN Low-fi Det samlede layout forslag blev dernæst lavet til en low-fi hjemmeside. Den kan ses på billedet til venstre. Hovedmålet med low-fi en var at finde ud af, om hjemmesidens udgangspunkt var logisk og intuitiv ved at teste den på tilfældige testpersoner. Her blev især lagt vægt på, om testpersonerne forstod de seks menupunkter, og hvad forventningerne var til, hvad disse indeholdte. HEADER HOME UDVALG EVENTS LOGO OM OS GALLERI KONTAKT MAIN Home Figur 22: Moodboard del 2 De forskellige sider blev klistret på væggen til en slags moodboard. Hver især i gruppen fik da til opgave at lave et udkast på en mulig opsætning på John Bulls hjemmeside (Bilag 7). De bedste ideer fra de forskellige udkast kunne derefter samles til et muligt layout forslag. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In posuere felis nec tortor. Pellentesque faucibus. Ut accumsan ultricies elit. Maecenas at justo id velit placerat molestie. SIDE 52 Figur 23: Low-fi - Forsiden FOOTER

53 DESIGN En af testpersonerne startede med at se forsiden på hjemmesiden, hvortil der blev spurgt, hvad personen troede, der var på siden. Som eksempel kunne testpersonerne blive bedt om at finde information om John Bull s produkter og derefter navigere sig frem vha. hjemmesiden til, hvilken menu de mente, var den rigtige. Alt imens dette foregik, var en af de øvrige gruppemedlemmer observant. HEADER Øvelsen gav et godt indblik i, hvad testpersonerne tænkte, når de fik low-fien i hånden samt høre, hvad deres umiddelbare mening var. Testpersonerne havde ingen problemer med at navigere rundt på low-fi hjemmesiden. Der var ingen problemer med at forstå, hvad de seks forskellige menupunkter indeholdte, og indholdet stem te overens med forventningerne. HOME UDVALG EVENTS LOGO OM OS GALLERI KONTAKT MAIN Udvalg Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In posuere felis nec tortor. Pellentesque faucibus. Ut accumsan ultricies elit. Maecenas at justo id velit placerat molestie. En af de vigtige funktioner ved hjemmesiden er at oplyse målgruppen om de forskellige events hos John Bull, da det er en af deres kerneydelser. Nogle testpersoner kommenterede, at kalender layoutet evt. ville blive uoverskueligt. FOOTER Figur 24: Low-fi Udvalg SIDE 53

54 DESIGN HEADER HOME UDVALG EVENTS LOGO OM OS GALLERI KONTAKT MAIN Events Valget er dog faldet på at lave et udkast, hvor logoet sidder midt i menulinjen. Dette for at lave noget anderledes, skille sig lidt ud, samt fordi, at de har et stort, markant logo, som kan bære det. HEADER HOME UDVALG EVENTS LOGO OM OS GALLERI KONTAKT MAIN Om os Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sposuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Personale FOOTER Figur 25: Low-fi Events Et af test-punkterne var ligeledes logoets placering. Normalt sidder logoet øverst i venstre side, da den traditionelle læselinje går fra øverste venstre hjørne mod nederste højre hjørne (Busch et al. 2011:162). Figur 26: Low-fi Om os FOOTER SIDE 54

55 DESIGN Logo-placeringen blev taget godt imod af testpersonerne, som fandt det meget naturligt og relevant med den placering. Det blev dog påpeget, at det er vigtigt, at denne fungerer som et link til forsiden. Low-fi testen har vist os, at layout forslaget kan fungere med den opbygning, som ses nu. Enkelte ting skal ændres men hovedsageligt blev det modtaget tilfredsstillende. HEADER HOME UDVALG EVENTS LOGO OM OS GALLERI KONTAKT MAIN Kontakt HEADER HOME UDVALG EVENTS LOGO OM OS GALLERI KONTAKT MAIN Galleri FOOTER Figur 28: Low-fi Kontakt Scenarier De tidligere personas kan med fordel bruges til at opstille scenarier med hændelser, som sker på John Bulls nye hjemmeside. Et scenarie er en Figur 27: Low-fi Galleri FOOTER SIDE 55

56 DESIGN beskrivelse af en række handlingsforløb, som det kunne tænkes at brugeren kunne foretage. Gennem scenarierne beskrives brugerens tanker, handlinger og de følelsesmæssige aspekter til handlingen. Personas og scenarier bruges til hjemmesider for at gøre disse mere brugervenlige. (deducta.dk), (Busch et al. 2011:174) Brugerscenarier John Bulls hjemmeside. Person: Bjarne Mogensen Mål: At finde månedens øl hurtigt og nemt. Hændelse, som starter scenariet: Bjarne har hørt fra en af de andre stamkunder, at den nye månedens øl, skulle være rigtig god. Derfor vil Bjarne finde ud af, hvad det er for en og læse lidt mere om den. Scenariet: Da Bjarne ikke er den store computer haj, har han lidt problemer med at komme ind på siden. Han vælger at gå vej af Google for at finde deres internetadresse. Han søger på John Bull i Aalborg og kommer ind på siden. Det første han ser, er billedslideren på forsiden. Han får dog hurtigt øje på de grønne bokse i højre side, hvor en af dem indeholder information om månedens øl. Bjarne klikker på boksen og kommer ind på Udvalg siden. Øverst på siden står månedens øl. Ud over et billede, er der også information om øllen. Efter at have læst om øllen, går han ud af siden. Han føler at han fik, hvad han ledte efter. Person: Martin Skov Mål: At undersøge, hvornår John Bull holder det næste sportsevent. Hændelse, som starter scenariet: Martin og hans kammerater har snakket om at tage ned på John Bull og se den næste fodboldkamp. Han vil derfor finde ud af, hvornår de viser kampen. Scenariet: Martin er superbruger af smartphones og vælger at gå ind på John Bulls hjemmesiden på mobilen. Han skimmer menuen og finder hurtigt, hvad han leder efter. Han trykker på Events og kommer ind på siden. Øverst oppe står den pågældende måned og datoen for den næste event. Martin spotter hurtigt, at næste kamp er Arsenal vs. Chelsea, og den vises kl. 20:00. Han lukker ud af internettet på mobilen. Han fandt hurtigt frem til den ønskede information. SIDE 56

57 DESIGN Person: Dorthe Kristensen Mål: At finde ud af hvornår John Bull åbner om lørdagen. Hændelse, som starter scenariet: Dorthe og hendes veninder har snakket om at tage en tur til Aalborg og shoppe lidt. Mens de nu er der, skal de selvfølgelig forbi deres yndlings pub. Derfor vil Dorthe finde ud af, hvornår de åbner, så de ved, hvornår de skal tage til Aalborg. Scenariet: Dorthe har aftalt med de andre damer, at hun skal undersøge, hvornår John Bull åbner om lørdagen. Dorthe bruger dagligt computeren og åbner nemt siden. Hun giver sig god tid til at se sig omkring. Hun scroller lidt ned, og så får hun øje på åbningstiderne, som står i bunden på hjemmesiden i footeren. Logo-ændring Før i tiden var John Bull et franchise, hvor alle pubs havde det samme logo. Men efter kæden blev opløst, er alle pubberne i landet selvstændige. Efter at kæden blev opløst, er der flere, der har beholdt logoet heriblandt John Bull i Aalborg og i Randers. Men de to pubs er to individuelle pubs og har intet med hinanden at gøre. Det gamle, fælles logo bestod af en illustration af John Bull i midten med sin bulldog og en øl tønde. Et navnetræk med navnet og en cirkel med en krølle i røde, gule, sorte og beige farver. Scenarierne opstiller tilfældige hverdagshændelser, som kan foregå hos John Bulls målgruppe og derved foregå på hjemmesiden. Det er vigtigt, at hjemmesidens indhold opfylder de simple krav fra scenarierne. Dette tænkes ind, når designet udformes. Figur 29: Gammelt logo SIDE 57

58 DESIGN Grundet pubbernes selvstændighed har vi valgt at lave logoet om. Vi har fjernet den rødbrune farve, som omkransede illustrationen. Vi har bevaret John Bull illustrationen med bulldog og tønde for at lave en genkendelighed med det gamle logo. John Bull adskiller sig ved det nye logo fra de andre John Bull pubs, men samtidig er det ikke så langt fra deres gamle logo. Vi har lagt vægt på at få det nye logo til at ligne det gamle logo så meget som muligt. John Bull har deres logo vist enkelte steder; på spejlet, på lysholderne, på enkelte øl-haner, på fronten af baren ved plakatpladserne. Det er altså ikke vist mange, markante steder, det er vist steder, hvor det er forholdsvist nemt og ikke omkostningsfuldt at fjerne. John Bull kan vælge at ændre disse steder til det nye logo. Dog er det også muligt for dem at beholde det gamle logo de steder, da det nye logo ligner det gamle så meget, at det ikke vil være markant, at de har to logoer. Det nye logo ser således ud: Figur 30: Nyt logo Vi har bevaret selve John Bull illustrationen og teksten. Vi har dog tilføjet en boks rundt om navnet, som samler det hele. For at karakteren skal være mest synlig, har vi lavet boksens indhold (det sorte) lidt gennemsigtigt. På den måde fremstår John Bull illustrationen tydeligere. John Bull beholder John Bull illustrationen i form af mand, bulldog og tønde (deres kendetegn) samt navnetrækket. Det fremstår dog nu i en ny og forbedret udgave, som skiller sig ud fra de andre pubs. SIDE 58

59 DESIGN 1. layout udkast - forside Moodboardet hjælper os yderligere med farvevalg, stemningsbilleder Moodboard - design Et udkast på forsiden blev herefter designet med layoutet fra low-fi testen For at finde den rigtige stemning til layout udkastet, fik 3 tilfældige personer til opgave at udvælge 5 billeder hver ud af 60 tilfældige billeder. De osv., når det første layout udkast skal udformes. og farver og billeder fra moodboard, gruppens forskellige udkast og stemningen hos John Bull. 5 billeder skulle vælges ud fra, hvad de forbandt med en hyggelig oplevelse på en pub. Figur 31: Moodboard del 3 Det yderligere moodboard udmøntede sig i stemningen på billedet til venstre. Figur 32: 1. Layout udkast - Forsiden SIDE 59

60 DESIGN 3. møde med John Bull 3. kundemøde foregik i trygge rammer hos John Bull. Mødet foregik med gruppens medlemmer og den it-ansvarlige hos John Bull; Rami. Rami var den person, som oprindeligt godkendte et projekt til John Bull. Han blev stillet de samme spørgsmål som Nikolaj ved 2. møde (Bilag 8). Derudover blev der ved mødet løftet sløret for forsiden på første layout udkast. Udkastets indhold, opstilling og farver blev taget godt imod. Det nye logo blev ligeledes påpeget som en fin ting. 1. layout udkast udvalg og events Den gode modtagelse fra Rami gav grund til videreudviklingen af designet med nuværende layout, hvilket resulterede i en videreudvikling af forsiden samt udkast på udvalg og events. Figur 33: 1. Layout udkast Forsiden, redigeret SIDE 60

61 DESIGN Figur 34: 1. Layout udkast Udvalg Figur 35: 1. Layout udkast Events SIDE 61

62 DESIGN 4. møde med John Bull 4. kundemøde foregik hos John Bull med bestyreren Nikolaj. Han fik vist de 3 sider: forsiden, events siden og udvalgs siden. Alle tre blev godkendt med stor tilfredsstillelse. Der blev ligeledes fortalt, hvilke muligheder han havde ved de forskellige funktioner, hvilket gør hans nuværende arbejde meget lettere. Alt i alt et tilfredsstillende møde, som ligger grund for videreudviklingen af netop nuværende layout udkast. De resterende undersider blev dernæst designet med udgangspunkt i de allerede godkendte sider. Design af prototype - hjemmeside En blanding af John Bulls ønsker, de forskellige test og egne ideer har ledt til designet af hele prototypen (Bilag 9). Fokusområder Der er lagt vægt på to fokusområder gennem siden; brugervenlighed og enkelthed. Brugervenlighed er vigtigt på en side, hvor målet er at få brugeren til at besøge stedet. Siden er overskuelig på den måde, at brugerens muligheder altid er synlige. Det er derved nemt at navigere rundt på siden og finde frem til det, som der ledes efter. Målgruppen er meget bred, hvilket medfører, at der kan forventes brugere, som ikke har store teknologiske evner. Selv disse skal kunne finde rundt på siden. Hjemmesiden er bygget meget enkelt op. Dette er gjort, da ønsket fra John Bull er, at det blot skal være en oplysningsside. Indholdet og informationerne på siden drejer sig kun om relevante informationer om John Bull. John Bulls nuværende markedsføring er enkel, hvilket er vigtigt for os at ramme for at der i sidste ende er en chance for, at de vil bruge vores hjemmeside. De har derudover nogle retningslinjer, som eksempelvis logo og farver, som skal give den rigtige stemning hos John Bull, hvilke har været vigtige for os at ramme, for at få en vis genkendelighed overfor brugeren. Vi har mødtes med John Bull til nogle møder for at præsentere layoutet. Disse har godkendt vores layout løbende, hvorefter vi har kunnet fortsætte designprocessen. Det har været vigtigt for os, at kunden har SIDE 62

63 DESIGN godkendt vores designs, for at der i sidste ende er chance for, at de vil bruge vores medier. Dog ligger vi vægt på at differentiere os fra deres nuværende medier, ved at udnytte vores undersøgelser, som dermed dokumenterer forskellene. Udover møder med to af John Bulls ansatte, har designet ligeledes været vist på et personalemøde til hele personalet. Opbygning Hjemmesiden er delt op i tre dele; header, main, footer. Dette er valgt, da det er en opdeling, som modtageren kender fra mange andre sider. Headeren indeholder først og fremmest logoet, som skal fange brugeren, og denne kan nikke genkendende til. På begge sider af logoet befinder menupunkterne sig, som brugeren kan vælge imellem. Når et menupunkt vælges markeres denne med en streg under. De forskellige menupunkter er sat i en rækkefølge, som passer bedst til John Bull. F.eks. er Udvalg og Events først, da det er det, som John Bull er kendt for, det er hovedpunkterne i deres USP og dermed noget, de bør slå ned på. Kontakt med adresse osv. er også vigtig, men vises på de fleste sider længst til højre, hvor den også er placeret på John Bull, da brugeren forventer den placering. Headeren er konstant og går igen på alle sider. Main delen er en firkant. Indholdet i denne skifter, når brugeren trykker på et af menupunkterne. Denne er altså en firkant med ændrede informationer alt afhængig af menupunktet. Den tilpasser sig så i længden afhængigt af indhold. Footeren er delt op i fire bokse. I de fire bokse står den generelle information om John Bull, som modtageren altid let bør kunne finde. Footeren går igen på alle siderne. Heri findes åbningstiderne, kort med adresse, seneste nyheder samt den fjerde boks med Facebook, som modtageren kan klikke på og dermed like John Bull på deres Facebook-profil. Under de fire bokse er en adresse linje med John Bulls adresse og kontaktoplysninger samt Fødestyrelsens smiley. Gestaltlovene Vi har gennem hjemmesiden tænkt Gestaltlovene ind. Gestaltlovene kan bruges som vejledning til, hvad der hører sammen på en side. Lovene viser overordnet, at helheden er mere end summen af de enkelte dele (Fischer & Oosterbaan 2010:169), (webdesign.dk). På alle siderne er der lagt fokus på lovens nærhed ved de tre gennemgående bokse på siden. Den ene boks er headeren med logo SIDE 63

64 DESIGN og menupunkter, den anden boks er informationsfeltet, den tredje er footeren med de fire bokse og adresselinjen. Loven om lighed figurerer i forbindelse med, at uafhængigt af hvad brugeren trykker på, er der lighed på sidens layout. Samtidig er der brugt samme font og fontfarver gennem hele siden. Firkanten i midten af siden indeholder flere af lovene. Loven om forbundethed ses i indholdet, hvor der skiftevis er kasser og tekst. Kasserne viser f.eks. et billede samt tilhørende tekst. Loven om lukkethed ses ved, at brugeren fornemmer, at indholdet i maindelen er lukket. Sidernes opsætning Der findes seks menupunkter, altså seks forskellige undersider; Forside, Udvalg, Events, Om John Bull, Galleri, Kontakt. Forsiden er blot forsiden, som kommer frem, når der trykkes på logoet i headeren. Forsiden Forsiden er meget enkel og indeholder enkelte elementer, hvilket gør den overskuelig. De enkelte elementer er placeret på en måde, som gør det nemt for brugeren at se sine muligheder og dermed foretage en action. På forsiden er der en slide-funktion, som skifter mellem forskellige stemningsbilleder. Disse kan både være billeder udefra John Bull eller et billede af månedens øl med tilhørende tekst. Hvert billede kan sættes til at linke til en af undersiderne, som handler om det pågældende billede. En ide til et billede herunder kunne eksempelvis være information om app en. Hvis der trykkes på billedet, kommer brugeren ind til en underside, hvor der står mere information om app en. Hvis denne derefter vil se mere til app en og hente den lægges et link på, som linker brugeren direkte over i storen. Vi er ikke glade for, at brugeren kommer væk fra vores side, når denne skal se app en. Det er både dårligt at få dem væk fra siden og samtidig viser undersøgelser, at det kan være frustrerende for brugeren at blive linket over i noget andet og ukendt. Det vil dog være en god service, at linke brugeren til storen, hvor denne kan hente app en. Man kan gøre det sådan, at linket åbner i en ny fane, således at brugeren stadigvæk har vores side åben. Under slideren er to tekstfelter. Det øverste indeholder Seneste nyt. Dette tekstfelt trækker automatisk den nyeste nyhed, som John Bull har skrevet i backenden. Forsiden er derved konstant skiftende med nye informationer, hvilket viser, at der sker noget på John Bull, og det ikke blot er en gammel, ubrugt hjemmeside. SIDE 64

65 DESIGN Det nederste tekstfelt indeholder en kort, beskrivende tekst om John Bull. Det var et af ønskerne fra John Bull, at en sådan information var at finde på forsiden. Det gør samtidig brugeren tryg, da denne ved, hvem afsenderen er. Den kan ligeledes hurtigt se, at den er på den rigtige side. hvor der kan læses mere om netop dette event. De nederste af de to yderste bokse indeholder information om næste fodboldkamp, som vises på John Bull. Hvis modtageren trykker på et event, bliver denne linket ind til en underside, hvor der kan læses mere. I højre side er fire bokse. Den første indeholder information om månedens øl. Her kan John Bull sætte et billede ind af månedens øl samt tilhørende tekst. John Bull er kendt for deres specielle øl, så synligheden af dette er vigtig. Samtidig skifter deres udvalg ofte, hvilket bør informeres om, da det tiltaler nogle af de øl-elskere, som besøger John Bull. Boksen har en konstant størrelse uafhængigt af tekstindholdet. Der kan vises et bestemt antal tegn på forsiden, hvorefter brugeren linkes ind til Udvalg, hvor denne kan læse mere om månedens øl. Under boksen er en mindre boks, hvor den besøgende kan tilmelde sig John Bulls nyhedsbrev. Den øverste af de to yderste bokse indeholder information om næste musikevent på John Bull. Denne bliver automatisk trukket fra event-listen. I boksen vises et billede og en kort tekst. Hvis brugeren vil vide mere, kan denne trykke, hvorefter den linkes ind til en underside under Events, Udvalg Siden er gjort så enkel som muligt. Det vigtigste er at få brugeren til at få et overblik over de forskellige produkter, selvom der er mange. Derudover er der en kort, beskrivende tekst, så brugeren bliver oplyst om, hvad det præcis er, at denne kan se på siden. Layoutet på siden har fundet inspiration fra JustEat.dk. Det er en kendt hjemmeside, som viser menukort på alle de restauranter, som er medlem af JustEat. Det er derfor en kendt og brugt hjemmeside med mange brugere og besøgende. Øllene er delt op efter kategorier, som de også er i John Bulls menukort. Dette er angivet med en rød boks over udvalget. Hver øl er vist på den måde, at der i venstre side er vist mærkatet på øllen. Hvis brugeren tryk- SIDE 65

66 DESIGN ker på dette billede vises det større i en pop-up. Ved siden af er navnet på øllen og udspecificering af variant, farve og procent. Nedenunder en kort, beskrivende tekst om øllen. Nogle af de øverste, specielle kategorier har behov for mere tekst end de nederste, hvilket der er gjort plads til. Yderst i højre side er en kasse med sidens menupunkter. Denne kasse kører med ude i siden, når brugeren scroller op og ned. Dette er for at gøre det brugervenligt på en lang side. Det er derved nemt for brugeren altid at se sine muligheder. Når brugeren trykker på et af punkterne heri, springer fokus ned på den del af siden. Events Denne side viser foroven en kort tekst om, hvad siden indeholder. Siden vil give brugeren et overordnet billede af de forskellige events hos John Bull. På den gamle hjemmeside var events delt op efter genre. På den nye hjemmeside er events samlet i en kalender og opdelt vha. farver. Dette skal give brugeren et hurtigt overblik over de forskellige events på netop den dag, denne er interesseret i. Events kan både være musik, sport og andre arrangementer, f.eks. øl-smagning hos John Bull, Open By Night i Aalborg mm. Når brugeren klikker på eksempelvis et musik event, linkes brugeren til en underside med et billede og mere information om musikeren samt evt. et link til deres hjemmeside. Yderst i højre side er der igen to bokse, genkendeligt med forsiden. Den øverste viser næste musik event. Den nederste viser næste sport event. Om os En tekst foroven fortæller om John Bulls eksistens. Nedenunder vises et stemningsbillede fra John Bull. Yderst til højre er en lang boks magen til den på forsiden. I denne er et stemningsbillede og en kort tekst. Boksen handler kort om selveste navnet John Bull, hvor det kommer fra osv. Billedet vil derfor være af John Bull. Galleri Siden indeholder forskellige gallerier. Det er både generelle stemningsbill- SIDE 66

67 DESIGN eder men også billeder fra forskellige arrangementer på John Bull. Når brugeren kommer ind på siden er det nyeste galleri automatisk åbent. Denne kan så vælge at klikke på et billede, hvorefter det vises større i en pop-up. I pop-uppen er det også muligt at klikke videre i galleriet i stedet for at skulle åbne og lukke hvert eneste billede. Under billedet er en titel på billedet samt en linje, hvor brugeren kan se, hvor mange billeder der er i alt, samt hvilket nummer denne er ved. F.eks. nr. 6 ud af 30. Yderst i højre side er en boks, hvor alle galleriernes titel er stillet op med datoer. Denne boks kører op og ned på siden, når brugeren scroller, ligesom på Udvalg siden. Dette gør det overskueligt og brugervenligt for brugeren. Galleriet kan være vigtigt for nye, potentielle kunder hos John Bull, som muligvis ikke ved, hvordan der ser ud eller hvordan stemningen er. Derfor er det også vigtigt, at billederne sorteres inden de ligges ind på hjemmesiden, så det ikke kan skræmme mulige kunder væk. Samtidig er galleriet interessant for allerede eksisterende kunder, som muligvis har besøgt et af de omtalte events. Kontakt Siden indeholder kontaktoplysninger i form af tekst. Ved siden af dette er vist et Google Maps kort. Nedenunder er en kontakt form, hvor brugeren kan vælge om emnet er job, musik eller andet, som denne vil kontakte John Bull med. Under punkterne er tænkt søg job, ansøg om at spille på John Bull eller blot ris/ ros. Fontvalg Hjemmesiden indeholder to fonte. Menupunkterne og den generelle tekst på alle siderne er skrevet med Trebuchet. Microsoft vurderer fonten til at være en af deres bedste web-fonte. Den har været tilgængelig på alle Windows computere siden år 2000 (microsoft.com). Fonten er letlæselig i både den større skriftstørrelse i menupunkterne og overskrifter, samt på den lille skrift, hvor den er letlæselig i stedet for SIDE 67

68 DESIGN uoverskuelig. På de browsere som ikke kan læse fonten, ændres teksten til Arial, hvilket er specificeret i CSS en til hjemmesiden. Arial kan læses af alle browsere og er en meget brugt web-font. Linjen med sloganet under menulinjen var oprindeligt skrevet med fonten Segoe Script. Denne font kan dog ikke læses af alle browsere. Løsningen kunne have været, at sætte det ind som et billede, men på den måde vil det ikke være søgemaskineoptimeret. Sloganet og netop den linje indeholder meget markante og beskrivende ord for, hvad John Bull står for, hvilket brugerne ville kunne finde dem på. Vi kunne have noteret i CSS en, at Segoe Script blot skulle hentes ned til den pågældende browser, selvom denne ikke nødvendigvis i forvejen kunne læse den. Men da dette ville være brud på copyright, har vi derfor fundet en lignende font på Google Fonts, som er gratis. Segoe Script vises på de browsere, som kan læse den, ellers ændres den automatisk til den omtalte Google Font. Farvevalg John Bull har en meget markant stil på deres pub. Deres farvevalg er nøje overvejet for at ramme den engelske pub stil. Farvevalget på de forskellige medier har derfor taget udgangspunkt i disse farver, igen for at skabe genkendelighed. Farvevalget er vigtigt, da den skal tiltale en bred målgruppe og nødig skræmme brugeren væk (farvernesbetydning.dk). Grøn: Den grønne farve har følgende stikord: harmoni, balance, fred, ro, venlighed, naturen. John Bull har den grønne farve på fronten af pubben, samt på alle vægge og gardiner indenfor. Den grønne farve er en meget brugt farve til engelske pubber. England er kendt for sin venlige befolkning, hvilket den grønne farve også symboliserer, en slags venlighed, balance og ro. Rød: Den røde farve har følgende stikord: energi, styrke, mod, giver varme, livsvilje, selvtillid. John Bull bruger ligeledes meget den røde farve på pubben, hvilken også er meget set på engelske pubber. Den giver energi og varme, hvilket mærkes, når man træder ind på pubben. Herunder venlig betjening og venlige kunder som er på John Bull for hyggens skyld. SIDE 68

69 DESIGN Råhvid/Sand: Den hvide farve har følgende stikord: Renhed, klarhed, originalitet, godhed, sandhed, kreativitet, styrke, originalitet. Den råhvide farve er brugt på baggrunden på hjemmesiden. Den står ligeledes flot sammen med den markante røde og grønne farve. stemning gennem billederne på hjemmesiden. Folk skal føle sig velkommen, og billederne skal skabe tryghed. Billederne på hjemmesiden er stemningsbilleder og helst med mennesker for at skabe tillid og vise den rigtige John Bull stemning. Billeder siger mere end ord, og det er derfor vigtigt med stemningsbilleder og ikke blot tekst. Fotos fra pubben virker mere troværdige og autentiske. Sort: Den sorte farve har følgende stikord: Kreativitet, udadvendthed. Den sorte farve er primært brugt til tekster for at gøre disse letlæselige. Den sorte farve fremstår markant på den råhvide baggrund. Sort er ligeledes brugt i logoet, hvilket giver et godt layout og sammenspil gennem siden. Billedvalg På engelske pubs er der en særlig stemning. Alene indretningen og møblerne er helt specielle. Der er en hyggelig atmosfære, og det samme gælder hos John Bull. På John Bull er der en meget gammeldags, uformel og hyggelig stemning. Derfor har vi så vidt muligt prøvet at vise denne Der bør ikke være illustrationer, animationer eller tegninger i stedet for billederne, men kun fotos fra pubben. Illustrationen af John Bull i logoet er den eneste, der bør være. Gangster test på den nye hjemmeside Gangster test, også kaldet Trunk-test, går ud på at teste hjemmesidens effektivitet og forståelighed (Busch et al. 2011:196). Det foregår således, at en bruger uden kendskab til siden bliver smidt af på en af hjemmesidens undersider. Brugeren skal nu prøve at finde rundt og svare på nogle forskellige spørgsmål om, hvor denne befinder sig på siden. Vi har valgt at teste den på to forskellige personer. Vi har foretaget testen således, at den første testperson bliver udstyret med en tusch, og den anden blev placeret foran en computer. De bliver nu stillet de samme spørgsmål og SIDE 69

70 DESIGN skal navigere rundt på hjemmesiden, den ene online og den anden via screen prints, som vi har printet ud. Testperson 1, ham med tuschen, skal nu bruge denne til at markere, hvordan han vil navigerer rundt på siden. På den måde kan vi teste om det er nemt for brugeren at bevæge sig rundt på hjemmesiden. Ole Test person 1 (offline) Da testpersonen fik det første screen print, var han hurtig til at finde ud af, hvilken side han befandt sig på. Testpersonen fik til opgave, ved brug at tusch, at vise, hvor på siden han var, og hvad der indikerede dette. Han tegnede både en ring om sidens navn i menulinjen og overskriften på siden. Derefter fik han vist et print af forsiden og fik til opgave at vise, hvordan han ville finde John Bulls næste event. Han tegnede en cirkel om Events i menulinjen og omkring den øverste grønne boks i højre side. Alle de stillede opgaver viste, at navigationen på hjemmesiden var ligetil, og at brugeren ikke var i tvivl om, hvad de grønne bokse indeholdte. Figur 36: 1. Trunk test offline Kristina Test person 2 (online) Testpersonen var hurtigt klar over, hvilken side hun befandt sig på. Hun noterede, at det var logoet, som fangede med det samme og ledte videre til sloganet. Hun fandt også hurtigt ud af, hvor på siden hun befandt sig. Overskriften på siden gjorde det klart, hvilken underside hun var på. Ud over overskriften var undersiden understreget i menulinjen, så hun blev hurtigt opmærksom på sin placering på siden. Testpersonen kunne via menulinjen nemt navigere mellem de forskellige sider. Hun noterede, SIDE 70

71 DESIGN at det ikke er muligt at søge på siden. Vi har undladt en søgefunktion, da siden ikke er så stor, og det derfor ville være irrelevant, når brugeren nemt kan finde det, som denne leder efter vha. enkeltheden og brugervenligheden. Gennem vores Gangster-tests er vi kommet frem til, at brugerne har nemt ved at finde rundt. De finder hurtigt deres placering. Brugerne har ikke brug for en søgefunktion, da de nemt kan finde, hvad de leder efter. Siden har en fin opbygning, som begge testpersoner kunne gennemskue. Figur 37: 1. Trunk test online Tænke-højt-test på den nye hjemmeside Vi har foretaget en tænke-højt-test på John Bulls nye hjemmeside. Til denne test har vi brugt to tilfældige personer. De blev bedt om at navigere rundt på siden og tænke højt, mens de gjorde det. Følgende punkter kom ud af testen af den nye hjemmeside: - Træ-baggrunden giver en god stemning. - Gode og beskrivende stemningsbilleder. Man fornemmer, hvordan det er at være på John Bull. - God rød tråd forsiden og undersiden minder om hina den via de grønne bokse. - Siden er speciel ligner ikke en typisk hjemmeside. - Nem navigation - Godt overblik på forsiden man får de vigtigste oplysninger. - Evt. tilføj pile under galleriet, når billederne trykkes større. Så brugeren kan se, at den kan trykke til højre eller venstre for flere billeder. Tænke-højt-testen understøtter gangster testen. Hjemmesiden er nem at navigere rundt på og overskuelig. Yderligere tilføjede tænke-højt-testen, at udseendet giver den rigtige stemning med billederne og farverne. Ideen med pilen på galleriet bliver tilføjet og implementeret med det samme. SIDE 71

72 DESIGN At de forskellige personer fra begge test har været så positive omkring hjemmesiden viser, at hjemmesiden rammer en bred målgruppe som ønsket. Det er vigtigt for John Bull med deres brede målgruppe. Der blev testet tre tilfældige testpersoner, som til hver skærm blev spurgt, hvad denne ville gøre på dette billede. Som eksempel kunne personen blive bedt om at læse mere om forskellige ting, og om denne kunne finde denne information. På startskærmen og mere billedet blev der eksempelvis spurgt, hvad personen forventede, at der var under netop den menu. Alt imens dette foregik, var en af vores gruppemedlemmer observant. Design af prototype App Hjemmeside designet ligger baggrund for de forskellige valg i udformningen af app en (Bilag 10). Low-fi test Et udkast på app-designet blev testet på en low-fi applikation. Et af målene var at finde ud af, om applikationens udgangspunkt var logisk og intuitiv, samt om menupunkternes rækkefølge og navne gav god mening. Figur 38: Low-fi test på app Øvelsen gav et godt indblik i, hvad testpersonernes umiddelbare tanker og meninger var, når de fik low-fien i hånden. Navigationen var ligetil og SIDE 72

73 DESIGN menupunkternes navne var dækkende for, hvad der forventedes under netop det menupunkt. Det blev kommenteret fra en testperson, at det er vigtigt, at app ens layout ligner hjemmeside-layoutet meget. Dette fordi, at navnet John Bull ikke står på alle sider på app en. Layoutet kan så medvirke til en genkendelighed fra brugeren, så denne stadigvæk ved, at det er John Bulls app, denne er på. Resultatet af low-fi testen giver os baggrund for at lave designet til app en. Som tidligere nævnt er det vigtigt, at der er en genkendelighed mellem denne og hjemmesiden. Fokusområder Der er lagt vægt på de to samme fokusområder på app en som på hjemmesiden; brugervenlighed og enkelthed. Brugervenlighed er vigtig, når man har med en app at gøre. Det er stadigvæk et forholdsvist nyt medie, som folk skal vænne sig til. Applikationen er samtidig et medie, som blot er en ekstra service for brugeren. Denne skal derfor være let at gå til, for at brugeren ikke blot undgår den. Brugervenligheden ses bl.a. i, at app en har fælles træk med nogle af de mest brugte apps verden over, eksempelvis AppStore. Her er menulinjen i bunden vist med ikoner og beskrivende tekst. Målgruppen er som på hjemmesiden også meget bred på app en, hvilket medfører, at app en skal være tilpasset den ældre målgruppe, som muligvis ikke er superbruger af sin smartphone. Applikationen er bygget meget enkelt op. Indholdet og informationerne drejer sig kun om John Bull. Enkeltheden er med til at skabe en overskuelighed, som igen afspejler brugervenlighed. Ved at lave en app differentierer John Bull sig fra konkurrenterne. Få af konkurrenterne har deres egen app, f.eks. O Learys (olearys.dk). Andre er blot en del af en app, hvor flere udbydere viser deres virksomhed, hvilket John Bull også har været en del af (barsektionen.dk). Med en hel app kun for John Bull, kan de lave en mere effektiv markedsføring, hvor de rammer brugeren direkte i lommen med kun deres tilbud. Det giver ligeledes inkarnerede John Bull fans muligheden for kun at modtage information og tilbud fra John Bull og ikke andre udbydere. SIDE 73

74 DESIGN App en er gratis for brugeren at hente samtidig med, at denne får fordele via app en. App en vil være fordelagtig for brugeren at have, hvilket vi lokke denne til at hente den. Når app en er hentet, er der funktioner deri, som lokker brugeren ned til John Bull. Det bliver en markedsføringskilde for John Bull. Opbygning App en er stillet op med en menulinje i bunden, som brugeren kender fra andre apps. Der er først fire menupunkter i bunden efterfulgt af en mere knap, hvorefter de resterende menupunkter kommer i en listeform. Gestaltlovene Gestaltlovene vises ligeledes på app en, hvor de fungerer på samme måde som på hjemmesiden (Fischer & Oosterbaan 2010:169), (webdesign.dk). På alle siderne er der lagt fokus på lovens nærhed, hvor der øverst er en bjælke med menunavnet, så brugeren kan se, hvor denne befinder sig. Under bjælken er et felt, som skifter indhold alt afhængigt af det valgte punkt. Loven om lighed figurerer i forbindelse med at uafhængigt af, hvad brugeren trykker på, er der lighed gennem app ens layout. Samtidig er der brugt samme font og fontfarver gennem hele app en. Loven om forbundethed og lukkethed ses i de forskellige indholdssider, hvor der ofte er et billede foroven med tilhørende tekst nedenunder. Brugeren ved, at dette felt er lukket. Menupunkternes opsætning App en er bygget op med elleve menupunkter; Udvalg, Events, Tilbud, Kontakt, Stempelkort, John Bull, Tjek ind, Facebook, Nyhedsbrev, Galleri, Push. Rækkefølgen er valgt efter, hvad der er vigtigst og mest relevant for John Bull at vise. Dette også opdelt med en vis genkendelighed til hjemmesidens rækkefølge. Startside På startsiden kommer brugeren ind til en side, som ligner hjemmesidens layout. Her er menulinjen og logoet foroven og træ-baggrunden i hver side. Der er en slide-funktion midt på siden, som skifter mellem forskellige stemningsbilleder fra John Bull. Under denne står sloganet: An Old SIDE 74

75 DESIGN English Pub Where Good Friends Meet, hvilket også er en af deres USP og ses på hjemmesiden. Nedenunder er menulinjen markeret som knapper, hvilket er tydeligt for brugeren, at der kan trykkes på. Udvalg Menupunktet er en tekst-funktion, som indeholder 3 undersider; Månedens Øl, Øl Nyheder, Øl Menu. Undersiderne er gjort så enkle som muligt og indeholder lignende layout som på hjemmesiden. På hver side er der stemningsbilleder efterfulgt af tekst. Vigtig tekst er markeret med rød, såsom pris mm, så dette bliver iøjnefaldende. Events En events funktion, hvor alle events som tilføjes, bliver listet på denne side. Datoen er vist i venstre side, hvor der vises et kalender-ikon, hvilket brugeren forbinder med en dato. Når der klikkes ind på eventen rammes brugeren øverst af et stemningsbillede. Nedenunder står en beskrivende og fangende tekst. Siden indeholder forskellige funktioner, f.eks. kan brugeren fortælle sine venner om eventen via Facebook eller Twitter, eventen kan tilføjes brugerens kalender på mobilen, der kan tilføjes kommentarer og uploades billede. Tilbud Menupunktet er en tekst-funktion. Her kan John Bull ligge diverse tilbud ind til sine kunder. Eksempelvis kan der oplyses om månedens øl eller andet. Øverst figurerer et stemningsbillede for at fange brugeren samt en tilhørende tekst nedenunder. Kontakt Kontaktfunktionen viser et kort, hvor John Bull er placeret. Kortet ligner meget Google Maps, hvilket brugeren er kendt med. Der kan scrolles i kortet samt zoomes ind/ud med fingrene. Nedenunder står adressen. SIDE 75

76 DESIGN Herunder er der 3 funktioner; Ring til os, Se website, Send . Ring knappen ringer John Bulls tlf. nummer direkte op. Website knappen linker brugeren ind til John Bulls hjemmeside. knappen linker brugeren over i sit mail-system, hvor John Bulls adresse automatisk tilføjes modtagerfeltet. Yderligere er der en knap Get here. Hvis brugeren klikker på denne, linkes den automatisk til sin kort-funktion på telefonen, hvor John Bulls adresse bliver slut-punktet. Stempelkort Siden ser lidt anderledes ud end de tidligere sider. Her har John Bull muligheden for at lave forskellige klippekort/stempelkort/loyalitetskort til brugeren. Når brugeren klikker på en af mulighederne, kommer denne ind til en side, hvor et stempelkort er illustreret. Hvis brugeren vælger at stemple kortet, skal denne aflevere telefonen til en person i baren, som via en hemmelig kode, stempler kortet. Når brugeren har fået et vis antal stempler, får denne en gevinst for at have været en loyal kunde. Et eksempel kunne være, at kunden fik 6. øl gratis. Når denne så har købt 5 øl og fået stempelkortet stemplet hver gang i baren, kan den modtage 6. øl gratis. John Bull Siden er ligesom Udvalg en tekstfunktion og opstillet på samme måde. Den indeholder generel information om John Bull. Tjek ind Under Tjek ind har John Bull muligheden for at opstille forskellige gevinster ved at tjekke ind på John Bull. At brugeren har tjekket ind vises det på Facebook, Twitter eller via . Dette bliver dermed delt med brugerens forskellige venner, hvilket er en god markedsføringskanal for John Bull. Når brugeren har tjekket ind skal telefonen vises til en medarbejder hos John Bull. Brugeren kan herefter modtage en gevinst, som f.eks. kunne være 50 % på næste øl eller lignende. SIDE 76

77 DESIGN Det er muligt for John Bull at notere i backenden af systemet, at tjek ind kun kan ske med 24 timers mellemrum eller lignende, så brugeren ikke blot udnytter denne mulighed. vise til brugerne. Det er en god måde at få vist stemningen på pubben og lokke kunder til. Herunder kan bl.a. vises stemningsbilleder fra sidste øl-smagning, som giver kunden lyst til at opleve det. Facebook Facebook siden er en website-funktion, hvor siden blot linker til John Bulls side på Facebook. Brugeren kan gennem denne side like John Bull direkte på Facebook. John Bulls væg vises på denne side, så brugeren har ligeledes mulighed for at se de nyeste opslag. Nyhedsbrev Nyhedsbrevsfunktionen er en side, hvor brugeren kan tilmelde sig John Bulls nyhedsbrev. Når en bruger tilmelder sig, modtager John Bull en mail med diverse kontaktinformationer. Galleri Under galleriet kan John Bull ligge forskellige billeder ind, som denne vil Push Push funktionen er en af de største markedsføringskanaler ved en app. Når John Bull udsender en push-besked, rammer denne direkte i lommen på brugeren, som bliver mindet om John Bull. I denne besked kan stå alt fra information til tilbud osv. Semiotik Der er brugt adskillige ikoner, symboler og elementer i applikationen, som fortæller brugeren, hvilke muligheder denne har (Busch et al. 2011:277). Menulinjen indeholder et ikon til hvert menupunkt. Disse ikoner er set på andre medier og er derved genkendelige for brugeren, som kan gennemskue, hvilke muligheder den har. Den øverste boks indeholder på nogle sider en tilbage-knap. Til- SIDE 77

78 DESIGN bage-knappen er markeret som en pil, hvilket brugeren ved betyder, at denne kan gå tilbage. Nogle sider indeholder også en halv pil mod højre, hvor brugeren fornemmer, at der kan læses mere. Disse muligheder er placeret i hver sin side, som viser, at det er ekstra muligheder for brugeren. Fontvalg Fontvalget stemmer overens med hjemmesiden, hvor overskrifter og tekster er skrevet med Trebuchet. Skrifttypen passer fint til den lille skrift og er letlæselig for brugeren. Farvevalg Farvevalget gennem app en har taget udgangspunkt i farverne, som bruges på hjemmesiden. Genkendeligheden er altoverskyggende og brugeren kan se en rød tråd mellem de to. Usability test App Formålet med at lave en usability test på app en er både at teste brugervenligheden samt funktionernes evne til at give brugeren den rigtige oplevelse (Busch et al. 2011:314). Testen er foretaget på to tilfældige testpersoner. Disse fik lov til at sidde med app en i hånden og gøre præcis, hvad de havde lyst til. To observanter noterede bevægelserne i app en, navigeringen, rækkefølgen, ansigtsudtrykkene, tidsbruget i hver menu. På denne måde kom testen rundt om nogle af de typiske punkter i en usability test: - Let at lære - Effektivt at bruge - Forståelig - Rar at bruge Til slut fik testpersonen lov til at afsige sin mening om hele app en, samt spurgt, om app en var tilfredsstillende at bruge og anbefalelsesværdig. Testpersonerne var enige om, at de mest ville bruge app en, når de var på John Bull, hvor de kunne få fordele ud af stempelkortet og check ind funktionen. Disse to funktioner ville også typisk være deres salgstale, når app en skulle anbefales til andre. SIDE 78

79 DESIGN Derudover ville de bruge app en, hvis de vidste, at de skulle ud en weekend, for at tjekke om der var musik eller fodbold hos John Bull. Dette håbede de dog, også ville blive oplyst gennem push-funktionen, så de blev mindet om, at det var John Bull de burde besøge og ikke en anden tilfældig. Testen er foretaget på tilfældige testpersoner, som altså ikke nødvendigvis har interesse for øl, hvilket John Bulls primære kunder er. De typiske John Bull kunder ville muligvis bruge app en for at tjekke det nye øl-udvalg ud, månedens øl osv. Herunder også deres fodbold-fans, som hyppigt ville tjekke events-menupunktet. Testen viser altså, at app en er brugervenlig og let at navigere rundt i. Den kunne lokke testpersonerne ned til John Bull, som ikke var stamkunder. Dette er positivt i målet om at ramme en bred målgruppe. Trykte medier Der er ligesom på app en lagt meget vægt på, at de trykte medier har genkendelighed med hjemmesiden. Modtageren skal kunne huske John Bull på deres layout, samtidig skaber det en tryghed hos modtageren, at de kan se, at det er samme pålidelige afsender. De trykte medier skal bruges til at fortælle omverdenen om John Bulls ydelser. Herunder er der også lagt vægt på at oplyse om John Bulls nye app. Alle medierne indeholder ligeledes standard kontaktinformationer og henvisning til den nye hjemmeside, så modtageren opfatter det som værende fra en pålidelig afsender. Plakat Der er lavet to plakater i størrelsen A2. Størrelsen er lavet udfra de plakatpladser, som John Bull har på ydersiden af bygningen. Her er opslagstavler ved siden af døren og på bygningen, en større plakatplads ud til fortovet, samt et flytbart plakatstativ. Der kan hænge mindre plakater på pladserne, men en A2 plakat vil være mere blikfangende. SIDE 79

80 DESIGN Plakat månedens øl (Bilag 11) Plakatens layout ligner hjemmesiden meget. Baggrunden, headeren, boksen i midten og sloganet går igen på plakaten. Opstillingen gør, at plakaten ikke ligner alle andre plakater, men skiller sig ud ved at ligne en hjemmeside. Øverst i midten er en stor, blikfangende tekst, som skal fange modtagerens opmærksomhed og give denne lyst til at vide mere. Overskriften understøttes af teksten og billedet nedenunder, som beskriver yderligere. Nedenunder figurerer tre bokse, som informerer modtageren om nogle af ydelserne hos John Bull. Disse bokse har samme layout som boksene på hjemmesiden. I bunden er to QR-koder, som linker modtageren ind til app en i AppStore og på Google.Play. Lige nu linker QR-koderne dog kun til John Bulls hjemmeside, da app en ikke er produceret og der derfor ikke findes QR-koder dertil endnu. Plakaten indeholder de samme farver og fonte som på hjemmesiden. Kun en font er tilføjet, som henviser modtageren til at hente app en. Denne er skrevet med en tavle-lignende font, som forestilles at være skrevet på tavlen i indgangen til John Bull. Der bør printes en ny version af denne plakat, hver gang en ny månedens øl kommer til John Bull. John Bull får en skabelon på denne plakat, hvor de selv kan ændre billede og tekst til de fremtidige tryk. Det er dog med vilje, at månedens navn ikke er noteret ved månedens øl, da John Bull af og til vælger at have den samme øl to måneder i træk. Dette gør det nemmere for John Bull, så de ikke behøver printe en ny plakat hver måned. Aida-model Opstillingen har taget udgangspunkt i AIDA-modellen. Denne model bruges til at sætte reklamer op, så de fanger modtageren bedst muligt (startvækst.dk). Attention: Den anderledes opsætning af en plakat. Logoet øverst i midten på plakaten. Interest: Overskriften om events hos John Bull. SIDE 80

81 DESIGN Desire: Beskrivelse og stemningsbillede af øllen. De tre bokse med fordele. Action: Besøger John Bull. Besøger hjemmesiden eller scanner QR-koden og henter app en. Plakat information om ny app (Bilag 12) Plakatens layout har samme udseende som månedens øl plakaten. Øverst i midten er igen en stor, blikfangende tekst, som skal fange modtagerens opmærksomhed og give denne lyst til at vide mere. Teksten nedenunder er en kort beskrivelse af app en og billedet til højre viser en smartphone, hvor app en er åbnet i. De tre bokse, som er placeret nedenunder, indeholder tre af de vigtige funktioner i app en. I bunden er igen vist to QR-koder, som linker modtageren ind til app en i AppStore og på Google.Play. Koderne fungerer ligeledes ikke endnu på denne plakat. Farverne og fontene har samme beskrivelse som på den anden plakat. I modsætning til den anden plakat er denne plakat konstant. John Bull er altså ikke nødsaget til løbende at printe en ny version, men kan blot beholde denne version, så længe de vil informere om deres app. Aida-model Opstillingen har igen taget udgangspunkt i AIDA-modellen. Attention: Den anderledes opsætning af en plakat. Logoet øverst i midten på plakaten. Interest: Overskriften om John Bulls nye app. Desire: Beskrivelse og stemningsbillede af stemningsbillede af app en. Herunder også de tre bokse med fordelene ved at hente app en. Action: Besøger John Bull. Scanner QR-koden og henter app en. SIDE 81

82 DESIGN Flyer (Bilag 13) De to trykte medier har næsten samme layout. Flyeren har ligesom plakaten et hovedmål om at være blikfangende, lokkende og skabe nysgerrighed. Derfor vil flyeren indeholde mange af de samme elementer som plakaten samt ligne hjemmesiden. Det vil skabe en genkendelighed, som vil få modtageren til at huske at have set noget lignende før og dermed vide, hvad det omhandler. I modsætning til en plakat, har en flyer to sider, for- og bagside. Det er udnyttet ved, at der er tryk på begge sider. På denne måde kan John Bull informere kunden om mere end blot en ting. Samtidig kan de i baren selv vælge hvilken side, de vil have vist den pågældende dag. Hvis to bunker ligger på baren med en side hver, ligner det to forskellige flyers, hvilket viser en aktivitet hos John Bull. Flyeren er lavet i A5 størrelse. Flyeren har til formål at få modtageren til at besøge John Bull, besøge hjemmesiden eller hente app en. Flyerens opstilling har ligeledes taget udgangspunkt i AIDA-modellen. Attention: Layout som ligner en hjemmeside. Interest: Den markante overskrift, som pirrer nysgerrigheden hos modtageren. Desire: Beskrivelse og stemningsbilleder. Herunder også de nævnte fordele. Action: Besøger John Bull. Besøger hjemmesiden. Scanner QR-koden og henter app en. Flyeren indeholder det samme layout som plakaten med headeren, logoet, boksen i midten, sloganet og footeren. Der er ligeledes en fangende overskrift med informerende kasser nedenunder. Layoutet er ens på begge sider, dog med forskellige informationer og fokuspunkter. Realisering Flyeren er designet således, at den indeholder information, som ikke er skiftende. Den indeholder informationer om de primære ydelser hos John Bull samt information om den nye app. Det er informationer, som ikke er afhængige af at blive ændret, men kan forblive så længe det ønskes fra John Bull. SIDE 82

83 DESIGN Stempelkort (Bilag 14) Stempelkortet har taget udgangspunkt i layoutet på stempelkortet på app en. Denne ligner et stempelkort med felter, hvor der er plads til et stempel. Når det foldes har det størrelse som et visitkort, så det er lille og nemt at have med i pungen. Yderligere har kortet taget udgangspunkt i plakaterne og flyeren med samme layout, opstilling og informationer. Semiotik De trykte medier har ligesom app en brugt semiotik i layoutet. Dette i form af pile, ikonerne fra AppStore og Android samt et symbol i form af billedet af smartphonen, hvor app en er åben. SIDE 83

84 REALISERING 5. møde med John Bull Det 4. møde foregik med Rami hos John Bull. Målet med mødet var, at få John Bull til at godkende hele hjemmesiden i god tid inden afleveringen, så eventuelle rettelser kunne nå at implementeres. Mødet indeholdt en visning af hjemmesiden, app en samt en gennemgang af mulige markedsføringsmedier. Alt blev meget positivt modtaget uden rettelser. Ud af mødet viste John Bull stor interesse for nyhedsbrev-funktionen. Samtidig blev John Bull orienteret om følgende punkter: - Muligheden for, at nyheder på hjemmesiden automatisk vises på Facebook - Hjemmesiden tilpasser sig automatisk størrelsen på det medie, som brugeren bruger - John Bull har mulighed for, at oprette en fiktiv profil på Facebook, så vennerne ikke spammes med ALLE kampe, men kun de store kampe - I backenden på Wordpress kan laves enkelte profiler, hvilket sikrer, at brugerne backend ikke kan ødelægge noget User cases I modsætning til scenarier, som beskriver brugerens tanker og handlinger, fokuserer user-cases på interaktionen mellem system og bruger. Scenarier og user-cases giver ofte inspiration og nye ideer. Ved brug af disse finder man frem til eventuelle problemer i opbygningen. (Busch et al. 2011:174) Den brede målgruppe gør det vigtigt, at hjemmesiden er enkel og brugervenlig. Vi har derfor stillet forskellige user-cases op, som kort viser, hvor enkelt det skal være mellem brugeren og systemet. User case: Tilmeld nyhedsbrev Præ-betingelse: At brugeren kommer ind på siden Post-betingelse: At brugeren gennemfører tilmeldingen og modtager en mail om tilmeldelse. 1. En bruger kommer ind på hjemmesiden. 2. Brugeren klikker på nyhedsbrev oppe i højre hjørne. 3. Systemet åbner siden Nyhedsbrev med tilmeldings formular og SIDE 84

85 REALISERING beder om Brugeren skriver sin adresse i formularen og klikker på knappen tilmeld. 5. Systemet gemmer adressen i databasen og svarer brugeren, at denne nu er tilmeldt. 6. Systemet sender ligeledes en mail til brugeren om, at tilmeldingen er gennemført. User case: Deltag i konkurrence Præ-betingelse: At brugeren kommer ind på siden Post-betingelse: At brugeren deltager i konkurrencen. 1. En bruger kommer ind på hjemmesiden. 2. Brugeren klikker på linket Deltag i konkurrencen. 3. Systemet åbner siden Konkurrence med et spørgsmål samt en formular til svar og -adresse. 4. Brugeren skriver sit svar og sin -adresse i formularerne og klikker på knappen send svar. 5. Systemet gemmer svar og -adressen i databasen og svarer brugeren, at denne nu er med i konkurrencen. 6. Systemet sender ligeledes en mail til brugeren om, at brugeren vil blive kontaktet, hvis denne har vundet. De forskellige user cases er testet på systemet med succes. Backenden og frontenden fungerer sammen, hvilket er vigtigt, når hjemmesiden skal offentliggøres. Kodning af hjemmeside Til kodning af hjemmesiden er der anvendt html, css, javasript og php. Php er blevet valgt, da kunden ønskede en Wordpress hjemmeside og Wordpress kun arbejder i php. Hjemmesiden er kodet i Dreamweaver, og det er blevet valgt, da det fra start kan håndtere php. Før hjemmesiden blev overført til Wordpress, blev hjemmesiden sat op i ren css og html. Hjemmesiden er responsive og passer til alle skærmstørrelser. Det første der blev kodet var den gennerelle opbygning, og hvordan hjemmesiden skulle reagere i mindre browser størrelser. For at få hjemmesiden til at tilpasse sig alle skærmstørrelser, er den blevet stylet SIDE 85

86 REALISERING med en blanding af procent og pixels i bredden. Hjemmesiden består af de tre hovedfelter, header, indhold og footer. og produkter, eller fungerer som en ekstra menu. Den højre kolonne er opdelt i to kolonner, for at den selv kan tilpasse sig til mindre skærme. Forside Header Vores header er kort fortalt opbygget i tre bokse. Den første bokse er menuen til venstre, der indeholder punkterne; forside, udvalg og events. Den anden boks indeholder logo. Den tredje boks er den højre menu, der indeholder punkterne; om os, galleri og kontakt. Figur 39: Indhold på hjemmesiden Figur 38: Header på hjemmesiden Indhold Indhold er opbygget i to hovedbokse, en venstre og højre kolonne. De to hovedkolonner fylder hver 50% af siden. Den venstre kolonne indeholder alle de større tekst felter og informations punkter. Den højre kolonne indeholder vores grønne bokse, som bliver brugt til at informere om events Footer Footer er obygget af fem elementer. De første fire elementer består af grønne bokse, som er på linje og indeholder; åbningstider, placering, seneste nyheder og facebook. Det femte element er en boks, der fylder hele bunden og indeholder adresse og smiley ordning. SIDE 86

87 REALISERING Figur 40: Footer på hjemmesiden Undersider Header og footer fungerer som på forsiden. Indholdet har næsten samme opbygning som forsiden, men hvor forsidekolonnerne er 50 % i bredden, er den på undersiderne opdelt, så den venstre fylder 70 % i bredden og den højre 30 %. Den højre kolonne indeholder ikke længere to underkolonner. Responsive design Som der er skrevet tidligere, er hjemmesiden responsive og tilpasser sig alle skærmstørrelser. Der sker dog to store opsætningsændringer jo længere man kommer ned i skærmstørrelsen. Den første store sker ved, at kolonne 2 under indhold rykker ned under kolonne 1, det gør, at siden bliver halv så bred og er derfor tilpasset portait-mode på tablets. Menupunkterne og logo flytter også på sig for at få plads og for at gøre navigationen mere brugervenlig på mobile platforme. Som det kan ses på billederne, er der kun en slider på det ene format. Det er valgt for at få siden til at køre mere flydende på telefonen. Det er lavet ved, at når hjemmesiden kommer helt ned i smartphone format, så bliver slideren fjernet helt ved hjælp fra css-kode. Den højre kolonne på undersiderne bliver anvendt til menu eller informationsbokse. På undersiderne galleri og udvalg indeholder den højre kolonne en menu, der ved hjælp fra javascript følger med, når man scroller ned. På siderne kontakt, om os, event består den højre kolonne af en eller flere statiske informationsbokse. SIDE 87

88 REALISERING Figur 41: Responsive design Figur 41: Responsive design SIDE 88

89 REALISERING Udover at lave hjemmesiden i procenter har vi anvendt Media Queries. Media Queries er et stykke css kode, der kun bliver anvendt inden for den definerede skærmstørrelse. Skærmstørrelsen tilpasses i nedenstående eksempel, hvis den er under 1150px i only screen and (max-width : 1150px) { #mainwrap { width:100%; } #menuleftimg, #menurightimg {display:none;} #bg { display:none; } } Dette stykke kode påvirker først hjemmesiden, når skærmen er under 1150px i bredden. Der er er blevet anvendt flere Media Queries for også at tilpasse til tablet og telefoner. Css For at få css til at køre mest effektivt, er der set på, hvilke tags der kører hurtigst og så vidt muligt holdt os til dette. Skemaet viser, hvilken opsætning der er hurtigst, og det er denne vi har prøvet at arbejde ud fra (csstricks.com). #main-navigation { } /* ID (Fastest) */ body.home #page-wrap { } /* ID */.main-navigation { } /* Class */ ul li a.current { } /* Class * ul { } /* Tag */ ul li a { } /* Tag */ * { } /* Universal (Slowest) */ #content [title= home ] /* Universal */ Figur 42: Css på hjemmesiden SIDE 89

90 REALISERING Wordpress Wordpress er et gratis CMS, der er open source. At det er et CMS betyder content management system, hvilket vil sige, at det er et system, hvor du kan styre sidens indhold, såsom tekst og billeder. At Wordpress er open source betyder, at alle kan og må lovligt ændre i kilde koden, så det frit kan tilpasses uden at gøre noget ulovligt og uden at skulle have tilladelse. Til Wordpress Da den generelle opbygning i css og html var færdiggjort, blev hjemmesiden overført til Wordpress. Det skete ved hjælp af et tomt Wordpress tema, hvor vores kode blev overført bid for bid og tilpasset Wordpress koden. Det blanke Wordpress tema har vi ikke selv skrevet, og det er hentet fra Footer.php indeholder blandt andet vores fire informationsbokse i bunden af siden og vores EU cookie lov script, samt vores Google Analytics script. Indholdssiden kan variere i filnavn, alt efter hvilket indhold der skal fremvises. Som eksempel har vi en forside.php, som er den fil, der bliver hentet, når man er på forsiden. Hvis man er på om os, har vi en fil der hedder about.php. Opbygningen med de tre filer sker fordi, at vores header og footer er de samme gennem hele hjemmesiden. For at koden så ikke skal gentages for hver eneste underside, bliver der linket til det fra f.eks forside.php, som så henter koden fra footer.php og header.php. Wordpress siden er generelt opbygget af 3 dokumenter; header.php, footer.php og en indholds side. Header.php er den fil, hvor vi har tilføjet alt det, der normalt hører under <head> tag på en html side, header.php indeholder også hjemmesidens menu og boksen, den er i. Alle funktioner er først blevet tilføjet efter at html og css er blevet overført til Wordpress. Vores funktioner er blevet oprettet ved at tilføje et plugin, der mere eller mindre har den ønskede funktion, hvor det efterfølgende er blevet tilpasset vores design. For hver underside er der lavet en template, der indeholder en anden SIDE 90

91 REALISERING opsætning af indholdsboksen. Når der bliver oprettet en side i Wordpress vælges der derefter, hvilket template der ønskes, siden skal følge. Worpress opbygning For at kunden selv kan overtage hjemmesiden, er admin delen sat op med ideen om, at selv en ansat med ingen erfaring kan rette og tilføje uden større vanskeligheder. Der vil blive oprettet profiler med begrænset adgang til de ansatte, hvor de vil få adgang til; nyheder, øl kort, galleri, sider, medier, begivenheder og slider. Den begrænsede adgang sker for at forhindre, at nogen roder ved noget, der kan lukke siden ned. Der vil også blive oprette en profil med fuld adgang, som deres web-integrator får adgang til. blevet lavet en del ændringer. Timely har allerede et widget, hvor det var muligt at vælge de events, som vi ønskede skulle vises, men som det ses på billede 1, er det langt fra vores design, og der kunne ikke vises forklarende tekst eller billede til events. For at tilpasse Timely widget til vores design, er der mest blevet tilføjet og slettet css. Da der ikke kunne vises billede og forklarende tekst, har vi været inde og tilføje ekstra php kode til den eksisterende plugin kode. På billederne her kan man se ændringerne på Timley widget før og efter vi har ændret på det (time.ly). Wordpress plugins Der er brugt flere mindre plugins, men der er tre plugins der har ekstra stor betydning for at hjemmesiden fungerer. All-in-One Event Calendar by Timely Dette plugin styrer alt der har med events at gøre. For at få Timely til at virke med vores forsidedesign og kun vise events, som vi ønsker, er der SIDE 91

92 REALISERING SIDE 92 Figur 43: Timley Widget før Figur 44: Timley Widget efter

93 REALISERING Types Types er et plugin, der hjælper med at oprette input felter og tilpasse opslag. På hjemmesiden anvendes det til at oprette øl til udvalgs siden. Som det kan ses på billedet, er der oprettet input felter, hvor man kan tilføje informationen om øllen. For at vise den indtastede information fra et felt, skal der tilføjes en linje kode, se eksempel som viser, hvordan man viser etiketten. Alle felterne er sat på i html og stylet med css for at få det tilpasset til vores design (wordpress.org). Eksempel: <?php echo(types_render_field( etikette, array( alt => Product image, width => 80, proportional => true, title => ) ));?> Figur 45: Types SIDE 93

94 REALISERING Meta slider Meta slider er den slider der er på forsiden, hvor der vises stemningsbilleder og tilbud. Designet på slideren har vi selv lavet via css, men funktionen er gennem plugin (metaslider.com). Nyhedsbrev/konkurrence database Nyhedsbrev Der er blevet lavet en nyhedsbrevstilmelding, der forbinder til en MySQL database. MySQL er blevet valgt, da Wordpress i forvejen er sat op til det. Man kan tilmelde sig til nyhedsbrevet på forsiden eller i vores konkurrence som tilvalg. Figur 46: Nyhedsbrev Databasen til nyhedsbrev er opbygget af en tabel med 3 kolonner. Tabellen består af id, navn og . Id bliver genereret automatisk. Koden her viser, hvordan vi gemmer i vores tabel. News er navnet på tabellen, name og er navnet på kolonnerne. $name og $ kalder på de input felter, hvor den skal hente vores data, som vi ønsker skal gemmes. SIDE 94

95 REALISERING mysql_query( INSERT INTO news(name, ) VALUE( $name, $ ) ) or die(mysql_error()); For at kunden let kan finde de tilmeldte, er der lavet et meget simpelt plugin, der viser alle de tilmeldte. Det plugin kan findes under indstillinger i Wordpress dashboard. Som det er nu, gør pluginnet kun det mest nødvendige, men har rig mulighed for videre udvikling. Figur 47: Wordpress dashboard SIDE 95

96 REALISERING Den måde dataen bliver hentet på: <?php global $wpdb; $customers = $wpdb->get_results( SELECT * FROM news; ); foreach($customers as $customer){ echo <p>.$customer->name. -.$customer-> . </p> ; Tilmelding til konkurrence minder meget om tilmeldingen til nyhedsbrev. Forskellen mellem nyhedsbrev og konkurrence er flere radio buttons, hvor man kan vælge sit svar på konkurrence spørgsmålet. Konkurrence tilmeldingen gemmer på samme måde som nyhedsbrev, men den gemmer samtidig den deltagendes svar. Man kan som tilvalg også tilmelde sig nyhedsbrev på samme tid, som man tilmelder sig konkurrencen. Facebook interaktion For at forbinde hjemmesiden med Facebook, er der blevet oprettet en Facebook app. }?> Koden her viser, at den skal hente data fra news, og for hver tilmeldte skal den skrive <p>.$customer->name. -.$customer-> . </p>, som henter navn og . Konkurrence Figur 48: Facebook interaktion App en gør det muligt at dele indhold direkte fra Wordpress på Facebook, hvilket bliver vist som et opslag fra John Bulls Facebook bruger. Når John Bull f.eks. har en nyhed eller ny øl, kan de dele den automatisk på Facebook, når den bliver tilføjet på hjemmesiden. Et eksempel på et Facebook vægopslag sendt direkte fra hjemmesiden: SIDE 96