1. No category

Titel: Summerbird CSR Eksamensprojekt 3. semester Multimediedesigner uddannelsen - Lyngby
Faktaark
Titel:
Summerbird CSR
URL:
http://www.graphicweb.dk/studie/3sem/projekt5_
exam_summerbird/index.php
Gruppe 4
__________________________________
Morten Korshavn
mail: [email protected]
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: [email protected]
http://weblabs.dk/
__________________________________
Mikael Lund Kristensen
mail: [email protected]
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
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 MySQL, 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 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.
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
Sociodemografisk variabel:
Alder
30 år og op
Køn
Mand/Kvinde
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.
Geografisk placering
Storbyer
Uddannelse
Videregående
Arbejde
Folk i job
Indkomst
Middel og op
Segmentering
Adfærdsorienteret variabel:
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.
Medie- og indkøbsvaner
Kvalitetsbevidste, oplyste
Loyalitet
I høj grad
Forbrugshyppighed
Forbrugsorienteret
Forandringsvillighed
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:
300.000 og op
Geografi:
Hele Danmark
(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.
Det samlede antal personer bliver 616.951.
Målgruppe
(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.
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.
MULIGHEDER FOR
S
TØRRELSE OG
VÆKST
BEARBEJDNING
MÅLGRUPPEVALG
KONKURRENCESITUATIONEN I
SEGMENTET
U
DGIFTER 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.
brydelige 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.
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 ned-
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
Udfyldt af:
Projekt: Summerbird - CSR
Konsekvenser for
projektet (K)
Hvad kan gå galt?
Sandsynlighed (S)
Morten Korshavn, Morten Møller
og Mikael Kristensen
Risikotal (K x S)
Dato: 28.11.2013
Handlinger:
Forebyggende
Afbødende
Misforstået projektbeskrivelse
5
2
10
Sikre at alle har adgang til pro- Projektet vil have fejl og mangjektbeskrivelsen, og de har læst ler, og vil ikke leve op til de krav
og forstået den.
der bliver stillet
Mangler i det færdige produkt
3
3
9
Sikre at mål og opgaver er lavet Det færdige produkt vil ikke
fuldt ud.
være tilfredsstillende.
12
Lave en målgruppe analyse der Det færdige produkt vil ikke
er godt defineret, så der ikke
ramme den rigtige målgruppe
opstår misforståelser.
og vil derfor ikke opfylde kravene i opgaven.
Misforstået målgruppe
4
3
Dårligt resultat i test
2
3
6
Sikre at testen er forståelig og
der gives instrukser i hvordan
den skal udfyldes korrekt.
Testen vil give et forkert syn og
vil ikke kunne bruges .
Deadline overskrides
5
1
5
Lave en tidsplan og projektplan Projektet vil blive uoverskueligt
for hvad vi skal nå til hvilket
og i værste tilfælde ikke kunne
dage.
nå at blive færdigt.
Sygdom/ikke fremmøde i
teamet
3
3
9
Have hinandens kontakt infor- Det vil skadet teamets produkmationer, så hvis en bliver syg/ tivitet og i værste tilfælde sætte
forsinket skal personen kontak- tidsplanen ud.
te teamet.
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
Point
Ignorerbar 0-1%
0
Meget lille 1-20%
1
Lille 20-40%
2
Middel 40-60%
3
Stor 60-80%
4
Meget stor 80-100%
5
8
Interessent-analyse
Udfyldt af: Morten Korshavn, Morten Møller
og Mikael Kristensen
Projekt: Summerbird - CSR
Interessent
Interessenten kan opleve
følgende FORDELE ved projektet
Interessenten kan opleve
følgende ULEMPER ved projektet
Kunden
Vi overholder deadlines/mål/
aftaler
Vi ikke kan udfylde kundens
behov
Meget vigtig
Løbende feedback og samtale/kommunikation
Misforstår budskabet der skal
gives til målgruppen. Ikke
tilfredstillende produkt
Meget vigtig
Målgruppe
Et produkt der er målrettet
målgruppen og opfylder
behov i form af visuel værdi,
brugervenlighed og information
Lave målgruppe analyse og
brugertest med målgruppen
i fokus
Læring, samarbejde og planlægning
Dårlig kommunikation og
samarbejde, samt misforståelser og uoverensstemmelser
Vigtig
Grundig planlægning, uddeling og samarbejde af opgaver og mål
Misforståelse af opgaven
Vigtig
Undervisere
Vi har forstået opgaven og
projektets færdige mål og
at vi har udviklet os fagligt i
forhold der til.
Udviser arbejdslyst og initiativ samt kommunikation om
evt. problemer
Kommende arbejdsgiver og
kunder
Finde nye samarbejdspartnere
Projektmedlemmernes kunnen
Mindre vigtigt
Opdatering af vores portfolio
med visuel præsentation.
Andre/ kommende studerende
Inspiration
Ingen
Mindre vigtigt
Upload til internettet
Projektmedlemmer
Samlet vurdering af interessentens bidrag/position
Håndtering af interessenten
9
FURPS
Krav
Functionality:
Online
Spørgsmål
Mål
• Hvornår skal websitet være tilgængeligt?
Hjælp
• Vil online hjælp være nødvendig?
Søgemaskiner
• Er SEO en nødvendighed?
Sprog
• Hvilke sprog skal websitet understøtte?
Fredag den 20/12-13 skal kunden kunne bruge og teste første prototype af websitet.
Information skal fremgå tydeligt på websitet, så en hjælpe menu kan
undværes.
Websitet skal optimeres til søgemaskiner, da det er vigtigt at Summerbirds nye CSR tiltag når ud til kunderne.
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?
Navigation
Sammenhæng
Reliability:
Troværdighed
Ved hjælp af farver, billeder og infographics vil vi skabe en fortælling,
som illustrerer Summerbirds engagement i forhold til CSR.
• Hvordan skal man kunne navigere?
Klikbar menu.
• Er der særlige krav til intern genkendelig- Jo større grad af konsekvens i design af brugergrænsefladen, jo bedhed på websitet?
re oplevelse får brugeren af websitet.
• Hvor stor grad af troværdighed skal priori- Websitet skal fremstå professionelt og troværdigt, da der er fokus på
teres på websitet?
brandet Summerbird og deres velgørenhed.
Performance:
Load hastighed
• Skal der være fokus på load hastighed?
Server
• Er der krav til server stabilitet?
Supportability:
Kode
Kompatibilitet
Opnået
Vi optimerer sitet kodemæssigt og optimerer billeder og grafik til
web.
Det er vigtigt at sitet hostes på stabile servere, da Summerbird i høj
grad er afhængige af e-handel.
• Skal det være muligt at kunne redigere i Ved konsekvent brug af meningsfyldte kommentarer i kode-filerne,
koden senere?
samt veldokumenteret arkitektur, vil det fremme overskueligheden
for senere at skulle ændre information eller funktioner.
• Hvilke medier skal websitet kunne anven- Websitet skal kunne anvendes på mobil, tablet og computer (stor
des på?
skærm).
10
Use-Cases
Use Case UC01: Login
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.*
SUMMERBIRD - MINI_CMS SYSTEM
ADMIN
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
danner grundlag for vores opgaves visuelle udtryk.
Dette afsnit beskriver hvorledes vi har planlagt den kreative proces i
forbindelse med vores projekt.
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.
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
Farver
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.
velse, 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.
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 ople-
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
holder 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.
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 inde* http://www.getbootstrap.com
16
CRUD
Vi har valgt at inkludere meta-tags, Da flere søgemaskiner stadig indekserer websites ud fra dem.
CREATE - READ - UPDATE - DELETE
ENTITY PROCESS
NEWSLETTER
Tilmeld email
CRU
Slet email
D
PROJECTS
Login
USER
R
Opret blogindlæg
C
R
Slet blogindlæg
D
RU
Vis blogindlæg
R
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.
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.
Trykte medier
Magasin
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.
pe.
“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
Vi vil benytte “Gangster Testen” til at teste vores websites navigation.
Testen er udført med repræsentanter fra vores kampagnes målgrup* Wisler-Poulsen (2011) s. 24, s. 42 og s. 64
18
Testpersonen tildeler ovenstående opgaver point ud fra dette skema:
Informationsarkitektur
Følgende udgør et websites informationsarkitektur:
0 point
Denne information fremgår slet ikke af undersiden
1 point
Denne information fremgår kun delvis af undersiden /
den er svær at finde
2 point
3 point
Denne information kunne fremgå tydeligere på undersiden
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.
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.
Vores hovedspørgsmål for denne opgave har været:
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.
- 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
Web
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.
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
20 Designprincipper. Wisler-Poulsen, Ian. 1. udgave, 1. oplag. Grafisk
Litteratur. 2012. ISBN: 978-87-91171-75-8.
Digital Media Management - En helhedsorienteret metode. Fischer,
Louise Harder og Oosterbaan, Marie. Nyt Teknisk Forlag. 3. udgave,
1. oplag. 2010. ISBN: 978-87-571-2723-2.
Strategisk Projektledelse - Styr på udviklingen. Munk-Madsen, Andreas. Forlaget Marko. 1. udgave, 3. oplag. 1996. ISBN: 87-91649-08-0.
Marketing Management - Kort og godt. Zigler, Christian Oxholm.
Samfundslitteratur. 4. udgave. 2005. ISBN: 978-87-593-1158-5.
Den Gode Opgave. Rienecker, Lotte og Jørgensen, Peter Stray. Forlaget Samfundslitteratur. 3. udgave, 2. oplag. 2008. ISBN: 978-87-59311-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
IDE
UDVIKLING
LAUNCH
KREATIV PROCES
TEST
PLAKATER
JUNI
ANALYSE
JULI
PROJEKT DONE
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
4
4
1
1
4
8
4
6
6
28
8. PHP - eksempel
29
9. SITEMAP
INDEX.PHP
fairtrade.html
okologi.html
vedvarendeenergi.html
emballage.html
BLOG.PHP
login.PHP
ADmin.php
30
10. Trykte medier - Magasin
31
Trykte medier - Magasin
32
11. Trykte medier - Plakater
33
Trykte medier - Plakater
34
12. Trykte medier - Emballage
35