1. Foreningen Pigeliv
Projektrapport udarbejdet af
Marianne Hogrefe
Mads Nielsen
Christina Sørensen
Multimedieteknologi og interaktionsdesign
Mandag den 13. februar 2012
Hold 0212
RAPPORT
PROJEKT
3. - 3 -
Baggrund for projektet
Dette projekt er skrevet som en del af et 6 ugers kursusforløb på Erhvervsakade-
miet Lillebælt i Odense i faget multimedieteknologi og interaktionsdesign.
HOME modellen
Opgaven tager udgangspunkt i HOME metoden, som er en metode, der er hel-
hedsorienteret og åben og som kan bruges til alle slags digitale medier. HOME
står for Holistic, Open Multimedia development mEthod.
Metoden beskriver både projektledelse og udviklingen af digitale medier. Me-
todens formål er at systematisere arbejdet gennem hele projektforløbet, og
sætte fokus på de valg man træffer undervejs i projektet. Vi har valgt denne
struktur i opgaven netop pga. dens åbne tilgang, og som kan tilpasses netop
de aktiviteter, dokumentationer og rækkefølger, der er i vores projekt1
.
Da metoden kan bruges til meget store og længerevarende projekter, har vi
valgt at benytte de dele af metoden som vi synes giver mening i vores projekt.
Vi har derfor valgt, at se mere på produktet end selve processen, og vi har
primært struktureret vores arbejde ud fra følgende trin i modellen:
Foranalyse
Undersøgelse
Design
Realisering
Foranalyse
Informationsindsamling
I 2010 blev foreningen Pigeliv etableret i Vollsmose i Odense. Foreningen består
af frivillige, studentermedhjælpere og en bestyrelse. Foreningen Pigeliv hen-
vender sig hovedsageligt til piger med anden etnisk baggrund i alderen 14-24
år. Der arrangeres jævnligt ture ud af huset f.eks. til Zoo, til København og teat-
erbesøg m.v.
1. Digital Media Management - Louise Harder Fischer - Marie Oosterbaan side 12-13
4. - 4 -
Foreningen har åbent hver onsdag og torsdag fra kl. 15:00-18:00. Benytter pi-
gerne foreningen i de to ugentlige åbningsdage, er det gratis at deltage.
Vælger pigerne at deltage i arrangementer ud af huset koster det 50 kr. pr ½
år. Foreningen er politisk og religiøst neutral. Foreningen ønsker, at inddrage de
to sprogede piger og give dem nogle gode oplevelser og relationer til andre
nationaliteter.
Formålet med foreningen er at skabe et rum for piger og udvikle deres sociale
kompetencer og ikke mindst udvide deres horisont og netværk. Et sted hvor
pigerne kan komme og hygge sig, få hjælp med lektier, lave aktiviteter m.m. i
stedet for at hænge ud på gaden. De vil gerne have at pigerne på sigt, tager
flere initiativer og er med til selv at lave de arrangementer i foreningen og for
dennes medlemmer.
På kundemødet gav de udtryk for, at de ønsker sig et web-site, da det eneste
de har i øjeblikket er en facebook gruppe. De synes de mangler et web-site,
hvor de bedre kan informere om deres forening både til nuværende medlem-
mer, men også til nye medlemmer, forældre til pigerne, samarbejdspartnere og
sponsorer.
Projektbeskrivelse
Pigeliv ønsker et web-site, der skal kunne informere om deres forening, så det
bliver nemmere for deres nuværende medlemmer at orientere sig om, hvad der
sker i foreningen, samt gøre det nemmere at få flere nye medlemmer. På kun-
demødet gav de ligeledes udtryk for følgende ønsker til det nye web-site.
Kalender
Foreningen ønsker med et web-site at gøre tidligere og kommende arrange-
menter mere overskuelig via en kalender på web-sitet. En mulighed er at face-
book siden bevares som den er p.t. men, at man kan linke fra facebooksiden til
det nye web-site, hvor der er en overskuelig aktivitetskalender med nærmere
beskrivelse.
Login/intern blog
På nuværende tidspunkt anvender de deres outlook mail, men når flere har
kommenteret på et arrangement virker mailen uoverskuelig. Derfor ønsker fore-
ningen at bestyrelsen og de frivillige skal kunne logge sig ind på siden (blog) og
skrive til hinanden internt.
5. - 5 -
Galleri
Kunden ønsker et galleri, hvor billeder samt videoklip fra forskellige arrange-
menter kan samles.
Foreningen Pigeliv
Kunden ønsker, at der på siden er oplysninger om medarbejdere(inkl. foto og
kontaktoplysninger), åbningstider og vedtægter.
Kontaktformular
På hjemmesiden skal det være muligt at udfylde en kontaktformular, hvis man
ønsker at blive medlem, frivillig medhjælper eller ønsker at kontakte foreningen
generelt.
Succeskriterier
Succeskriterier for hjemmesiden er at skabe et netværk mellem piger med for-
skellig kulturel baggrund. Ved at få en mere overskuelig aktivitetskalender kan
det evt. blive nemmere at læse om de enkelte arrangementer og dermed få
flere piger til at deltage. Dermed kan foreningen på sigt opnå at få flere med-
lemmer og frivillige medhjælpere.
Derudover ønsker de, at deres web-site skal fremstå seriøst, ungdommeligt, pi-
get og enkelt.
Metode
Da vores projekt strækker sig over en relativ kort periode, har vi valgt at arbejde
ud fra vandfaldsmetoden2
, som er den lineære og faseopdelte udviklingsproces
med vægt på løbende godkendelser og dokumentation. Vi har dog ikke lagt os
mere fast på denne metode end, at vi højst sandsynligvis vil komme til at bruge
noget fra de andre metoder også.
Afgrænsning
Vi fokuserer ikke på tekststykker og formidlingen af de skriftlige budskaber, men
holder os til at fokusere på form, design, funktionalitet og stemningen i det nye
web-site for Pigeliv.
Der er ikke udarbejdet et fuldstændigt web-site, hvor alle undersider er funk-
tionelle, men derimod en visuel ramme for det endelige website, hvori design af
forside og nogle af undersiderne er fuldt udformet.
2. Digital Media Management - Louise Harder Fischer - Marie Oosterbaan side 31
6. - 6 -
Projektplan
Projektplan og forventet/reelt tidsforbrug er vedlagt som bilag 1.
Undersøgelse
Undersøgelsesfasen har vi set som start til at komme i gang med selve den kon-
krete del af projektet. Formålet med denne fase var, at lade ideerne flyde for
at have så mange muligheder at vælge imellem til sidst, i forhold til målgruppe,
kommunikationen og design.
Mindmap/idebank
For at få styr og ord på ideerne udviklede et mindmap, hvor vi på baggrund af
analysen, kundeinterviewet og vores egne ideer fik skrevet ned, hvad vi synes,
der er vigtigt for foreningen Pigeliv at lægge vægt på med sit nye web-site (se
mindmap bilag 2).
Vi fik valgt de vigtigste og mest centrale nøgleord ud og begyndte at lave skit-
setegninger til selve sitet. Dette bliver nærmere beskrevet på de følgende sider,
hvor vi starter med at beskrive kommunikationsplanen for derefter at gå over til
selve designet af web-sitet.
Kommunikationsplan
Afsender
Web-sites afsender er naturligvis Pigeliv, der er en forening, der har eksisteret
siden 2010. De har til huse i Vollsmose og er den eneste af sin slags i området.
Det er en upolitisk og neutral forening, hvor alle piger i alderen 14-24 år er
velkomne. Nogle af de centrale ideer bag Pigeliv er, at skabe et sted og et
forum, hvor pigerne kan være sammen på kryds og tværs, udvikle deres sociale
kompetencer, udvide deres horisont og netværk. I øjeblikket har de en face-
book-gruppe, hvor der er ca. 70 venner.
7. - 7 -
Budskab
Web-sitet skal først og fremmest være med til at give medlemmerne et større og
bedre overblik i, hvad det er for nogle aktiviteter og arrangementer foreningen
laver. Derudover skal det også ses som en præsentation af foreningen, hvor de
nuværende medlemmer, deres familie, samarbejdspartnere og sponsorer kan
læse om foreningen, og hvem der står bag. Den skal også være med til at gøre
det nemmere at få nye medlemmer. Web-sitet skal vise, at det er en forening
for alle piger i målgruppen, et hyggeligt sted de kan komme for at ”hænge ud”
sammen med andre. Det skal også vise, at det er en forening med seriøsitet
bag, og hvor man har mulighed for at udvikle sig, og hvor fællesskabet kan
være forpligtende.
Målgruppe
Ifølge foreningen Pigeliv vil websitets primære målgruppe vil være pigerne der
benytter sig af foreningen i forvejen altså de 14-24 årige. Det er vigtigt, at pi-
gerne kan identificere sig med sitet, derfor skal det nøje overvejes hvilke farver,
opbygning, sprogbrug m.m. der bruges på sitet, det skal virke ungdommeligt og
enkelt. Det skal bl.a. være nemt for pigerne at finde kalenderen, så de kan se,
hvilke arrangementer, der er i den kommende tid.
Den sekundære målgruppe for siden vil være forældrene til pigerne, der kom-
mer i foreningen. Derfor er det vigtigt, at der på siden er en seriøs udstråling og
forklaring af, hvad det er, der foregår i klubben, samt en beskrivelse af, hvem
det er, der står bag foreningen.
I den tertiære målgruppe vil der være følgende interessenter:
Samarbejdspartnere, her tænkes på andre foreninger i lokalsamfun-
det, og eventuelt andre pigeforeninger i landet.
Sponsorer og fonde som foreningen får eller søger om støtte fra Jour-
nalister som skal skrive om foreningen.
Skolerne hvor pigerne går i skole. De vil måske gerne vide, hvad det er
pigerne går og bruger deres fritid på.
Afsender
Foreningen Pigeliv
Budskab
Et “fristed” for
unge piger
Målgruppe
Primær
Sekundær
Tertiær
8. - 8 -
Design
Informationsdesign
På baggrund af foranalysen, kundemødet og undersøgelsesfasen har vi beslut-
tet, hvilke ting vi vil arbejde videre med i designfasen. Da det er vigtigt for fore-
ningen, at sitet virker ungdommeligt, piget og enkelt, har vi prøvet at efterleve
dette med, at lave et overskueligt og enkelt design på sitet.
Den simple menu linie med dropdowns, giver en nem brugervenlighed. Kalen-
deren som var et meget stort ønske fra foreningen, har vi gjort synlig på alle
sider samt lavet en nyhedsboks med slideshow, hvor de enten kan sætte deres
næste arrangementer ind med tid og sted, eller skrive om hvad der sker i fore-
ningen.
Interaktionsdesign
Interaktionsdesignet beskriver, hvordan brugeren skal interagere med mediet,
til dette har vi udviklet et non-linært flowchart, der viser sitets navigationsstruktur
(se bilag 3). Vores mål er, at brugeren med så få klik som muligt kommer til det
ønskede.
Derudover har vi bygget sitet op efter den primære, sekundære og tertiære
målgruppe. Hvor de første menupunkter i menubaren (læst fra venstre) hen-
vender sig til pigerne, og de sider der er interessante for dem. Her tænkes på
menupunkterne aktiviteter, galleri, besøg os og medarbejdere. Menuknappen
medarbejdere kan også være interessant for den sekundære målgruppe der
sammen med punktet foreningen Pigeliv henvender sig til forældre, samarbejd-
spartnere og sponsorer, hvor man kan læse om foreningen og dennes formål,
generalforsamling, vedtægter m.m.
Vi har prioriteret at sætte facebook-linket, så det er på alle siderne, netop for at
holde koblingen til facebook-gruppen, hvor alle pigerne kan skrive deres kom-
mentarer til det, der er sket i foreningen.
Vi har brugt den hierarkiske struktur på sitet, med en hovedmenu der forgrener
sig i flere undersider. Dette er en overskuelig opbygning, der gør det nemt for
brugeren at navigere rundt på sitet.
9. - 9 -
Præsentationsdesign
Præsentationsdesignet handler om at iklæde indhold og interaktioner den
rigtige form. For at finde ud af, hvordan vores site skulle opbygges, startede vi
med at lave et mind-map, hvor vi lod fantasien få frit løb. Ud fra mind-map og
in mente, hvad det er kunden ønsker, lavede vi nogle forskellige forslag til sitets
opbygning (Se skitser bilag 4). Vi forsøgte at sætte os både i bruger og afsend-
ers rolle, for at finde den optimale sammenhæng mellem funktionalitet, æstetik
og teknik, der skal være på websitet.
Når pigerne/målgruppen kommer ind på web-sitet, har vi lagt vægt på, at de
skal kunne identificere sig med sitet, de skal føle, at sitet henvender sig til dem
både hvad angår farver, indhold og sprog. Det skal være nemt for brugeren
at finde rundt på siden, og finde de ting der søges efter. Derudover synes vi
også det er vigtigt, at siden udstråler en seriøsitet og giver information, da
også mange forældre vil benytte sig af siden. Vi har derfor prøvet at lave en
vægtning mellem tingene så sitet opfylder så meget som muligt af kundens
ønsker (se storyboard bilag 5 og skeletopbygning bilag 6).
Designparametre
For at finde opbygningen og udseendet for selve designet af web-sitet har vi
brugt følgende parametre (Se designmanual bilag 7):
Form
Typografi
Illustration
Farver
Animation
Lyd
Form
Vi har lagt stor vægt på, at siden skal være enkel og nem at navigere rundt på.
Formen er klassisk opbygget med en header, hvor logoet er præsenteret i ven-
stre side. Derudover består sitet af en menulinie, en højre side, hvor kalenderen
er placeret og med en footer. Disse elementer følger med på alle sider, da disse
ting er vægtet højt hos kunden.
Det eneste der skifter fra side til side er det store tekstfelt, hvor der kan skrives
eller indsættes det som er relevant for siden. I menulinien har vi valgt at sætte
et link ind til deres facebookgruppe, da meget at kommunikationen foregår via
10. - 10 -
den. Vi har valgt ikke at arbejde mere med at lægge facebook gruppen over
på web-sitet, men det kunne helt sikkert være noget der kunne gøres.
Hele sitet er opbygget med runde hjørner, hvilket signalere det bløde og kvin-
delige look, som vi synes er vigtigt at signalere, da de fleste i målgruppen er
piger. På forsiden har vi undgået scroll, da brugeren derved får et godt overblik
over hele siden, og det er vigtigt da vi her fremhæver de kommende arrange-
menter i foreningen. På undersiderne har vi ikke lagt vægt på at undgå scroll,
men mere hvad det er for et indhold, siderne skal indeholde.
Typografi
Det endelige valg af font faldt på Century Gothic, for det første ville vi gerne
have, at det var et websikkert valg, vi søgte lidt, og fandt at denne font skulle
være rimelig websikker3
. Derudover er denne font også lidt ”rund” i skriften,
hvilket passer godt til det vi gerne vil udstråle med sitet. Efter en del arbejde
med Wordpress fandt vi ud af at gøre punktafstanden større, hvilket gør at den
er ligeledes er letlæselig. Vi har valgt den samme font på hele sitet, for at have
en ensartethed og enkelhed som er noget af det kunden vægter højt.
Illustration
Den første illustration brugeren ser på sitet er headeren, vi har valgt at sætte
logoet i venstre side af headeren. I resten af headeren har vi lavet nogle bløde
og runde illustrationer i en pink farve, som skal symbolisere foreningen pigeliv,
som er piget, et hyggeligt og rart sted at komme, hvor der både er plads til sjov
og seriøsitet. Vi var inde i overvejelserne om der skulle laves et nyt logo, men for
det første synes vi logoet er meget godt, og for det andet synes vi, at når fore-
ningen ikke er ældre end den er, så er det er for tidligt at lave et nyt logo. Vi ville
gerne have anvendt logoet i den lysere farve som vores illustrationer, men vi har
ikke kunne skaffe en redigerbar fil af logoet. Vi forsøgte med den røde farve fra
det oprindelige logo på sitet, men så synes vi det blev alt for mørkt og tungt.
Vi har valgt, at farverne på sitet skal være den lyserøde/pinke og som kontrast
til denne er alt andet holdt i hvidt. Vi har dog valgt at baggrunden som fader
nedad starter lidt mørkt, da det giver en større fokus og kontrast til headeren.
For at det hele ikke skal være hvidt, har vi valgt at rundt om alle bokse, billeder
m.m. skal være en tynd lyserød/pink kant for at give lidt liv på siden.
Vi har valgt, at header, menulinie, footer og kalender skal gå igen på samtlige
sites, kalenderen fordi det var utroligt vigtigt for kunden, at den er synlig og de
andre ting for at skabe en kontinuitet og let genkendelighed på hele sitet.
Som grafisk kontrast til logoet har vi billeder på forsiden.
3. Skrifttype: http://doctype.com/century-gothic-websafe Century Gothic
11. - 11 -
Farver
Vi har valgt den lyserøde/pink farve som naturligvis er oplagt at bruge, da
målgruppen er piger og det er en pigefarve. Vi har valgt kun at benytte os af
denne ene farve for at holde det enkelt og samtidig udstråler det seriøsitet ikke
at blande for mange farver sammen. Vi har valgt at vores links på siden også
skal holdes i de farver, dvs. vores link er sorte som skrifttypen, for at gøre det
synligt, at det er et link, er det understreget når man køre hen over det (hover)
bliver det pink.
Animation
Vi har valgt at bruge en animation på forsiden, hvor billederne skifter sammen
med beskrivelsen af de kommende arrangementer. Vi synes godt sitet kan
”bære” dette taget i betragtning af, at resten af siden er meget enkel. Det er
den eneste animation vi benytter, da vi synes alt andet vil blive for vildt og ro-
det, hvilket ikke lever op til kundens krav om enkelt- og overskuelighed.
Lyd
Der er ikke noget lyd på siden med undtagelse af eventuelle filmklip fra deres
arrangementer eller henvisninger til youtube klip.
Komposition
En meget vigtig parameter for at målgruppen får lyst til at blive på sitet er selve
grænsefladekompositionen. Det er utroligt vigtigt at målgruppen kan finde
de oplysninger de søger, i de områder de forventer, de er placeret. For at
planægge et godt web-site har vi valgt at anvende kommunikationsmodellen
AIDA4
og Eye-tracking5
.
AIDA-modellen
AIDA-modellen definerer fire trin Attention, Intrerest, Desire, Action, hvor man
bevæger sig fra det ene trin videre til næste trin. Vi vil i nedenstående gennem-
gå de enkelte trin for at finde frem til, hvordan hjemmesiden forventes at bliver
læst.
Attention
Det område vi forventer at målgruppen vil se først er øverste venstre hjørne af
header. I det område har vi valgt at anbringe logoet, hvilket gerne skulle give
målgruppen et indtryk af hvem afsenderen er. (se evt. skitser herunder).
4. International markedsføring – 2000 – Finn Rolighed Andersen – Trojka A/S side 483
5. Digital Media Management - Louise Harder Fischer - Marie Oosterbaan side 167
12. - 12 -
Interest
Her skal interessen vækkes, hvor øjnene bevæger sig ned over siden og hen til
aktivitetsgalleri og -kalender. De skal gerne vække interesse for målgruppen og
få dem til at søge videre på sitet efter flere oplysninger.
Desire
Her skulle målgruppen gerne have lyst til at læse om næstkommende akti-
viteter/arrangementer, som er placeret i et galleri midt til venstre på siden.
Action
I dette trin skal målgruppen gerne foretage en handling og evt. søge flere oplys-
ninger så de kan blive tilmeldt kommende arrangementer. For hurtigt at finde
frem til kontaktoplysninger har vi valgt at placere adresse oplysninger i footer
nederst på hjemmesiden.
AIDA-model
13. - 13 -
Pointer eye-tracking
Ud fra pointer eye-tracking modellen ses det at målgruppen forventes at se
flere gange hen over galleriet med kommende aktiviteter. Dette skulle gerne
føre til, at målgruppen får lyst til læse mere om de kommende aktiviteter i fore-
ningen Pigeliv og i sidste ende tilmelde sig.
Realisering
I realiseringsfasen nævnes modellen SCRUM, hvor arbejdet bliver delt op i min-
dre enheder, hvor arbejdet bliver gjort færdigt, dette for at sikre en hastighed
og dynamik i arbejdet. Vi har gennem hele projektet arbejdet ud fra denne
model, hvor vi hver især har stået for nogle opgaver. Vi har igennem hele pro-
cessen holdt daglige møder (kaldet Daily SCRUM Meeting) for at følge op på
tingene. Her har vi haft mulighed for at snakke om problemer og udfordringer vi
er stødt på og hvordan vi skal gribe de næste opgaver an.
Vi har set på forskellige Wordpress temaer til web-sitet, og til sidst stod valget
mellem Atahualpa og Weaver. Vi valgte Atahualpa fra blandt andet fordi vi
synes det blev for kompliceret for kunden at redigere. Derfor faldt valget på
Wordpress temaet, der hedder Weaver, hvor vi igen har valgt under temaet
indie ave. Vi har valgt dette tema, da det er meget brugervenligt og nemt, at
Poynter eye-tracking
14. - 14 -
redigere for kunden som skal overtage sitet. Samtidig er det muligt at sætte
mange forskellige plug-inns og widgets områder ind, så man derved kan opnå
lige præcis det site man gerne vil have. Skal man ind og lave om på selve
opsætningen i sitet, skal man dog have lidt forstand på koder, ellers vil det ikke
være anbefalelsesværdigt at gøre.
Evaluering
Nu sidder vi her med det næsten færdige resultat af både rapport og web-site,
og vi synes vi har fået lavet et web-site, der i høj grad lever op til de forventnin-
ger og ønsker der har været fra kunden. Vi synes også vi har fået lavet et site,
der udtrykker det foreningen Pigeliv gerne vil nemlig, at det skal være enkelt,
piget og seriøst.
Gruppen har bestået af 3 medlemmer med forskellig faglig baggrund, hvilket
har betydet, at vi har suppleret hinanden godt gennem hele processen, og vi
har forsøgt, at udnytte så vidt muligt de kompetencer vi hver især har. Vores
arbejde har gennem hele processen været konstruktiv, og der har været bred
enighed i gruppen igennem alle faserne. Vi har i større eller mindre omfang
alle været involveret i alle beslutninger vi har truffet gennem udviklingstrinene,
hvilket selvfølgelig har krævet noget tid, men vi mener det har været givet godt
ud.
Vi har lavet en liste med ideer til videreudvikling af siden som ses på bilag 8.
Vi er selv tilfredse med resultatet og håber naturligvis, at kunden også synes det
kunne være interessant at arbejde videre med vores site.
32. - 18 -
Forslag til videreudvikling af siden
Få facebook-væggen ind på web-sitet, så brugerne bliver på siden og ikke bliver
sendt videre til facebook.
Farvevalg: Vi har valgt en lysere nuance end den logoet havde oprindeligt, da
vi synes den blev for ”tung” og dominerende på siden. Vi valgte farven uden
tænke over om den var web sikker, men ud fra hvad der så bedst ud. Vil kunden
have en web-sikker farve kunne de fx vælge farven ff33cc, som ligger tæt på
vores farvevalg.
De kan installere et plug-in der optimere søgningen af deres side på google.
Oversættelse af nogle sider til arabisk, somalisk mm.
Bilag 8
