1. No category

Faktaark
Lotte S. Mikkelsen
[email protected]
http://lophie.dk/exam2sem.html
Multimediedesign, eksamensprojekt 2. semester
Maj 2014 - juni 2014
Cphbusiness Academy, Lyngby
Titel: Letsgo Green
Hold: mul-a13, gruppe 5
Yaser Osman
Vejledere: FDTA, DSK, MLI, MORO, JHI, THA, IWP
[email protected]
URL: http://emre.dk/letsgogreen
http://mul26.itkn.dk/exam2sem.html
Sidetal: 45
Anslag: 30.000
Emre Kandemir
[email protected]
http://emre.dk/exam2sem.html
Indholdsfortegnelse
Faktaark2
Introduktion4
Ide4
Probelmformulering4
Projektplan5
Teori og metode / Afgrænsning6
Analyse7
Virksomheden7
Interesent9
Branche12
Målgruppe13
Kommunikation14
Kommunikationsmodel14
Design brief16
Moodboard18
Dokumentation19
Udvikling af produkt20
Responsive21
Funktionalitet22
Userstory23
Information -og præsentationsdesign
25
Søgemaskineoptimering 27
Google Analytics29
Kildekode30
Usability32
Undersøgelsesdesign32
LetsGo Green - App33
Offline medie
34
Konklusion35
Reflektion
35
Referencer36
Litteratur36
Digital Media Management36
Web36
Bilag37-45
Introduktion
Ide
Der er mange biler i indre by, som forsager et massivt CO2 udslip.
Virksomheden “LetsGo“ udbyder delebilsordning i større byer i
EU har fastlagt at reducere drivhusgasudledning i alle EU-lande, hvor
Danmark.
20 % af energiforbruget i 2020 skal bestå af vedvarende energi.
Alle delebilerne er nu el-drevne og i samarbejde med deres
leverandør af opladningsstationer, vil alle stationerne være koblet
Målet med denne kampagne er at skabe fokus på miljøet og bæredyg-
til strømkilder, udelukkende fra vedvarende energi, leveret af
tig energi.
vindmøller.
Det er helt essientielt at der findes altarnertiver til vores nuværende
CO2 situation. En måde at komme det overdrevne CO2 udslip til livs
er at ændre vores forbrugsvaner og tænke på alternertive løsninger for
store udfordringer, som trafik.
“LetsGo” udbyder netop en alternativ løsning til folk med kørselsbehov i byen ved at benytte konceptet el-delebiler. Alle ladestanderne
som er placeret rundt i byen er alle opkobllet til strømforsyning fra
vindenergi. Dette bevirker at samtidig med at miljøet og København
bespares for en betragtelig mængde Co2, grundet de benzindrevne
biler skiftes ud til el-biler, bliver den el bilerne kører på udvundet fra
en bæredytig kilde af vedvarende energi.
Probelmformulering
Hvordan kan “LetsGo” skabe fokus på fordelene ved deres koncept at dele el-biler drevet af vedvarende energi, og derved få
flere fra målgruppen til at vælge dette alternativ, gennem online
og offline medier?
Hvordan skaber vi et produkt der taler til målgruppens sunde
fornuft visuelt og kommunikativt?
Hvilke offline medier vil egne sig bedst for “LetsGo”?
4
Projektplan
5
Teori og metode
Vil vil i projektets opstart danne os et overblik over opgaven som helhed ved at benytte PBS til opdeling af de enkelte aktiviteter. Herefter
anvende WBS til at skabe struktur af samtlige arbejdsopgaver i projektet. Til at organisere og tidestimere anvender vi et Gantt chart, som
vil løbende gennem hele projekt perioden vil opdatere og tilpasse.
formålet at få det bedst udbytte af kampagnen.
Design brief skal udvikles som forstadiet til designprocessen og afdække valg af farver, visuel identitet, font, mock-up m.m.
Efter den analyserende del, skal udviklingsprocessen dokumenteres
og illustreres.
Afslutningsvis vil vi lave konklusion og reflektion.
Vi vil lave en SWOT analyse for at give få et billede at interne og eksterne forhold der kan påvirke vores kommunikation.
I vores analyse af virksomheden fortsat vil vi anvende en interessentanalyse og få overblik over omfanget af projektets interessenter.
For at danne os et billede at konkorrencesituationen på markedet vil vi
anvende “Porters five forces”.
Der skal efterfølgende indsamles information ved hjælp af en brugerundersøgelse. Ved hjælp af denne kan vi danne os et billede af
målgruppens kendskab og forhold til konceptet som det eksisterer i
dag.
Eftersølgende udvælges målgruppe via segmentering og Minerva
Afgrænsning
Da projektet omhandler vedvarende energi, vil vi kun have fokus på
udlejning af el-biler.
Geografisk vil vi afgrænse os til at fokusere på markedet i København,
da vi mener det er hér der vil være størst succes med at
implementere kampagnen, og samtidig med formålet at præcisere
målgruppen yderligere.
Aspekter som dybdegående tekniske informationer og økonomiske
aspekter vil vi ikke komme ind på da det vil være for omfattende.
modellen anvendes.
Efter udvælgelse af målgruppen skal vi have klarlagt kommunikationskanaler. Der skal brainstormes og udvikles kommunikationmodel med
6
Analyse
Virksomheden
Om LetsGo
LetsGo er non-profit og etableret af Københavns Delebiler og Århus
Delebilklub i 2007. Delebilfonden LetsGo ledes af en bestyrelse som
bl.a. udpeges af de to stiftere, Københavns Delebiler og Århus Delebilklub.
Mission, vision, strategi
Det har ikke været muligt for os at afdække LetsGo’s mission, version
Vi konkludere ud fra de informationer vi har kunne læse os frem til på
letsgo.dk at LetsGo har følgende:
Mission
At gøre transport i Danmark mere bæredygtig.
Vision
Visionen hos LetsGo er, at få delebiler landsdækkende. Det skal være
mulig for alle at have dele-biler og køre miljøvenligt.
Strategi
LetsGo har en strategi om at være førende med en delebilsordning der
tilpasser sig behovet hos forbrugerne og konstant er i udvikling.
og strategi, da vi ikke har kunne skaffe disse informationer.
VI vil derfor ud fra information fra deres website konkludere hvad vi
anser for deres mission , vision og strategi.
LetsGo er et nemt, billigt og miljøvenligt alternativ til at være bilejer.
LetsGo gør det nemt at få en bil når du vil – samtidig med at du slipper for uforudsete udgifter og høje driftsomkostninger.
LetsGo har et mål om udvikle et landsdækkende delebilsystem og i
det hele taget arbejde for grøn transport.
7
SWOT
Interne forhold
Vi har valgt at lave et SWOT analyse for at danne os et billede LetGo’S
styrker og svagheder, samt muligheder ot trusler.
Styrker
Svagheder
-Etisk og miljøbevist
-Omkostninger iforhold til pris af
-Fleksibele løsninger / bilstørrelse produkt
Som modellen viser, er der internt og eksternt nogle udfordringer der
efter behov
-Manglende kendskab hos mål-
kræver opmærksomhed.
gruppen
Vi har i brugerundersøgelsen erfaret, at målgruppen har mange for-
-Målgruppen har mange for-
domme omkring el-biler, og også delebils-ordningen.
domme om ekselpelvis pris og
De siger følgende:
-For dyrt
-Kort rækkevidde
-Kedelige biler
-besværligt.
Vi vil særligt have fokus på de svagheder der ligger internt hos LetsGo, da vi vurderer at der vil være god mulighed for at udbedre nogle af
disse.
Eksterne forhold
Muligheder
Trusler
-Støtte fra EU
-Flex-leasing månedsbasis
-Støtte kommunalt
-Billige el-biler gør at flere køber
-Færre biler i København derfor
-Ny teknologi
mindre CO2 udslip
-Mangel på produktion af ved-
-Investorer
varende energi (DONG)
8
Interesent
Vi har i vores brainstorm fundet frem til følgende :
Til at lave vores interessentanalyse vil vi bruge følgende model:
Figur 1
Identifikation
Energi / Miljøstyrrels-
EU
Clever
en
El-bil producenter
Målgruppe
Trafikstyrrelsen
Designgruppe
Dong
Københavns kom-
Medier
Renault
mune
Analyse
Vi har i identifikationsfasen barinstomet på interessenter der enten har:
og/eller
Indflydelse
Letsgo
Medvirker
Letsgo er afsender af produktet og er derfor en af hovedinteressenterne
Clever levere ladestandere og har derfor en vigtig rolle i forhold til
opladning fra vedvarendenergikilde.
Det grønne tiltag med vedvarende energi skaber stor interesse og
derved også flere interessanter. Samtidig er der en “nyheds” faktor
ved at have et nyt produkt.
Målgruppe, en vigtig interessent som produktet rettes mod. Det er
især vigtigt af denne gruppe påvirkes.
Dong levere energi til ladestandere og er derfor vigtig da koceptet er
baseret på denne type energi.
Renault er leverendør af el-biler.
Energi, miljø -og trafikstyrrelsen spiller vigtige roller i forhold til
9
støtte af konceptet. Der er her der kan tages vigtige beslutniner som
kan komme LetsGo til gode.
Udvælgelse
Københavns kommune råder bland andet over parkering. Det er
I vores udvælgelse prioritere vi interessenterne efter indflydelse og
en vigtig aktør i forhold til at skabe særlig parkering til delebiler.
medvirken til projektet med henblik på at inddele dem i tre grup-
EU støtter om om tiltag og kampagner der har fokus på miljøet. EU
peringer;
støtte kan give økonomiske fordele på sigt.
Bilproducent (el-biler) da der er støtte til el-biler der ligge i en
-Referencegruppe
overkommelig prisklasse kan forhandlere tale for at selverhverve en
-Projektgruppe
-Styregruppe
el-bil.
Designgruppe er i dette tilfælde os. Vi er uden for indflydelse på
koncept men er vigtige når det kommer til kampange/re-branding.
Medier forståes som nyhedsforum, presse og andre medier der kan
have interesse i “nyheden”.
Figur 2
10
Styregruppe (Ledere, betalere, igangsættere)
Involveres
LetsGo er både igangsætter, betaler og leder på projektet.
Her er fagpersonerne som er en del af udviklingen af produktet, dvs.
Med støtte fra EU og Københavns kommune vil disse også befinde sig
designergruppen.
i denne gruppe.
Referencegruppe (Viden uden beslutnings kompetence)
Høres
I denne gruppe sidder “gidslerne”. (se model næste side)
Det er vigtigt at afsenderen (Letsgo) høres gennem hele forløbet da
Miljøstyrrelsen har viden og interesse for de miljømæssige aspekter.
denne har stor indflydelse.
Renault som er leverandør af bilerne samt Trafikstyrrelsen og målgruppen udgør denne gruppe. (medier)
Informeres
Projektgruppe (Projektmedarbejdere, designere, igangsættere)
For at sikre at budskabet når målgruppen er det vigtigt at denne in-
Projektgruppen er ideudviklere hos Letsgo, og os der sidder som de-
formeres. Her kan medierne være et informationsled.
signere på projektet.
Tiltag
Orienteres
Til orientering er eksterne interessenter uden medvirken. Medierne
Afslutningsvis af interessentanalyse laves interessentkommunikations-
skal orienteres da de kan have en vigtig rolle i udbredelsen og om-
plan. Her tages der stilling til hvilke interessenter der skal:
fanget af lanceringen af produkt.
-involveres
-høres
-informeres
eller -orienteres.
11
Branche
Porters five forces
Konkurrenterne i branchen
Konkorrenterne kan både være de øvrige delebilsordninger, men også
biludlejning som fx. herts og avisi
Vi anvender five forces af Porter for at få overblik over følgende
parametre :
Leverendører
En vigtig parameter da konceptet er en sammensætning af biler, lade-
-Konkurrenter i branchen
-Kunder
standerne og energi hertil.
-Leverendører
Renault, Clever, DONG er alle leverendører. Clever og Dong har for-
-Mulige indtrængere
holdvis stor forhandlingsstyrke da de gør det muligt at benytte ved-
-Substituerende produkter.
varende energi, hvilket er en hovedparameter i konceptet.
Mulige indtrængere
Kan være ny teknologiudvikling. Der er utrolig meget fokus på alternative transportmidler som er miljøvenlige.
Substituerende produkter
Der er kommer nye leasing muligheder, og det er blevet muligt at lease
en bil for en kortere periode (min. 3 måneder). Dette kunne tage kuner
fra dele-bilerne hvis kørselsbehovet muligvis kun er for en periode.
Figur 3
12
Målgruppe
Det sekundære segment er det grå, som er sagmentet med den del
Allerede i vores afgrænsning er et segmenteringskriterie taget i brug,
de ikke har et sådanne tilhørsforhold som de øvrige segmenter. Her
idet vi har valgt af fokusere udelukkende på hovedstadsområdet i
vil unge ofte befinde sig, og vi vurdere at der vil være en god mulighed
dette projekt. Hertil skal det siges at LetsGo også findes i andre store
for at vænne en ny generartion af forbrugere og bilister til at afprøve
byer rundt om i landet.
andre metoder. Det kræves selvfølgelig en vis indkomst at få råd til et
af befolkningen der livsstilsmæssigt er muligt at påvirker nemmest da
abbonoment, vi stiler derfor at ramme de 20-25 årige der har fast job
Eftersom vi har det geografiske kriterie at forholde os til, har vi i resten
eller tjener penge ved siden af sudiet. Særligt unge par, som måske
af processen haft fokus på de øvrige kriterier.
har fælles midler og derfor råd til at tilmelde sig ordningen.
Kriterietr som alder, livsfase og indkomst er kriterier som vi har taget
stilling til i forhold til unvælgesen af målgrupper(r).
Vi har valgt at anvende Minerva livsstilmodellen. Denne model har opdelt befolkningen forskellige livsstilskulturere (se fig. 4 )
Vores målgruppe er det grønne segment som har fokus på etik og
moral, samt økologi og miljø. Et moderne og idealistisk segment.
Vi retter målgruppevalget særligt mod familier, eller alene forældre der
befinder sig i dette segmenti alderen 26-45 år.
Personlig årlig indkomst vil formentlig ikke overstige 500.000.- da
højere lønnende ofter læner sig mere op af det blå segment og vil have
sin egen bil.
Figur 4
13
Kommunikation
Kommunikationsmodel
Kommunikationen er hovedformålet med hele projektet, og det er
Vi har valgt at udforme en kommunikationsmodel med inspiration fra
vigtigt at LetsGo formår at udsende det rigtige budskab til den rigtige
Harold Dwight Lasswells model:
modtager.
Vores brugerundersøgelse¹ har vist, at 35% ikke kender til konceptet
dele-biler. Det er derfor vigtigt at have fokus på ubredelsen af kendskabet til LetsGo via medier.
LetsGo er en non-profit organisation, og her derfor ikke uanede midler
til markedføring og kæmpe kampanger. Vi vil derfor have for øje, at vi
“Hvem siger hvad til hvem i hvilket medie med
hvilken effekt?“
Altså, Hvem er afsenderen, Hvad er budskabet, Hvem er
modtageren, Hvilket mediet er det, Hvilken effekten har det.
skal komme længst ud til målgruppen i realistiske medier .
Figur 5
¹ Brugerundersøgelse
Se bilag 3 s.
14
Afsender
Afsender er delebilsordningen LetsGo, som er drevet af delebilsfonden
LetsGo.
Sekundære afsender er os, som udviklere af projektet.
Budskab
I dette projekt er formålet at kommunikere re-designet af LetsGo og
tiltaget med at anvende vedvarende energi, til deres målgruppe.
Budskaber er:
Kør bæredygtigt og CO2 neutralt i dele-el-biler med god samvittighed.
Medie
Hovedmediet er website som er re-designet.
Det kan være overvejelser om selv at erhverve el-bil da priserne er
overkommelige. Det kan være mangel på kendskab og erfaringer med
brugen af delebiler.
Når det kommer til offline medier, kan der selvfølgelig også opstå støj
ved beskadigelse af mediet / plakaten.
Effekt
Effekten af kommunikationen i dette projekt, er at skabe fokus på
miljøet og muligheden for en CO2 neutral og bæredygtig kørsel med
el-delebiler. Da der er de del af befolkningen der ikke har kendskab til
dele-biler, er en ønsket effekt at gøre opmærksom på organisationen
i sig selv, og at målgruppen vil se det fornuftige samt praktiske i konceptet.
Socialemedier i form af facebook og instagram anvendes
Uderover dette udvikles der offline medier til tryk.
Modtager
Modtager er målgruppen. Da vores målgruppe er to forskellige segmenter, vil der blive kommunikeret til begge.
Både det grønne og der grå segment er modtagere.
Støj
Støjen kan i dette tilfælde opstå efter mediet er endt hos modtager.
15
Design brief
Farvevalg
De første ideer og udkast til vores design vil blive præsenteret her. Vi
Farvevalget vil selvfølgelig bære præg af, at grøn er den farve vi
vil prøve at skabe en gennemgåede identitet gemmen hele porjektet.
forbinder med økologi, miljø og natur. Derfor er det oglagt at anvende
Så rapport, website, offline medier m.m. er tydeligt forbundet.
grøn som gennemgående i layoutet.
Vi påtænker at anvende samme grønne far som allerede er i Letsgo’s
Ide
Vi ønsker at udvikle et “nyt” LetsGo, og gøre det mere synligt at mil-
logo. Sammen med hvid og grånuancer vil det samtidig på et mere
klassisk look.
jøvenlig kørsel er et af hovedfokusområderne. Den nye teknologi der
gør det muligt at køre CO2 neutralt i byerne, er så vigtig en meddelse
i sig selv, at det kræver en stor plads i kommunikationen. Vi vil prøve
at tale til målgruppen ved hjælp af det grønne, miljø rigtige udtryk,
men samtidig at få fokus på kvaliteten af bilerne, og fordelene ved at
dele fremfor eje. Specielt vil vi prøve at tale til de unge igemmen vores
Userbility
re-design, da det er muligt af ændre forbrugsmønstret hér.
Det er vigtigt for os at lave et produkt der er let overskueligt og funk-
Logo/Identitet
tionelt for brugeren. Siden skal ikke indholde en masse forstyrrende
Logo og identitet på gerne bære præg af de ændrede forhold, og må
gerne være tydeligt at virksomheden tænker på miljøet.
Vi tænker at tilføje “green” til logo, og iøvrigt gøre identitet på siden
mere grøn.
efftkter. Vi vil forsøge at arbejde ud fra følgende designprincipper:
-Enkelthed
-Æstetik og brugbarhed
16
Navigation
Offline
Navigationen skal være simpel. Det skal være let et tilgå sitets un-
Vi vill gerne lave offline medier der visuelt er lækkert, stilrent, og sig-
dersider. Da produktet er en prototypr vil vi ikke lave dropdown med
nalere en form for fællesskab. Fællesskab i flere betydninger fordi vi
dybtegående informationer, men i stedet have fokus på kommunika-
er fælles om bilerne, og fordi vi alle bør have en fælles mission om et
tionen af konceptet.
bedre miljø.
Funktionalitet
Der skal være eksempler på kommunikation til begge målgrupper.
Vi vil på sitet have dynamiske funktioner, såsom
Til familiebrugeren og til de unge bilister.
Desuden vil vi lave dynamisk banner til forsiden med billeder, for at
forstære det visuelle layout.
Test
Vi vil teste produktet, websitet, ved at lave et undersøgelsesdesign.
Banner
Målet er, at lave et dynamisk bannere der er symbolisere byliv, familie, blandet med natur, glæde og frihed. De modsigende ting taler til
de to målgrupper, og vil vil prøve at kombinere disse, for at vise alsidigheden i produktet at dele biler.
17
Moodboard
18
Dokumentation
Vores dokumentation vil være dellt op i tre områder:
-Udvikling af produkt
-Funktionalitet
-Informations -og præsentationsdesign
19
Udvikling af produkt
ER-diagram
Vores ER-diagram viser, hvordan vi ville have bygget databasen til
vores booking system af delebilerne, som skal kunne fortages fra sitet,
såfremt websitet skulle fremstå helt færdigudviklet.
ER-diagrammet indeholder entiteterne, altså ting vi ønsker registrere
data om: kunde, elbil og prisberegner. ER-Diagrammet viser hvilke
relationer der er mellem de forskellige entiteter og hvilke attributter de
forskellige entiteter indeholder.
Formålet med at anvende et ER-diagram er, at illustrere en database
med bestående tabeller, hvilket vil gøre det mere overskueligt at
forstå, hvordan systemet skal bygges op.
Se bilag 4 s.
20
Responsive
En af de funktionelle krav til projektet var at sitet skulle være responsive design. Eftersom vi bruger det tætteste enhed på os til at komme
på nettet med er det ofte smartphonen der er det foretrukne enhed.
Vi har valgt at sætte vores punkter således at, når skærmstørrelsen
rammer 860px at den tilpasser sig en tablet og når den rammer 640px
eller under tilpasser den smartphone.
<link rel=”stylesheet” href=”tabletgo.css” media=”screen
and (max-width: 860px)”>
<link rel=”stylesheet” href=”mobilgo.css” media=”screen
and (max-width: 640px)”>
På vores tablet størrelse har vi blandt andet fjernet vores dynamiske
banner fra forsiden, da vi mener det er forstyrrende for brugeren at et
kæmpe banner slide kører på et mindre skærm end en computer.
Når vi er helt ned på smartphone størrelse bliver den tidligere menu
erstattet med en mere brugervenlig menu, hvor knapperne bliver
større, samt skiftet den dynamiske banner ud med et lille mobilcover.
21
Funktionalitet
Reliability
FURPS
Sitet skal være oppe så tæt på så mulig 100% af tiden.
Som en del af vores projekt skal vi tage stilling til de funktionelle og
Backup af database skal ske dagligt, så intet data går tabt.
Sikker betaling med kreditkort.
non-funktionelle krav. Til det har vi gjort brug af FURPS til at liste disse
Performance
krav ned.
Systemet skal kunne reagere hurtigt, uden forsinkelser.
Sitet skal kunne håndtere at have flere personer online samme tid
Functionality
uden problemer eller forsinkelser.
Potentiale kunder skal kunne registrer sig som ny kunde.
Kunde skal kunne fortage bookinger af elbiler.
Kunde skal kunne logge ind/ud.
Kunden skal kunne se/finde nærmeste elbil nær sin placering.
Kunde skal kunne annullere en booking.
Kunden skal kunne fortage ændringer på sin personlige profil fra hjem-
Supportability
Websitet skal skrives på fornuftig og forklarende vis, så andre vil
kunne vedligeholde siden, og eventuelt videreudvikle på sitet.
Websitet skal kunne være kompatibelt med alle browsere.
mesiden.
Usability
Navigationen skal være enkelt og overskueligt - max 1-2 klik væk.
Websitet skal kunne tilpasse sig forskellige enheder(laptop, tablet og
smartphone).
Afsenderen(Lets go) skal stå tydeligt.
Sitet skal være på dansk.
22
Userstory
Følgende problemer kan opstå
Den potentiale medlem skal tilmelde sig igennem registrerings formu-
-Der findes allerede en medlem med den angivede CPR-NR
laren, som befinder sig på følgende undersider(Koncept, Biler, FAQ &
-Der opstod en teknisk fejl på systemet, prøv venligst igen senere.
Kontakt). Det kræver først og fremmest personen er bosat i Danmark,
da systemet kræver en gyldig CPR-nr. adresse, post nr og et kørekort
nr.
Validering fejlbeskeder:
-Brug kun bogstaver i navnet
Derfor forventes at systemets registrerings formular at være valideret
-Brug kun bogstaver i efternavnet
med javascript, så den kommende medlem kan sende de rigtige data
-Adressen må kun indeholde bogstaver
igennem systemet.
-Hus nr. må kun indeholde numre
Opstår der fejl ved registrering skal systemet tilbage melde fejlen til-
-Post nr er forkert
bage så den kommende medlem er klar over, hvad der gik galt.
-Kørekort nr. må kun indeholde tal(8)
Følgende scenarier kan forkomme:
-Telefon nr. må kun indeholde tal(8)
-E-mail er ikke gyldig, prøv igen
Succesbesked
En form for en bekræftelsesmail bliver sendt med de indtastede data og
log ind oplysninger bliver sendt til brugen i samme mail.
Fejlbesked
Den kommende medlem oplever problemer ved registreingen.
23
Use Case Model
Start betingelser:
I fig. 6 herunder vises de forskellige aktører og deres funktioner, som
eller smartphone.
de har på siden. Her kan vi se at en bruger har funktionerne som at
blive medlem som er krævende før man kan bruge gøre brug af de
andre funktioner, som at booke en elbil. Folket bag Lets Go Green skal
kunne administrer de forskellige bruger og samt oprette nye biler til
systemet løbende.
Brugen skal have adgang til internettet enten via en computer, tablet
Standard flow
1.Brugen klikker sig ind på siden.
2.Brugen finder “Bliv medlem nu” og klikker.
3.Brugen bliver sendt videre til siden om konceptet, hvor der også er et
registrerings formular på højre side.
4.Brugen udfylder formularen med fornavn, efternavn, adresse, nr, postnr
osv.
5.Valideringen af felterne sikre at brugeren ikke skriver forkerte data ind i
de forskellige felter.
6.Når alle felter er udfyldt rigtigt og brugeren har trykket send, åbner i en
ny vindue i form af en ordrebekræftelse.
7.Når brugen er registret ville han/hun modtage en mail med log ind
oplysninger som skal bruges for at booke elbiler med.
Figur 6
Da vores side kun er en prototype er den ikke så funktionelt som
Use Case
beskrevet foroven. Vi har valgt nogle forskellige felter som kunne
Som nævnt foroven har vi to aktører den kommende bruger og folket
til felterne. Vi har lavet en form for ordrebekræftelse når man trykker
bag Lets Go Green.
send, som lsiter brugens data ud.
være i den færdigudviklede sitet, hvor de er valideret, så de passer
24
Information -og præsentationsdesign
Font
Helvetica
Estilo Script
Farvevalg
Det hvide går meget igennem på alle vores produkter. Udover det
hvide, har vi brugt en en mørk farve som er noget tæt på at være helt
ABCDEFGHIJKLM
sort og en mørke grå farve. De grønne farver er valgt for at symbol-
NOPQRSTUVWXYZÆØÅ
isere vedvarende energi, som også går igennem på alle vores pro-
abcdefghijklm
dukter samt på vores logo.
nopqrstuvwxyzæøå
0123456789
!#%&/()=?-,.
Vi har valgt at bruge Helvetica både på vores webiste både i
overskrifter og i brødtekst, samt på offline medier, da fonten
Helvetica da den kan læses af alle browsere og virker godt på tryk.
LetsGo har i deres originale logo brugt skrifttypen Estilo Script, hvor
de har udelukkende brugt små bogstaver. Vi har efterfølgende selv fået
“green” med i det nye logo.
25
26
Søgemaskineoptimering
Et kode eksempel fra vores forside:
(SEO)
Det er vigtigt at være på toppen af søgemaskinerne her i blandt den
største af dem - Google.
Derfor er det vigtigt at søgemaskineoptimere sine sider, da vi helst skal
være synlig for de potentielle besøgende.
Vi har gjort brug af Meta tags, som skrives i sidernes head. Description
(beskrivelse), keyword(nøgleord) og title(titel), hvor det sidste nævnte
ikke er en Meta tag, men ofte opfattes af mange sådan.
<title>Lets Go Green | El delebil i København</title>
Sidens beskrivelse(description) giver den søgende bruger samt Google en kort (længere end titlen) beskrivelse af sidens indhold. Dette er
den beskrivelse, som vises under sidens titel på Google søgninger.
Eksempel på description fra vores forside:
<meta name=”description” content=”LETSGOGREEN.DK
| Bil uden besvær. Nem og fleksibel adgang til el delebiler
i hele København.”>
Titlen er den korte beskrivelse som søgemaskinerne bruger til at vise,
hvad siden handler om, derfor giver er det godt at have en god og
beskrivende sidetitel, da det bliver vist som en slags overskrift på søgemaskinen(Vises som det første på søgningerne med blåt). Titlen skal
være kort og unikt på alle undersider, da alle undersider også er unikke.
Og et eksempel fra vores underside biler.html:
<meta name=”description” content=”LETSGOGREEN.DK | Vi har en el delebil til enhver type og behov rundt omrkring
i København”>
27
Vi har valgt at tage keyword med selv om de ikke læses af Google
længere, men hvor imod få søgemaskine stadig gøre brug af dem.
Eksempel på keywords på vores forside:
<meta name=”keywords” content=”letsgo,el,dele
bil,green,grøn,københavn,bliv medlem nu”>
Ud over title og meta tags har vi brugt <h1> tag til alle vores titler og
<h2> til hovedoverskrifter m.m.
28
Google Analytics
Ved at indsætte følgende stykke kode ind på alle vores sider/undersider kan vi få Google til at overvåge vores trafik.
Vi har valgt at gøre brug af Google Analytics til at overvåge, hvor
trafikken til sitet kommer fra.
Vi kan se om den trafik der kommer ind på siden, om den er fra et
direkte linket, altså om den besøgende har tastet adressen direkte ind
fra sin browser eller om den besøgende har scannet en QR kode eller
trykket på en link fra en nyhedsbrev.
Ved at genere forskellige adresser fra Google url builder, kan vi altså
bruge de forskellige link til at overvåge, hvor trafikken kommer fra.
<script>
(function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.
insertBefore(a,m)
})(window,document,’script’,’//www.google-analytics.com/analytics.
js’,’ga’);
Link eksempel til QR-kode:
http://emre.dk/letsgogreen?utm_source=Plakat&utm_medi-
ga(‘create’, ‘UA-48710357-2’, ‘emre.dk’);
um=plakat&utm_campaign=Plakat
ga(‘send’, ‘pageview’);
</script>
-og ved at bruge http://emre.dk/letsgogreen?utm_source=Facebook&utm_medium=socialmedie&utm_campaign=socail dette link på
sociale medier kan vi således se, hvor meget trafik der kommer derfra.
29
Kildekode
Som en del at kravet til projektet skulle sitet indeholde dynamiske elementer. Til det har vi på vores forside nogle store ikoner, som linker vi-
Som en del af vores responsive design, har vi lavet en menu som
ændre sig når den når ned på smartphone størrelse, dels fordi det ikke
er så nemt at klikke på link, derfor har vi gjort de links om til blokke og
100% i bredden så de er nemme at trykke på.
#menu {
#menu li {
clear: left;
margin: 0;
float: left;
background: white;
margin: 300px 0 10px;
display: block;
width: 100%;
margin-bottom: 0px;
position: absolute;
border: 1px #CCC dashed;
}
}
dere til forskellige sider. Vi har valgt at billederne skulle være nedtonet
(opacity) og skulle så være helt synlig når musen holdes henover.
.forsideimg {
opacity: 0.6;
transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-webkit-transition: opacity .55s ease-in-out;
}
.forsideimg:hover {
opacity: 1.0;
#menu a {
display: block;
padding: 10px;
text-align: center;
transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-webkit-transition: opacity .55s ease-in-out;
}
}
30
For at vores kommende medlemmer af sitet kan udfylde de forskellige
Pattern sørger for post nr er 4 tal lang fra 0-9
felter i formularen skal de valideres så de kun må indeholde bestemte
karakterer. Til det har vi brugt forskellige regular expression patterns,
var reg_postnr = /^[0-9 ]{4}$/;
som definere, hvad felterne skal/må indeholde.
Pattern sørger for hus nr er mellem 1 og 3 karakter lang
Pattern tjekker om navnet er mindst 2 og max 20 karaktere
var reg_name = /^[A-Za-zÆØÅæøå]{2,20}$/; var reg_husnr = /^[0-9]{1,3}$/
Pattern sørger for tlf nr er 8 tal lang fra 0-9
var reg_numbers = /^[0-9 ]{8}$/;
Pattern validere email til at være skrevet rigtigt med @
var reg_email = /^[A-Za-z0-9._%+-]+@
[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/;$
31
Usability
Metodetriangulering
Undersøgelsesdesign
Ved at udføre de forskellige tests kan vi opnå det bedst mulige
Vi vil efter vors aflevering foretage lave et undersøgelsesdesign med
disse. (se figur af triangulerings-metode nederst)
henblik på mulige forbedringer af vores produkt.
Fokusområde
vurderingsgrunglag for at belyse problemer/ fejl på sitet og forbedre
Evaluering
Vi vil i fremlæggelsen evaluere på vores undersøgelsesdesign.
Funktionalitet og forstålighed for brugeren, samt layout.
Valg af metode
-Brugerundersøgelse
-Ekspertvurdering
Forberedelse
-Udvikle test-scenarier til brugertest
-finde testpersoner til udførelse
32
LetsGo Green - App
Formålet med at lave en app er, at gøre det enkelt og hurtigt for folk
på farten. Forbrugeren har begrænset muligheder, men de få funktioner er lige hvad man skal bruge. På forsiden har vi valgt at placere fire
knapper med tekst og passende illustrationer.
I app’en kan man logge på sin profil, hvor man har mulighed for at
følge med i sine reservationer, se statastik over kørsel og fakturarer
samt ændre på en booking.
Skulle det ske at man var ude at køre langt og et fremmed sted, kan
app’en både finde nærmeste ladestandere og parkeringspladser til
bilen. Med hjælp af GPS’en, vil man blive navigeret til det nødvendige
sted.
Det er også muligt at booke en bil. Her har man mulighed for at booke
præcis den bil man står og mangler. Når en bil er valgt, skal man
vælge hvilke dage og hvor længe man vil have den reserveret.
En synlig support-knap, gør hjælpen let tilgængelig, og det er både
muligt at skrive eller ringe direktet til supporten.
33
Offline medie
LetsGo Green tilbyder:
Elbiler til netop dit behov
Ladestandere rundt i byen
Elbiler i fuld funktionalitet
Ingen fremtidige p-bøder
Altid ledige p-pladser
100% tilfredshedsgaranti
BIL NÅR DU VIL
letsgogreen.dk
facebook.com/letsgogreenkbh
34
Konklusion
Reflektion
Vi har i projektet udviklet et produkt i form af en hjemmeside. Opgaven
Dette projekt har været spændende og samtidig udfordrende, idet
har været at re-designe med fokus på miljø og vedvarende energi tilt-
hovedformålet har været komunikation.
ag i virksomheden.
Vi har ikke så meget information som vi kunne ha tænkt os, men men-
Der er som et led i kommunikationen udviklet sider til sociale medi-
er alligevel at vi har fået en god del ud af analysen.
er, herunder facebook og Instagram, og samtidig udformet layout til
offline tryksager.
Vi har laver projektstyring ved hjælp af en gantt-chart, hvilket virkede
Det nye look appelere til målgruppen ved et klassisk, let tilgængeligt
rigtig godt for os de første par uger.
og funktionelt design.
Desværre var vi så uheldige at et gruppemedlem droppede ud, hvilket
Det visuelle udtryk symbolisere natur, miljø, fællesskab og kvalitet, og
lod os tilbage med en masse uforudsete opgaver.
vi har prøvet at tale til den yngre del af målgruppen gennen de valgte
billeder.
Det har været vores inDesign debut i hele gruppen, hvilket har været
en udfordrende men lærerig process at skulle udforme rapporten her.
Det er på sitet lavet medlemsoprettelse som er valideret, herunder
tilmelding af nyhedsbrev.
Alialt har vi haft en god projektperiode med god ro og orden.
Sitet er SEO optimeret og responsivt.
35
Referencer
Litteratur
Digital Media Management
af Louise Harder Fischer & Marie Oosterbaan
Nyt Teknisk Forlag, 3. udgave, 2010
ISBN: 9788757127232
Usability
af Ian Wisler-Poulsen & Ole Gregersen
Grafisk Litteratur, 1. udage, 2011
ISBN: 9788791171932
Web
http://letsgo.dk
http://renault.dk
Kommunikation i Multimediedesign
af Anne Mette Busch, David Engelbym,
Gunhild Marie Andersen & Torben Larsen
Hans Reitzels Forlag, 1. udgave, 2011
ISBN: 9788741255583
20 Designprincipper
af Ian Wisler-Poulsen
Grafisk Litteratur, 1. udgave, 2012
ISBN: 9788791171758
36
Bilag
Bilag 1
WBS
Bilag 2
Projektplanlægning /Gantt
Bilag 3
Brugerundersøgelse
Bilag 4 ER - diagram
Bilag 5 Mock-up
Bilag 6
Sociale medier
37
Bilag 1
WBS
38
Bilag 2
Projektplanlægning - oprindeligt gantt chart
39
Bilag 2- fortsat
Projektplanlægning - tidsoptimeret gantt chart
40
Bilag 3
Brugerundersøgelse
41
Bilag 3 - fortsat
42
Bilag 4
ER-diagram
43
Bilag 5
Mock-up
44
Bilag 6
Sociale medier
45