Maxi Zoo rapport - HGAmedia.com

Eksamensprojekt, 2. semester Mul
Erhvervsakademi Knord
Robin Staley Wenningstedt Hansen
Agnete Gnistrup
Tommy Egedal Pedersen
Maria Laustsen

Indholdsfortegnelse 2
Projektformulering 3-5
Problemformulering
Projektplan & Tidsplan 6-14
Målgruppeanalyse og planlægning af produktet 15-17
Metode & teorier 17-19
Konative og interaktive funktioner
Design
Produkt
Medie
Kontekst
Analyser af den valgte virksomhed
Værdier
19-23
Maxi Zoo
Vudering/analyse af den nuværende kommunikations- og marketingsstartegi,
samt forslag til ændringer i forhold denne og diskussion af valg.
Styrker
Pris og produkt
Imageanalyse
Kommunikationskanal
Design af meddelse
2

Valg af promotionmix
Måling af promotionsresultater
Design brief 23-28
Dokumentation af designudvikling
Logo
Design udvikling opstart
Design udvikling re-design
Design udvikling finish
Fotografering til hjemmesiden
29-33
Designprocess
Maxi
for landkortet
Zoo
Designprocess for reklamebanner og tilbudsavis/webavis
Processbeskrivelse for webtilbud
Redigeret webtilbudsbanner til fødselsdagstilbud
Processbeskrivelse for de tre reklamebanner på forsiden
Redigering af de tre reklamebanner på forsiden
Flash fremgangsmåde 34-38
Overmenu
Sidemenu
Kodeeksempler af java script 38-42
3

Resultater af brugertest 43-45
Før testen
Maxi Zoo originalsiden
Vores site
Scenarier
Resultat
Konklusion 46
Reflektion 47
Gruppearbejde
Maxi Zoo
Referencer 48-49
Litteraturliste
Kilder
Bilag 1 50
De tre kerneværdier
Bilag 2 51
Brainstorm
Bilag 3 52-61
Brugertest
Bilag 4 62
SWOT & TOWS Matrix Analyse
Bilag 5 63
4

Projektformulering
Dette eksamensprojekt var en opsætning af en E-handels side.
Opgaven gik på at vælge et firma og hjælpe dem med at forbedre deres e-handelsløsning, samt give dem forslag til hvordan
de bedre kan synliggøre deres virkesomhed online.
Vi valgt http://www.maxizoo.dk, som tydeligvis manglede en fungerende e-handelsside.
Dernæst udarbejdede vi en problemformulering som vi kunne arbejde ud fra
Problemformulering
Maxi Zoo
“Hvordan formår vi at, introducere Maxi Zoos kunder for et redesign og en e-shop, så det giver en positiv effekt på kunden,
og forøger virksomhedens omsætning?”
5

Projektplan & tidsplan
Maxi Zoo
6

Maxi Zoo
7

Maxi Zoo
8

Projektplan
Introduktion:
Projektudlevering og gruppe opdeling.
Mandag den 03/05-2010
-Problemformulering og projektplan. Efter at have dannet en gruppe på 5, formulererede vi vores
problemformulering samt en tidsplan/projektplan.
-Der blev uddelt opgaver til hvert gruppemedlem.
-Vi valgte at lave en gangstertest på www.maxizoo.dk. Resultaterne skal vise os hvad for nogle problemer der even
tuelt kan opstå og hvad der kan forbedres.
-En undersøgelse af websitet blev også lavet, for at finde virksomhedens visuelle identitet og deres værdier samt
det generelle om sideopbygningen.
Maxi Zoo
Onsdag den 05/05-2010
-Efter vores undersøgelse af hjemmesiden, skulle vores website godkendes med vores problemformulering samt
projektplan.
-Vores milepæl blev nået og vi fik godkendt vores hjemmeside.
-Vi fik alle til opave, at lave et nyt design layout til onlineshoppen samt et nyt logo.
-Vi valgte at vores design layouts skulle give Maxi Zoo et nyt look, men stadig bibeholde deres værdier og visulle
identitet.
Torsdag den 06/05-2010
-Arbejde hjemme. Mødes igen fredag med design forslag til layout og logo.
9

Fredag den 07/05-2010
-Milepæl; vores målsætning for denne dato var:
-At vi alle skulle have lavet en gangstertest på hjemmesiden www.maxizoo.dk, og finde problemer på hjemmesiden på
dens generelle funktionalitet som f.eks. undersider, navigation og brugervenligheden.
-At vi fik godkendt vores problemformulering samt vores projektplan og tidsplan.
-Eventuelt komme med nogle ideer til det visuelle design layout og logo.
Mandag den 10/05-2010
-Vi skulle alle have et forslag til design layout samt nyt logo til vore netbutik hos maxizoo.dk sendt til dropbox.
-Udvalg af design og logo, layout til netbutikkens hjemmeside.
-Små ændringer på design og logo layout
-Milepæl;
Tirsdag den 11/05-2010
-Vejledning med Ian, fik nogle forslag til hvordan vi kunne gøre vores designlayout simplere samt funktionelt.
-Færdigt design og logo layout .
-Valg af font. (Alle)
-Valg farver. (Alle)
-Udarbejde og valg af menu knapper i PS filer. (Robin og Agnete)
-Valg af sideopsætning.
-Analysemodeller (Thorlacius model, Jacobsens, Three wing target. (Maria og Tommy)
-Gennemgang af Jan Jacobsen’s 25 spørgsmål. (Tommy)
-Redesign og funktionaliteten til websitet. (Agnete og Robin)
-Færdigt design layout og logo.
-Milepæl.
Maxi Zoo
10

Onsdag den 12/05-2010
-Forbedre projektplan og knæk opgaverne i mindre stykker.
-Skrive en mail til Maxi Zoo om vi kunne bruge nogle af deres materialer til projektet. Fik svar og lov af Lene Harvig
Marketing og Information fra Maxi Z00 til at få adgang til Maxi Zoos billede database samt deres produkt
informationer. (Maria)
-Gennemgang af galleri fra Maxi Zoo’s billeder til database. (Maria)
-Opbygning af sideopsætning i Dreamweaver. (Alle)
-Diskussion om menu dele til netbutikken, om det skal laves i Flash(SWF file) i stedet for i Photoshop.
-Da vores kendskab til JavaScript ikke var særlig stor, valgte vi at lave vores menuer i Flash.
Maxi Zoo
oMaria (læste materialer til analyser, teorier og modeller)
Torsdag den 13/05-2010
-Kristi himmelfartsdag, havde alle fået uddelt opgaver til ugen efter.
-Opgavefordeling
oRobin (arbejdede videre på design samt farverarbejde til hjemmesiden)
oAgnete (arbejdede videre på design samt farverarbejde til hjemmesiden)
oTommy (læste materialer til analyser, teorier og modeller)
Fredag den 14/05-2010
-HJEMMEAREJDE
Mandag den 17/05-2010
-Arbejdede på det vi havde lavet i weekenden. Kom i gang med virksomhedens visuelle identitet samt fandt nye
værdier og et nyt budskab som passer bedre til vores målgruppe.
-Overmenu Flash(Robin)
11

-Lavet menudele i Flash(Agnete syg)
-Visuelle identitet, Værdier og budskaber (Maria og Tommy)
Tirsdag den18/05-2010
-Videre arbejde med visuel identitet, give hjemmesiden nye værdier samt budskaber til målgruppen/modtager (Maria
og Tommy)
-Flash, arbejde videre på menuerne samt sideopbygning af hjemmesiden (Robin)
-Baggrundsbilleder og sideelementer redigeret (Agnete)
-Komme med vores endelige buskab med nye værdier samt den visuelle identitet.
Maxi Zoo
Onsdag den 19/05-2010
-SWOT analyse (Tommy)
-Analyser af den valgte virskomhed rapport(Maria)
-Flash (Robin)
-Delelementer til indkøbskurv (Agnete)
Torsdag den 20/05-2010
-SWOT & TOWS Matrix analyse færdigt (Tommy og Maria)
-Design process (Agnete)
-Videre proces med analyse af virksomheden (Maria og Tommy)
Fredag den 21/05-2010
-Reklame; videre arbejde med tilbudsavis samt bannerreklame. (Tommy)
-Draft af rapporten
-Rapport af Maxi Zoo, analyse af deres værdier. (Tommy og Maria)
12

-Snakket om Maxi Zoo’s værdier, og kommet med mere konkrete værdier (Tommy og Maria)
-Videre arbejde med de forskellige menuer. (Agnete og Robin)
-Billedarbejde med alle thumbnails til hjemmesiden (Agnete)
-Arbejdsfordeling til alle gruppemedlemmer i weekenden
-Opgavefordeling til weekenden
oRobin:Flash
oMaria: kommunikationsstrategier, de 4p’er, forberedelse til lightbox
oAgnete: Videre arbejde med thumbnails til undermenuer.
oTommy: de 4p’er, Reklamebanner til hjemmesiden
Maxi Zoo
-Lightbox billeder til hjemmesiden (Maria og Agnete)
Mandag den 24/05-2010
-Hjemme hos Agnete og lave projekt arbejde.
-Redigering af reklamebanner til forside (Tommy)
-Stemmningsbilleder; udvalg af billeder til hjemmesiden (Maria og Agnete)
-Brugertest med scenarier bearbejdes (Tommy og Agnete)
-Flash filen sidemenuen færdiggjort, sætte div. tags til reklamebanner til forsiden(Robin)
Tirsdag den 25/05-2010
-Diskussion om situationen med Andreas’ manglende fremmøde og engagement.
-Andreas ude af gruppen(forarbejde til side menu) (draft af indesign/rapport)
-Videre arbejde med formular til hjemmesiden (Robin)
-Landingpage (Robin)
-Videre arbejde med udvalg og færdiggørelse af stemningsbilleder (Maria og Agnete)
-Thumbnail/varebilleder til de forskellige sider på Websitet f.eks. landingpage og forms osv. (Agnete)
13

-Projetkplan & tidsplan (Tommy)
-Linke reklamebannerne til de tilhørende sider (Robin)
-Opsætning af lightbox til hjemmesiden (Maria og Robin)
Onsdag den 26/05-2010
-Rapport kommunikationsstrategi fortsat (Maria og Tommy)
-Lightbox med billeder (Maria)
-Thumbnail til siderne færdigt (Agnete)
-Langdingpage med form og billeder færdigt (Agnete og Robin)
-Design proces beskrivelse fortsat(Agnete og Robin)
-Reklamebanner ugeavis process beskrivelse færdigt (Tommy)
-Folex, filer til CD og mapper klargøres (Agnete)
-Vi har droppet info knapperne på undermenuerne, i stedet har vi lavet det sådan at det er billedet som linker til
Lightbox.
-Hjælp af Tue med lightbox
Maxi Zoo
Torsdag den 27/05-2010
-Design udvikling, udviklingsproces for design samt logo
-Design brief, hver især skriver noget om det vi har lavet igennem hele projektet
-Konklusion og reflektion
-Bilag
-Litteraturliste
14

Målgruppeanalyse og planlægning af produktet
Første tiltag i at designe et nyt visuelt image for Maxi Zoo, består i at definere deres målgruppe, finde et budskab og på
den måde skabe et fokus.
Vi har valgt at segmentere målgruppen, brainstorme afsender, produkt /medie og budskab ud fra de 25 spørgsmål skrevet
af Jan Kragh Jacobsen.
1. Hvem er målgruppen?
Alder 5 – 60 år.
Familier, unge, børn.
2. Hvad er budskabet?
Brainstorm
Mangel på tid går ud over dyrene, køb online hos www.maxizoo.dk
Går du med tidsnød
Maxi
i din hverdag, køb online hos www.maxizoo.dk
Zoo
Forkæl dit dyr med mere tid, køb online hos www.maxizoo.dk
For mere tid til kæledyrene, køb online hos www.maxizoo.dk
Giv dig selv mere overskud, køb online hos www.maxizoo.dk
Vi valgte budskabet
Maxi Zoos netbutik gør det nemt for dig at forkæle dine dyr, på www.maxizoo.dk
3.Hvad er mediet?
World Wide Web.
4.Hvilken effekt skal produktet have hos målgruppen?
Let tilgængelighed, tidsbesparende, bekvemt og nemt.
5. Hvad er formålet med effekten hos målgruppen?
Forkæle dyrene, velfærd for dyrene.
15

6. Hvem er afsender?
Faktisk afsender: Maxi Zoo
Implicit afsender: Medieproducenten (os)
7. Hvilken effekt skal produktet have hos afsenderen?
Faktisk afsender:
At styrke websitet som salgskanal og på den måde vinde markedsandel.
Større profit for Maxi Zoo ved implementering af e-handel.
Medieproducent:
Erfaring.
Maxi Zoo
8. Hvad er formålet med effekten hos afsenderen?
Opgradere Maxi Zoos e-marketing til e-handel med det mål, at Maxi Zoo bliver førende i Danmark indenfor online salg af
produkter til husdyr.
10. Er produktet lavet før?
Webshoppen er lavet på Maxi Zoos internationale website. Vores produkt er struktureret efter samme kategorier.
11. Hvor, hvornår og hvordan skal målgruppen opleve produktet?
Målgruppen har adgang til netbutikken på internettet døgnets 24 timer.
12. Hvordan skal produktet distribueres?
Maxi Zoo distribuerer selv deres vare til kunderne gratis.
16. Hvilken viden skal producenten have?
Kendskab til målgruppen opnås ved research af websitet www.maxizoo.dk
Kendskab til konkurrerende virksomheder som fører e-handel i Danmark.
Producenten skal have kendskab til Maxi Zoos nuværende markedsføring på nettet, samt deres motiver for at gå fra emarketing
til e-handel.
16

Det er en fordel at få viden om Maxi Zoos egen SWOT analyse og PLC kurve.
25. Hvordan skal produktet afprøves?
Ved udarbejdelse af en brugertest.
Metode og teorier
For at kunne implementere en webshop og lave en ny visuel identitet for Maxi Zoo med udgangspunkt i deres nuværende
website, har vi valgt at bruge Lisbeths Thorlacius model til analyse af visuel kommunikation på websites.
Den faktiske og implicitte afsender og modtager, er i vores brug af modellen lagt sammen og defineret som afsender og
modtager. Eftersom en afklaring af faktiske afsenders (Maxi Zoos) intention og faktiske modtagers (målgruppens) reception
vil kræve en omfattende interviewundersøgelse, der ligger uden for opgavens omfang. Vi har i stedet lavet en
brugerundersøgelse af produktet med henblik på at analysere målgruppens reception ud fra appelformen ”Logos”, for
primært at undersøge brugervenligheden i vores design.
Som den implicitte afsender for Maxi Zoo, har vi valgt at forny deres designudtryk ved at pifte de grønne og røde farver
op til lyse og friske farver. Da Maxi Zoo i forvejen henvender sig til flere generationer, har vi valgt at give siden et familiært
udtryk, som skal afspejle de tre kerneværdier: let tilgængelighed, sundhed og dyrenes velvære.
Dette har vi gjort med henblik på præcisere en målgruppe for Maxi Zoo og skabe mere fokus i deres visuelle image.
Maxi Zoo
Eftersom valget af en emotiv funktion kræver en afsender og modtagerundersøgelse, kan vi kun formode at den første
emotive funktion gør sig gældende i vores design:
Maxi Zoo henvender sig til målgruppen med den opfattelse, at velvære og sundhed er vigtigt i vores samfund, og skal
være let tilgængeligt for både dyr og mennesker. Vi antager at den tiltænkte målgruppe er af samme opfattelse, men vi
kan som sagt ikke dokumentere det.
Konative og interaktive funktioner
For at bestemme hvilke kommunikationsfunktioner, der skal gøre sig gældende i målgruppens interaktion med webshoppen,
har vi først undersøgt hvilke funktioner Maxi Zoo i forvejen anvender på deres website.
Maxi Zoo benytter sig meget massivt af den konative funktion i form at reklametilbud, som deres side er overfyldt med.
Det virker meget forstyrrende på det samlede visuelle udtryk . For at forhindre at modtageren drukner i stimuli, har vi
valgt at nedtone reklamer på webshoppen, således at det kun forefindes et sted på siden. (fødselsdagstilbud)
17

Af interaktive funktioner har vi inddraget konsultation i form af en søgefunktion i header, eftersom det er relevant at søge en
vare, denne funktion fremgår ikke på Maxi Zoos website.
Vi benytter den transaktive interaktive funktion i forbindelse med købsprocessen ved brug af en formular. Betalingstransaktionen
er ikke funktionel, da vi ikke har en database at overføre indtastede oplysninger til.
Kontaktoplysninger til Maxi Zoos hovedkontor er ikke tydelig på deres website, derfor har vi valgt at gøre webshoppen mere
brugervenlig, og fremhæve disse vigtige oplysninger ved at angive kontaktoplysninger i footer. E-mailen er dog ikke linket til
en mailportal.
Vi inddrager dermed konversation som den sidste del af interaktionsdesignet.
Design
Maxi Zoo
Produkt
I designets formale æstetiske funktion har vi brugt komplementærfarverne rød og grøn med det formål, at signalere en dynamisk
effekt i navigationen af indhold.
Skiftet fra grøn til rød ved mouse-over i menuerne, skaber en energi og dynamik i interaktionen med siden.
Valget af den grønne farve signalerer sundhed og giver brugeren en følelse af ro og velbehag. Rød signalerer energi/dynamik,
men også nærhed.
Den lyse grå farve giver luft rundt om siden og fremhæver kasseelementerne på siden.
Produkterne i webshoppen er sat op på en hvid baggrund, som udover at give et minimalistisk udtryk gør det enkelt at
vælge produkter.
Medie (navigationsstruktur og gestaltlove)
Webshoppen er opbygget ud fra den hierarkiske navigationsstruktur og gitterstrukturen.
Den hierarkiske struktur ses i form af en organiseret opbygning af hovedmenuerne og undermenuerne.
Ved brug af gitterstrukturen har vi inddelt emnerne/kategorierne i kasser, hvorfra man kan bevæge sig på tværs mellem
hovedmenuerne og undermenuerne.
18

Sidens kasse-opbygning opfylder loven om lukkethed.
Overskrifterne i hovedmenuerne og sidemenuerne opfylder loven om nærhed i form af den dynamiske navigation.
Den fatiske funktion udmønter sig i at header, footer og hovedmenu går igen på alle sider, det giver en genkendelighed i designet
som sammen med de logiske navigationsstrukturer opretholder kontakten mellem ”vi” som afsender og modtager.
Denne sammenhæng i designet opfylder loven om ensartethed.
Kontekst
Af referentielle funktioner
Index: Indkøbsvognen er et index, som vi bevidst har brugt flere gange på siden for at signalere overblik og gøre det muligt
at handle enkelt og hurtigt.
Maxi Zoo
Den intertekstuelle funktion
Webshoppen refererer til maxizoo.dk, dette ses tydeligt i brugen af de grønne og røde farver.
Ikon: Piktogrammerne er designet ud fra den tanke at simplificere navigationen på siden. Ikonet er forståeligt for alle generationer
i målgruppen, også børn.
Vi har lavet et re-design af Maxi Zoos logo i form af to større piktogrammer, som refererer til piktogrammerne i sidemenuen.
Analyser af den valgte virksomhed
En analyse af virksomheden sker på baggrund af vores vurdering af virksomheden ud fra Maxi Zoos egne værdier og styrker.
Værdier
”Vi har alt til dine dyr”
”Vi er altid i nærheden”
”Vi er prisaggressive”
”Vi elsker dyr”
”Vi garanterer den bedste service”
”Vi sætter vores kunder først”
19

Da nogle af disse værdier er en smule overfladiske og mindre gennemtænkte, har vi bygget videre på de service orienterede
værdier ved at tilføje værdien ”let tilgængelighed” og tænkt denne værdi ind i udviklingen af en e-handelsløsning.
Vi har valgt ”velvære” og ”sundhed” som Maxi Zoos to sidste og vigtigste kerneværdier, og tænkt dem ind i en ny visuel
identitet.
Vurdering/analyse af den nuværende kommunikations- og marketingstrategi, samt forslag til ændringer i forhold til
denne og diskussion af valg.
Det har ikke været muligt for os at analysere en kommunikationsstrategi og marketingsstrategi ud fra Maxi Zoos egne oplysninger,
da marketingsafdelingen ikke ønsker at give os indsigt i deres SWOT analyse eller produktlivscykluskurve.
Maxi Zoo
For udarbejdelsen af en SWOT analyse har vi taget udgangspunkt i virksomhedens styrker
Styrker
Unikt koncept
Specialitet i discount
Markedsførende i Europa
Vækstmuligheder gennem et stærkt franchise system
Kontrol gennem hovedkontor
Ideel branding
Mange års samarbejde med internationale leverandører
Kreativ ledelse
Moderne logistik
Ud fra en analyse af Maxi Zoos website har vi defineret de resterende faktorer til udarbejdelse af en SWOT analyse, suppleret
med analyseværktøjet trussels/muligheds matrix for definering af indsatsområder i en given markedsstrategi i form af
en Tows matrix.
Denne markedsanalyse/strategi er udelukkende lavet ud fra det formål at udarbejde en ny visuel identitet for Maxi Zoo,
20

samt at udvikle virksomheden fra dens nuværende stadie indenfor e-marketing til e-handel.
Vi ønsker at sammenfatte SWOT analysen med en Tows matrix med det formål, at definere indsatsområder til udarbejdelse
af den marketingstrategi, som en webshop og ny visuel identitet, skal udvikles på grundlag af.
For udarbejdelse af produktsortimentet i en webshop for online salg af Maxi Zoos produkter, havde det været optimalt at
tage udgangspunkt i en porteføljeanalyse.
Denne analyse skulle kombinere PLC kurven og bostonmodellen, til udarbejdelse af en strategi for online salg af evt. nye,
ældre og nuværende produkter. Men da vi ikke har adgang til disse oplysninger, har dette ikke været muligt.
Vi vil i stedet på baggrund af en analyse af Maxi Zoos positionering på markedet, bruge de 4 P’er som værktøj til en ny
strategi og tilgang til markedet.
Maxi Zoo
metilbud, som udgør halvdelen af interaktionsstrukturen på websitet og giver virksomheden en rodet identitet.
Pris og Produkt
Hvis man kigger på Maxi Zoos nuværende positionering på markedet via deres website, kommunikerer de en tvivlsom og
mixed positionering, der er forvirrende for kunden. Udover at websitet hverken signalere budskab eller fokusere på en målgruppe,
er den visuelle interaktionsstruktur og navigationsstruktur heller ikke gennemtænkt . Siden er klasket til med rekla-
Med signalementet at prisaggressivitet differentiere Maxi Zoo udelukkende deres produkter på pris, det er så massivt at det
giver dem et kedeligt image af discount , dårlig kvalitet og mangel på loyalitet overfor deres kunder.
Maxi Zoo skal stadig være omkostningseffektiv ved at differentiere produkter på pris, men mindre prisaggressivt og mere
kvalitativt. Signalet skal være ”god kvalitet til lave priser”. For at kunne forbedre kvaliteten af produkter, vil en webshop
kunne give nogle logistiske besparelser ved effektivisering og centrering af lager.
Med billig og effektiv distribution kan Maxi Zoo dermed bevare deres lave priser.
Maxi Zoo kan med en webshop differentiere sig på service, ved at tilbyde deres kunder gratis levering.
Imageanalyse
Med en ny forbedret visuel identitet kan Maxi Zoo differentiere sig gennem image, og på den måde vinde markedsandel.
Dette kræver udarbejdelsen af en ny kommunikationsstrategi. En egentlig imageanalyse ud fra Maxi Zoos målgruppe, har
21

vi ikke haft ressourcer til at lave. Men ud fra en nytænkning af Maxi Zoos værdier, har vi forsøgt at skabe et nyt image der
signalerer velvære og sundhed, i form af nye farvenuancer og billeder på sitet.
Kommunikationskanal
Vi har brugt AIDA modellen til bestemmelse af Maxi Zoos kommunikationsmål med webshoppen.
Opmærksomheden (Attention) på webshoppen, er skabt ved brug af komplementære pangfarver, rød og grøn. Vi har øget
opmærksomheden omkring produkterne, ved at gøre info om produkterne let tilgængeligt i form at lightbox.
Piktogrammerne og lightboxen på siden, har primært haft det formål at skabe interesse (Interest) for navigation i sidemenuerne
og produkterne.
For at brugerne har haft lyst (Desire) til at fortsætte deres besøg på siden, har vi gjort navigationsstrukturen meget brugervenlig
i form af kasseopsætningen af menuerne, samt skabt en klar kommunikation i farvevalget, piktogrammerne og opsætning
af produkter.
Selve købshandlingen (Action) er også gjort let tilgængelig ved placering af købsknap/indkøbsvogn flere steder på siden.
Maxi Zoo
Den valgte kommunikationskanal er ikke personlig masse medie.
Design af meddelelse
Webshoppen har en informativ appeal i form at beskrivelse af produkter i lightbox.
I tilbudsavisen nederst på siden, giver vi webshoppen en emotionel appeal, med salgsargumentet ”spar penge”.
Meddelelsens format er et ”website”, hvor der i høj grad er lagt vægt på et brugervenligt design ud fra tanken, at det skal
være ”simple & stupid”.
Valg af promotionmix
Maxi Zoo henvender sig direkte til slutbrugeren gennem reklame tilbud nederst på siden.
Måling af promotionsresultater
I tilfælde af at webshoppen blev funktionel, kunne det være interessant at foretage en måling af kommunikationsstrategien.
22

Design brief
Ideen med dette website design var, at
få siden til at ligne et eksotisk hjemmeside.
Baggrundsbilledet er et palmeblad.
Meningen med siden er, at den
skal være meget åben, luftigt og eksotisk.
Zoologisk have forbinder man tit
med noget eksotisk og virksomhedens
navn er Maxi Zoo kunne man tænke at
Maxi Zoo
det er sjov ide at opfriske siden med
eksotisk image.
Har forsøgt at bibeholde deres logo så
meget som muligt, har derfor kun ændret
deres selve logo til et par frøføder,
istedet for en hund og en kat der står
med et madkasse. Frøføder var et godt
tilbud for logo som den ekstra eksotiske
image.
23

Havde i tankerne at benytte samme
farver som i det oprindelige logo, men
med et lille twist; gradient er kommet
for at blive. Og i stedet for at
have ”dele” af dyr med, så bare bruge
fodspor. De valgte fodspor syntes at
passe fint ind, samt det giver en dynamisk
effekt. De lyse, varme farver
giver en tryghedsfølelse og glæde.
Poten symboliserer solen på vej til
skumring, og fuglesporerne symboliserer
dyrene gående på jorden.
Maxi Zoo
24

Design skitsen er lavet med udgangspunkt
i Maxizoos website, men med
et mere dynamisk og organisk udtryk.
Dette ses i form af warp effekter i
teksten i hovedmenuen, samt gradient
i sidemenuen. Kassestrukturen er
Maxi Zoo
bevaret.
Ikonerne er taget fra Maxizoos website.
25

Har valgt at bygge sitet op med inspiration
fra Maxi Zoos hjemmeside, men
har fokuseret på at simplificere det og
opfriske deres farver.
Tanken bag designet er at menu
strukturen skal være simpel og at
siden skal virke luftig.
Maxi Zoo
26

Dette designforslag er et re-design af
designforslag 1.
Her er fokuseret på at gøre menuen
visuelt pænere, og lave effekter på
alle aktive elementer.
Dette design er samtidig gjort mindre
kasset og mere sammenhængende.
Maxi Zoo
27

Websitet er ændret til et mere objektivt
site. Med en lysegrå baggrundsfarve
har det gjort websitet mere
stilrent og luftigt. Menuerne er også
ændret til mere lyse farver, for at give
siden et velbalanceret helhedsindtryk.
Maxi Zoo
28

Dokumentation af designudvikling
Logo
Vi har valgt at re-designe Maxi Zoos logo, for at holde fast i den eksisterende kundekreds, og for at bevare deres
grundlæggende image. Dette kommer til udtryk ved at simplificere deres logo i form af to piktogrammer, og bibeholde
farverne rød og grøn i nye nuancer ligesom på resten af siden. Græsset i logoet er tilføjet for at give mere liv og dynamik.
Logoet er lavet i et mere ungt design, for at henvende sig til en yngre målgruppe.
Design udvikling - opstart
Første skridt i vores design proces var at vi hver i sær, ud fra vores satte målgruppe gik i gang med at lave design forslag,
både til logo og til selve siden, hvordan den skulle sættes op og hvordan menuerne skulle udformes. Herefter gik
Maxi Zoo
vi sammen igen og udvalgte det bedste design. Vi gik hurtigt i gang med at re-designe nogle af delene og snakke om
hvordan vi fik vores menuer til at fungere.
Næste skridt var at uddelegere opgaver og herefter udføre disse opgaver. Det blev til at en skulle stå for at sætte siden
op i Dreamweaver, en anden skulle stå for menuerne som skulle laves i flash, en lavede et kort over butikker i flash, og
en gik i sving med at gøre delementer klar til de andre via Photoshop og Illustrator.
Vejledning med Ian Wisler Poulsen 10. maj
Den 10. maj fik vi vejledning med Ian, hvor han kiggede på vores design og kom med få kommentarer og forslag til det:
• Designet er generelt meget kasset, undgå bokse.
• Mere luft til piktogrammer i venstre side.
• Drop shadow effekten skal væk fra kasserne, for at gøre designet mindre kasset og mere blødt.
• Menu – undermenu for hvert dyr kunne re-designes til at opfylde reglen om ensartethed (similarity), dette gør desig
net mindre kasset.
• Ikke valgte objekter burde være sorte, valgte hvide.
29

• Undermenu kunne indrykkes til højre.
• Tekststørrelsen kunne man lave mindre og ikke fed.
Ian foreslog vi laver kortsortering og brugertest.
Evt. senere en ekspertvurdering.
Design udvikling - re-design
Denne feedback tog vi til efterretning og vi gik i gang med at ændre og redigere designet. Vi har lavet menuerne mere
sammenhængende og knap så boksede, lagt mere luft mellem alle delelementerne på siden, lavet om på opsætningen
af tekst og piktogrammer i sidemenuen, fjernet fed skrift og i stedet for drop shadow har vi forsøgt os med outer glow effekt
på de aktive bokse. Efter vi har lavet ændringer på siden og har skubbet frem og tilbage på tekst og piktogrammer
og lagt forskellige slags gradient, bedømte vi dem sammen. Vi blev alle enige om at vi var kommet ud med et langt bedre
produkt. Denne vejledning har vi fuldt ud udnyttet og sat stor pris på.
Maxi Zoo
Design udvikling - finish
Efter dette stødte vi dog ind i flere problemer. Da vi ikke var så bekendte med flash, fandt vi først sent ud af, at vores
menuer blev nødt til at blive lavet fra bunden i flash og ikke være importerede Photoshop filer. Dette har været skyld i
megen tidsspilde, da personen der sad med designet har brugt meget tid på at dele en menu op i mange knapper i photoshop,
og lægge outer glow på og finde ud af hvordan dette kunne komme til at fungere. Resultatet blev at det kunne det
ikke, så vi måtte begynde forfra i Flash, hvor en fra gruppen satte sig så ind i dette.
Herefter begyndte det at køre på skinner. Outer glow effekten blev droppet da dette ikke var muligt i flash, i det mindste
ikke med vores kompetencer, og i stedet blev der lagt en rød mouse over effekt og en mørkere rød effekt på de aktive
menuer.
Fotografering til hjemmesiden
30

Ud fra vores målgruppe og værdier besluttede vi hurtigt at vi ville tage nogle gode stemningsbilleder til vores side, så de
forskellige undermenuer kunne indeholde stemningsbilleder med dyr og familie. Vi valgte selv at tage ud og tage disse
billeder. Vi kiggede på Maxi Zoos eksisterende hjemmeside for at finde billeder der var brugbare, men deres billeder
mente vi var for forældede og ikke særligt indbydende til en hjemmeside. Så vi har fået lavet en aftale med en af gruppemedlemmernes
familiemedlemmer om deltagelse i fotosession.
Design process for landkortet.
Efter mange diskutioner om hvad der skulle være på hjemmesiden og gode ideer til en netbutik. Har vi kigget på nogle
andre hjemmesider for inspiration og for at se hvordan standarten er på hjemmesider og netbutikker som fe.ks. www.
thansen.dk, www.fakta.dk og www.superbest.dk .
Der blev foreslået, at bruge et landkort, der viste butikker som lå rundt i Danmark. Vi tog T-hansens landkort som et inspiration/udgangspunkt
til vores oversigt over butikker der illusterede, hvor de ligger i landet. Landkortet hentede vi på
Maxi Zoo
google søgning og ændrede det, så det passede til vores design på hjemmesiden. Vi prøvede os frem til med forskellige
farver, som rød, lyseblå og gul. Vi valgte istedet at bruge 2 forskellige grønne farver, for at landkortet skulle skabe balance
mellem det røde og grønne farver på siden.
Ideen med landkortet var, at brugeren kunne finde sin nærmeste Maxi Zoo butik og eventulet se om Maxi Zoo havde
varer liggende på lager, som brugeren nu leder efter. Men da ingen af os kan finde ud af database, har vi istedet forsøgt,
at fokusere på det visuelle.
Redigering af landkortet og byvisning
Vi har valgt at bruge de grønne farver fra topmenuen for at skabe en og den røde farve for byvisningen. Skrifttypen er
Airal i hvid for at det kan læses bedre.
Design process for reklamebanner og tilbudsavis/webavis
31

For at modtageren ikke skal drukne i stimuli af konstant reklamebanner og nyhedsbanner på hjemmesiden. Har vi valgt
at holde os fra det og frasorteret det meste og ned til nogle enkelte reklamebanner og nogle nyhedsbanner for neden af
siden.
På reklamerne har vi brugt appelformen ethos og logos. Med ord som ”Spar tid og penge” og ”Spar tid og penge på vores
Netbtuik”. For at virke troværdige og samtidige på en fornuftigt logisk måde, hvor vi hentyder til vores produkt Onlineshop.
En hentydning til, at hvis de kommer her ind til Maxi Zoo Netbutik og handler vil man kunne spare en masse penge og tid
samtidige give ens kæledyr det velvær de fortjener.
Processbeskrivelse for webtilbud
Webtilbudet har vi taget inspirationen fra deres egen reklamebanner på siden produkt info*note1. Vi har taget udgangpunket
med potesporerne, som gå over banneret. Vi har været igennem nogle design forslag til hvordan banneret skulle
se ud og ramme vores visuelle ID så godt som muligt. Den første banner virkede alt for flad og meget kedeligt og lignede
lidt for meget den gamle hjemmeside med en grøn tynd ligne som gik igennem det røde farve. Porterne som går over
banneret er både i hvid og grøn farve. Det endte med at vi droppe det helt, for at holde os til det nye design.
Maxi Zoo
Redigeret webtilbudsbanner til fødselsdagstilbud
Efter en kort diskution om hvordan banneret skulle se ud, satte vi hjemmesidens nye friske farver i rød og grøn ind til
banneret. Banneret er lavet i photoshop, hvor vi har sat gradiant på med mørkerød og lyserød farve og yderligere sat to
af tilbudavisen på højre side af banneret for visualiser de fine tilbuds priser som vi tilbyder modtageren. En meget simpel
banner som netop kun skal fortælle kort og omfattende om vores nye produkt.
Processbeskrivelse for Fødselsdagstilbud
32

Med fødselsdagstilbudsavisen har vi været heldig med, at kunne vise vores mange sortimenger som Netbutikken tilbyder.
Der har vi taget billder fra Maxi Zoo’s database photos og sat dem ind og redigeret dem til de rette størrelser. Vi har valgt
at sætte billeder ind med forskellige dyr produkter for at visualisere de mange produkter og ramme en bredere målgruppe
med kæledyr. Farverne og logoet har vi taget fra vores egen design lager for at give ugeavisen et mere nutidigt look. Vi
prøver at informere om vores nye Netbutik så meget som muligt uden at det er for stimulernede som den daværende
hjemme har gjort. Og sat tekst ind på midten af avisen hvor vi reklamere med Maxi Zoo nyeprodukt.
Processbeskrivelse for de tre reklamebanner på forsiden
Vi havde en diskution om vi skulle sætte webbannet på forsiden eller om der skulle laves et nyt banner. Vi besluttede
os for at lave et nyt banner med flere informationerdelt op i nyheder. Nyheder skulle være små og kort, for ikke at skabe
alt for meget stimuli på siden. Banneret skulle være for neden af siden for ikke at skabe alt for meget støj på siden. Det
lignede meget det gamle webanner som vi havde lavet samt den daværende hjemmeside og var derfor ikke godt nok.
Maxi Zoo
Redigering af de tre reklambanner på forsiden
Teksten forblev det samme uden italicerede tekst. Med appelformerne ethos og logos for at modtageren skal reagere
på ”stærke kampagne priser” og ”Shop online, spar tid og penge” . Kasserne blev delt op i tre kasser for sig selv, for at
vi kunne lave dem til link. Et af bannerne linkede til Fødelsdagstilbudet, den anden linkede til vores Netbutik, den trejde
banner linkede ikke til noget. Ideen var ellers, at vi ville have linket til et større landkort med mere information om butiken
i Gentofte. Det lille projekt med et stort landkort med informationer om de forskellige butikker med lagerinformation blev
droppet helt. Vi satte gradiant på med mærke og lyse grøn som har masse farve som vores indkøbskurv. Stemingsbiledet
er taget fra deres hjemmeside og bearbejder på photoshop til den rigtige størrelse.
33

Flash fremgangsmåde
Vi besluttede os for at lave vores menuer (sidemenu og overmenu) i Flash (Fl), da vi ville lave dem interaktive; hvilket inkluderer
at de var inviterende og brugervenlige. Det skulle dermed skabe mere dynamik og gøre websitet mere attraktiv.
Vi startede med at lave menuknapperne i Photoshop (Ps) som png, hvorefter vi importerede dem i Flash (Fl). Dette fandt
vi hurtigt ud af var en dårlig fremgangsmåde, da de blev pixilerede og utydelige. Det skyldtes at Flash (Fl) er et vektorbaseret
program og Photoshop (Ps) ikke er. Derpå lavede vi det hele i Flash (Fl), med undtagelse af dyre-piktogrammerne,
der blev lavet i Illustrator (Ai).
Vi droppede Flash (Fl) i et lille stykke tid på grund af de pixilerede knapper, hvor vi benyttede en alternativ fremgangsmåde,
som var at lave dem interaktive i CSS; ved brugen af ”#idnavn:hover”. Men det droppede vi også, da vi ikke
kunne opnå en outerglow effekt, samt dropdown effekten kunne ikke åbnes på denne måde. Så vi vendte tilbage til Flash
(Fl) og blev ved det.
Maxi Zoo
Overmenu
Vores grundidé om det funktionelle var at det startede med at have en farve, som så skulle ændres ved at man mouseover
dem, og ved nedtrykningen af knappen.
Det visuelle aspekt kom hurtigt til enighed om designet og farvevalget, og gradient giver en god effekt uden at blive til
overkill.
At lave knapperne og tilføje Up, Over og Down gik lige til og hurtigt, men at komme frem til og lave funktioner, der får
knapperne til at linke til URL, tog en del længere tid.
Der er 3 forskellige funktioner tilknyttet Overmenu.
Her er den første funktion:
function netbutikKlik(event:MouseEvent):void
{
navigateToURL(new URLRequest(“netbutik.html”), “_self”);
}
34

netbutik.addEventListener(MouseEvent.CLICK, netbutikKlik);
Her laves en mouse event, at når der bliver gjort et eller andet med musen, så skal ”netbutikKlik”-funktionen åbne vores
netbutik.html i samme vindue som man har åbent.
Derefter tilføjes en event listener til netbutik, som er navnet på vores knap. Den event listener venter til at nogen klikker
med musen på knappen, hvorpå den vil starte ”netbutikKlik”-funktionen, som nævnt overfor.
Her er den anden funktion:
function knappeLukker(knap:SimpleButton):void
Maxi Zoo
{
knap.enabled = false;
knap.upState = knap.downState;
}
Denne funktion tager den sendte knap (som parameter), sætter dens tilgængelighed til false, dvs. knappen ikke længere
kan trykkes på. Hvorpå den tager måden knappen ser ud på (dens state) i Down og sætter den til at se magen til ud i Up.
Her er den tredje funktion:
var url:String = ExternalInterface.call(“window.location.href.toString”);
switch(url)
{
case “http://robin.hgamedia.com/maxizoo/index.html”:
knappeLukker(startside);
break;
35

(…)
default:
trace(“Ingen match!”);
Denne funktion er en case, der tager den URL man er på og sammenligner med den første case, og hvis den ikke er den
samme, så går det videre til den næste case, osv. Den skulle gerne aldrig ramme default, da der i hver case er angivet de
enkelte sider, men godt at have den med en trace, så man kan se hvis den nu skulle ramme default.
Sidemenu
Designet til den blev vi hurtige enige om; at bruge dyre-piktogrammer til knapperne. Derpå funktionen om at når en knap
bliver trykket på at den kommer med en dropdown med underkategorier hørende dertil.
Farvevalget samt gradient skulle være det samme som i Overmenu, for at holde stilen og simularity; altså ensartethed.
Der er adskillige funktioner til denne menu, så vil komme med nogle eksempler.
Her er første eksempel:
function laasMenu(elementer:Array, position:Array, synlighed:Array):void
{
if (elementer.length != position.length || position.length != syn-lihed.length || elementer.length != synlighed.
length)
{
throw new Error(“>>> DINE ARRAYS ER FORKERTE, DIN NOOB!

}
}
elementer[i].y = position[i];
elementer[i].visible = synlighed[i];
Funktionen forventer at modtage 3 arrays som parameter, hvor fra den bliver tilgået. Derpå bliver der tjekket om
længderne på de 3 arrays er forskellige fra hinanden, og hvis det er tilfældet, så bliver der kastet en meddelelse herom.
Men hvis længderne derimod skulle passe sammen, så vil en for-løkke blive udført.
Løkken tager det første element i elementer-arrayet og sætter dets y-position magen til det første element i positionarrayet,
hvorefter den tager det første element i synlighed-arrayet (som indeholder en boolean) og sætter det første elements
synlighed i elementer-arrayet til dette.
Maxi Zoo
Denne funktion bliver brugt til at synliggøre og rykke på knapperne, for på den måde at få hundmenu og katmenu til at stå
tydeligt frem.
Her er andet eksempel:
function visHundMenu(knap:SimpleButton):void
{
laasMenu([btn_hund, menu_hund, btn_kat, menu_kat, btn_gnaver, btn_fugl, btn_fisk],
[0, 0, 245, 245, 305, 365, 425],
[false, true, true, false, true, true, true]);
}
knap.enabled = false;
knap.upState = knap.overState;
Denne funktion forventer at modtage en knap som parameter, hvor fra den bliver tilgået. Derfra bliver ”laasMenu”-funktio-
37

nen tilgået med givne parameter, hvorefter den modtagne knaps tilgængelighed bliver sat til false (altså låst fast), og sætter
dens Up-state magen til dens Over-state.
Kodeeksempler af Java scripts
Formular
Her er nogle Java scripts eksempler, som vi benytter på vores website, men de bliver kun brugt til vores formular (form)
side.
Her er første eksempel:
function element1()
{
if(document.getElementById(‘fornavn’).value == “”)
{
document.getElementById(‘fornavn’).style.backgroundColor = “red”;
document.getElementById(‘kontakt’).style.backgroundColor = “red”;
return false;
}
}
return true;
Maxi Zoo
Denne funktion tjekker om det valgte elements (ud fra id) værdi er det samme som en tom String (tekststreng). Hvis den er
det, så skal den farve de to valgte elementers baggrundsfarve (ud fra id) rødt; som i dette tilfælde er et tekstfelt og navnet
på det tilhørende fieldset. Derefter sender den false tilbage til hvor funktionen blev tilgået. Hvis der er minimum ét tegn i,
38

så sender den true tilbage til hvor funktionen blev tilgået.
Funktionen går igen flere gange, med ændring af funktionens navn og de enkelte elementers id.
Her er andet eksempel:
function element6()
{
for(var i = 0; i < document.getElementsByName(‘betalingskort’).length; i++)
{
if(document.getElementsByName(‘betalingskort’)[i].checked)
{
return true;
Maxi Zoo
}
}
}
document.getElementById(‘kortvalg’).style.backgroundColor = “red”;
return false;
Denne funktion er for vores radio bottons bliver tjekket for værdi. Den tager alle elementerne inden for deres fællesnavn,
hvorpå den ser efter om én af dem checked, og hvis det er tilfældet bliver der sendt true tilbage til hvor funktionen blev
tilgået. Men hvis ingen er checked, tager den det valgte id (i dette tilfælde navnet på det tilhørende fieldset) og farver dets
baggrund rødt og sender false tilbage til hvor funktionen blev tilgået.
Her er tredje eksempel:
function genskab(id)
39

{
if (document.getElementById)
{
document.getElementById(id).style.backgroundColor = “white”;
}
}
Denne funktion bliver tilgået under alle tekstfelternes tag som ”onclick”. Den forventer et id som parameter, hvorefter den
farver baggrundsfarven hvid igen på det valgte id.
Her er fjerde eksempel:
function formValidator()
{
var condition1 = element1();
var condition2 = element2();
var condition3 = element3();
var condition4 = element4();
var condition5 = element5();
var condition6 = element6();
var condition7 = element7();
var condition8 = element8();
var condition9 = element9();
var condition10 = element10();
Maxi Zoo
var godkendt = condition1 && condition2 && condition3 && condition4 && condition5 && condition6 && condition7
&& condition8 && condition9 && condition10;
40

if(!godkendt)
{
alert(‘Det markeret med r\u00F8dt skal venligst besvares, for at f\u00E5 bestillingen godkendt.’);
}
return godkendt;
}
Denne funktion er vores validator, der bliver kørt når man har trykket på submit-knappen. Den tager de enkelte funktioners
værdier og lægger dem over i variable, hvorefter de bliver lagt sammen over i én variabel. Hvis den variabel ikke indeholder
nogen værdi, bliver
Maxi
en alert-besked vist på skærmen om venligst at udfylde
Zoo
felterne markeret med rødt. Hvis variablen har
en værdi, bliver den sendt tilbage, og man føres videre til landingpagen.
Lightbox
Vi har valgt at implementere en lightbox effekt for at klargøre informationerne på vores produktbilleder. Vi har tilmed tilføjet
en ekstra knap, som ikke gør noget, med CSS effekt.
Her er den CSS vi tilføjede:
#buttonNavIndkoebskurv{
background-image: url(../../images/laeg_i_kurv_groen.gif);
width: 91px;
height: 51px;
float: left;
margin-bottom: 0.7em;
cursor: pointer;
41

}
#buttonNavIndkoebskurv:hover{
background-image: url(../../images/laeg_i_kurv_roed.gif);
width: 91px;
height: 51px;
float: left;
margin-bottom: 0.7em;
cursor: pointer;
}
Maxi Zoo
Den lader vores knap floate til venstre, og billedet ændres når den bliver hover (mouseover).
Og her ses det hvor vi har indsat knappen i Java script (den med understregning):
Builder.node(‘div’,{id:’bottomNav’},[
Builder.node(‘div’,{id:’buttonNavIndkoebskurv’}),
Builder.node(‘a’,{id:’bottomNavClose’, href: ‘#’ },
Builder.node(‘img’, { src: LightboxOptions.fileBottomNavCloseImage })
)]
)
På almindelig HTML sprog ville vores indsættelse se således ud:
42

Resultater af brugertest
Før testen
Vores testpersoner ligger i aldersgruppen mellem 21 og 32, hvorimellem der både er forældre, hundeejere, katteejere og
testpersoner der ikke har dyr.
Vores testpersoner forventede at en butik vil have et stort udvalg af varer, hvor man kan finde vægt, farve og andet info.
En fælles farve de alle havde forventet var grøn, ellers var der forventninger om farver som gul, røde jordfarver, hvid og
mange farver blandet.
Ca. halvdelen havde allerede besøgt dyrehandlere på nettet, og næsten alle havde et kendskab til Maxi zoo som butik.
Maxi Zoo originalsiden
Generelt mente vores testpersoner, at Maxi Zoos original side var meget rodet, at tingene var stillet op rodet og menuen lå
for højt, der var en enighed om, at det ikke var en side man havde lyst til at handle på.
Testpersonernes blev efter kort tid irriteret over Flash filen på startsiden, fordi den blev ved med at loope.
Farvesammensætningen var de ikke tilfredse med, de mente at farverne var for kraftige.
Maxi Zoo
Vores site
Efter præsentationen af Maxi Zoos originale site, præsenterede vi personerne for vores site.
Den umiddelbare reaktion fra alle testpersonerne var, at billedet var lækkert, det symboliserede dyrevenlighed, familiehygge
og fælleskab. Det var tydeligt at se at hundene er var glade og sunde.
Der var også en enighed om at farverne var bedre nu, da de var gjort mere friske i forhold til originalsiden. At vi havde
valgt at holde farvesammensætningen, men bare gjort den mere lækker.
Billedet mente de fleste dog var for stort, nogle mente at reklamerne i bunden var blevet for små.
På sitets underside, var vores testpersoner enige om at piktogrammerne gjorde navigationen nem, og at det var en smart
måde at gøre det på.
43

Vores piktogrammer fik kommentarer som, >>dejligt at det er lidt legende>børnevenligt>dejligt at piktogrammerne gør det mere brugervenligt

Efter testen har vi valgt at beholde hunden og foderprodukterne, men skære katten væk.
Der var et par kommentar til reklamebanneret for neden af netbutik siderne. De mente, at det var forvirrende og
misvejledende og se webtilbudsbanneret, som linkede frem til fødselsdagstilbudet. De mente at det var to forskellige
tilbudsaviser. Vi har derfor ændret webtilbudet på banneret og skrevet fødselsdagstilbud i stedet for.
Maxi Zoo
45

Konklusion
I udarbejdelsen af et re-design, har vi formået at forny Maxi Zoos visuelle image, skabe klarhed og fokus på en mere
specifik målgruppe.
Det har derfor været vigtigt at komme ind til kernen af Maxi Zoos værdier, finde essensen i deres visuelle identitet og ikke
mindst skabe fokus omkring deres signaler.
Ud fra resultaterne af brugertesten kan vi konkludere, at brugernes interaktion med webshoppen har været meget positiv
og brugervenlig.
Websitet har været enkelt at benytte. Det visuelle image vi har forsøgt at signalere, har været forståeligt og givet et
sammenhængende, unikt indtryk på modtager. Denne fornyelse appellerer til modtager om at handle online på en let
tilgængelig måde, og øger omsætningen for Maxi Zoo.
Maxi Zoo
46

Refleksion
Valget af Maxi Zoos website har været udfordrende at arbejde med, da hverken budskab, målgruppe eller afsender har
været klart defineret i deres visuelle profil. Dette har givet os ”frie tøjler” til at forny virksomhedens image.
Vi har haft adgang til billedmateriale i en database, som har reduceret mængden af arbejde.
Vigtige oplysninger om virksomheden for udarbejdelse af en analyse har derimod været mangelfuld. Derfor har virksomhedsanalysen
været svær at udarbejde, fordi den primært er lavet ud fra Maxi Zoos visuelle image.
Gruppearbejde
Vi har haft samarbejdsvanskeligheder i gruppen, grundet manglende fremmøde fra et medlem og dårlig kommunikation.
Dette har resulteret i dobbeltarbejde og afskedigelse af et medlem.
Maxi Zoo
Det har derfor rykket vores tidsplan og forsinket en stor del af arbejdet, som til sidst har givet stress for de resterende gruppemedlemmer
i forløbet.
47

Referencer
Litteratur liste
-Christian Oxholm Zigler; Marketing Management - kort & godt 4. udgave
-Jørgen H.K. Jepsen, Anne Schoubye; Afsætningsøkonomisk – Modelsamling
-International markedsføring – 3. udgave
Maxi Zoo
-Ian Wisler-Poulsen, Ole Gregersen – Usability
-Jan Krag Jacobsen – 25 Spørgsmål
-Ian Wisler-Poulsen – Layout i opgaven
-SWOT analyse
-TOWS Matrix
-Lisbeth Thorlacius – Visuel kommunikation på websites
-Roman Jacobsen – Model til analyse af poetiske tekster
-Hillman Curtis – MTIV, Three Ring Target
48

Kilder
Henrik Glinka Andersen:
http://www.hgamedia.com
http://www.minreklame.dk/Blockbuster/
http://www.minreklame.dk/Tilbud/Tilbudsavis/Tilbudsavis_Tilbudsaviser.php
http://www.superbest.dk/find-butik
http://superbrugsen.dk/Butikker+og+aabningstider
Maxi Zoo
http://www.thansen.dk/product.asp?c=3865094074&n=297939943&pn=1638842522
http://www.maxizoo.dk/produktinfo.html
http://www.maxizoo.dk/
http://www.nielsgamborg.dk
Fotos af kat:
http://caelestisragdolls.com/tuckerfacef.jpg
Tilbudsavis og pote aftryk:
http://www.maxizoo.dk/tilbud.html?&no_cache=1
49

Bilag 1
Maxi Zoo
50

Bilag 2
Maxi Zoo
51

Bilag 3
Brugertest
Alder:
Testperson 1: 32
Testperson 2: 27
Testperson 3: 27
Testperson 4: 26
Testperson 5: 21
Maxi Zoo
Før testen foretages:
Dette er en brugertest på et site for dyreartikler, vi vil gerne bede dig tænke højt under hele testen.
Vil lige starte med at høre hvad du forventer af en hjemmeside for dyreartikler?
Testperson 1:
Testperson 2: Ved ikke rigtigt
Testperson 3: Hele sortimentet forventes at ses, at der er forskellige ting til forskellige dyr.
Testperson 4: Jeg forventer der er en oversigt over forskellige ting til de forskellige dyr, altså der er noget til hunde
marsvin osv. Beskrivelse på produkter fx hundemad, priser hvalpefoder om der er noget specielt ved det,
varebeskrivelse. Det er jo dyreartikler så det er en ren varebaseret side, let at finde varerne dem man søger
Testperson 5: Info om de forskellige artikler vægt, priser, udvalg, produktliste, billeder, af de forskellige produkter
•Hvilke farver forventer du?
Testperson 1: Naturfarver, grøn, brunt.
52

Testperson 2: Grøn og gul
Testperson 3: Gule og brune farver
Testperson 4: Enkel hvide farver, måske også enormt spraglet, ikke nogen speciel farve, mange varer med mange
farver, ikke et stort kaos af farver.
Testperson 5: Mørkegrøn og rød
•Har du allerede kendskab til hjemmesider for dyreartikler?
Testperson 1: Ja, zoocity, trenddog, dyrelægesider
Testperson 2: Nej
Testperson 3: Kender kun til hestesider
Testperson 4:
Maxi
Kender maxi zoo og dem der hedder, kan ikke huske
Zoo
det, de har et lyserødt logo, og en der hedder
petsnop.dk den er meget elegant i sorte farver. Forventede ikke at siden var så gennemført
Testperson 5: Ingen kendskab til hjemmesider for dyreartikler
Præsenter personen for Maxi Zoo original side
Kender du Maxi Zoo?
•Hvis ja hvad har brugt sitet til? Og hvordan syns det det er at navigere rundt på?
Testperson 1: Kender butikken, kender ikke sitet.
Testperson 2: Nej
Testperson 3: Har hørt om Maxi Zoo, men aldrig været inde på deres website.
Testperson 4: Har været inde på siden men rigtigt lang tid siden
Testperson 5: Mener at det ligger i Høje Taastrup men ellers kender han det ikke
53

Forsiden: Jeg vil bede dig starte på forsiden:
Hvad er dit umiddelbare indtryk af forsiden?
Testperson 1:
Testperson 2:
Testperson 3: GRØN og RØD, økologisk tænkte hun på. Græsplæne ved at se dyrene.
Kunne ikke lide menuen.
Testperson 4: Grøn og rød fin flash video, ret sjovt den der gule ting discount på flash, rodet lige umiddelbart. Billed
er i alle hjørner og kanter, noget pjece oppe i venstre, flag i højre, ris og ros nede. Først nu ser jeg logoet, det fors
vinder lidt syns jeg, jeg så først logoet i bunden før jeg så det i toppen.
Testperson 5: Ej hvor nice at den er grøn, meget dansk røde og hvide farver, syns ikke umiddelbart om dyrebutik og
dansk kobling. Lidt irriterende at man skal scrolle, ville ikke se det nede på siden, højremenu med røde kasser, de
kommunikerer ikke så godt, Ikke noget han ville klikke på, til gengæld ville han nok klikke på de nyeste tilbud.
Maxi Zoo
Hvad syns du om farvevalget?
Testperson 1:
Testperson 2:
Testperson 3: Ingen info
Testperson 4: Meget markant ikke rigtigt dyreforretning, ikke ud fra farverne, det kunne også være et byggemarked.
Testperson 5: Den grønne farve passer godt, rød hvid ”no go” overdrevet underlig kobling
Har du andre kommentarer til forsiden? (opbygning, udformning, stil/tone)
Testperson 1:
Testperson 2:
54

Testperson 3: Forvirring med opsætningen.
Testperson 4: Syns det er sjovt at deres menu i venstre side ligger lidt højere end det andet, ingen mening med ris
og ros der, menu oppe ved siden af overskrift og logo lidt sjovt og gør det rodet Flash filmen bliver irriterende når det
bliver ved.
Testperson 5: Underligt med en kolonne i højre side det hele er presset sammen i venstre side lidt kejtet udseende.
Selve sitet:
Forsiden:
•Hvad er dit umiddelbare indtryk af forsiden?
Testperson 1: Banner er 80 gammelt ( rød + græs), Fedt logo piktogrammer. Fed topmenu og billede. Fin footer.
Øverste banner ligner ikke græs, det er for tegnet. Græsset fungerer bedre i footer.
Mindre banner i toppen, evt. 2/5 grøn og 3/5 rød.
Testperson 2: Familie hygge med dyr, hundene er en del af familien.
Maxi Zoo
Testperson 3: Godt indtryk, elsker headeren på grund af græsset.
Bedre helhedsindtryk.
Kan meget bedre lide bannerne, passer bedre end dem fra den oprindelige side.
Synes det er ærgerligt at man skal scrolle ned.
Testperson 4: Billedet er hyggeligt, glad hund der leger med pind. Er hund og kat med i logo? Lidt forvirrende
Meget overskuelig, headeren den røde farve eller farven i headeren ligner lidt en solnedgang, lidt dyster, lidt dunkel.
Det ser rigtigt fint ud meget mere overskuelig i forhold til den anden, det ser mere butiksagtig ud med de små bannere
i bunden.
Testperson 5: Det er faktisk ret fedt med det store billede der kommer op, dyrevenligt univers med glade mennesker
og vilde hunde der har det nice, kombinationen med den grønne og den røde er mere harmonisk her, nyhedsfeltet i
højre hjørne er meget dæmpet, ret småt, man kan se man er på startsiden.
55

•Hvad syns du om farvevalget?
Testperson 1: Rød og grøn er fedt
Testperson 2: Godt farvevalg
Testperson 3: Meget bedre end den anden side
Testperson 4: farvevalget er fint nok, kan godt lide at den grønne farve i menuen bliver til røde
Testperson 5:
Maxi Zoo
•Hvad tænker du når du kigger på billedet?(hvad signalerer det)
Testperson 1: Glæden ved dyr, familie, samarbejde
Testperson 2: Ganske alm. borgerlig familie, villa, volvo, vovse. Anstændige mennesker
Testperson 3: Lidt for stort billede.
Testperson 4: godt billede, glad hund der leger med pind.
Testperson 5:
Prøv at gå hen på netbutik under hund og foder.
• Hvordan oplever du denne side?
Testperson 1: Super godt med sidemenu piktogrammer brugervenligt
Testperson 2: Tænker på økologi, man kan se hvad man køber, overskueligt, godt med prisen står der.
Testperson 3: Nemt og overskueligt med undersiderne, rigtig gode stemningsbilleder.
Kan godt lide landkortet.
Testperson 4: Syns den virker overskuelig, let at se hvor man er, kan godt lide den lille hundepote det er ret
56

hyggeligt lidt legende med de små tegninger, tydeligt at se hvad det er fine billeder, man kan sagtens se
produkterne, klikker på et produkt og der kommer en boks op med info,
Informativ side let simpel at overskue kan godt lide kortet til højre med butiksoversigt let at forstå.
Testperson 5: Haha nice,” trækker lidt på smilebåndet af illustrationerne” lidt legende hører sig også til.
•Hvilke indtryk giver siden?
Testperson 1: Virker som om der mangler noget i siderne, tilbudsbanner skal være ligeså lang som footer
Højre hundebillede af hund skal spejles så de kigger fra væk fra hinanden
Testperson 2: Billederne passer ikke til foder siden, måske man kunne sætte hundebilleder ind som passer til
produkterne
NB. Evt. sætte et andet billede ind under kategori foder, hvor den ene hund drikker vand!
Testperson 3: For mange ting man skal igennem, for at kunne komme frem til deres mål om ting de gerne vil købe.
Testperson 4: Informativ side let simpel at overskue kan godt lide kortet til højre med butiksoversigt let at forstå.
Kan godt se at det er en dyreforretning, selvom den er lidt tegneserie agtig
Maxi Zoo
Testperson 5: Kan godt lide drop down menuen, at poten følger med giver lidt bevægelse billederne er lidt
mærkelige ville fortrække et billede frem for 2, klikker på et produkt, så kommer det op, det er ret fedt lavet der er
kg. og en pris og lidt om produktet kommer op, så det er i fokus.
Hvis jeg skulle købe ville jeg være mere motiveret hvis købsknapperne er lidt større men meget fedt med effekten
på knapperne
Er ikke i tvivl om at man godt kan bestille online, øhm man kan ikke klikke på lagerstatus.
Uden rigtigt at have klikket på noget har jeg 3 varer i kurven, det er tydeligt at man kan handle
Scenarie 1
Du vil købe hundefoder til din hvalp.
Find Hill’s Science Plan puppy large breed foder.
57

Scenarie 2
Find hen til kassen, udfyld formularen og gå til betaling.
Scenarie 3
Du vil gerne se Maxi Zoos webtilbud find denne.
Efterinterview:
Hvad er din samlede oplevelse af websitet?
Testperson 1: Nemt brugervenligt
Testperson 2: Nemt
Testperson 3: Enkelt, og nemt, til at overskue
Testperson 4: den grå baggrund lidt hvidere
Testperson 5: Fungerer godt navigationen er god lidt sammenpresset Inde under netbutik
Maxi Zoo
•Var det nemt/svært at gå til?
Testperson 1: ja meget
Testperson 2: Nemt
Testperson 3: Det er nemt at gå til, lidt langt indtil varerne.
Testperson 4: Let at finde rundt på siden
Testperson 5: universet med små tegninger er godt lavet giver siden en identitet, så man hurtigt kan finde rundt un
der de forskellige ting.
58

•Er der information du mangler? Hvilken?
Testperson 1: Nej tror ikke
Testperson 2: Nej
Testperson 3: Der mangler ikke noget for folk der skal ind første gang.
Testperson 4: Umiddelbart ingen informationer der mangler
Manglede noget mere info om foderet, hvis jeg skal købe det over nettet
Testperson 5: Syns ikke rigtigt der manglede nogle informationer, godt inddelt, i kategorier
Baren i bunden kunne godt have fået lidt mere plads på forsiden
Websitets menuer og opbygning:
•Er det logisk og uoverskueligt for dig?
Testperson 1: Ja meget
Testperson 2: Ja
Testperson 3:Ja
Maxi Zoo
Testperson 4: Let at se hvad der er på siden
Menuer og opbygningen er logisk kan godt lide brødkrummestien
Testperson 5: Logisk opbygning
•Er der funktioner/features du efterspørger? Hvilke? Overflødige?
Testperson 1: Nej Nej
Testperson 2: Fint
Testperson 3: Nej
Testperson 4: Nej
Testperson 5: Større købsknap, og lagerstatus kunne være fedt hvis det var der
59

•Hvordan vurderer du stil og tone – er det formidlet til dig som bruger?
Testperson 1: Ja simpelt gammeltdags, ældre børn
Testperson 2: Fødselsdags tilbud, discount. Familien Danmark=kvalitet
Piktogrammer signalere discount,
Testperson 3: Syns det fungerer rigtigt godt
Testperson 4: Lidt dyster i farverne, ellers fin
Testperson 5: Ja
Maxi Zoo
Kommentarer, noget jeg ikke har fået spurgt til, noget du gerne vil sige på falderebet?
Testperson 1: Nej
Testperson 2: Piktogrammer og billeder signalerer to forskellige målgrupper
Målgruppen alle kan købe derinde til forholdsvis billige penge, det generelle af siden stemmer overens med valgt
målgruppe.
Kerneværdier: velvære, sundhed og let tilgængelighed
Testperson 3: Kan rigtig godt lide stilen og tonen.
Testperson 4: Tror jeg har sagt det meste
Testperson 5: Godt afbalanceret, lidt firkantet efter min smag
60

Maxi Zoo
61

Bilag 4
SWOT & TOWS Matrix
Analyse
Maxi Zoo
62

Bilag 5
Navigationsdiagram
Maxi Zoo
63