URL-adresse. Underskrifter. Gruppenr. og årgang. Gruppemedlemmer. Vejledere. donggreen/index.html. B5 MulB13.

Transkript

1 URL-adresse donggreen/index.html Gruppemedlemmer Nanna Hviid Tobias Sindet Jacobsen Charlotte Klintøe Øberg index.html Gruppenr. og årgang B5 MulB13 Vejledere Frederik Tang Ditlev Skanderby Ian Wisler-Poulsen Jesper Hinchely Morten Rold Merete Geldermann Lützen Underskrifter Nanna Hviid Tobias Sindet Jacobsen Charlotte Klintøe Øberg Antal anslag / antal sider / 30 1

2 Indhold Problemformulering 3 Konceptet 3 Formål, mål & succeskriterier 4 Risikovurdering 4 Organisering 4 Målgruppe og interessenter 4 Tidsplan/aktiviteter 4 Kommunikation af projektet 4 Målgruppeanalyse 5 PBS 5 WBS 6 Gantt-skema 6 Læringsproces og samarbejde 6 PBS - Model 7 ER-Model 8 WBS - Model 9 Analyse 11 Visuel identitet for DONG 11 Website: Komposition 11 Farver og kontraster11 Gestaltlove 12 Medieelementer & typografi 12 Porters 5 Forces 13 Potentielle indtrængere 13 Leverandør 13 Konkurrencesituation 13 Substituerende produkter 13 Kunder 13 Konklusion 13 SWOT 14 Kommunikations- og budskabsanalyse 15 Kommunikationsmodel 15 Målgruppe 15 Afsender 15 Budskab 15 Modtager 15 Medie 16 Effekt 16 AIDA 17 Idéudvikling / De 6 tænkehatte 17 De 6 hatte fortsat Moodboard 18 Design Brief 19 Startdato for produktudvikling: 19 Slutdato for produktudvikling: 19 Virksomheden 19 Designerne 19 Virksomhedens mål: 19 Projektets mål: 19 Målgruppe: 19 Designernes mål: Funktionelle krav Use Case Model (UCM) 20 User story 20 Non-funktionelle krav 20 Sikkerhed 20 Performance 20 Supportability 20 Valideret registreringsform 20 Design Dokumentation - Redesign af DONG Energys identitet 21 Komposition / gestaltlove 21 Farver 21 Billeder / dynamiske bannere 22 Logo 22 Typografi 22 Offline og online annoncering 23 Online annoncering 23 Kampagnenavn 24 Hvordan vi kom frem til kampagne navnet. 24 Målgruppe / præsentationsdesign 24 Implementeringsplan 25 Responsive design 26 SEO Optimering 29 Validering 29 HTML og CSS validering 29 Google Analytics 30 Brugertest 31 Opsætning af brugertesten 31 Ekspertvurdering 32 Konklusion 33 Reflektion 33 Referencer 34 Webreferencer Bogreferencer Projektbeskrivelse Overordnet emne: Vedvarende energi Underordnet emne: Solcelleenergi Indledning Vedvarende energi er en energikilde, der fungerer som et alternativ til energi fremstillet af afbrænding af fossile brændsler. EU har besluttet at i 2020 skal 20% af energiforbruget stamme fra vedvarende energikilder. Vi vil kreere en kampagne, der skal motivere forbrugerne til at benytte sig af vedvarende energikilder og spare på energien generelt. Udgangspunktet for vores idé til kampagnen er gulerodsprincippet. Vores modtagere skal, udover økonomisk fordel, kunne modtage en ekstra belønning for at skifte til vedvarende energi. Derfor har vi udviklet konceptet om et pointsystem, der giver den enkelte kunde en række fordele/belønninger, når kunden skifter til vedvarende energi. Vi har valgt DONG som vores afsender, da de er Danmarks største leverandør af energi og derfor må siges at have et meget stort ansvarsområde vedrørende udledningen af drivhusgasser. I samarbejde med en række sponsorer starter DONG denne kampagne, hvor kunden får grønne point for hver kilowatt time som kunden sparer. Problemformulering Hvordan kan man gennem en kampagne motivere DONG s forbrugere til at investere i vedvarende energi samt at spare på strømmen til gavn for miljøet? - Hvilket budskab vil vi sende til forbrugeren? - Hvordan skal kampagnen finansieres? - Hvordan vil vi nå ud til en potentiel målgruppe? - Hvordan integrerer vi kampagnen til et interface? Konceptet - En kunde hos DONG investerer i et solcelleanlæg. - Dette bliver derefter registreret hos DONG, og kunden opretter en profil på vores kampagne website. Kunden har adgang til sin profil gennem sit Nem-ID. - Med udgangspunkt i kundens forbrug af energi året før, udregner DONG, hvor meget energi kunden sparer pr. måned. - Denne besparelse resulterer i, at kunden får et vist antal grønne point afhængig af, hvor meget kunden sparer. - Kunden kan bruge disse point til at tilkøbe sig produkter og rabatter i en slags pointshop. 2 3

3 Formål, mål & succeskriterier Formålet med denne kampagne er at give forbrugeren en ekstra fordel ved at tænke miljøvenligt. Brugeren skal gennem denne kampagne få interesse for at benytte sig af vedvarende energi og i at tænke miljøvenligt. Derfor er målet naturligvis også at skabe en mere opmærksom forbruger samt at kampagnen skal afføde en stigning i antallet af husstande forsynet med vedvarende energi. Hvis der ses en tydelig stigning af husstande forsynet med solceller, må denne kampagne siges at være en succes. Risikovurdering Det er et helt nyt tiltag på markedet, så det er svært at vurdere, om det er noget forbrugerne vil tage til sig. Dog må man sige, at hvis man allerede har taget beslutningen om at investere i solceller, så er man typen, som tænker på miljøet og sin økonomi. Da et solcelleanlæg er en stor investering, er det muligt at forbrugerne ser det som positivt at der er en gulerod. Dette kan resultere i oplevelser, der måske ellers ikke ville være råd til umiddelbart efter investeringen. Kampagnen er en relativ ufarligt satsning for DONG, da det ikke kræver store investeringer. De modtager støtte fra EU og har sponsorer til at lette udgifterne. Organisering Det er DONG, der står for selve markedsføringen, men sponsorerne får selvfølgelig deres navn og brand med. Målgruppe og interessenter Målgruppen er private husejere. Dvs. børnefamilier, enlige og par med voksne børn. Interessenter er bl.a. sponsorer, som er dem forbrugerne kan optjene point hos. Det er virksomheder, der ønsker at brande sig på markedet for vedvarende energi og i det hele taget forholder sig til miljøet. Tidsplan/aktiviteter Vi har udarbejdet en PBS, ER og en WBS for at få et overblik over detaljerne i projektet. Efterfølgende har vi udarbejdet et Gantt-skema for at sikre os, at vi overholdt tidsplanen i forhold til afleveringsdeadline. Kommunikation af projektet Der skal laves markedsføringsanalyse for at få budskabet ud. Der er valgt outdoor media, sociale medier, annoncer og bannere. Vi mener, at det er den bedste måde at få budskabet ud. Der er jo mange potentielle kunder i de mange husejere, der endnu ikke har solceller. Metode og teori Målgruppeanalyse Vores målgruppe består af en begrænset primær og en sekundær gruppe af individer. Målgruppen skal være bosat i en privat husstand, hvori der er mulighed for at installere et solcelleanlæg. Derfor udelukker dette boligselskaber og andelsforeninger. Man kan derfor sige, at vores primære målgruppe er private husstande i alt sin enkelthed. Derefter kommer vores sekundære målgruppe, der består af personer, som ejer et fritidshus eksempelvis sommerhuse. Så længe den enkelte husstand/fritidshus ligger i kategorien af huse, der kan have et solcelleanlæg installeret. PBS Vi har struktureret arbejdsprocessen ved at opdele projektet i mindre dele og indsætte dem i en PBS (Product Breakdown Structure). Det giver et godt overblik over projektets omfang. Vi har startet med at opdele projektet i 6 overordnede kategorier: Forberedelse, analyse, design, interaktion, test og rapport. Hver del har vi derefter indsat i kronologisk rækkefølge i PBS-modellen, repræsenteret som en kasse. Dette giver et overskueligt visuelt billede på, hvor de enkelte dele findes tidsmæssigt i processen. Hver af de overordnede 6 kategorier, har vi yderligere opdelt i mindre dele og igen indsat i modellen i kronologisk rækkefølge for at illustrere tidshorisonten visuelt. PBS modellen har givet os mulighed, lige fra start, at gennemtænke, diskutere og beslutte, hvilke modeller vi skulle anvende for at analysere og anskueliggøre projektet i de forskellige faser. Som ses i modellen her, har vi valgt at opdele den første overordnede kategori Forberedelse i 5 mindre dele: Problemformulering, PBS, ER, WBS og Gantt-skema. ER-model For at kunne danne os et overskueligt overblik over projektet, har vi sat vores arbejdsproces op i en ER-Model (Entity-relationship model). ER-modellen er et værktøj, der kan benyttes til at opsætte og opdele en arbejdsproces/produkt og gøre alle sammenhængene overskuelige. Vores ER-model illustrerer vores arbejdsproces og ikke selve vores produkt. Vi har valgt at bruge ER-modellen som redskab til vores projektstyring. ER-modellen kan også benyttes til at skabe et overblik over interne relationer i et samlet produkt. I dette tilfælde fandt vi det dog mere relevant at nedbryde den samlede arbejdsproces i entiteter og relationer. Derudover fandt vi det ikke relevant at nedbryde selve produktet (websitet) ned i et ER-diagram, da selve interaktionsdelens størrelse ikke har været særlig omfattende. Denne ER-model skal derfor betragtes som en nedbrydning af selve arbejdsstrukturen i det samlede projekt. Vores ER-model er kreeret ud fra vores WBS og derfor er vores entiteter de samme som de overordnede niveauer i vores WBS. Overordnet er der 6 entiteter med en række af attributter tilknyttet til sig. De interne relationer er angivet med pile, der viser hvordan de forskellige entiteter forholder sig til hinanden. Eksempelvis er vores designmæssige del af opgaven sat i relation til den analytiske del af opgaven. Grunden til dette er, at vores analyse skaber grundlaget for vores designvalg og det er derfor essentielt at knytte disse 2 attributter til hinanden. Vi har valgt at fokusere på de mest overordnede relationer i denne model, da alle entiteter før eller siden kommer til at relatere til hinanden i løbet af processen. Derudover har vi sat alle entiteter i svag relation (de prikkede linjer) til vores rapport, da alle entiteter og attributter skal indgå i rapporten. 4 5

4 WBS Med udgangspunkt i vores PBS og ER-model har vi opdelt projektets arbejdsopgaver i kategorier og underkategorier, på samme måde som i PBS en. Derefter har vi indsat dem i en WBS (Work Breakdown Structure). Dette giver igen et godt overblik over omfanget af arbejdsopgaverne. Strukturen i vores WBS ligner i høj grad vores PBS f.eks. de samme 6 overordnede kategorier: Forberedelse, analyse, design, interaktion, test og rapport. Ligeledes har vi indsat hver del i kronologisk rækkefølge i modellen. Dog er der nogle få undtagelser. Som ses i modellen her, er opdelingen af den første overordnede kategori Forberedelse næsten den samme som i vores PBS. Der er bare tilføjet et mellemlag: Projektstyring, som dækker over arbejdsopgaverne PBS, ER, WBS og Gantt-skema. Inde i arbejdsopgaven Projektstyring kunne man med rette have skrevet logbog og Facebookgruppe. To elementer vi flittigt har anvendt til at styre arbejdsgangen i projektet. Gantt-skema For at præcisere arbejds- og planlægningsprocessen har vi lavet et Gantt skema, som tager udgangspunkt i WBS modellen. Vi har lavet en uge arbejdskalender fra projektstart til projektslutning og helt frem til den mundtlige eksamen ultimum juni. Derefter har vi beregnet hvor lang tid, vi mener, hver arbejdsopgave vil tage og indsat i skemaet. Det har givet os et godt overblik over, hvor meget tid vi kunne tillade os at bruge på hver arbejdsopgave - uden at overskride deadline. Som vi har erfaret fra tidligere studie- og erhvervsarbejde, er der ofte behov for / eller ønske om at bruge mere tid på hver enkelt arbejdsopgave for at få slutproduktet, så optimalt som muligt. Dette projekt er ingen undtagelse. Især ved omprioritering af tid er Gantt skemaet et nyttigt værktøj til at sørge for, at man overholder deadline. Med Gantt skemaet har vi hurtigt kunne se konsekvensen af at bruge mere tid på en arbejdsopgave end beregnet. Dette har medført, at vi hurtig har kunnet tage ansvar for ændringen ved at justere Gantt skemaet. Modellen vist her i rapporten, er vores endelige Gantt-skema. De røde felter repræsentere den tid, som vi oprindelig beregnede, at arbejdsopgaven ville tage. De grønne felter repræsentere den ekstra tid arbejdsopgaven reelt har taget. Dvs. hvis vi har beregnet arbejdstiden korrekt for en opgave, er den kun repræsenteret af et rødt felt. Har opgaven har taget længere tid end beregnet, er den repræsenteret af både et rødt felt og et grønt felt. Læringsproces og samarbejde Det har været vigtigt for gruppen, at projektet var en læringsproces for alle. Vi har lagt vægt på, at alle skulle forbedre sine kvalifikationer og kompetencer under vejs. Derfor er en meget stor del af opgaven lavet i samarbejde. Vi har mødtes hver dag på skolen og arbejdet på storskærm. Ved mindre opgaver og ved tidspres har vi dog uddelegeret opgaver. Et yderligere redskab vi har brugt undervejs, er en logbog. Vi har hver dag noteret, hvad vi har nået og hvad vi hver i sær skulle nå til næste dag. Sidst men ikke mindst har vi løbende lavet mangellister. Vi har et par gange om ugen læst opgaveformuleringen igennem og skabt os et overblik over, hvad vi manglede af detaljer. Et uundværeligt redskab har været vores facebook gruppe. Her har vi løbende har delt filer, sparret med hinanden når vi har arbejdet hjemme om aftenen og har haft spørgsmål til forskellige dele af projektet. Vi har løbende haft guidance med vores lærere for at sikre os, at vi havde forstået forskellige dele af opgaven rigtigt eller hvis vi har haft udfordringer rent kodemæssigt. Forberedelse Problemformulering PBS ER-model WBS Gantt-skema PBS - Model Analyse Brancheanalyse SWOT Fremtidig kommunikation Målgruppeanalyse Budskabsanalyse AIDA Porter's 5 forces Design Brainstorm Moodboard Designbrief Logo design Grafisk design Outdoor bannere Griddesign InDesign template Eksamensprojekt Interaktion HTML kodning CSS kodning Responsive design JavaScript validering 6 7 SEO Animeret banner Sociale medier Test Brugertest (Usability) Rapport Problemformulering Metode/teori Konklusion Refleksion Ref./bilag

5 Eksamensprojekt 1 Forberedelse 2 Analyse 3 Design 4 Interaktion 5 Test 6 Rapport 7 Aflevering 1.1 Problemformulering 1.2 Projektstyring PBS ERdiagram WBS Gantt 2.1 Brancheanalyse SWOT Porters 5 forces 2.2 Kommunikation Målgruppe Budskab 3.1 Designbrief Brainstorm Moodboard Grafisk design Grid design 4.1 HTML 4.2 Responsive (CSS) Smartphone Tablet Desktop 4.3 JavaScript validering 5.1 Usability Gangstertest Ekspertvurdering Kortsortering 6.1 Problemformulering 6.2 Metode/teori 6.3 Konklusion 6.4 Reflektion 6.5 Ref./bilag 7.1 Usability test af redesign Gangstertest Ekspertvurdering Kortsortering 7.2 Redesign AIDA InDesign 3.2 Outdoor branding 4.4 Sociale medier 4.5 SEO 7.3 Forberedelse til eksamen 3.3 Logodesign 4.6 Animeret banner (EdgeAnimate) ER-Model WBS - Model 8 9

6 GANTT SKEMA UGE 23 UGE 19 UGE 20 UGE 21 UGE 22 UGE 24 UGE 25 UGE 26 Analyse Forberedelse: Problemformulering / projektbeskrivelse / Projektplan (PBS, ER, WBS, Gantt) Analyse: Brancheanalyse / SWOT / Porters 5 Forces / Målgruppeanalyse / AIDA Budskabsanalyse / Test: Usability test - Dong s website Design: Brainstorm / modeboard / grafisk design / Designbrief Logodesign Grid design InDesign template Interaktion: Kode responsive website Webform / javascript formvalidering Logo design SEO Visual identitet Outdoor banner 2 Edge animate banners Sociale medier Rapport: Metode / teori / konklusion / refleksion / bilag Visuel identitet for DONG Website: Komposition DONG Energys website fremstår som et minimalistisk designet website med grids og white space rundt om tekst samt i websitets sider. Samtidig er alt overflødigt skåret fra. Det har en klassisk komposition med en horisontal venstrestillet hovedmenu øverst samt en vertikal undermenu i venstre side på alle undersider. Søgefeltet er placeret i øverste højre hjørne og logoet i venstre øverste hjørne. Websitet forside er opbygget over et klassisk kolonnesystem. Farver og kontraster Websitet benytter sig af kontraster, som skaber dynamik. F.eks. kontrasten mellem hovedmenuens kraftige røde farve i forhold til den hvide baggrund. Farvevalget holdes primært i 2 farver - hvid og rød, og det er stort set kun websitets billeder, der tilfører designet ekstra farver - nemlig blå og grøn. Test: Usability re-test efter aflevering d. 2/6 Redesign af website Forberedelse af eksamen Rød = Forventet tid Grøn = Faktisk tid 10 11

7 Gestaltlove Medieelementer & typografi Porters 5 Forces Konkurrencesituation Konklusion En anden kontrast websitet benytter sig af, er kontrasten mellem indhold, der er omkranset af et lukket felt (princippet om lukkethed) og indhold, der ikke er omkranset af et lukket felt. Dette indhold er til gengæld positioneret i nærheden af / og på linje med lignende elementer (princippet om linjer, nærhed og lighed), hvilket gør, at man forstår, at de hører sammen. Man får nærmest en fornemmelse af usynlige linjer, der forbinder elementerne, hvilket giver en fornemmelse af noget luftigt, uendelig og feminint, som står i kontrast til resten af websitet, der er mere maskulint lineært og lukket. Websitet bruger primært en blanding af informationstekst og billeder. Teksten er kortfattet og dermed overkommelig at læse. Den anvendte font er Arial, som er en letlæselig font uden fødder, designet specifikt til skærmlæsning, hvilket optimerer læseligheden yderligere. Websitets billeder tilfører designet et virkelighedsnært look og er med til at underbygge den informerende tekst. Samtidig gør billederne, at websitet bliver mere indbydende og spændende at kikke på. En del af billederne har nærmest en grafisk forenklet eller hvid baggrund. Dette gør billederne måske mindre virkelighedsnære, men fremhæver til gengæld væsentlige elementer i billederne. Dette udsender et subtilt signal om, at Dong er gode til at prioritere det vigtigste i en given situation. For at analysere konkurrencesituationen på markedet, valgte vi at bruge Michael E. Porters model: Porters 5 Forces. Modellen giver et billede af, hvor store truslerne er i forhold til konkurrencesituationen. Potentielle indtrængere Den store trussel ligger i de forsyningsvirksomheder ude i verden, som kan ønske at trænge ind på det danske marked. Andre el-selskaber som udbyder el til lavere priser Udbydere af ny vedvarende energi hvor DONG ikke kan komme ind markedet Trussel ikke så stor i forhold til de små el-virksomheder, der er på vej ind på markedet, da det stadig er DONG der leverer el. De små virksomheder køber el af DONG til leveringspris, som de så sælger billigt videre. Der er ved at komme flere små selskaber på markedet, som udbyder el til lavere priser. Der er mange store forsyningsvirksomheder rundt om i verden, som kunne forsøge at trænge ind på markedet. Konkurrence lille, da DONG sørger for at have fingrene med i alt hvad der har med energi at gøre og de er førende indenfor meget forskning på området. Substituerende produkter Nye produkter indenfor vedvarende energi, som er patenteret og som DONG ikke kan få fingrene i de første 5-10 år. Konkurrence fra andre produkter lille da DONG er med på hele markedet for energi. Sandsynligheden for at der kommer et nyt og banebrydende produkt på markedet snart, er lille. Konkurrencesituationen er ikke truende for DONG. Hverken konkurrenter, leverandører eller kunder har ret stor forhandlingsstyrke overfor DONG. Deres markedsandel er så stor og da de er med overalt hvor det drejer sig om vedvarende energi så er der ikke noget der umiddelbart kan forskubbe deres markedsposition. Leverandør Kunder Leverandører af kabler, rør, vindmøller, solceller m.v. Forhandlingsstyrke lille til middel, der er rigtigt mange udbydere på markedet i hele verden. De kan vælge at få el fra de nye mindre udbydere på markedet men kan så ikke vælge om de vil have el fra vindmøller/solceller m.v. Forhandlingsstyrke lille. Man kan ikke komme udenom DONG på det danske marked

8 SWOT Organisationens interne (egne, indre) styrker og svagheder, samt organisationens eksterne (udefra givne) muligheder og trusler. Denne SWOT-analyse viser, at DONG har en meget stærkt position på markedet. Selskabet er foran mht. udvikling af alternative energiformer, hvilke gør, at de kan være på forkant med fremtidige udfordringer såsom politiske begrænsninger ift. miljøforurening. På trods af opblomstringen af alternative elselskaber med konkurrencedygtige priser i Danmark, sidder DONG på en betydelig stor del af markedet. DONG besidder en god række kernekompetencer som gør, at deres fremtidige position er svær at udkonkurrere. På trods af afhængigheden af fossile brændstofressourcer og vejrforhold, har virksomheden høj fokus på udvikling af alternative ressourceformer til fremtidig udvikling. Et af DONG s kerneprincipper er at fokusere på fremtidig bæredygtig og vedvarende energi til fordel for miljøet. Dette gør også at DONG i fremtiden vil komme til at være på forkant med politiske reduceringer i forhold til miljøpolitik. DONG s hovedsagelige svaghed er deres afhængighed af olie og gaspriserne på markedet. Men denne svaghed må siges at have meget lille betydning af to årsager. Den ene årsag er DONG s høje position på markedet. Derudover investerer DONG i høj grad på andre energiformer. Et risikoscenarie for DONG som en global virksomhed vil være truslen fra de makroøkonomiske forhold såsom valutakurser og ressourcepriser. Denne form for risiko er dog ikke en særlig høj trussel, da denne form for risiko ikke er specifikke risici, men derimod markedsrisici. Det vil sige, at påvirkning på ressourcepriser og valutapriser påvirker selve markedet og ikke DONG rent specifikt. Dette giver DONG en mulighed for at kunne tilpasse sig efter prisen på markedet, uden at miste konkurrenceevne over for konkurrerende selskaber. Styrker - Monopol på energiforsyningen i Danmark - Høj positionering i Norden - Politisk støttet - Delvist statsejet - Bidrager til omstillingen af energisystemet - Førende inden for teknologisk forskning Muligheder - Øget fokus på alternative former for energi - Investering i vedvarende energikilder Overordnet set viser denne SWOT analyse at DONG er en stærkt virksomhed med meget få trusler og risici udefra. Selskabets kerneværdier skaber et godt fundament for deres fremtidige visioner og placering på markedet. Vi vurderer det til, at DONG s fremtidige markedsstrategi i høj grad skal have fokus på disse kernekompetencer. Energy_Annual_Report_DA.pdf Svagheder - Ikke konkurrencedygtige priser - Afhængighed af fossile brændstofressourcer - Afhængighed af vejrforhold Trusler - Afhængighed af politiske beslutninger - Oliepriser - Gaspriser - Valutapriser Kommunikations- og budskabsanalyse Da opmærksomheden omkring klimaforandringer i 2007 kom øverst på den globale dagsorden, stod DONG som en af de største syndere på området. Som en af verdens største leverandører af el og varme har DONG et stort ansvarsområde og deres omdømme er stærkt afhængigt af deres holdning omkring klimapolitik. Derfor ses det også i DONG kommunikationsstrategi at der er lagt stor vægt på, at gøre deres forbrugere opmærksom på deres forskning og udvikling af nye alternativer til afbrænding af fossile brændstoffer. Én af DONG s strategier på dette område kommer til udtryk i deres koncept Energi i Forandring som har udgangspunkt i at vise firmaets projekter, efterforskning og initiativer på området for vedvarende energikilder. Dette kommer eksempelvis til udtryk på DONG s hjemmeside hvor man kan læse om DONG s ansvarlighedsområde, deres miljøpolitik og deres alternativer til energi fra fossile brændstoffer. Forandring. Her benytter de sig eksempelvis af en grafisk dynamisk banner, der informerer brugeren om selve konceptet. DONG s website er blevet udviklet i overensstemmelse med det nye kommunikationskoncept. Gennem dette kan interesserede gå ind på et omfattende kampagnesite, hvor konceptet bliver foldet ud gennem specifik web-content i form af artikler og otte mindre dokumentarfilm. De går alle i dybden med projekter og aktiviteter, som skal være med til at opfylde DONG Energys vision om at levere stabil energi uden CO2. Overordnet set er DONG s budskab mht. klimapolitik klokkeklar. De vil fremstå som den rene energileverandør som står forrest i udviklingen af forureningsfri energi. Deres strategi er først og fremmest at informere kunden gennem deres grafiske design. Dette koncept skal vi også tage udgangspunkt i, når vi udvikler konceptet til vores kampagne. Vores hensigt med denne kampagne er at styrke DONG s budskab yderligere og derfor er det vigtigt at tage udgangspunkt i deres budskab og kommunikationsstrategi. Kommunikationsmodel Hvem er modtageren -> Hvilket medie er det ->Hvilken effekt har det. Målgruppe Vores målgruppe er personer som er husejere eller ejere af fritidshuse som har eller overvejer at investere i et solcelleanlæg. Målet er at få så mange over på vedvarende energi og tænke generelt over hvad de kan gøre for miljøet. Afsender Afsenderen er primært DONG men kampagen laves i samarbejde med en række sponsorer som ønsker at brande sig som virksomheder der gør noget for miljøet. Både DONG og sponsorerne er alle store virksomheder der har et stærkt brand og et godt image og troværdigheden er derfor stor. Budskab Formålet med kampagnen er at få folk til at spare på strømmen og generelt tænke over hvordan de gør noget godt for miljøet. Vi bruger her gulerodsprincippet ved at give en belønning for hver kilowatt time der spares. Modtager Rent visuelt kommer deres holdning i høj grad Vi har valgt at bruge Harold Dwight Lasswells også til udtryk på deres website. Der er lagt stor model. Den lyder: vægt på billeder af eksempelvis vindmøller og Hvem siger hvad til hvem i hvilket medie Modtagerne er husejere og / eller ejere af fritidshuse som har eller overvejer at investere i grønne områder. Derudover har de en hel sektion under navnet Innovation hvori man finder solcelleanlæg. med hvilken effekt. Hvem er afsenderen - > Hvad er budskabet-> en præsentation af DONG s koncept Energi i 14 15

9 Medie Vores primære medie er kampagne websitet som er nemt at holde opdateret i forhold til nye sponsorer der kommer til med tiden. Mange nyheder vil blive annonceret via nyhedsbreve hvor tips og tricks til besparelser og andet man kan gøre for miljøet vil blive viderebragt. Desuden foregår meget af kampagnens indhold egentligt udenfor webstiet da udregninger af besparelser foregår på DONGs eget website. Annoncerne i husstandsomdelte aviser. outdoor media og sociale medier bruges til at understøtte kampagne websitet for at få budskabet ud til et bredere publikum. Det animere banner på eksernt websitet hjælper også til at understøtte kampagne websitet men her er det lidt nemmere for publikum at komme til kampagnen, da de bare skal klikke på banneret for at komme til websitet. Effekt Kombinationen af kampagne webstiet, bannere, facebook og det analoge, er håbet at rigtigt mange vil tage det til sig og investere i et solcelleanlæg hvis de ikke allerede har ét og begynde at tænke meget over behovet for at passe på vores miljø. AIDA For at afdække hvad der skal til for at få målgruppens opmærksomhed, har vi valgt at benytte os af E.St.Elmo Lewis AIDA model. Modellen har 4 trin som skal fastholde kunden på vores reklame/kampagne. Attention (opmærksomhed): Først skal kunden blive opmærksom på kampagnen. Dette gøres ved: Kampagnesite for DONG. I stil med DONGs hjemmeside men mere frisk og indbydende Bannere, Outdoor, Sociale medier, website. Spar på strømmen, spar penge og optjen grønne point som du frit kan bruge hos en af vores sponsorer af dit valg. Interest (interesse): Reklamen skal gøre kunden yderligere interesseret i produktet. Dette gøres ved: Nu kan du både gøre noget for din økonomi og miljøet samtidig med at du kan optjene grønne point til en unik oplevelse eller til forbrugsgoder for dig og din familie. Uddybende salgstekst/billeder/sponsorer. Brug af billeder og layout som trækplaster, Kampagnen giver kunden et ønske om at blive medlem af kampagnen - kunden er blevet overbevist om fordelene ved produktet. Vi promoverer igennem vores aktiviteter. Ud over at spare penge, bliver du belønnet med supplerende produkter og gør noget godt for miljøet Action (handling): Det endelige formål med kampagnen er at få kunden til at handle. Vi skal have kunden til at gå fra at overveje en investering i et solcelleanlæg, til ved gulerodsprincippet at få dem til at tage det sidste skridt til beslutningen om faktisk at investere. Med et solcelleanlæg vil dit elforbrug ikke længere være til skade for miljøet (vi skal have forbrugerne til at købe solceller) Du sparer penge i det lange løb og gør noget godt for miljøet samtidig. Du optjener grønne point til dig og din familie som kan bruges til forbrugsgoder eller unikke oplevelser. Tilmeld dig vores nyhedsbrev og hør mere om dine fordele, vær opdateret når vi får nye sponsorer og få tips og tricks til hvordan du sparer på strømmen og hvordan du i øvrigt gavner miljøet i hverdagen. Idéudvikling / De 6 tænkehatte Vores design af websitet tager udgangspunkt i en brainstorm. Vi har struktureret vores brainstorm ved at benytte os af Edward De Bono s idéudviklingsværktøj De 6 tænkehatte, som anskuer processen fra 6 forskellige vinkler. Herunder har vi eksempler på, hvad vi er kommet frem til med alle 6 hatte. Med den røde hat på, har vi fokuseret på projektet gennem følelse og intuition. Vi har fået associationer til vedvarende energi med ord som lys, luft, frihed, nærhed, kornmarker, sommer, glæde, balloner, natur, uanede ressourcer, græs samt farverne blå, grøn og hvid Med den sorte hat på, hvor man fokusere på risici ved projektet, kom vi frem til, at vi skal være opmærksomme på, at der skal være en balance mellem det farverige ved vores kampagne i forhold til Dong s neutrale minimalistiske design. Så det ene ikke overdøver det andet. Med den grønne hat på, har vi fokuseret på nye idéer og forslag i forhold til projektet. Det har banet vejen for et hav af muligheder i forhold til hvilke elementer vores website kunne indeholder, såsom kabelnetværk, vindmøller, elmåler og vinduesrammer. Et af elementerne, vindmøllen, er brugt i vores slutresultat. Gennem AIDA får vi klarlagt hvordan vi skal Farver (natur, blå himmel, grønne marker) nå målgruppen og få dem til at engagere sig (DONGs logo og røde farve) i kampagnen og få taget skridtet ud og få et Desire (ønske om at eje produktet): solcelleanlæg

10 De 6 hatte fortsat... De 3 andre hatte har generelt været nyttige at tage på gennem projektet. F.eks. har vi dagligtopdateret vores logbog, hvor vi har fokuseret, hvad har vi opnået og hvad vi skal opnå fremover (blå hat) samt hvilken information skal vi bruge for at komme videre og hvordan skaffer vi den information (hvid hat). Undervejs har vi alle måtte se muligheder og værdier i forslag som vi ellers ikke indstillede på (gul hat). Dette kaldes også Kill your darlings men i sidste ende er vi kommet til enighed og er blevet glade for resultatet. Moodboard Vores moodboards er en visualisering / fri fortolkning af vores idéudvikling og brainstorm. På moodboardet ses elementer som himmel, græs, huse, gule blomster samt klare farver som rød, blå, grøn og gul. Vi har valgt farvemættede billeder for at understrege sommer, glæde og naturens uanede ressourcer. Design Brief Startdato for produktudvikling: Mandag den 5. maj Slutdato for produktudvikling: Mandag den 2. juni Virksomheden DONG Energy, en af Nordeuropas førende energikoncerner med hovedsæde i Danmark. Designerne DONG har nedsat en projektgruppe af multimediedesignere som skal udvikle en prototype til et kampagne website som kan promovere DONG Green sammen med andre online og offline medier. * Kampagnen skal få folk til at blive mere miljøbevidste og spare på strømmen. Projektets mål: * Skabe en funktionel kampagne website (prototype) for DONG Energy på indenfor projektperioden. Herunder skal prototypen være responsive, så den fungerer på hhv. smartphone, tablet og desktop * Skabe to dynamiske bannere på en ekstern webside, der linker til kampagne websitet. * Skabe et outdoor og analogt medie, som visuelt ligger i tråd med website og bannere. * Opsætte en social profil for kampagnen på Facebook. Målgruppe: * Folk der ejer eget hus eller fritidshus og samtidig ejer eller overvejer at eje et solcelleanlæg. Designernes mål: * Sikre at budskab når ud til målgruppen ved at gøre indholdet enkel, letforståelig, fangende og lettilgængelig. * Sørge for at det visuelle layout hos kampagne websitet, bannere og offline medier appellerer til målgruppen gennem følelser, sanser og æstetik, så lysten til at gøre en indsats for miljøet vækkes. * Sikre at der er en visuel rød tråd mellem offline medie, dynamiske bannere og kampagne website Virksomhedens mål: *Branding af DONG Energy som et firma, der satser på vedvarende energi. * Branding af produkt: Spar på strømmen og optjen grønne point til oplevelser og produkter for hele familien. * Sikre at kampagne websitet forbindes med DONG Energy gennem det visuelle layout herunder typografi, farvevalg og grid. * Sikre at kampagne websitet afspejler at DONG Energy satser på vedvarende energi - både visuelt og indholdsmæssigt

11 Funktionelle krav Use Case Model (UCM) Funktioner på websitet er at brugere skal kunne logge ind med sit nemid. Denne del er vist ved et screendump da dette er en prototype og vi ikke kan give adgang til nemid. På et rigtigt site ville dette naturligvis være funktionelt. Desuden har vi et screendump af hvordan ens oversigt over forbrug og besparelser ville se ud. Dette eksisterer ikke i virkeligheden og derfor ikke funktionelt på denne prototype. User story Vores User Story drejer sig om vores Registreringsform der skal valideres før den virker. Non-funktionelle krav De non-funktionelle krav til vores opgave er: Kodningen skal være kontinuerlig Websitet skal kunne opdateres nemt og problemfrit Alle billeder skal være optimeret til de forskellige skærmstørrelser Registeringsform skal validere korrekt så der ikke kommer ukorrekte oplysninger ind Sikkerhed Da vi bruger nemid, er sikkerheden for personlige oplysninger sikret for os Oplysninger fra registeringsform skal gemmes og sikres at pålideligt men da dette er en prototype er det ikke noget vi lige nu skal fokusere på. Performance Alle bitmap og vektorfiler skal optimeres til den korrekte størrelse i forhold til skærmstørrelse. Der skal med andre ord tages højde for responsive design. Desuden skal billeder optimeres i forhold til skærmstørrelser for at mindske loading time, hvilket gør at websitet bliver mere behageligt at anvende for brugeren. Supportability Der er lavet responsive design for at sikre at websitet kan ses på en hensigtsmæssig måde alle skærmstørrelser. En yderst vigtig detalje er at sikre at sidens kodning er kompatibel med alle browsere så der ikke går noget design eller funktionalitet tabt. Valideret registreringsform Design Dokumentation - Redesign af DONG Energys identitet Da vores opgave består i at designe en kampagne om vedvarende energi for DONG Energy, har vi valgt at lægge stor vægt på DONG Energys visuelle identitet. DONG Energys website fremstår, som omtalt tidligere, minimalistisk med white space rundt om tekst samt i websitets sider. Samtidig er alt overflødigt skåret fra. For at sikre os at vores kampagne website forbindes med DONG Energy, har vi valgt at beholde det minimalistiske layout fra Dong s website - med minimal tekst og dekoration samt masser af luft rundt om tekst og i websitets sider. Komposition / gestaltlove En del af den klassiske komposition fra DONG Energys website har vi valgt at videreføre i kampagne websitet. Således er vores logo og hovedmenu placeret i øverste venstre side. På den måde forstærkes fornemmelsen af det luftige, uendelige og feminine som DONGs website allerede indeholder, og som står i kontrast til den maskuline, klassiske og lineære komposition. Farver Vi har valgt at beholde det primære farvevalg, som findes på DONG Energys website. Dvs. den røde farve (#B32025) samt hvide farve (#FFF), da det giver en stærk genkendelighed. Vi synes desuden, at rød fungerer godt som signalfarve. Det symboliserer energi, spænding, kraft, styrke og varme (kilde: www. farvesymbolik.dk), hvilket hurtigt kan give associationer til kraftværker, strøm og produktion af energi, som Danmark næres af. Derudover skal man ikke overse den nationale værdi i kombinationen af rød og hvid, ligesom i nationalflaget, hvilket gør at man forbinder DONG med Danmark. Vi har dog alligevel valgt at tilføje en ekstra farve - nemlig den grønne farve fra vores moodboard (#508203). Derved får det nye website 3 dominerende farver: rød, hvid og grøn. Gennem farvevalg tilfører vi websitet et element af natur / et symbol på en naturlig energikilde, som er lig med vedvarende energi. vitalitet, sundhed, velstand, vækst, fornyelse og ungdom her i vesten. Til gengæld lægger vi mere vægt på, at websitets indhold ikke ligger inde i lukkede felter, men er positioneret i nærheden af / og på linje Vi underbygger vores teori om den grønne med lignende elementer, som gør, at man forstår, farves symbolik fra websitet at de hører sammen (princippet om linjer, vesymbolik.dk. I følge www. farvesymbolik. nærhed og lighed). dk symboliserer den grønne farve ofte natur, 20 21

12 Billeder / dynamiske bannere På samme måde som DONGs website har vi valgt at tilføre vores kampagne website ekstra farve gennem billeder. Billederne på kampagne websitet holdes dog hovedsageligt i klare blågrønne farver, som i vores moodboard. Det samme med forsidebanneret. Hvorimod DONGs website ofte bruger lyse let støvede farver og/eller billeder der nærmest er grafisk tegnede. Billederne og bannerne tilfører designet et virkelighedsnært look og er med til at underbygge den informerende tekst - ligesom på DONGs website. Samtidig gør billederne, at kampagne websitet bliver mere indbydende og spændende at kikke på. Logo Vores logo er et redesign af DONG Energys logo. Vi har beholdt den håndtegnede font fra det oprindelige logo og tilføjet et grønt blad, som tilfører websitet et element af natur. Naturelementet i vores logo forstærkes af udendørs elementer som de to vindmøller og en luftballon, der ses i højre side af vores header. Typografi Til kampagne websitet har vi valgt fonten Helvetica neue. Den er, ligesom fonten Arial, en letlæselig font uden fødder. Helvetica neue er meget anvendelig, da den kan virke både feminin og maskulin - alt efter font størrelse. Det feminine look kan ses i vores navigationsmenu, hvor font størrelsen er lille og fonten dermed får smalle fine streger, hvilket passer med websitets feminine logo. Til gengæld virker fonten maskulin / iøjefaldende, som teksten i paragrafferne, når font størrelsen gøres større eller bold. Vi har valgt fonten lato til overskrifter og til skriften i bannerne. Den er letlæselig uden fødder, som Helvetica. Samtidig har den et innovativt look, der passer til et budskab, der gerne signalere nytænkning og fremtidsvisioner. Vi har tilføjet en smule letterspacing, da dette tilfører fonten en optimal læselighed og æstetik. Med disse valg mener vi, at vi imødekommer både DONGs visuelle identitet og kravet om visuelt at signalere værdier som fornyelse, natur og vedvarende energi. Offline og online annoncering Som offline reklamering har vi taget udgangspunkt et medie der tiltaler vores målgruppe. Vi har udarbejdet en annonce med vores logo og en forklarende tekst samt et præg af vores visuelle identitet og kommet med et eksempel på, hvor vores kampagne kan annonceres. Vi har valgt at annoncere vores kampagne gennem det husomdelte blad Hus og Have. Grunden til at vi har valgt netop dette medie er, at vores målgruppe primært ligger i kategorien private husstands ejere. Hus og Have passer til vores målgruppe i den forstand, at det er et blad der i høj grad tiltaler personer/familier der bor i ejede husstande i hele Danmark. Online annoncering I forbindelse med vores online annoncering har vi valgt at udarbejde 2 slags bannere med det formål at kunne reklamere for vores kampagne gennem hjemmesider der igen tiltaler størstedelen af vores målgruppe. Det ene banner består af autentiske billeder der danner et stemningsbillede på vores kampagne og appellerer vores budskab. Det første banner med autentiske billeder har vi valgt at annoncere gennem Søndagsavisens hjemmeside. Søndagsavisen er en gratis omdelt avis der i høj grad finansieres gennem annoncering. Den anden annonce med piktogrammer har vi valgt at annoncere gennem hjemmesiden Energi Watch. Energi Watch er et website der omhandler alt hvad der rør sig inden for energibranchen og er derfor et potentielt mål for den målgruppe der har interesse i at investere i en alternativ form for energiforsyning. Denne banner skal altså prøve at ramme den del af målgruppen der overvejer at investere i solcelleenergi og derfor har besluttet sig for at læse om energialternativer på nettet. URL til online annoncering: html html URL til facebook: Den anden annonce illustrerer kampagnens koncept gennem simple piktogrammer og supplerende forklarende tekst

13 Kampagnenavn Hvordan vi kom frem til kampagne navnet. Vi mener, at det er vigtigt at vores kampagne skulle have et nyt navn, så det differentierer fra Dong Energy. Ligeledes er det vigtigt, at det nye navn associeres med Dong. Et andet krav til navnet har været, at det skulle indeholde et element af natur eller vedvarende energi. Som ramme for vores brainstorm har vi benyttet os af 2 af De Bono's 6 tænkehatte - den grønne(nye idéer) og den røde hat(følelse/intuition). Vi har diskuteret om navnet skulle være dansk, men blev enige om, at Dong Energy var et engelsk navn, så det kunne kampagnenavnet også være. Resultatet blev "DONG green". Det indeholder ordet "Green", som ofte bruges i forbindelse med økologi og en "grøn tankegang" - værnen om miljøet. Målgruppe / præsentationsdesign / informationsdesign Websitet skal derfor virke seriøst. Kampagnens koncept er nyt, så vi må formode, at vores brugere ikke er gået på nettet for at finde information om kampagnen, men tilfældigvis støder på det. Med dette udgangspunkt skal vi, som designere, sørge for at websitet lynhurtigt fanger målgruppens opmærksomhed. Vi har derfor lagt vægt på det visuelle - især på forsiden, hvor vi har placeret et stort farverigt banner. Vi kan, af samme grund, ikke formode, at målgruppen bruger lang tid på websitets forside for at sætte sig grundig ind i kampagnen. Informationen er derfor kort og præcis. På den måde kan målgruppen lynhurtigt danne sig et overblik over, hvad de får ud af det, om det kommer til at koste dem noget og hvor meget det kræver af dem. Til dem der bliver interesseret i kampagnen og ønsker at læse mere, har vi valgt at placere en længere og mere uddybende informationstekst på websitets info side. Interaktionsdesign Udover at fange brugerens opmærksomhed med en overskuelig præsentation af designet, er det vigtigt, at interaktionen mellem bruger og medie fungere hensigtsmæssigt. Ellers vil websitet miste brugere. På kampagne websitets forside er interaktionsfrekvensen 18 klik. Dvs. at brugeren kan klikke 18 forskellige steder på forsiden, som afføder en interaktion. F.eks. kan man klikke på genvejsbilledet Info for at komme til websitets info-side. Ligeledes kan man klikke på websitets navigationsmenu for at komme til andre sider. På selvbetjeningssiden kan man tilmelde sig kampagnen ved at udfylde registreringsformen. Her interagerer brugeren med mediet ved at indtaste oplysninger i felterne for til sidst at klikke Send. Indtaster brugeren korrekte oplysninger, bliver brugeren videresendt til en bekræftelsesside. Indtaster brugeren forkerte oplysninger, kommer en fejlmeddelelse frem, som kan hjælpe brugeren til at indtaste korrekte oplysninger. Implementeringsplan I forhold til lancering af kampagnen ville det være en god ide at starte den i starten af foråret lige som de lange lyse dage starter og der bliver produceret mest strøm via solceller. Vi har dog valgt at lanceringen sker 1. juni Dette begrunder vi med at opsætning af solceller kan ske det meste af året og fordi vi også henvender os til dem der allerede har et solcelleanlæg. Kampagnen er tænkt at køre indtil år 2020 som indtil videre er det skælsættende år som EU har sat. Det er her vi gerne skal ramme den berømte grænse på udledning af CO2 på max. 20 %. Vi valgt at vise design og kodningsuger og lanceringsuger for derefter at lade kampagnen løbe år 2020 ud. Vi har undladt at spekulere i finansiering da vi intet grundlag har for vide hvad de enkelte dele koster og fordi kampagnen er så langsigtet at vi ikke kan forudsige hvordan priserne vil udvikle sig. Som nævnt i vores risikovurdering, er det en relativt lille investering for DONG i forhold til deres mange andre aktiviteter og de får støtte både fra EU og deres sponsorer. Online markedsføring Design og kodning af website Lancering af website Design og kodning af bannere Lancering af bannere Oprettelse af facebook side Lancering af facebook side Vedligeholdelse og opdatering Offline Implementeringsplan UGE 19 UGE 20 UGE 21 UGE 22 ÅR Design af annoncer Lancering af annoncer Design af Outdoor media Lancering af Outdoor media Vedligeholdelse og opdatering Vores målgruppe er private husejere. Voksne mennesker, som har lagt eller vil lægge en stor investering i et solcelleanlæg

14 Responsive design Vores websites layout er tilpasset til en varierende optimering af skærmstørrelse. Dvs. at layoutet og den visuelle opbygning er afhængig af hvilket skærmformat der bliver benyttet til at åbne websitet. Websitet er optimeret til 3 overordnede formater: * Desktop format: 1680x1050 pixel * Tablet format (stående): 768x1024 pixel * Smartphone (iphone) format: 960x640 pixel HTML: <link rel= stylesheet href= css1. css > <link rel= stylesheet href= tablet.css media= screen and (max-width: 860px) > <link rel= stylesheet href= smartphone.css media= screen and (max-width: 640px) > Layoutet er altså tilpasset således, at elementerne på websitet tilpasser sig afhængigt at hvilken af disse 3 skærmstørrelser den bliver åbnet på. Grunden til at vi har valgt at benytte os af iphones resolution er, at denne smartphone er den mest benyttede smartphone lige nu. På websitets desktop version er alle elementer indpakket i en wrapper div, der gør, at elementerne først og fremmest er placeret centralt og der er margen. Grunden til at vi har valgt at benytte os af en overordnet margen på desktop versionen er, at desktop versionen er det største format vi har at operere med. Derfor er der mere mulighed for at kunne gå på kompromis med design og funktionalitet. Margenens funktion er, at websitets indkapsling gør indholdet mere overskueligt for brugeren. Hvis der ikke var nogen margen på websitet ville alle vores elementer på siden strække sig helt ud til siderne af skærmen hvilket ville gøre, at brugeren bruger længere tid på at navigere rundt, da elementerne er længere fra hinanden. Wrapperens funktion er, at den centrale og begrænsede placering af elementerne gør, at brugeren har et mindre område at fokusere på. Dette gør websitet mere overskueligt for øjet. På tablet versionen har vi valgt at fravælge margenen fra indholdet. Grunden til dette er, at når en bruger benytter sig af en tablet i stående stilling, er bredden på skærmen mindre en på desktop versionen. Derfor har brugeren en mindre visuel flade at forholde sig til. Hvis vi på denne version benyttede os af en margen som på desktop versionen ville indholdet blive for sammenpresset, og elementerne ville komme til at blive for små for brugeren. Desktop CSS: #wrapper { width: 1000px; Tablet CSS: #wrapper { width: 100%; Derudover har vi valgt at gøre teksten større på tablet versionen, da det er en mindre skærm man opererer på. Derudover er den større tekststørrelse funktionel da brugeren skal bruge sine fingre til at navigere rundt på tabletversionen. Hvis teksten er for lille bliver det sværere for brugeren at navigere, da punkterne på websitet er sværere at ramme. På desktop versionen valgte vi at lave en hover-effekt på nogle af genvejsknapperne. Dvs. at når man holder musen over et billede eller et link, bliver det markeret ved, at elementet bliver mere gennemsigtigt. Denne funktion har vi valgt at fjerne fra tabletversionen. Grunden til dette er, at man ikke har en mus til at holde over linket og denne funktion derfor er irrelevant. Hvis man trykker på et link med hover-effekt på en tablet åbner linket ikke ved første klik. I stedet bliver hover-funktionen aktiv når man trykke første gang på linket. Derfor vil det ikke være funktionelt at benytte sig af hover-effekt på tablet versionen, da man skal trykke 2 gange på et link for at åbne det. Dette er ikke funktionelt for en bruger. På smartphone versionen er der heller ingen margen med samme grundlag som på tablet versionen. Menulinjen ændrer sig således, at i stedet for en tekstmæssig navigation ændrer linkene sig til knapper i form af piktogrammer. Dette gør det nemmere for brugeren at navigere, da knapperne er tilpasset størrelsen på en finger. Dimensionerne er 57x57 pixel på knapperne, hvilket er den gennemsnitlige størrelse på en fingerspids. Rent funktionelt er dette dog en forringelse, da piktogrammerne kan skabe forvirring for brugeren da brugeren ikke har noget tekstmæssigt at forholde sig til. Dette kan gå ud over den navigationsmæssige funktion. Spalterne på teksten under information er blevet fjernet da spalterne rent visuelt gør teksten uoverskuelig når skærmen bliver smallere. Desktop HTML: <div id= navigation > <li><a href= sasside.html >SAS</a> <ul> <li><a href= index.html ><span class= picto ><img src= pictogrammer/hjem.png alt= Hjem ></ span><span class= menupunkt >Hjem</ span></a></li> <li><a href= pointshop. html ><span class= picto ><img src= pictogrammer/pointshop.png alt= Pointshop ></span><span class= menupunkt >- Pointshop</span></a> <ul> <li><a href= ikeaside.html >IKEA</a> <li><a href= tivoliside.html >Tivoli</a> <li><a href= coopside.html >Coop</a> <li><a href= legolandside. html >Legoland</a> <li><a href= planetariumside.html >Planetariet</a> Jysk</a> <li><a href= jyskside.html >-

15 <li><a href= denblaaplanetside.html >Den Blå Planet</a></li> </ul> <li><a href= info.html ><span class= picto ><img src= pictogrammer/info.png alt= info ></span><span class= menupunkt >Info</span></a></li> <li><a href= selvbetjening. html ><span class= picto ><img src= pictogrammer/login.png alt= selvbetjening ></span><span class= menupunkt >- Selvbetjening</span></a></li> </div> Desktop CSS:.picto { display: none; } </ul> Smartphone CSS:.picto { } display: inline;.picto img { height: 57px; width: 57px; }.menupunkt { display: none; } SEO Optimering For at sikre os at kampagnen er til at finde på nettet ved søgning, har vi benyttet os af meta-tags med description. Vi har valgt at keywords (nøgleord) er: DONG Green, grønne point og spar på strømmen. Dette er for at differentiere kampagnen fra DONGs egen hjemmeside. <meta name= description content= Donggreen.dk, DONG Green, grønne point, Spar på strømmen og optjen grønne point. > Vores keywords går igen mange steder på websitet og er de ord som vi regner med at folk primært vil søge på. Desuden har vi tilføjet et meta-tag med author hvor vi har tilføjet alle vores navne. Dette gør at det fremgår tydeligere hvem der står bag websitet. Hvis vi havde været et firma, ville have været firmanavnet vi tilføjede i stedet for vores navne. <meta name="author" content="nanna Hviid, Tobias Sindet Jacobsen, Charlotte Klintøe Øberg"> På vores billeder har vi tilføjet alt-tags som indeholder ord der er sigende for vores website og indholdet, således at det kommer op ved en søgning. alt="dong Green logo"> Green indgår, således at det kommer frem ved en søgning på DONG Green eller navnet på undersiden. <title>dong Green Info</title> Validering HTML og CSS validering Websitet er blevet valideret vha. s valideringsservice. Alle fejl og mangler er blevet rettet gennem denne valideringskontrol og er blevet noteret som fejlfri. HTML-validering eksempel: CSS-validering eksempel: På undersiderne har vi tilføjet title-tags med navn på selve undersiden men hvor DONG 28 29

16 Google Analytics Vi må formode, at virksomheden DONG ønsker at vide hvor hvem og mange, der bruger kampagne websitet, for at se om kampagnen er en succes. Derfor har vi anvendt programmet, Google Analytics, som er et sporingsprogram, der opfanger og analysere trafikken på websitet. Programmet kan oplyse detaljer om brugeren såsom alder, køn, geografisk område, interesser, gennemsnitstiden brugt pr. side osv. Vi formoder, at et af de essentielle ting, som DONG vil vide er, om de når ud til netop deres målgruppe, husejerne. Med det i fokus vil Dong formodentlig mest være interesseret i ting som alder og geografisk område; er det land- eller byområde? / hvilken by? Eller ting som interesser og især gennemsnitstid pr. side. Især gennemsnitstid / hvor meget tid der er blevet brugt på den enkelte side, kan give en indikation om siderne kan holde brugernes interesse eller de skal redesignes. En anden ting DONG kunne være interesseret i er oplysninger om skærmstørrelse - om websitet oftest bliver set på en smartphone, tablet eller desktop. Vi kan have vores formodninger om målgruppen. Sandsynligvis vil de oftest se dette kampagne website på en desktop om aftenen - efter arbejde, hvor der er tid, men det er godt at få det be- eller afkræftet. Måske vil en smartphone være den mest anvendte skærmstørrelse og så kan det være en idé at fokusere på optimering af smartphonen. Dong vil formodentlig også være interesseret i oplysninger om den direkte trafik dvs. om URL adressen er tastet direkte ind i browseren. Direkte trafik kan være tegn på, at brugeren kender URL adressen i forvejen f.eks. har været inde på siden før. <script> (i[r].q=i[r].q []).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), For at anvende programmet Google Analytics, har vi oprettet en konto, hvor vi har fået følgende kode, som vi har indsat i hvert html dokument: (function(i,s,o,g,r,a,m){i[ GoogleAnalyticsObject ]=r;i[r]=i[r] function(){ m=s.getelementsbytagname(o)[0];a.async=1;a.src=g;m.parentnode.insertbefore(a,m) })(window,document, script, // ga ); ga( create, UA , caterpillardesign. dk ); ga( send, pageview ); </script> Brugertest For at sikre os at vores website er optimeret rent funktionsmæssigt har vi valgt at benytte os af en brugertest. Brugertesten hjælper os med at få et indblik i websitets brugervenlighed og gennem denne test kan vi redesigne det originale layout ud fra vores testresultater. Websitet er en prototype så det er selvfølgelig begrænset hvilke fejl i testresultatet der kan rettes op på. Denne test hjælper os også med at få et indblik i, om brugeren kan forstå og kan kode vores budskab ud fra det funktionelle og det visuelle. Opsætning af brugertesten Vi starter med at forklare vores testperson hvad kampagnen går ud på og hvad kampagnens funktion er. Derefter beder vi vores bruger om at sætte sig selv i det hypotetiske scenarie at brugeren skal lade som om, at han/hun gerne vil oprette sig som bruger på vores website. Det er meget vigtigt at brugeren forstår opgaven tydeligt og klart for start for at undgå misforståelser og fejl i testen. Testpersonen får nu stillet en række opgaver og spørgsmål som testpersonen skal gennemføre imens testpersonen forklarer sine handlinger i ord. Spørgsmål: Hvor befinder du dig henne? Hvad er navnet på kampagnen? Hvordan vil du navigere videre på siden? Hvordan ser websitet ud rent visuelt? Hvilke associationer får du når du kigger på design og billeder? Opgaver: Du har investeret i et solcelleanlæg og du vil nu oprette dig som bruger. Hvor vi du gå hen? Du vil gerne ind og læse om hvad IKEA har at tilbyde som sponsor. Hvor vil du finde denne information? Du vil have noget specifik information omkring denne kampagne. Hvor vil du finde denne information? Under testen er det vigtigt at vi noterer alle vores observationer undervejs. Observationer som hvad brugeren siger og hvor brugeren kigger henne på skærmen især meget essentielle i forhold til vores optimering. Hvis eksempelvis brugeren vil benytte sig af et søgefelt for at finde noget konkret information og brugeren straks navigerer musen op i højre hjørne for at Det er også vigtigt at vores testperson tænker højt og forklarer hvad han/hun tænker under hele processen så vi kan observere præcis hvordan websitet fremstår over for en potentiel bruger. finde den, kan dette betyde at websitet mulig vis skal have en søgefunktion og hvor den skal placeres. Alt skal skrives ned og alt skal sammenlignes for at få det bedste og mest konkrete ud af denne test. i de generelle retningslinjer inden for usability og kvaliteten af dem. Denne del af usability er mere teknisk end brugertesten vores testperson er en ekspert på området og derfor kan give mere tekniske forklaringer/løsningsforslag til websitets funktionalitet.

17 Ekspertvurdering For at kunne afdække websitets funktionalitet fra flere vinkler vil vi også benytte os af en ekspertvurdering. Denne form for usability kan give os et indblik i de generelle retningslinjer inden for usability og kvaliteten af dem. Denne del af usability er mere teknisk end brugertesten. Vores testperson er en ekspert på området og derfor kan give mere tekniske forklaringer/løsningsforslag til websitets funktionalitet. Vi har valgt ikke selv at lave ekspertvurderingen og tage en person udefra da vi selv mener, at vores egen forhold til stoffet kan fremstå som en fejlfaktor på vurderingen. Derfor skal vores testperson være en person der beskæftiger sig inden for området om design, interaktion og kommunikation. I denne test er det også vigtigt at testen bliver systematisk planlagt og at alt bliver noteret og tydeligt forklaret for at kunne optimere resultatet. Eksperten bliver bedt om at vurdere kvaliteten af følgende områder: Layout og struktur Navigationsfunktion Evt. søgning Informationshierarki Overblik (placeringsinformation) Overskuelighed Derefter listes de potentielle fejl og de tildeles hver især en alvorsgrad fra 1 til 4. Alvorsgrad 1 er et mindre problem som bør rettes og 4 er et omfattende problem der kræver at blive rettet med det samme. Disse informationer sættes i et skema der fortæller hvor problemet er (URL), problembeskrivelse, alvorsgrad og en potentiel løsning af problemet. Ud fra dette skema kan vi observere vores fejl og mangler og tage dem som udgangspunkt i vores redesign. Konklusion Produktet af dette projekt er et website der appellerer til fokusområdet miljøvenlig og vedvarende energi. Indholdet og funktionaliteten har fokus på, at få DONG's kunder til at skifte til en vedvarende energiforsyning og blive mere opmærksom på brugen af miljøvenlig energi. Der er sat høj fokus på visuel branding og markedsføring, og vi mener, at vores visuelle identitet tiltaler kampagnens budskab og målgruppe. Designets formål er at skabe en visuel genkendelighed med DONG's originale visuelle identitet så brugeren ved, at DONG er vores afsender. Vi har skabt et design der, på trods af givende begrænsning, giver et helt nyt visuelt udtryk i forhold til vores budskab. Kampagnens design appellerer til fornuften og det "naturlige" ved vedvarende og miljøvenlig energi. Kampagnen er blevet integreret i et website hvis funktionalitet har fokus på, at være en online butik. Her kan man oprette sig som bruger og få et overblik over sit elforbrug og sine grønne point. Derudover kan man gennem websitet blive informeret om kampagnens sponsorer og hvordan de selv spiller en rolle i kampen for et bedre miljø. Websitet afdækker både DONG's interesser, brugerens interesser og vores sponsorers interesser i kampagnen. Finansieringen kommer til at bestå af 3 aktører. Først og fremmest vil vores sponsorer have interesse i at kunne brande sig gennem denne kampagne og pynte på deres eget image. Dernæst har vi EU som støtter kampagner der har fokus på vedvarende energi og miljøvenlig politik. Sidst, men ikke mindst, vil DONG også selv stå for en del af finaniseringen da denne kampagne kan optimere DONG s markedsføring. Vi mener, at dette koncept vil fungere som et bidrag til at skabe større fokus på området for vedvarende energi, og at sådan en kampagne kan tilnærme sig en strategi for, at få flere folk til at investere i alternative energiløsninger. Derudover kan denne kampagne også have som funktion at styrke DONG's image på markedet og give dem et godt omdømme som en monopolær aktør på markedet. Reflektion Selve konceptet af vores kampagne kan sammenlignes med lignende reelle kampagner. Et lignende koncept kan ses hos andre virksomheder som eksempelvis Coop der har et lignende pointsystem. Coop-kortet er et kort man får som kunde hos Coop's butikskæder og dette koncept går også ud på at spare point op gennem sit forbrug. Denne markedsføringsstrategi er begyndt at blive meget aktuel for tiden, og dette koncept var også grundlaget for vores konceptudvikling. Rent læringsmæssigt har vi hver især gennemgået forskellige niveauer for udvikling. Vores kompetencer inden for især interaktionsudvikling er blevet betydeligt præget under denne proces. Eksempelvis har vi nu en langt større forståelse for responsive design og JavaScript validering. Vores største udfordringer under dette projekt var vores brancheanalyse og arbejdet med indesign. Vi har hver især individuelle kompetencer inden for denne uddannelse, men inden for netop disse 2 områder havde vi alle 3 vores svagheder. På trods af dette, gav denne arbejdsproces os et godt indblik i selve forberedelsen og analysen af et projekt og hvordan tingene hang sammen. Vi har skabt en større forståelse for hvordan de forskellige ting hænger sammen i et projekt og hvordan de individuelle processer afhænger af hinanden. Med dette taget i betragtning kan vi med fuld selvsikkerhed sige, at vi er tilfredse med vores færdige produkt, og vi ser nu frem til at kunne videre analysere, redesigne, fremlægge og forsvare vores resultater individuelt

18 Referencer Bilag Oprindelige griddesigns Webreferencer Bogreferencer Offline annoncering DONG s hjemmeside DONG s årsrapport DONG_Energy_Annual_Report_DA.pdf DONG s markedsføringspolitik aspx Farvesymbolik Billeder advantages-and-disadvantages-of-solar-energy Usability - Ian Wisler Poulsen Digital Media Management - Louise Harder Fischer & Marie Oosterbaan 29 Spørgsmål - Jan Krag Jacobsen 20 Designprincipper - Ian Wisler Poulsen Menupunkt 1 Menupunkt2 Menupunkt3 Menupunkt 4 Menupunkt 1 Menupunkt2 Menupunkt3 Menupunkt