Titel: Summerbird CSR Eksamensprojekt 3. semester Multimediedesigner uddannelsen - Lyngby
Faktaark Titel: Summerbird CSR Gruppe 4 URL: http://www.graphicweb.dk/studie/3sem/projekt5_ exam_summerbird/index.php Morten Korshavn mail: morten@mknmedia.dk http://mknmedia.dk/ Hold: Clmul-b12e 3. semester efterår 2013 Vejledere: Jesper Hinchely Ivan Frederiksen Merete Lindemann Thomas Bügel Hartmann Ivan Rosenvinge Frederiksen Ian Wisler-Poulsen Tue Becher Frederik David Tang Peter Maegaard Tue Nielsen Morten Møller Nielsen mail: morten.moeller.nielsen@gmail.com http://weblabs.dk/ Mikael Lund Kristensen mail: mlk@graphicweb.dk http://graphicweb.dk/
INDHOLDSFORTEGNELSE Indledning... s. 1 Kort om Summerbird... s. 1 Problemformulering... s. 1 Afgrænsning... s. 2 Teori og metodisk fremgang... s. 2 Fremgangsmåde... s. 2 UML... s. 2 Segmentering og målgruppe... s. 3 Segmenteringsproces... s. 3 Målgruppe... s. 4 Kommunikationsmodel... s. 5 Markedsføring... s. 6 Projektplanlægning... s. 7 Risikoanalyse... s. 8 Interessentanalyse... s. 9 FURPS... s. 10 Use-cases... s. 11 Kreativ proces... s. 13 Idegenerering... s. 13 Visuel identitet... s. 13 Designbrief... s. 15 Produkter... s. 16 Website... s. 16 Front-end... s. 16 Back-end... s. 16 SEO... s. 17 Magasin og plakater... s. 17 Emballage design... s. 17 Usability... s. 18 Ekspertvurdering... s. 18 Gangstertest... s. 18 Informationsarkitektur... s. 19 Interaktionsdesign... s. 19 Perspektivering... s. 20 Konklusion... s. 20 Litteratur... s. 21 Bilag 1. Burndown-chart... s. 22 2. Implementeringsplan... s. 23 3. Moodboards... s. 24 4. Skitser - Mindmap og Mock-up... s. 25 5. Mock-up... s. 26 6. Visuel identitet... s. 27 7. Grid... s. 28 8. PHP - Eksempel... s. 29 9. Sitemap... s. 30 10. Magasin... s. 31 11. Plakater... s. 33 12. Emballage... s. 35
Indledning Summerbird ønsker at skærpe deres CSR (corporate social responsibility) profil og har hyret os til at udforme en kampagne, som bedst muligt kommunikerer firmaets sociale engagement. Firmaet har iværksat en række CSR initiativer, som de ønsker synliggjort på nettet og via andre medier. Vi er derfor hyret til at lave en kampagne som dokumenterer: - Summerbirds samarbejde med de afrikanske bønder, som står for produktionen af kakao til deres chokolade og viser forbrugerne hvordan de støtter bønderne økonomisk ved køb af chokoladen. - at Summerbirds produkter i 2014 bliver 100% organiske. - firmaets fokus på grøn energi i produktionen af deres varer. - deres brug af genbrugspapir i deres emballage. Kampagnens primære produkt er et selvstændigt CSR website. Et vigtigt element på sitet er en blog, hvori Summerbird selv kan logge ind og opdatere med relevante informationer, projekter og aktiviteter. Summerbird ønsker at understøtte websitet med andre medier, for at nå bredt ud til sin målgruppe. Vi skal derfor også designe emballage, plakater og et CSR-magasin. CSR fakta CSR handler overordnet om at virksomheder handler globalt og er samfundsmæssigt ansvarlige. Eksempler kan være at et firma tager hensyn til menneskerettigheder, miljø, klima, sociale vilkår, arbejdsforhold osv. Kort om Summerbird* Summerbird blev grundlagt af Michael Grønlykke i firserne og har idag 14 selvstændige butikker på landsplan. Firmaet er ejet af Grønlykke familien, som desuden ejer Falsled Kro, Restaurant Kong Hans og Løgismose butikkerne. Summerbird chocolaterie er på få år blevet anerkendt som noget af det bedste chokolade i verden. Det skyldes den kompromisløse tilgang til råvarer, den nænsomme forarbejdning, de innovative smagskombinationer samt den æstetiske emballage. Besøg hos Summerbird Da vi havde valgt Summerbird som omdrejningspunkt for vores opgave arrangerede vi et møde med Kim Ilardo, bestyreren af firmaets butik i Lyngby. Under vores besøg i hans butik kunne han berette at Summerbird rent faktisk bliver 100% økologisk i 2014. Derudover fortalte han om deres nuværende kampagner og om hvordan koncernen drives. Alle firmaets butikker kører efter et udførligt designkoncept, hvor alt er strømlinet ned til mindste detalje. Problemformulering Hovedspørgsmål: - Hvordan kan vi, som multimediedesignere, kommunikere Summerbirds CSR gennem et website? Underspørgsmål: Hvordan kan vi integrere vores samlede kampagne, så den harmonerer med Summerbirds nuværende design? * http://www.summerbird.dk 1
Afgrænsning Vi laver ikke et komplet redesign af Summerbirds nuværende hjemmeside, men et selvstændigt site. Vi laver dog et mock-up af Summerbirds hjemmeside, som er i tråd med vores CSR site. Vi vil gøre rede for de brugertests vi vil bruge i rapporten, men den praktiske udførelse af testene vil finde sted efter opgavens aflevering. En responsiv udgave af vores website vil ligeledes blive udarbejdet efter projektets aflevering. Teori og metodisk fremgang I dette afsnit vil vi gøre rede for de metoder og teknikker, som vi har benyttet i vores projekt. Vi har valgt at tage udgangspunkt i SCRUM og har planlagt tre sprintforløb under projektperioden. For at danne et overblik over vigtige interessenter og risici i projektet, har vi udarbejdet en risiko- og interessentanalyse. For at sikre os at alle funktionelle og ikke-funktionelle krav til vores produkt er indfriede, har vi udarbejdet en FURPS tjekliste. Selve websitet vil gøre brug af HTML5, CSS3, javascript, PHP og My- SQL, da disse teknologier i samspil vil indfri vores og kundens krav til produktet. Vores website bliver bygget ved hjælp af frameworket Twitter Bootstrap. Vi vil bruge Google Analytics på siden og benytte teknikker rent kodemæssigt, så websitet bliver optimeret til søgemaskiner (SEO). For at sikre god usability på vores site vil vi, efter projektets aflevering, gennemføre to typer tests af websitet; ekspertvurdering og gangstertest. UML I dokumentationen af vores database har vi benyttet UML, et internationalt standardiseret modellerings sprog, til at beskrive forløb og sammenhænge. Ved brugen af dette standardsprog sikrer vi at kommende systemudviklere kan forstå, vedligeholde og videreudvikle vores projekt.* I den tidlige kreative proces bruger vi teknikkerne brainstorm, mindmap og mock-ups, for at pejle os ind på et visuelt udtryk for kampagnen. Vi vil foretage en grundig segmenteringsproces, for at danne os et klart billede af vores produkts målgruppe og derigennem målrette vores kommunikation. Herefter udarbejder vi en kommunikationsmodel og en kommunikationsplan. * Larman (2005) s. 14-16 2
Segmentering og målgruppe Vi har gennemført en segmenteringsproces for at skræddersy vores kampagnes kommunikation til målgruppen*. Segmentering betyder at opdele et marked i grupper og finde forbrugere med fælles træk (f.eks. vedrørende forbrugsvaner og livsstil). Fordelene ved en sådan proces er, at en virksomhed i højere grad kan målrette sin markedsføring (mod et eller flere segmenter) og derved spare ressourcer på forfejlet kommunikation. Segmentering 1. Beskrivelse af produktets forhold på markedet Summerbird ønsker, som tidligere nævnt, at give deres firma en grønnere profil og synliggøre deres forskellige CSR (corporate social responsibility) initiativer. De ønsker at vise omverdenen at de tager ansvar i deres produktion. Kampagnen lskal anceres online og i samtlige Summerbird butikker i Danmark i 2014. I disse tider er det meget populært at profilere sin virksomhed med en grøn profil. Konkurrencen på markedet må derfor antages at være markant. 2. Valg af segmenteringsvariable Vi har valgt at inddrage to segmenteringsvariabler til at pejle os yderligere ind på vores målgruppe. Disse bruges til at beskrive de særlige kendetegn, som beskriver forbrugerne af et givent produkt. Vores segmentering foregår således ud fra en sociodemografisk og en adfærdsorienteret variabel. Sociodemografisk variabel: Alder Køn Geografisk placering Uddannelse Arbejde Indkomst Adfærdsorienteret variabel: Medie- og indkøbsvaner Loyalitet Forbrugshyppighed Forandringsvillighed 30 år og op Mand/Kvinde Storbyer Videregående Folk i job Middel og op Kvalitetsbevidste, oplyste I høj grad Forbrugsorienteret I mindre grad 3. Matrix Vi kigger her på førnævnte variabler og samler dem der passer bedst til vores produkt i en såkaldt segmenteringsmatrix. I forhold til vores kampagne (og Summerbirds brand) er det vigtigt med en målgruppe, som er kvalitetsbevidst, oplyst og økonomisk velfunderet. 4. SMUK-model Vi har arbejdet med SMUK-modellen for at finde ud af hvilket segment, der er bedst anvendeligt som målgruppe. (S) Segmentents størrelse og vækst For at få en fornemmelse af segmentets størrelse, har vi søgt i Danmarks Statistiks database ud fra følgende kriterier: * http://lab.systime.dk/wp-content/uploads/8_segmentering_og_maalgruppevalg.pdf 3
(Tallene er fra 2012) Køn: mand/kvinde Aldersgruppe: 30 til 64 Indkomst: Geografi: 300.000 og op Hele Danmark Det samlede antal personer bliver 616.951. (M) Mulighed for kontakt med segmentet Kontakt med segmentet skal foregå gennem kampagnens CSR website. Da vi ikke formoder at samtlige personer i vores segment vil besøge sitet, vil der blive produceret et CSR magasin, som vil være tilgængeligt i Summerbirds butikker. Derudover vil der være reklamer i det offentlige rum i form af plakater. (U) Udgifter ved bearbejdning af segmentet Der må forventes at være høje udgifter, da kampagnen skal have samme høje kvalitetsniveau som Summerbirds øvrige branding. (K) Konkurrencen om segmentet Konkurrencen er høj, da mange firmaer netop brander sig på at være grønne og samtidig eksklusive. Peter Beier kan her nævnes som en konkurrent. Målgruppe Den forrige segmenteringsproces har hjulpet os til at fastlægge målgruppen for vores kampagne. Den primære målgruppe er hovedsageligt voksne på 30 år og opefter. Den typiske forbruger sætter pris på kvalitet og den unikke oplevelse, er stilbevidst og har en stabil indkomst. Den sekundære målgruppe er virksomheder, som typisk køber Summerbirds produkter til firmagaver o.l. Målgruppestrategi I dette afsnit vil vi gøre rede for hvilken målgruppestrategi vi finder relevant for vores Summerbird kampagne. Vi har kigget på følgende strategier: udifferenteret, differenteret, koncentreret og one-to-one. Ud af disse mener vi den udifferenterede passer bedst til vores kampagne, da Summerbird i forvejen gør brug af denne strategi. STØRRELSE OG VÆKST MULIGHEDER FOR BEARBEJDNING MÅLGRUPPEVALG KONKURRENCE- SITUATIONEN I SEGMENTET UDGIFTER VED BEARBEJDNING 4
Kommunikation Kampagnens kommunikation til henholdsvis primær og sekundær målgruppe, er her illustreret. Vi har benyttet Shannon og Weavers kommunikationsmodel, som er en videreudvikling af Harold D. Laswells gamle model. Kommunikationen mellem afsender og modtager kan, som vist, blive påvirket af støj. Støjen skal forstås som forstyrrende faktorer uden for projektet, der slører afsenderens budskab til modtageren. Det er derfor vigtigt at vores kommunikation er præcis og strømlinet, både i forhold til CSR kampagnen, men også i forhold til Summerbirds allerede eksisterende image. På den måde undgår vi intern støj i kampagnen.* STØJ CSR FEEDBACK RESPONS * http://kommunikationita.systime.dk/index.php?id=310 5
Markedsføring I CSR kampagnen prøver vi at udbrede folks opfattelse af hvordan Summerbird produkterne bliver til. Men ligeledes også hvordan Summerbird hjælper til i u-lande og sparer på energien. Den tætteste konkurrent Peter Beier har også CSR inkluderet på deres website. Derfor er kampagnen en oplagt mulighed til strategisk at fortælle kunderne at Summerbird på mange punkter, tænker mere over deres sociale ansvar en modparten gør. Som et led i CSR kampagnen kreeres et CSR magasin. Meningen med magasinet er at få fokus fra den del af befolkningen der ikke benytter internettet, eller ville forbigå Summerbird websitet. Magasinet vil være tilgængeligt på desken i alle Summerbirds butikker. Det vil også være muligt at downloade magasinet i en.pdf-version, så kunderne selv kan printe det ud og videregive det gode budskab. CSR Magasinet vil også blive lagt i Summerbirds gaveæsker. På denne måde bliver budskabet bragt videre til virksomheder, som ofte køber gaveæsker til medarbejder ved højtider og andre lejligheder. Emballagen er også en del af CSR kampagnen. Her vil der blive lavet specielle indpakninger samt poser der er miljøvenlige og let nedbrydelige i naturen. På alle kampagne materialer bliver vedhæftet en enkelt sommerfugl med de organiske farver for at vise et symbol på de organiske materialer der bliver brugt. En fyldestgørende kampagne som denne, vil være med til at sikre Summerbird et bedre image udadtil og samtidig gavne deres brand. Ikke blot i Danmark men også på verdensplan. Dette er vigtigt, da Summerbird bliver en franchise virksomhed i flere nordiske- og europæiske lande i løbet af de næste år. I markedsføringen bruges store plakat-arrangementer (se bilag 11). Plakaterne hænges op i Summerbirds 14 butikker, på udvalgte steder i bybilledet (Caféer og hos forhandlere). Ved hjælp af de organiske farver, prøver vi at drage modtager ind i et univers af medmenneskelig godhed og omtanke. Derudover bruger vi store ikoner, der er tilpasset de 4 elementer vi arbejder med: fairtrade, organiske råvarer, grøn energi og bæredygtig emballage. Plakaterne bliver printet på miljøvenligt genbrugspapir. 6
Projektplanlægning Scrum Vi har valgt at bruge SCRUM som agil arbejdsmetode. Med SCRUM bliver arbejdet delt ud i mindre opgaver, så overblikket bliver større over hvilke opgaver der er udført og hvilke der mangler i udviklingsprocessen. For at få det bedste overblik bruger vi i gruppen et dagligt møde, så vi sikrer at alle vores aftaler og krav fra dagen før bliver overholdt. SCRUM består af iterative processer kaldet sprint. Vi har vi to forskellige sprint i vores projekt. Et over den første uge, og et over de tre efterfølgende uger. Det første sprint af baseret på godkendelsen af projektet samt problemformulering og det andet sprint er resten af projektet med CSR kampagnen. Vores product backlog viser en liste over krav til de forskellige dele af projektet. Derudover kan man følge hvordan vores arbejdstilgang har været på burn down chartet, i forhold til middelværdien af arbejde pr. dag (se bilag 1).* * Harder Fischer, Oosterbaan (2005) s. 185-187 7
Risiko-analyse Projekt: Summerbird - CSR Udfyldt af: Morten Korshavn, Morten Møller og Mikael Kristensen Dato: 28.11.2013 Hvad kan gå galt? Konsekvenser for projektet (K) Sandsynlighed (S) Risikotal (K x S) Forebyggende Handlinger: Afbødende Misforstået projektbeskrivelse 5 2 10 Sikre at alle har adgang til projektbeskrivelsen, og de har læst og forstået den. Projektet vil have fejl og mangler, og vil ikke leve op til de krav der bliver stillet Mangler i det færdige produkt 3 3 9 Sikre at mål og opgaver er lavet fuldt ud. Det færdige produkt vil ikke være tilfredsstillende. Misforstået målgruppe 4 3 12 Dårligt resultat i test 2 3 6 Deadline overskrides 5 1 5 Lave en målgruppe analyse der er godt defineret, så der ikke opstår misforståelser. Sikre at testen er forståelig og der gives instrukser i hvordan den skal udfyldes korrekt. Lave en tidsplan og projektplan for hvad vi skal nå til hvilket dage. Det færdige produkt vil ikke ramme den rigtige målgruppe og vil derfor ikke opfylde kravene i opgaven. Testen vil give et forkert syn og vil ikke kunne bruges. Projektet vil blive uoverskueligt og i værste tilfælde ikke kunne nå at blive færdigt. Sygdom/ikke fremmøde i teamet 3 3 9 Have hinandens kontakt informationer, så hvis en bliver syg/ forsinket skal personen kontakte teamet. Det vil skadet teamets produktivitet og i værste tilfælde sætte tidsplanen ud. Manglende kompetencer i teamet 4 3 12 Finde ud af hvad vi er gode til og uddele arbejde efter det. Dårligt slutprodukt hvis vores kompetencer bruges forkert. Dårligt sprog/formulering i produktet 2 3 6 Bruge sproget målgruppen bruger. Målgruppen finder produktet kedeligt/forstår ikke budskabet. Sandsynlighed Ignorerbar 0-1% Meget lille 1-20% Lille 20-40% Middel 40-60% Stor 60-80% Meget stor 80-100% Point 0 1 2 3 4 5 8
Interessent-analyse Projekt: Summerbird - CSR Interessent Kunden Målgruppe Projektmedlemmer Undervisere Kommende arbejdsgiver og kunder Andre/ kommende studerende Interessenten kan opleve følgende FORDELE ved projektet Vi overholder deadlines/mål/ aftaler Et produkt der er målrettet målgruppen og opfylder behov i form af visuel værdi, brugervenlighed og information Læring, samarbejde og planlægning Vi har forstået opgaven og projektets færdige mål og at vi har udviklet os fagligt i forhold der til. Finde nye samarbejdspartnere Interessenten kan opleve følgende ULEMPER ved projektet Vi ikke kan udfylde kundens behov Misforstår budskabet der skal gives til målgruppen. Ikke tilfredstillende produkt Dårlig kommunikation og samarbejde, samt misforståelser og uoverensstemmelser Udfyldt af: Morten Korshavn, Morten Møller og Mikael Kristensen Samlet vurdering af interessentens bidrag/position Meget vigtig Meget vigtig Vigtig Håndtering af interessenten Løbende feedback og samtale/kommunikation Lave målgruppe analyse og brugertest med målgruppen i fokus Grundig planlægning, uddeling og samarbejde af opgaver og mål Misforståelse af opgaven Vigtig Udviser arbejdslyst og initiativ samt kommunikation om evt. problemer Projektmedlemmernes kunnen Mindre vigtigt Opdatering af vores portfolio med visuel præsentation. Inspiration Ingen Mindre vigtigt Upload til internettet 9
FURPS Krav Spørgsmål Mål Opnået Functionality: Online Hvornår skal websitet være tilgængeligt? Fredag den 20/12-13 skal kunden kunne bruge og teste første prototype af websitet. Hjælp Vil online hjælp være nødvendig? Information skal fremgå tydeligt på websitet, så en hjælpe menu kan undværes. Søgemaskiner Er SEO en nødvendighed? Websitet skal optimeres til søgemaskiner, da det er vigtigt at Summerbirds nye CSR tiltag når ud til kunderne. Sprog Hvilke sprog skal websitet understøtte? Dansk version er et krav. På sigt ville flere sprog forbedre internationale brugeres forståelse af informationen på sitet. Usability: Æstetik Skal websitet findes interessant? Ved hjælp af farver, billeder og infographics vil vi skabe en fortælling, som illustrerer Summerbirds engagement i forhold til CSR. Navigation Hvordan skal man kunne navigere? Klikbar menu. Sammenhæng Reliability: Troværdighed Performance: Er der særlige krav til intern genkendelighed på websitet? Hvor stor grad af troværdighed skal prioriteres på websitet? Jo større grad af konsekvens i design af brugergrænsefladen, jo bedre oplevelse får brugeren af websitet. Websitet skal fremstå professionelt og troværdigt, da der er fokus på brandet Summerbird og deres velgørenhed. Load hastighed Skal der være fokus på load hastighed? Vi optimerer sitet kodemæssigt og optimerer billeder og grafik til web. Server Er der krav til server stabilitet? Det er vigtigt at sitet hostes på stabile servere, da Summerbird i høj grad er afhængige af e-handel. Supportability: Kode Kompatibilitet Skal det være muligt at kunne redigere i koden senere? Hvilke medier skal websitet kunne anvendes på? Ved konsekvent brug af meningsfyldte kommentarer i kode-filerne, samt veldokumenteret arkitektur, vil det fremme overskueligheden for senere at skulle ændre information eller funktioner. Websitet skal kunne anvendes på mobil, tablet og computer (stor skærm). 10
Use-Cases Use cases bruges til at beskrive hændelser som systemet skal kunne håndtere. Ved at beskrive processen med krav vil man kunne opdage nye dele, der skal udvikles for at systemet bliver funktionelt. De skal være letskrevet så alle kan forstå det overordnede system. Der bruges ikke tekniske gloser eller andet som almindelige menesker ikke forstår.* ADMIN SUMMERBIRD - MINI_CMS SYSTEM login Use Case UC01: Login Navn: Login ID: UC01 Primær aktør: Summerbird_admin Interesenter: - Summerbird_admin: Vil have en hurtig og nem måde at tilgå systemet. Forudsætning/startbetingelse: Summerbird_admin er på forsiden af website. Succes garanti: Webserver og database skal være kørende. Hovedmålet for succes: 1. Admin skal trykke på login knap. 2. Login side loades. 3. Indtast brugernavn og password. 4. Tryk på login knap. Tilføjelser (Alternativ succes): 3a - Valider om brugernavn og password er korrekt. hvis der er fejl skal brugeren oplyses herom og systemet for bliver på login side. Håndtér blog indlæg Tilmeldte emails til nyhedsbrev * Larman (2005) s. 61 11
Use Case UC02: Håndtér blogindlæg Navn: Håndtér blogindlæg ID: UC02 Primær aktør: Summerbird_admin Interessenter: - Summerbird_admin: Vil have en hurtig og nem måde at kunne opdatere deres blog med nye projekter. - Web-brugeren: Er interesseret i at læse artikler på bloggen og hvornår de er skrevet. Forudsætning/startbetingelse: Summerbird_admin er logget ind. Succes garanti: Webserver og database skal være kørende. Hovedmålet for succes: 1. Admin skal tage stilling til om der skal oprettes et indlæg eller om der skal slettes et indlæg. 2. Hvis opret blog indlæg fortsæt da til punkt 3, hvis slet blog indlæg spring til punkt 8. 3. Vælg billede til indlæg. 4. Skriv overskrift til indlæg. 5. Skriv artikel. 6. Klik tilføj. 7. Summerbirds Blog er nu opdateret med en ny artikel. 8. Klik på slet indlæg i menuen. 9. Find indlæg og tryk på knappen Slet 10. Nu er indlæg slettet fra blog. Tilføjelser (Alternativ succes): 3a - Valider om billedet opfylder krav om type og størrelse. hvis der er fejl skal brugeren oplyses herom. 6a - Valider om alle felter er udfyldt, hvis der er fejl skal brugeren oplyses herom. 7a - Oplys brugeren om at der nu er tilføjet nyt blog indlæg. 9a 10a - Oplys brugeren om det er rigtig at de vil slette indlæg eller om det skal annulleres. - Oplys brugeren om at indlægget nu er blevet slettet. Use Case UC03: Tilmeldte emails til nyhedsbrev Navn: Tilmeldte emails til nyhedsbrev ID: UC03 Primær aktør: Summerbird_admin Interesenter: - Summerbird_admin: Vil have en hurtig og nem måde at få overblik over tilmeldte emails til deres nyhedsbrev. Forudsætning/startbetingelse: Summerbird_admin er logget ind. Succes garanti: Webserver og database skal være kørende. Hovedmålet for succes: 1. Admin trykker på newsletter knappen i menuen. 2. Det fremgår tydeligt hvor mange der er tilmeldt nyhedsbrevet. 3. Der skal være en tydelig liste med samtlige email adresser. 4. Admin skal have mulighed for at slette en email. 5. Hvis der skal slettes en email trykkes på slet knap ud for email. 6. Email er derefter slettet. Tilføjelser (Alternativ succes): 5a - Oplys brugeren om det er rigtigt, at de vil slette email adressen eller om det skal annulleres. 5b - Oplys brugeren om at email adressen er slettet. 12
Kreativ proces Dette afsnit beskriver hvorledes vi har planlagt den kreative proces i forbindelse med vores projekt. Idégenerering For at skabe overblik og idéer har vi i projektets tidlige stadie brugt teknikker som brainstorming, moodboards og mindmaps (se bilag 3 og 4). * Website mock-ups Før vi begyndte at kode websitet lavede vi grundige mock-ups i Photoshop (se bilag 4 og 5), som tog sit udspring af førnævnte idégenerering. Dette gav os overblik over sitets struktur og design. I løbet af projektforløbet er nye idéer opstået, hvilket har påvirket websitets endelige udseende. Visuel Identitet Den visuelle identitet (se bilag 6) for vores CSR kampagne, rummer en lang række elementer som er forenelige med Summerbirds nuværende brand og stil. Vi har valgt at implementere nogle farver og billeder, som stikker ud i forhold til firmaets nuværende profil, men som vi mener understøtter kampagnens grønne og velgørende profil. I dette afsnit vil vi gøre rede for de designmæssige valg, der danner grundlag for vores opgaves visuelle udtryk. Farver Summerbird bruger, i deres eget design, primært gråtoner, som ofte komplementeres med en enkelt kontrastfarve (f.eks. blå, rød eller sølv). Selve produktet er tit synligt og spiller dermed også en visuel rolle. Det samme gør sig gældende på firmaets hjemmeside, hvor også billeder bliver brugt til at give farve. På vores CSR site og i vores øvrige produkter har vi arbejdet ud fra samme koncept. Vi gør ligeledes brug af gråtoner i tekst og baggrunde og supplerer med grøn (#7D9B6A), brun (#986248) og blå (#536083). Vi har valgt sidstnævnte farver, da vi synes de harmonerer med kampagnens fokus. Typografi Vi har benyttet to forskellige sans-serif med god indbyrdes kontrast. Brødtekst er fonten Myriad Pro, mens overskrifter er Bebas Neue, som er en font der er gratis tilgængelig på nettet. På vores website bliver man mødt af store indbydende overskrifter og mindre tekstafsnit. Denne tekst er tænkt som appetitvækkere, der skal vække brugerens interesse og formidle kampagnens umiddelbare budskab. Nederst på undersiderne finder man en artikel om emnet med mere dybdegående information. Billeder Vi har valgt at bruge mange billeder på vores website. Dette er dels for at personliggøre det velgørende element i kampagnen og dels for at gøre sitet appellerende for brugeren. Billederne er behandlet i Photoshop. * Harder Fischer, Oosterbaan (2005) s. 91 13
Infografik Vores site gør brug af forskellige former for infografik. Menupunkterne er eksempelvis lavet med symboler frem for tekst. Disse symboler går desuden igen som baggrundsbilleder på de forskellige artikel sektioner. På Emballage siden er genbrugsprocessen visualiseret ved hjælp af infografik dels for at mindske brugen af tekst og dels for at gøre emnet mere spændende at kigge på. De forskellige symboler er sat op i Illustrator og er lavet i ensartet stil med grøn baggrund. Logo Vi har lavet en alternativ udgave af Summerbirds enkle sommerfugle-logo (se bilag 6), som går igen på samtlige af vores produkter. Logoet har samme form som det oprindelige, men gør brug af den grønne og brune farve, som er en del af vores visuelle koncept. 14
Designbrief Projekt: Summerbird CSR Kampagne Summerbird firmaprofil Summerbird chocolaterie er på få år blevet anerkendt som noget af det bedste chokolade i verden. Det skyldes den kompromisløse tilgang til råvarer, den nænsomme forarbejdning, de innovative smagskombinationer samt den æstetiske emballage. Målsætning Kampagnen skal sende et positivt signal, da den handler om klima og velgørenhed. Hovedbudskaber og nøgletal skal fremgå tydligt i de forskellige produkter, således Summerbirds CSR initiativer bliver tydeligt kommunikeret. Produkter Følgende produkter skal udarbejdes og dokumenteres: Selvstændigt CSR Kampagne website med blog Magasin om kampagnen Plakater Emballagedesign Alle produkter skal have en ensartet visuel stil. Målgruppe Summerbirds primære målgruppe er folk i alderen 30 år og opefter. Den typiske forbruger sætter pris på kvalitet og den unikke oplevelse, er stilbevidst og har en stabil indkomst. Den sekundære målgruppe er virksomheder, som typisk køber Summerbirds produkter til firmagaver o.l. Stil Summerbirds nuværende design skal være en del af kampagnen. Vi ønsker dog nogle særegne visuelle træk ved netop denne kampagne, som viser en ny retning. Det oprindelige sommerfugle-logo skal indgå i kampagnen. Dette logo skal være visualiseret på samtlige produkter, som er i berøring med CSR kampagnen. Tilgængelighed og kontekst En prototype af kampagnewebsitet skal være online 20.12.2013. Forslag til de resterende produkter skal ligeledes afleveres på denne dato. Magasin og emballagedesign vil på sigt være tilgængeligt i Summerbirds forretninger. Plakater vil blive brugt i forbindelse med reklame. 15
Produkter I dette afsnit vil vi gøre rede for de enkelte produkter vi har lavet i forbindelse med vores projekt. Front-end Front-end delen er et interface, som er bindeleddet mellem bruger og back-end. Website Vores website er sat op i frameworket Twitter Bootstrap*. Vi har valgt dette da vi havde kendskab til det i forvejen og det dermed kunne lette arbejdet med sitet. Grid Ved hjælp af Twitter Bootstrap er vores hjemmeside bygget op i et gridsystem med 12 spalter, som kaldes gennem forskellige klasser (se bilag 7). Navigation Navigationen gør brug af infografik og er placeret i øverste højre hjørne. Summerbirds logo ligger til venstre og fungerer som hjem - knap. På forsiden er symbolerne fra menuen repræsenteret i større versioner med beskrivende tekst. Via disse quicklinks, som møder brugeren som det første, kan man også navigere til undersiderne. Når brugeren er på en underside er denne highlighted med en anden bagrundsfarve i menuen. Dette overskueliggør for brugeren, hvilken underside de præcist befinder sig på. Se bilag 9 som indeholder et sitemap, der synliggører hele websitets struktur. I sitets footer er placeret en login -knap, som er beregnet til Summerbirds medarbejdere. Her kan de logge ind og opdatere sidens blog. Vi har placeret denne login funktion i footeren, da den ikke er feature der er relevant for den gængse bruger af sitet. Animationer For at gøre vores website mindre statisk gør vi brug af forskellige animationer, som kører når siderne loades eller ved mouse-over. Animationerne er ganske subtile, men giver de enkelte sider liv uden det, i vores øjne, bliver for meget. De er lavet ved hjælp af jquery (snippets og plugins) og/eller CSS3. Back-end Back-end delen er de tekniske elementer som styre selve systemet såsom programmeringssprog og database Database-design Efter at have gennemgået 1NF og 2NF har vi udarbejdet et ER-diagram på 3NF. * http://www.getbootstrap.com 16
CRUD CREATE - READ - UPDATE - DELETE ENTITY PROCESS NEWSLETTER PROJECTS USER Tilmeld email Slet email Login CRU D Opret blogindlæg C R Slet blogindlæg D RU Vis blogindlæg Server-side Back-end delen er skrevet med programmeringssproget PHP. Når en funktion bliver kaldt, fortolker serveren PHP koden og sender HTML tilbage til browseren. I bilag 8 har vi vist et eksempel på brugen af PHP og hvordan det interagerer med databasen. Eksemplet er taget fra den funktion der viser samtlige blogposts på bloggen. Search Engine Optimization (SEO): Et krav har været at optimere websitet til søgemaskiner. For at sikre dette har vi benyttet os af forskellige teknikker. Vi har eksempelvis inkluderet alt tags på vores billeder med relevante ord, for at øge sitets rangering i søgemaskinerne. I vores overskrifter har vi benyttet ord, der refererer godt til websitets forskellige undersider. Desuden nævnes ord som Summerbird, miljø osv. så meget som muligt på sitet, da de er blandt vores primære søgeord. R R Vi har valgt at inkludere meta-tags, Da flere søgemaskiner stadig indekserer websites ud fra dem. Google analytics Vi har benyttet Google Analytics på vores site, for at indsamle data der kan være relevant for kunden. Med dette analyse værktøj kan man følge med i hvordan brugerne af ens site opfører sig. Man kan for eksempel se antal besøgende på sitet (i alt, per måned osv). Et andet nyttigt aspekt for en virksomhed er at man kan se hvor ens besøgende kommer fra rent geografisk. Dette kan give et billede af hvor ens produkt er en succes. Man kunne efterfølgende ændre marketingstrategi for at skabe større opmærksomhed omkring produktet, de steder hvor websitet ikke er udbredt. Magasin Trykte medier Magasinet omhandler samme emner, som er en del af vores website. Farver, fonte osv. går også igen for at forstærke det samlede visuelle udtryk. Billederne i bladet har vi selv taget i Summerbirds butik i Lyngby. Tekst er forfattet af os selv og uddrag heraf går igen på vores website. Se bilag 10 og vedlagte PDF fil. Plakater Vores plakatdesign er tænkt som led i kampagnens reklamefremstød. Plakaterne er naturligvis i tråd med resten af projektet rent designmæssigt (se bilag 11). Emballagedesign Vi har udarbejdet forslag til emballagedesign, som gør brug af kampagnens farver og logo (se bilag 12). 17
Usability Vi vil efter projektets aflevering udføre to typer tests af vores website, for at sikre en høj grad af brugervenlighed: Ekspertvurdering og Gangstertest. Førstnævnte er udført af os selv, mens den sidste er lavet med en række testpersoner. I dette afsnit vil vi først gøre rede for de tests, som udgør vores undersøgelsesdesign. * Ekspertvurdering Ekspertvurderingen er et hurtigt, billigt og mindre ressourcekrævende alternativ til en egentlig brugertest. Testen egner sig derfor godt til, at give et hurtigt overblik over mulige problemer i forhold til kommunikation og design på et website. Ekspertvurderingen tester et site ud fra en række overordnede tommelfingerregler eller retningslinjer for design af websites. Det er op til testerne at afgøre, hvilke retningslinjer der er relevante for det produkt man tester. Den praktiske udførelse af testen deles op i tre faser: I første fase briefes ekspertpanelet, med information om hvorledes testen skal foregå. Hver ekspert gennemfører testen individuelt i anden fase (det anbefales at testsiden bliver gennemgået to gange). I den sidste tredje fase mødes ekspertpanelet og diskuterer resultaterne fra deres individuelle tests. Testen varer i alt omkring 1-2 timer. Vi vil benytte Gangster Testen til at teste vores websites navigation. Testen er udført med repræsentanter fra vores kampagnes målgruppe. Gangster Testen foregår således at en testperson slippes løs et tilfældigt sted på det site man ønsker at teste. Herfra skal personen løse en række opgaver og tildele sitet point. Opgaverne er som følger: 1.Websitets identifikation: Hvilket website befinder du dig på? (Se efter logo eller anden identifikation af afsenderen.) 2. Sektioner: Hvilke overordnede sektioner findes på websitet? (Se efter designets måde at anvise, hvad der er hvad på websitet.) 3. Underside: Hvilken underside befinder du dig på? (Se efter sidens titel eller beskrivelse.) 4. Lokal navigation: Hvilke muligheder har du på dette niveau/ hvilke undersider findes på samme niveau? (Se efter menuer, genveje, knapper og funktioner.) 5. Placerings-indikatorer: Hvor er du i den samlede struktur/ Hvordan er du kommet hertil? (Se efter brødkrummesti, overblik i navigation, markering af aktuel placering.) 6. Søgefunktion: Kan du søge, og hvor kan du det? (Se efter, om søgefeltet er let af identificere.) Gangstertest * Wisler-Poulsen (2011) s. 24, s. 42 og s. 64 18
Testpersonen tildeler ovenstående opgaver point ud fra dette skema: 0 point Denne information fremgår slet ikke af undersiden 1 point 2 point Denne information fremgår kun delvis af undersiden / den er svær at finde Denne information kunne fremgå tydeligere på undersiden 3 point Denne information fremgår tydeligt på undersiden Det er ikke nødvendigvis en selvfølge at alle testens spørgsmål passer på ens site, da det måske ikke gør brug af alle de features som nævnes deri. Derfor behøver det ikke altid være et tegn på at man har lavet et dårligt design, hvis scoren er under de maksimale 18 point. Vores forskellige tests vil give os en bredere forståelse, af brugerens oplevelse af vores sites informationsarkitektur og interaktionsdesign. Informationsarkitektur Følgende udgør et websites informationsarkitektur: De sammenhænge, der udgør websitets struktur (eksempelvis hierakier, niveauer og grupperinger) Tilgængelige værktøjer til at bevæge sig rundt på sitet (navigation/ menuer og sitemap) Ord/begreber, der står på knapper, overskrifter o.l. (information om informationer) Websitets søgemaskine (skal være let anvendelig og give resultater som er brugbare) Interaktionsdesign Interaktionsdesignet er de tekniske byggeklodser, som brugergrænsefladen er bygget op af (funktionalitet,farver,knapper,menuer og grafiske elementer). Altså de elementer, som giver brugerens mulighed for at foretage valg. 19
Perspektivering Konklusion I dette afsnit vil vi komme med tanker og forslag til, hvordan en fremadrettet videreudvikling af vores kampagne, vil kunne tegne sig. På sigt kunne man eksempelvis integrere Google Analytics i backend delen, så sidens trafik bliver visualiseret for Summerbirds ansatte. Man kunne også bygge blog-systemet sådan op, så brugeren kunne efterredigere i sine posts. Websitets koncept med små animationer kunne også overføres til markedsføringen og bruges i såkaldte moving posters. Disse plakater (som i virkeligheden er skærme), gør brug af eksempelvis animationer og skaber derved en blanding statiske og levende billeder. Vores hovedspørgsmål for denne opgave har været: - Hvordan kan vi, som multimediedesignere, kommunikere Summerbirds CSR gennem et website? Det har været vigtigt for os, at kampagnens forskellige budskaber kom klart og tydeligt igennem. Derfor har vi brugt store fonte, animationer, infografik og billeder i vidt omfang. Da websitet ikke må fremstå overfladisk, har vi tilføjet artikler med mere kød på. Bloggen gør vors site dynamisk og muliggør løbende opdateringer til Summerbirds kunder vedrørende CSR aktivitet. Vi valgte tidligt i processen at supplere vores site med et fysisk CSR-magasin. Valget blev truffet på baggrund af vores målgruppeanalyse. Vi blev enige om at især den ældre del heraf ville sætte pris på et blad, som var tilgængeligt i selve butikken. - Hvordan kan vi integrere vores samlede kampagne, så den harmonerer med Summerbirds nuværende design? Vi har skabt en kampagne som på den ene side tager afsæt i Summerbirds nuværende visuelle stil, men også har sine egne særlige karaktertræk, som vi mener passer godt til et projekt af denne type. Den kolde nordiske minimalisme, som præger Summerbirds design, har fået tilført noget varme og menneskelighed, som vi mener er nødvendigt når man behandler emner, der vedrører CSR. 20
Litteraturliste Bøger Usability - Testmetoder til mere brugervenlige websites på internettet. Gregersen, Ole og Wisler-Poulsen, Ian. Grafisk Litteratur. 1. udgave, 2. oplag. 2011. ISBN: 978-87-91171-93-2. 20 Designprincipper. Wisler-Poulsen, Ian. 1. udgave, 1. oplag. Grafisk Litteratur. 2012. ISBN: 978-87-91171-75-8. Digital Media Management - En helhedsorienteret metode. Fischer, Louise Harder og Oosterbaan, Marie. Nyt Teknisk Forlag. 3. udgave, 1. oplag. 2010. ISBN: 978-87-571-2723-2. Strategisk Projektledelse - Styr på udviklingen. Munk-Madsen, Andreas. Forlaget Marko. 1. udgave, 3. oplag. 1996. ISBN: 87-91649-08-0. Web http:// www.summerbird.dk http://www.getbootstrap.com http://lab.systime.dk/wp-content/uploads/8_segmentering_og_ maalgruppevalg.pdf http://kommunikationita.systime.dk/index.php?id=310 http://www.wikipedia.org http://www.danmarksstatistik.dk http://www.sharethis.com http://www.thenounproject.com http://www.vattenfall.dk/da/draeby-fed.htm http://fairtradedanmark.dk/fair-trade/10-fair-trade-principper http://emballageindustrien.dk/media/13553/1004%20emballagenyt.pdf Marketing Management - Kort og godt. Zigler, Christian Oxholm. Samfundslitteratur. 4. udgave. 2005. ISBN: 978-87-593-1158-5. Den Gode Opgave. Rienecker, Lotte og Jørgensen, Peter Stray. Forlaget Samfundslitteratur. 3. udgave, 2. oplag. 2008. ISBN: 978-87-593-11-64-6. Software Engineering - A Practitioner s Approach. Pressman, Roger. McGraw-Hill International. 7. udgave. 2010. ISBN: 978-007-126782-3. Applying Uml and Patterns - An introduction to object-oriented analysis and design and iterative development. Larman, Craig. Pearson Education, Inc. 3. udgave.2005. ISBN: 0-13-148906-2. 21
1. Burndown-chart 22
2. implementeringsplan MARTS APRIL MAJ JUNI JULI IDE UDVIKLING LAUNCH ANALYSE PROJEKT DONE KREATIV PROCES TEST PLAKATER UDVIKLING 23
3. Moodboards 24
4. skitser - mindmap og mock-up 25
5. MOCK-UP af website 26
6. VIsuel identitet font - Bebas Neue abcdefghijklmn opqrstuvxyzæåø 1234567890 CMYK: 55-24-70-04 RGB: 125-155-106 HEX: #7D9B6A CMYK: 00-36-53-40 RGB: 152-98-72 HEX: #986248 CMYK: 37-27-00-49 RGB: 83-96-131 HEX: #536083 Font - Myriad Pro ABCDEFGHIJKLMNO PQRSTUVWXYZÆØÅ abcdefghijklmn opqrstuvxyzæåø 1234567890 27
7. GRID 1 1 1 1 1 1 1 1 1 1 1 1 4 4 4 4 8 6 6 28
8. PHP - eksempel 29