docSTARTUP.DK 2.semester eksamen 2015 http://minimemo
download 
Report Transcription
STARTUP.DK 2.semester eksamen 2015 http://minimemo
STARTUP.DK 2.semester eksamen 2015 http://minimemo.metteline.nu FAKTAARK PROJEKTTITEL startup.dk URL minimemo.metteline.nu SKOLE Copenhagen Business Academy HOLD CLmul-a14e ÅRGANG 2014 VEJLEDERE Ditlev Vestergaard Skanderby Marc Kluge Frederik David Tang Jesper Hinchely Morten Rold ANSLAG 71.318 HOVEDOMRÅDER Design & Visualisering Kommunikation og formidling Interaktionsudvikling Virksomheden Email [email protected] Portfolio http://metteline.nu Direkte http://metteline.nu/minimemo.html Mette Line Tarp Jørgensen Email [email protected] Portfolio http://rie-larsen.com Direkte http://rie-larsen.com/minimemo.html Rie Larsen Email [email protected] Portfolio http://simonetruelsen.dk Direkte http://simonetruelsen.dk/minimemo.html Simone Fie Truelsen Email [email protected] Portfolio http://hma-design.dk Direkte http://hma-design.dk/minimemo.html Helena Maria Abel 2 INDHOLDFORTEGNELSE INTRODUKTION Indledning Projektbeskrivelse Problemformulering Problemafgrænsning IDÉUDVIKLING MOODBOARD METODE & TEORI UDVIKLINGSMETODE PBS WBS & Gantt-kort Arbejdsprocess BRAINSTORMING PBS WBS GANTT-KORT STAKEHOLDER RISIKOANALYSE VIRKSOMHEDEN Elevatortale Forretningsplan Budget S.W.O.T Markedsanalyse 4 4 4 4 4 5 6 7 8 8 8 8 9 10 11 12 13 14 15 15 15 16 18 19 MÅLGRUPPE Målgruppeanalyse Personas KOMMUNIKATION Kommunikationsmodel AIDA model ANNONCE Online/Offline annonce Banner annonce DESIGN BRIEF FARVER TYPOGRAFI LOGOUDVIKLING LOGOTEST PRODUKTUDVIKLING Skitser Det endelige design DESIGNUDVIKLING Skitser Wireframes Mock-ups Designprincipper PRÆSENTATIONSDESIGN INFORMATIONSDESIGN NAVIGATIONSDESIGN 21 21 21 23 23 24 25 25 26 27 28 29 30 31 33 34 35 37 37 38 40 41 42 43 44 DESIGNMANUAL INTERAKTIONSUDVIKLING Pre-processed CSS Responsivt design SEO jQuery Database Use-case ER-diagram User-story Prog. enhancement Slideshow og annonce BRUGERTEST KONKLUSION LITTERATURLISTE BILAG WBS GANTT-KORT Stakeholder Budget Skydeskivemodellen Annonce Mock-up Use-case 46 50 50 51 52 53 55 59 59 60 61 61 62 63 64 67 68 69 70 71 72 73 74 75 3 INTRODUKTION Indledning Problemformulering Miljøet er efterhånden både et meget omdiskuteret og relevant område i dagens Danmark. Danskerne køber flere økologiske varer, og vi fokuserer mere og mere på at skåne miljøet og naturen, som vi skal give videre til de næste generationer. Dette gør det åbenlyst at udvikle miljøvenlige og lærerige produkter til børn, så samtidigt med de får en lærerig og brugbar oplevelse også får et indblik i en miljøbevidst hverdag fra barnsben af. Hvordan kan vi igennem en online/offline kommunikation motivere forældre til at købe en række lærerige og miljøvenlige produkter til deres børn? Projektbeskrivelse Problemafgrænsning Vi er en gruppe multimediedesignerstuderende der har besluttet os for at starte vores egen virksomhed. Det skal være en kommerciel virksomhed, som målretter vores forretning mod et nichemarked. For at indkræse vores projekt har vi lavet nogle afgrænsninger. Vi skal udvikle nogle produkter, som kan promovere virksomheden og de ydelser vi tilbyder. Vi skal udarbejde et website og en visuel identitet til vores nye virksomhed. Derudover skal vi lave en annonce, som skal gøre reklame for vores nye virksomhed. Annoncen skal følge samme visuelle udtryk som de øvrige produkter. Til sidst skal der skrives en rapport der beskriver vores overvejelser, analyser, diskussioner, udviklingsproces mv. i forbindelse med projektarbejdet. • Hvilken målgruppe henvender vores virksomhed sig til? • Hvordan kan vi markedsføre vores virksomhed mest hensigtsmæssigt? Vi har i første omgang valgt at afgrænse vores målgruppe ned til forældre med børn i alderen 4-6 år, for også at kunne afgrænse produkterne. Dette har vi gjort for at kunne fokusere 100% på de udvalgte produkter til den bestemte aldersgruppe. Da børnene skal lære noget af disse produkter, er det vigtigt at produkterne passer til målgruppen. For at fokusere mest muligt på vores website, visuel identitet og produkterne, har vi valgt at afgrænse budgettet i dette projekt. Derudover har vi valgt ikke at gå helt i dybden med at beskrive det pædagogiske og miljøorienterede aspekt, da vi ikke har haft nok tidsressourcer og viden omkring dette. Til sidst har vi valgt at begrænse vores udvalg af produkter. Vi har brugt nogle få bogstaver og dyr, men vil i fremtiden udvide med hele alfabetet. 4 IDÉUDVIKLING Til at starte med at satte vi os i gruppen, hvor vi udarbejdede en brainstorm, hvor vi kom op med en række ideer både til hvilken form for virksomhed vi ville opstarte, og hvilken slags ydelser og produkter indenfor multimedieområdet, vi ønskede at tilbyde. Vi havde mange ideer oppe og vende, men vi blev hurtigt enige om, at vi ønskede at opstarte en online virksomhed med en tilhørende webshop, hvor det var muligt at tilbyde en række produkter, som kunne promovere virksomheden og vores koncept yderligere. Først havde vi en idé om at udvikle en webshop, som kunne tilbyde grafiske plakater med forskellige motiver og størrelser, men vi byggede hurtigt videre på ideen. Vi havde et ønske om at kunne tilbyde flere produkter, og vores virksomhed skulle dertil også have en række kerneværdier, som skulle være virksomhedens fundament. De udvalgte produkter endte med at blive plakater, malebøger, drikkedunke og madkasser. Vi valgte at ligge vores hovedfokus på miljøet, da det er et meget omdiskuteret og relevant område både i dagens Danmark og på verdens plan. Vores produkter skulle være miljøvenlige uden kemiske stoffer for at skåne naturen, og hermed også gavne ens egen sundhed. Vi ville også gerne have, at denne række produkter skulle være lærerige for børn fra 4-6 år, så samtidigt med at de ville lære noget, ville børnenes forældre også få en mulighed for at gøre deres børn miljøbevidste fra barnsben af. Derfor gavner produkterne børnenes sundhed fra en tidlig alder. De lærerige produkter skulle også være til gavn for børnenes indlæringsevne. Vi har som udgangspunkt snakket om Jean Piagets udviklingsteori. Han mener nemlig, at børnene i vores målgruppe er sidst i den præ-operationelle fase (2-6 år), som er lige før den konkret-operationelle fase (6-12 år). Her begynder barnet nemlig at tænke logisk og systematisk. Vores mål er at forberede barnet på den fase ved at give dem denne form for indlæring. Piaget mener nemlig også, at barnets viden lagres i kognitive skemaer, hvori at barnets erfaringer organiseres på et systematisk måde. Barnet lærer nemlig i en form for tilpasning til miljøet, som fagligt kaldes assimilation. Barnet forstår nye ting ved at indarbejde dem og tilpasse dem til de kognitive skemaer som de allerede har. Vores aldersgruppe kender allerede godt til de dyr, som vi gør brug af, og tilpasser derfor til deres kognitive skemaer. Vores formål med dette er f.eks. plakaten med tigeren og et ’T’. Barnet ved, at dyret er en tiger, men kender nødvendigvis ikke bogstavet ’T’. Dette gør at barnet fremover vil associere T’et med en tiger. På den måde tilpasser barnets indlæring sig til det kognitive skema. I forlængelse med vores ide med Piagets udviklingsteori, har vi også valgt et navn som går godt i spænd med vores koncept. Da vi havde brainstormet en række forskellige navne, kom vi hurtigt frem til Minimemo - Mini fordi at vores ’bruger’ af produktet er børn, og memo (memorize), fordi vores koncept går ud på at barnet skal lære af produkterne. 5 MOODBOARD 6 METODE & TEORI Vi har igennem vores analysedel brugt forskellige metoder og teorier. Nedenfor har vi listet dem op for at få et overblik. De vil løbende i rapporten blive beskrevet vist hvordan vi har brugt dem. S.W.O.T Vi har brugt S.W.O.T analysen til at definere vores virksomheds interne styrker og svagheder samt virksomhedens eksterne muligheder og trusler. PBS Til at starte med lavede vi en PBS for at få et større overblik over hvilken række produkter vi skal levere, og hvad disse skal indeholde. MARKEDANALYSE For at finde ud af hvilke konkurrenter vores virksomhed har, har vi benyttet os af skydeskivemodellen for at vise hvor der er snæver og bred konkurrence. WBS & GANTT-KORT Noget af det første vi gjorde var at lave en WBS og et Ganttkort. Dette gav os et overblik over projektperioden, og vi havde derfor bedre mulighed for at strukturere vores proces. MÅLGRUPPEANALYSE & PERSONAS For at finde ud af hvilken målgruppe vi henvender os til og for at indkræse vores målgruppe, har vi lavet en masse research og udarbejdet en målgruppeanalyse samt personas. DESIGN BRIEF Inden vi gik ordenligt i gang med projektet lavede vi et design brief for at sætte nogle retningslinjer for os selv. Dette gjorde det nemmere at komme i gang med resten af projektet. AIDA MODEL For at kommunikere med vores målgruppe og skabe den bedst mulige måde opmærksomhed, har vi brugt AIDA modellen til vores website. STAKEHOLDER Vi har lavet en power/interest matrix for at kunne forholde os til hvor vores interessenter ligger henne og hvordan vi skal holde dem informeret, tilfredstillet samt overvåget. LASWELLS KOMMUNIKATIONSMODEL Vi har brugt Laswells model til at redegøre for hvilke medier, der benyttes for at kommunikere budskabet ud til en bestemt målgruppe, og hvilken effekt budskabet får i sidste ende. RISIKOANALYSE Vi har udarbejdet en risikoanalyse for projektet for at få et overblik over hvilken række forhindringer der kunne komme undervejs, og hvilke konsekvenser disse kunne medføre. 7 UDVIKLINGSMETODE Vi har gjort brug af planlægningsmetoderne PBS, WBS og Gantt-kort til at udvikle vores projekt, da vi mente det var den bedste måde at disponere vores tid og strukturere arbejdsopgaverne ordentligt. Arbejdsproces PBS Hvis man kigger på det indledende arbejde i projektet er det gået efter planen. Det skyldes, at det er ting, som vi har gjort så mange gange før, at vi efterhånden kender processen godt. Til at starte med lavede vi en Product Breakdown Structure for at få et større overblik over hvilken række produkter vi skal levere, og hvad disse skal indeholde. WBS & Gantt-kort Herefter udarbejdede vi en Work Breakdown Structure for at opdele produkterne i mindre elementer for at gøre det nemmere at organisere vores arbejde yderligere. På vores WBS har vi skrevet estimeret tid på, for at disponere vores tid ordentligt fra start af – og hertil har vi også lavet et Gantt-kort, som viser hvilke dage vi har planlagt at lave hvad i arbejdsprocessen. Gantt-kortet illustrerer projektets forløb i én helhed. I dette projekt har vi nået alt det, som har været planlagt. Nogle ting er forløbet som forventet, mens noget andet har taget både længere og kortere tid end forventet. Derimod har vi brugt længere tid og ressourcer på at lave websitet, fordi vi ikke har haft en lige så god fornemmelse af hvor lang tid, at det ville tage. Undervejs er der nemlig opstået en del komplikationer med databasen og vores responsive design. Dog har det ikke haft den store betydning for vores arbejdsproces, da vi har kunne tage tid og ressourcer fra vores produktudvikling. Produktudviklingen har taget det halve af den tid, som vi egentligt havde sat af til det. Derfor har vi også kunne tage noget af den tid, og bruge på rapportskrivning- og opsætning i stedet. Ud over disse projektudviklingsmetoder, har vi også gjort brug af få elementer fra den agile udviklingsmetode Scrum. Hver dag har vi haft et morgenmøde (daily scrum meeting) klokken 9. Her har vi hver især fortalt hvad vi har lavet derhjemme siden dagen før (sprint backlog), og om der har været nogen forhindringer undervejs, som de andre kan hjælpe med. Når vi er gået hver til sit om eftermiddagen, har vi også på forhånd aftalt hvilke punkter på listen, som vi hver især skal lave færdige derhjemme til dagen efter (sprint review), hvor vores morgenmøde starter. 8 BRAINSTORMING Om Webshop Madkasser Webshop Forside Produkter Drikkedunke Plakater Navigation Kontakt Malebøger Nyhedsbrev Logo Nyhedsbrev Rapport STARTUP.DK Navn InDesign Annonce Produkter Målgruppe Lærerigt Miljøvenligt Sociale medier Børn 4-6 år Visuelt design Instagram Mommy blogs Forældrer Facebook 9 PBS Minimemo Website Rapport Annonce Responsivt design Planlægning Reklame Visuel identitet Designmanual Illustrator HTML, CSS & JS Analyser, metoder & teorier Målgruppe Webshop Diskussion Print & web PHP & SQL SEO optimering 10 WBS Minimemo Indledende Indledende design Website Rapport Produkter Responsivt design Rapportopsætning Annonce (2 timer) (32 timer) Målgruppe Plakater (3 timer) (32 timer) Idéudvikling Moodboard (8 timer) (2 timer) Brainstorming Kodning (8 timer) Skitser, wireframes & mock-ups (8 timer) Problemformulering Designvalg (16 timer) (3 timer) Analyser, metoder & teorier (68 timer) Malebøger (8 timer) Designprincipper PBS Logo Database Designbrief Drikkedunke SEO optimering Designmanual Madkasser (2 timer) WBS (3 timer) Gantt-kort (3 timer) Forretningsplan (8 timer) (16 timer) (16 timer) (200 timer) (24 timer) (5 timer) Tekster & indhold (24 timer) Validering (3 timer) (5 timer) (8 timer) Aflevering Finpudsning (8 timer) (32 timer) (32 timer) (32 timer) Konklusion (8 timer) Korrektur (5 timer) For at se vores WBS i stor se bilag 1 11 GANTT-KORT Minimemo Start Slut Dage 4 Maj 5 Maj 6 Maj 7 Maj 8 Maj 9 Maj 10 Maj 11 Maj 12 Maj 13 Maj 14 Maj 15 Maj 16 Maj 17 Maj 18 Maj 19 Maj 20 Maj 21 Maj 22 Maj Man Tirs Ons Tors Fre Lør Søn Man Tirs Ons Tors Fre Lør Søn Man Tirs Ons Tors Fre Indledende - Idéudvikling - Brainstorming - Problemformulering - PBS - WBS - Gantt-kort - Forretningsplan 04.05 04.05 04.05 05.05 05.05 06.05 06.05 06.05 08.05 04.05 04.05 06.05 05.05 06.05 06.05 08.05 5 1 1 2 1 1 1 3 Indledende design - Moodboard - Skitser, wireframes, mock-ups - Designvalg - Logo 05.05 05.05 05.05 05.05 07.05 08.05 05.05 06.05 08.05 08.05 4 1 2 3 2 Website - Responsivt design - Kodning - Designprincipper - Database - SEO optimering - Tekster & indhold - Validering 06.05 06.05 11.05 11.05 18.05 25.05 13.05 28.05 28.05 07.05 28.05 11.05 20.05 25.05 15.05 28.05 23 2 18 1 3 1 3 1 Rapport - Rapportopsætning - Målgruppe - Analyse, metoder & teorier - Design brief - Designmanual - Konklusion - Korrektur 05.05 11.05 05.05 11.05 12.05 21.05 26.05 28.05 28.05 11.05 05.05 22.05 12.05 22.05 27.05 28.05 24 1 1 12 1 2 2 1 Produkter - Annonce - Plakater - Malebøger - Drikkedunke - Madkasser 11.05 11.05 11.05 11.05 11.05 11.05 22.05 22.05 22.05 22.05 22.05 22.05 12 12 Aflevering - Finpudsning 28.05 29.05 28.05 28.05 23 Maj 24 Maj 25 Maj 26 Maj 27 Maj 28 Maj 29 Maj Lør Søn Man Tirs Ons Tors Fre 12 12 12 12 2 1 For at se vores Gantt-kort i stor se bilag 2 12 STAKEHOLDER Vi har fundet en række stakeholders, som kunne være interesserede og har relation til vores virksomhed. Derudfra har vi lavet en Power Interest Matrix for at illustrere hvad de har af interesse og relation til vores virksomhed. Keep satisfied High Manage closely • Forhandler • Målgruppe/købere • Børn/brugere • Investorer • Leverandør Power Monitor Keep informed • Konkurrenter • Bank Det er vigtigt for os som virksomhed at målgruppen, som er køberne og børnene som brugere er meget tilfredse. Uden dem kan vores forretning nemlig ikke holdes kørende. Hvis vores forretning ikke bliver holdt kørende, er investorerne ikke heller ikke tilfredse. Da det er dem, som har lagt penge i vores virksomhed, har de også meget stor interesse i, at forretningen går godt. Derfor har vi også valgt at placere investorerne der. Derudover skal vi administrere vores forhandlere nøje. Vi har valgt placere dem på matrixen med både høj magt og høj interesse. Det er vigtigt for os, at vi holder øje med at de sælger vores varer, at de står de rigtige steder på hylderne. Omvendt har de også stor interesse i at sælge vores produkter. Lidt længere nede i samme felt har vi placeret leverandører med mindre magt og mindre interesse. Selvfølgelig er det vigtigt at vi får leveret det rigtige produkt, og at de har os som kunde. Dog kan man vende den om og sige, at hvis vi er utilfredse kan vi hurtigt finde en ny leverandør såvel som at de kan finde nye kunder. Da vi ikke er de eneste på markedet, som forhandler denne slags produkter, er de vigtigt for os, at vi følger med. Derfor er vigtigt for os at overvåge vores konkurrenter og hele tiden sørge for at vi er foran. Low Low Interest For at se vores matrix i stor se bilag 3 High Vi har placeret banken, som en af dem vi skal holde informeret. De har stor interesse i, at det går os godt, så vi kan betale vores lån tilbage. Derudover er det jo godt for dem, at det går os godt, når det er dem som holder på vores penge. 13 RISIKOANALYSE Vi har udarbejdet en risikoanalyse for projektet for at få et overblik over hvilken række forhindringer og situationer der kunne komme undervejs, og hvilke konsekvenser disse kunne medføre. Vi har udformet et analyseskema, som viser de forskellige risici, og hvordan det er muligt at forebygge og håndtere dem. Hvad kan gå galt? Sandsynlighed (1, 3 eller 5) Konsekvens (1, 3 eller 5) Sandsynlighed x Konsekvens Hvad skal der gøres for at undgå denne risiko? Én eller flere af gruppens medlemmer bliver syge i perioden 3 3 9 De andre gruppe-medlemmer må arbejde hårdere. Den syge må eventuelt lave opgave hjemmefra Tidsplanen holder ikke 3 5 15 Prioritering af arbejdsopgaver Andre forhandlere vil ikke afsløre deres leverandører 5 1 5 Sammenligning af priser på forskellige websites og udregne estimerede priser på vores egne produkter Én eller flere computere går ned uden backup 3 5 15 Uploade løbende på Dropbox Gruppen kan ikke samarbejde --> Uvenskab 3 5 15 Være åben for andre ideer, snakke pænt og have respekt Opgavekrav misforståes 3 5 15 Spørge lærerne ved tvivl 1 = Lille, 3 = Middel, 5 = Stor Hvis sandsynlighed x konsekvens er lig eller over 15 = indsatsområde Skema: Kompeto.dk 14 VIRKSOMHEDEN Elevatortale Vi Minimemo er en online virksomhed der forhandler miljøvenlige og lærerige produkter til børn i alderen 4-6 år. Vi sælger plakater, malebøger, drikkedunke og madkasser, der er 100% miljøvenlige for at gavne dine børns sundhed fra en tidlig alder. Vores grafiske design er derudover med til at skabe en god, udviklende og lærerig barndom for dine børn. Forretningsplan Når man opstarter en ny virksomhed er der forskellige faktorer der spiller ind. Til at starte med er det vigtigt at udarbejde en række budgetter – først og fremmest et etableringsbudget: Hvor mange penge har man brug for at kunne starte sin virksomhed op? Derefter er det også vigtigt at overveje hvilke indtægter og udgifter man forventer, at ens virksomhed vil have. Dertil skal man også udregne om man har råd til at drive virksomheden på længere sigt. OPSTART & BUDGET Vi ønsker at finde investorer og optage et lån i banken samt supplere med en opsparing for at kunne starte vores virksomhed op, og i forbindelse med dette skal vi også have et CVR-nummer. Herefter skal vi finde nogle passende lokaler, hvor der samtidigt er lagerplads til produkterne, som vi ønsker at sælge på webshoppen. Det er også vigtigt at have styr på udgifter såsom lønninger, leverandørpriser og produktionsudstyr – herunder computere, som både skal bruges til grafisk arbejde og modtagelse af ordrer fra kunderne. MARKEDSFØRING Desuden er markedsføring også en stor del af vores opstart, da det er essentielt at markedsføre sit brand ordentligt for at få kunder – og ligeså vigtigt at vælge hvilke mediekanaler man ønsker at bruge. Derfor har vi valgt at bruge omkring 20% af vores omsætning på at markedsføre vores produkter, hvilket vi vil gøre i form af annoncer i diverse magasiner der rammer målgruppen. Derudover vil vi også kontakte en række mommy-bloggere, hvor vi vil sponsere en række produkter til disse for at få omtale på deres blogs. Til sidst vil vi udnytte al den gratis markedsføring vi kan få på de sociale medier – både på Facebook og Instagram. PRISER & LEVERENDØRER For at udregne priserne på vores produkter har vi været igennem en lang research. Vi har kontaktet allerede eksisterende miljøvenlige virksomheder (www.helsebarn.dk, www.sebra.dk, www.helsam.dk) for at forhøre os om indkøbspriser samt priser for produktion hos leverandørerne. Dette gav desværre ikke pote, da alle virksomhederne gerne ville holde informationerne fortrolige. Efter lang tids research på internettet måtte vi erkende, at disse informationer ikke er tilgængelige. Vi har derfor i stedet valgt at kigge på købsprisen på de forskellige produkter, og herefter fundet nogle priser til vores egne. 15 WEBSHOP Vores virksomhed har en webshop hvilket gør, at det er et vigtigt punkt at have en dankortaftale med NETS og en betalingskortaftale til internationale kreditkort med Teller for at kunne gennemføre en internethandel. Hertil er der en række beløb, som der også skal tages hensyn til i budgettet, såsom et oprettelsesgebyr, årlig abonnementspris og transaktionsgebyrbeløb for hver handel på webshoppen. I FREMTIDEN På længere sigt ønsker vi at udvide vores sortiment for at kunne tilbyde vores kunder et større udvalg af produkter. På denne måde kan vi ramme og gøre flere kunder interesseret, og herved også stå stærkere på markedet. Budget For at sætte et budget sammen har vi været på internettet og søge priser på forskellige udgifter på fx lokale- og lagerplads samt emballage, produktionsudstyr, revisor, telefon og internet og så videre. Budgettet viser vores regnskab for et år, så vi kan skabe os et overblik over vores omsætning, udgifter og overskud. Som vi har beskrevet tidligere i vores afgrænsning, har vi valgt ikke at gå helt i dybden med vores budget, da vi har fokuseret på at bruge mere tid på andre punkter i projektet. Der er derfor en masse udgifter, som vi ikke har taget hensyn til, men vi har bevidst valgt at tage især de største udgifter med. Vores budget er lavet til, hvor vores virksomhed er om mindst 2 år, og hvor der er ordentligt gang i virksomheden. På et år kommer vi til at have en omsætning på 15.000.000 kr. og udgifter på omkring 10.345.951 kr. Vi har derfor et overskud på 4.654.049 kr. om året. 16 Produkter solgt om måneden Måneder Omsætning om året (kr) 1250 1000 12 15.000.000 Antal Månedlige udgifter (kr) Måneder Udgifter om året (kr) 40.000 15.000 12 12 5000 12 1.920.000 180.000 5.000.000 60.000 Omsætning kr pr. produkt Plakater A3 Plakater A2 Malebøger Madkasse Drikkedunke 300 400 200 200 150 Udgifter Løn 4 Lokaleleje + lagerplads 1 Produktion (1/3 af omsætningen) Emballage til levering 1000 Produktionsudstyr (Computer, grafisk tablet, printer, kabler) Kontorartikler (Stole, borde, kontorartikler) Revisor Markedsføring (20%) Betalingsservice Telefon Abonnement Internet Domæne 1 1 1 1 1 1 Andet Andet 100.000 2700 250.000 1000 2299 299 235 32 12 12 12 12 12 12 30.000 32.400 3.000.000 14.000 2299 3.588 2.820 844 Inkl start- og årligt gebyr Inkl domænenavn 10.345.951 Overskud Overskud om året 15.000.000 10.345.951 4.654.049 4.654.049 For at se vores budget i stor se bilag 4 17 S.W.O.T For at få et overblik og definere vores virksomheds interne styrker og svagheder samt eksterne muligheder og trusler, har vi udarbejdet en S.W.O.T. analyse. Dette kan give et indblik i hvilke fordele og ulemper vores virksomhed har og kan blive udsat for. STRENGTHS - STYRKER • Produkterne er miljøvenlige uden kemiske stoffer, der både .. skader miljøet og børnenes helbred og sundhed • Materialerne som produkterne er lavet af er høj kvalitet • Produkterne er lærerige for børn, og de er hermed med til at .. udvikle dem • Websitet er brugervenligt, så det er muligt at alle interessere.. de kan finde nemt kan navigerere rundt • Vi kommunikerer på de sociale medier • Vi er lettilgængelige, da vi har en webshop, hvilket gør uanset .. hvor du bor i landet har du mulighed for at købe vores pro.. dukter WEAKNESSES - SVAGHEDER • Vores udvalg af produkter er begrænset • Priserne er høje, da de bedste materialer er anvendt • Vi tilbyder ingen innovative produkter, som ikke i forvejen er .. på markedet • Vores målgruppe (børn 4-6 år) er begrænset OPPORTUNITIES - MULIGHEDER • Vi kan udvide webshoppen med flere slags produkter • Fysiske butikker, så køberen kan mærke og se kvaliteten før .. de køber • Markedsføring af vores brand i udlandet • Udvide til en bredere målgruppe for børn i flere aldre THREATS - TRUSLER • Konkurrenter – Andre der forhandler produkter som vores • Priskonkurrence med disse forhandlere KONKLUSION Minimemos styrker er, at vi tilbyder lærerige produkter til børn, som samtidigt er miljøvenlige og lavet af den bedste kvalitet. Vores website er dertil også brugervenligt, så alle kan interesserede købere kan navigere nemt rundt – og det er også muligt at følge med på de sociale medier. Svaghederne er, at vores udvalg af produkter ikke er særlig bredt og innovativt, og vores priser afhænger også af vores materialer, hvilket gør dem høje. Derved har vi også en række konkurrenter som forhandler produkter som vores, hvilket også skaber en priskonkurrence. I fremtiden har vi mulighed for at udvide med flere slags produkter, og også udvide til en bredere målgruppe af børn. Til sidst er det også en mulighed at åbne fysiske butikker og markedsføre vores brand i udlandet. Vi har valgt ikke at lave en T.O.W.S. analyse af vores virksomhed, da vi i opstarten ikke ønsker at ændre vores strategi. Vi vil i stedet for se situationen an. STRENGTHS WEAKNESSES OPPORTUNITIES THREATS 18 Markedsanalyse Til at starte med, har vi udarbejdet en konkurrentanalyse, hvor vi har gjort brug af skydeskivemodellen, som viser hvilke steder hvor der snæver og bred konkurrence mellem vores virksomhed og andre lignende virksomheder. Der er ingen virksomheder, som har præcis det samme sortiment af produkter til samme priser, som samtidigt også er promoveret som miljøvenlige og lærerige. Dog er der en række virksomheder som har samme slags miljøvenlige produkter til både samme priser, lavere priser og højere priser, men ingen af dem markedsfører, at deres produkter er lærerige og styrker børnene til at få en lærerig oplevelse. I forhold til andre virksomheder lægger vi altså stor vægt på, at barnet får en lærerig oplevelse af vores produkter samtidigt med, at de er miljøvenlige og ingen kemiske stoffer indeholder. MARKEDSFØRING AF VORES PRODUKTER Vi har valgt, at markedsføre vores produkter online i en webshop, da flere og flere køber ting på internettet, fordi det er nemt og tidsbesparende. I fremtiden ønsker vi at åbne fysiske butikker for at kunden får mulighed for at mærke og se produkterne i hånden, så det også er muligt at kommunikere ud til dem, der bedst kan lide at købe deres produkter i en fysisk butik. Vi promoverer vores brand igennem annoncer både offline og online og på de sociale medier. Dette gør vi for at få større omtale, og derved også opmærksomhed. Via annoncer i magasiner rammer vi den målgruppe der ikke er aktive på de sociale medier. SOCIALE MEDIER Vælger man at markedsføre sine produkter på de sociale medier, er der mulighed for at sparre med kunderne, og derved kunne forbedre produkter i sortimentet, da man hurtigt får et feedback på disse. Desuden får kunderne også et større indblik i virksomheden, da det er muligt at følge med undervejs. På de sociale medier koster det nødvendigvis ikke noget at markedsføre sine produkter. Dog er det meget tidskrævende, hvis der skal være fremgang i promoveringen, da der oftest skal opdateres med nyheder. Fordelen ved at markedsføre på de sociale medier er altså at både indtjeningen og kundetilfredsheden øges. Vi ønsker at kommunikere ordentligt ud til kunderne og have tæt kundekontakt, hvilket er derfor vi ønsker at markedsføre os på de sociale medier. Det er innovativt at brande sig selv online på den måde, og vi er sikre på at vi kan blive bedre og bedre hvis vi modtager direkte feedback fra kunderne. Se vores facebook profil (link) Se vores instagram profil (link) 19 SKYDESKIVEMODELLEN Skydeskivemodellen viser hvilke konkurrerende virksomheder, som vi skal være opmærksomme på både nu og i fremtiden. I den inderste cirkel ser vi de virksomheder der tilbyder samme produkter til samme målgruppe til nogenlunde samme pris, som vi gør. I næste cirkel har vi virksomheder, som tilbyder samme produktkategori som os. I cirklen efter vises virksomheder som udbyder produkter der dækker samme behov. I yderste cirkel kan man se hvilke virksomheder der udbyder hvad som helst i samme målgruppe og i samme prisklasse. Sportsmaster Disney Bog&Ide Matas IKEA Fermliving H&M Arrogantshop Ilva Sebra Stadium Alfabetdyr Rosenaa Krea BR Designletters Idemøbler LEGO Toys’R’us For at se vores skydeskivemodel i stor se bilag 5 20 MÅLGRUPPE Målgruppeanalyse Vi forhandler en række miljøvenlige og lærerige produkter til børn i alderen 4-6 år, hvilket gør at vores primære målgruppe er forældrene, da det er dem der køber produkterne til deres børn i denne aldersgruppe. Ud over at kigge på de sociodemografiske variabler, bliver køberens holdninger og værdier også vægtet højt når de vælger produkter til deres børn. Ud over de velhavende mødre er der også en lang række mødre, som nødvendigvis ikke har en høj indkomst, der prioriterer miljøet højt og herved bevidst køber miljøvenligt til deres børn. Når man kigger på hvilken slags forælder der er den ideelle køber af sådanne produkter, så er der en række sociodemografiske variabler der spiller ind såsom alder, køn og indkomst, og derudover kan forbrugerens holdninger, værdier og livsstil også have en afgørende rolle i deres køb. Den sekundære målgruppe til vores produkter er børn og andre familiemedlemmer, som kunne være interesseret i at købe miljøvenlige og lærerige produkter såsom bedsteforældre. Vi har derfor været nødsaget til at samle en række informationer ind for at kunne underbygge vores målgruppeanalyse, hvilket vi har gjort ved at besøge en række forhandlere (Grønært, Ønskebørn, BabySam), som tilbyder samme slags produkter til børn. Vi har udspurgt disse om købernes forbrugsmønstre, og hvilken slags købere der er til disse produkter, hvor de alle stort set gav samme svar på hvilken profil køberen har. Den typiske køber af miljøvenlige produkter til børn er mødre i starten af 30’erne, som har en gennemsnitlig til høj indkomst, hvilket altså vil sige, at det primært er kvinder fra middelklassen til overklassen der er købere. Disse mødre har oftest flere penge mellem hænderne, hvilket gør at de har råd til at fokusere på deres børns sundhed og helbred ved netop at købe miljøvenlige produkter uden kemiske stoffer. Personas Ud fra de informationer og den viden vi har indsamlet hos de forskellige børneforhandlere, har vi kunne udforme tre profiler, som oftest køber produkter som disse. DEN MILJØBEVIDSTE Johanne (28) bor alene med sin søn Oliver på 5 år i en andelslejlighed på Østerbro, hvor hun til dagligt også arbejder i arkitektfirma. Johanne har fra en tidlig alder været miljøbevidst anlagt, og når hun handler ind, så vælger hun altid økologisk. Hun går meget op i, at de produkter hun køber til sig selv og sin familie skal være miljørigtige uanset prisen, og vil hellere betale en højere pris end at gå på kompromis med miljøet. 21 Da Johanne er enlig forsørger, er det ikke mange penge hun har mellem hænderne når regningerne er betalt. Hun har lært at prioritere sin indkomst gennem tiden – og miljøet er altid kommet i første række. Når Johanne vælger ting og legetøj til Oliver, vægter hun det også ekstremt højt, at produktmaterialerne er miljøvenlige og uden kemiske stoffer, da hun både ønsker at skåne miljøet, mens hun samtidigt gavner hendes søns helbred og sundhed. “JEG VIL DET BEDSTE FOR MIT BARN” Tina (33) bor i et lille rækkehus i Hørsholm med sin mand Morten og deres datter Isabella på 4 år. Til dagligt arbejder Morten som pedel på en skole i nabobyen, og Tina er uddannet pædagog, og arbejder i en institution med handicappede børn. DEN VELHAVENDE Eva (35) bor i en stor villa i Hellerup med sin mand Jørgen og deres to drenge Karl og William på henholdsvis 4 og 6 år. Til dagligt arbejder Jørgen som direktør i eget firma, og Eva selv arbejder som privat læge. De har begge to en høj indkomst, og deres forbrugsvaner er også herefter. De har begge dyre vaner, og de kunne aldrig drømme om at købe discountvarer og gå ned på kvaliteten. Dette gælder også når de køber ting til deres to børn. De ønsker den højeste og bedste kvalitet de kan få, som selvfølgelig også skal være fri for kemiske og skadelige stoffer. De er villige til at betale den pris for de produkter deres børn skal have så længe materialerne er i top, og så længe at produkterne samtidigt er lærerige for deres børn. Til sammen har de en gennemsnitlig indkomst, og når de handler, er det discountbutikker som Netto og Fakta, så de kan spare penge for at kunne få råd til andre ting, som de prioriterer højere såsom ting til Isabella. Det er hovedsagligt altid Tina der beslutter hvilke ting, legetøj og tøj der skal købes til Isabella, som er parrets første og eneste barn. Disse produkter prioriterer Tina højt, da de skal være det bedste af det bedste, da hun ønsker at forkæle og gøre det bedste for sin datter. Hun går højt op i, at produkterne skal være lærerige for Isabella samtidigt med, at de ikke skal kunne skade hendes sundhed på nogen måde. 22 KOMMUNIKATION Laswells kommunikationsmodel Vi har gjort brug af Laswells kommunikationsmodel for at illustere hvad vi vil kommunikere ud, hvilken målgruppe vi ønsker at kommunikere med, og på hvordan vi har tænkt os at få vores budskab ud. HVEM - AFSENDER Vores online virksomhed Minimemo. SIGER – BUDSKAB: Vi tilbyder en række produkter, som samtidigt med at børnene får en lærerig oplevelse, så er de også miljøvenlige, hvilket både er til gavn for miljøet og for børnenes sundhed. I hvilken kanal – Medie: Online webshop: Vi markedsfører vores produkter på vores online webshop, hvor det er muligt at købe dem. HVEM SIGER HVAD ANNONCE: Vi ønsker at gøre kunderne interesseret i vores produkter gennem annoncer i magasiner, som rammer målgruppen. Disse annoncer ønsker vi også annonceret på diverse blogs for mødre. Blogging er ved at blive meget udbredt fænomen i Danmark, og dette giver i høj grad gode effekter på markedsføringen. SOCIALE MEDIER: Vi er til at finde både på Facebook og Instagram, hvor kunderne kan hente inspiration til deres børneværelser og følge med i udviklingen af nye produkter. TIL HVEM - MODTAGER Vores produkter er udviklet til børn mellem 4-6 år, hvilket gør at vi ønsker at ramme forældre med børn i denne alder. MED HVILKEN EFFEKT - EFFEKT Børnene lærer og får en oplevelse ud af vores produkter samtidigt med, at de er miljøvenlige uden kemiske stoffer. I HVILKEN KANAL TIL HVEM MED HVILKEN EFFEKT Forældre med børn i alderen 4-6 år Børnene lærer og produkterne er miljøvenlige FACEBOOK INSTAGRAM Minimemo Miljøvenlige og lærerige produkter Online webshop, annonce og sociale medier 23 AIDA model Vi har brugt kommunikationsmodellen AIDA på vores website for at beskrive på hvilken måde vores budskab bliver kommunikeret ud, og hvilken effekt vi ønsker websitet skal skabe. ATTENTION Det handler fra første øjekast om at fange brugerens opmærksomhed. For at gøre dette på den bedst mulige måde, har vi valgt at placere en slider øverst på websitet på forsiden, hvor vi viser en række billeder af produkterne og tekst. Da der er bevægelse i slideren, er det med til at skabe en vis opmærksomhed, så brugeren bliver interesseret. INTEREST For at bibeholde brugerens opmærksomhed har vi under slideren på forsiden placeret en række udvalgte produkter, som demonstrerer hvad vi kan tilbyde. Dette skal gøre brugeren mere interesseret i at klikke videre rundt på websitet og se hvad vi yderligere kan tilbyde af miljøvenlige og lærerige produkter. DESIRE På vores slider har vi billeder af børneværelser med vores produkter, hvilket er med til at appellere til brugerens behov. Hertil har vi også indsat inspirerende billeder fra virksomhedens Instagram-profil, som viser hvordan vores produkter kan vises på forskellige børneværelser. Vi har også valgt at indsætte tekst der beskriver, at vores virksomhed går ind for 100% miljøvenlige produkter samtidigt med at det grafiske design også er lærerigt for børnene. Dette appellerer også til brugerens behov for at købe produkter som disse til deres børn. ACTION På forsiden kan brugeren tage aktion ved klikke ”Se mere” under udvalgte produkter. Derudover er der også mulighed for at tilmelde sig et nyhedsbrev og tage kontakt til virksomheden i navigationslinjen. ATTENTION INTEREST DESIRE ACTION 24 ANNONCE Online/Offline annonce For at reklamere og promovere vores nye virksomhed Minimemo, har vi udarbejdet en annonce, som vi tænker skal indrykkes i magasiner både i trykt form og online. Vi ønsker at have annoncer i det trykte magasin ’Vores Børn’ samt online magasinerne ’Børn og Fritid’ og ’Dit Barn’. Eksempel på annonce i “Dit barn” Disse magasiner retter sig specifikt mod den primære målgruppe, som vi ønsker kommunikerer til. Annoncen følger det samme visuelle udseende, som vi udtrykker på vores website for at skabe en genkendelighed. Vi har, som vi også fortæller i vores forretningsplan, valgt at bruge 20% af vores omsætning på markedsføring af vores virksomhed. Dertil har vi valgt, at vores annonce skal fylde 1/1 side i magasinerne. For at se vores annonce i stor se bilag 6 25 Dynamisk banner annonce Da vi også har valgt at fokusere på at markedsføre vores virksomhed på diverse mommy blogs, har vi også udarbejdet et dynamisk banner, som vil blive vist mellem bloggernes indlæg. Det dynamiske banner skal gøre brugeren interesseret og give lyst til at klikke på reklamen for hertil at blive omdirigeret videre til vores website. Link til vores online dynamiske banner annonce. 26 DESIGN BRIEF OPGAVE START 4/5 – 2015 AFLEVERING 29/5 – 2015 KONCEPT Vi er en gruppe multimediedesignerstuderende der har besluttet os for at starte vores egen virksomhed. Vi Minimemo er en online virksomhed der forhandler miljøvenlige og lærerige produkter til børn i alderen 4-6 år. Vi sælger plakater, malebøger, drikkedunke og madkasser, der er 100% miljøvenlige for at gavne dine børns sundhed fra en tidlig alder. Vores grafiske design er derudover med til at skabe en god, udviklende og lærerig barndom for dine børn. MÅL • Vi skal udarbejde et website og en visuel identitet til vores nye .. virksomhed. • Derudover skal vi lave en annonce, der skal gøre reklame for .. .. vores nye virksomhed. Annoncen skal følge samme visuelle .. .. udtryk som de øvrige produkter. MÅLGRUPPEN Den primære målgruppe er forældre med børn mellem 4-6 år. Den sekundære målgruppe er familiemedlemmer med relation til børn i denne alder såsom bedsteforældre. VISUELT DESIGN Farver Vi vil igennem projektet gøre brug af to farver, en lyserød og en mintgrøn. Disse farver vil gå igennem både i vores logo, produkter, website og annonce. For at skabe en ro og kontrast vil vi bruge lyse baggrunde. Billeder og grafik Vi har tænkt os primært at gøre brug af en masse grafiske materiale for at skabe opmærksomhed på vores forskellige medier. Typografi Skrifttypen skal være moderne, og frem for alt letlæselig, så modtageren får mest muligt ud af den skrevne tekst. Logo Vi vil fra bunden lave et enkelt og tidsløst design i virksomhedens farver lyserød og mintgrøn. • Til sidst skal der skrives en rapport der beskriver vores overve.. jelser, analyser, diskussioner, udviklingsproces i forbindelse .. .. .. med projektarbejdet. 27 FARVER Vi har valgt en lyserød og en mintgrøn som vores gennemgående farver, og hertil to grå og en hvid farve for at skabe noget kontrast. Både den lyserøde og mintgrønne farve har vi valgt i en pastelnuance for at give vores visuelle identitet et blidt design. Farverne er behagelige, men stadig iøjenfaldende. Disse to farver fremhæver vores visuelle identitet. De ses i logoet, på alle vores produkter og går igen ved flere elementer på websitet. For at skabe noget kontrast til disse to farver, har vi gjort brug af en mørkegrå, en lysegrå og en hvid farve. Den hvide farve bruger vi som baggrund på websitet. For ikke at blænde brugeren med en helt hvid farve, har vi knækket den lidt og brugt farvekoden #FCFCFC. Til teksten på websitet har vi brugt den mørkegrå farve, da den går godt sammen med pastelfarver. Den sorte farve ville ikke passe ind i vores design, og derfor har vi ikke gjort brug af den, selvom det ville være typisk. Til sidst er der den lysegrå farve som vi bruger til footeren på websitet, hover-effekten på vores submenu og andre små elementer på sitet. LYSERØD CMYK: 8/29/16/0 RGB: 235/197/200 HEX: EBC5C8 MINTGRØN CMYK: 33/0/210 RGB: 183/222/213 HEX: B7DED5 MØRKEGRÅ CMYK: 59/47/44/33 RGB: 96/98/101 HEX: 606265 LYSEGRÅ CMYK: 8/5/6/0 RGB: 239/293/293 HEX: EFEFEF HVID CMYK: 1/1/1/0 RGB: 252/252/252 HEX: FCFCFC Samlet set går vores farver godt med hinanden og skaber en god harmoni. Dette er vigtigt, da det vil give brugeren en god oplevelse, og på den måde få lyst til at købe vores produkter. 28 TYPOGRAFI På vores website gør vi brug af ’Raleway Regular’ og ’Raleway Light’. ’Raleway’ er en sans-serif font. Vi bruger ’Raleway Regular’ til alle overskrifter på sitet for at tydeliggøre, at det er en overskrift, og at man dermed kan adskille det fra brødteksten på sitet. I brødteksten har vi brugt ’Raleway Light’, som er en anelse tyndere i vægten, og på den måde adskiller de sig fra hinanden samtidig med at de egentligt har et ens udseende. Generelt har vi brugt ’Raleway’ som font, da den er letlæselig og har et moderne udtryk. På denne måde fanger vi både målgruppen og gør brug af en font, som ikke ses alle steder. Udover på websitet har vi også gjort brug af den på annoncen for at skabe en genkendelighed i designet. På vores produkter (malebøger og plakater) har vi gjort brug af en lidt anderledes font, nemlig ’Orator Std’, som også er en sans-serif font. Den har vi valgt, da den går godt i spænd med vores simple design og hele konceptet. Denne font vises nemlig kun med store bogstaver, hvilket vi gør brug af, da det er børnene, som skal lære at genkende bogstaverne. RALEWAY Raleway Regular: ABCDEFGHIJKLMNOPQRSTUVWXZYÆØÅ Abcdefghijklmnopqrstuvwxyzæøå 0123456789(!?”#&/;,:.) Raleway Light: ABCDEFGHIJKLMNOPQRSTUVWXZYÆØÅ Abcdefghijklmnopqrstuvwxyzæøå 0123456789(!?”#&/;,:.) Orator Std: ABCDEFGHIJKLMNOPQRSTUVWXZYÆØÅ Abcdefghijklmnopqrstuvwxyzæøå 0123456789(!?”#&/;,:.) 29 LOGOUDVIKLING Da vi først havde valgt vores navn til virksomheden og fundet målgruppen, gik logoudviklingen ellers hurtigt. Vi blev hurtigt enige om, at vores logo skulle visualiseres med vores navn i en håndskrevet skråskrift. Vi fik hurtigt skitseret det i hånden og indsat det i Illustrator, hvor vi kunne tegne det op med værktøjet Malerpensel. Efterfølgende har vi ændret i kurverne, for at give buerne en ensartethed. Ved at udvikle vores logo på denne måde, kan vi nøjes med at have vores navn som logo, da det bliver unikt ved at vi selv udvikler det fra bunden af. Vi har gennem udviklingen hele tiden forholdt os til, at det skulle være simpelt, nemt at huske, tidsløst, samt vise hvem vi er. Da vi allerede vidste at vi ville gå efter to pastelfarver, fandt vi nogle billeder på nettet, som vi kunne bruges som inspiration. Vi har fundet en farvecirkel og nogle neglelakker som er pastelfarvede. På denne måde valgte vi en mintgrøn og lyserød farve til vores logo. Derudover har vi også brugt de to farver, som vores gennemgående farver i designet af vores visuelle identitet. Vi har valgt pastelfarver frem for stærke og iøjnefaldende farver, da farverne skal være behagelige at se på. Vi har valgt både at tage en mintgrøn og en lyserød farve, for at vise, at vores produkter både henvender sig til drenge og piger. 30 LOGOTEST Vi har en logotest for at undersøge hvordan vores logo fungerer og bliver modtaget af brugeren. Derudfra har vi valgt en række spørgsmål, som brugeren har skulle svare på. TESTPERSON 2 Sort/hvid logo TESTPERSON 1 Sort/hvid logo 1. Hvad ser du? ”Minimemo. Det er en flot tekst. Jeg tænker på en lille bitte memoblok.” 2. Hvem tror du står bag dette logo? ”Minimemo. Jeg tænker, at de måske forhandler små memoblokke.” Farve logo 3. Hvad er din første tanke, når du ser logoet med farve? ”Det er noget børnetøj. Fordi at der står mini og farver, tænker jeg at det har noget med børn at gøre.” 4. Hvad tænker du at virksomheden forhandler og hvem forhandler de til? ” Børnetøjs brand, som forhandler til børnetøjsbutikker. Eller måske sådan et lille spil. Evt. En huskeleg, eller noget andet som børn lærer af.” 1. Hvad ser du? ”Minimemo. Det må være et navn på virksomheden. To ord sat sammen.” 2. Hvem tror du står bag dette logo? ”En virksomhed elektronik eller noget legetøj. Det kunne evt. Være sådan noget som Disney. Ordet memo minder mig i hvert fald om elektronik, mens at mini får mig til at tænke på børn.” Farve logo 3. Hvad er din første tanke, når du ser logoet med farve? ”At det er noget som henvender sig til børn, både piger og drenge fordi logoet er sammen sat af de to farver.” 4. Hvad tænker du at virksomheden forhandler og hvem forhandler de til? ”Som sagt må det være noget til børn. Jeg tænker stadig på noget elektronisk legetøj.” 31 TESTPERSON 3 Sort/hvid logo 1. Hvad ser du? ”Et ord sammensat af mini og memo. Det er skrevet i skråskrift.” Efter de tre logotests, som vi har gennemgået, kan vi konkludere at alle tre testpersoner forbinder vores logo med en virksomhed som henvender sig til børn. Der er ikke nogen som direkte kan se hvilke produkter, som vi forhandler. Derimod forbinder de det alle sammen med noget, der har med hukommelse at gøre. På den måde har vi konkluderet, at vores logo fungerer. 2. Hvem tror du står bag dette logo? ”En virksomhed som måske sælger noget småt eller til små, og derfor hedder det mini, mens at memo står for noget med hukommelse.” Farve logo 3. Hvad er din første tanke, når du ser logoet med farve? ”At det må være noget som henvender sig til børn, både drenge og piger.” 4. Hvad tænker du at virksomheden forhandler og hvem forhandler de til? ”Som sagt noget til børn i en tidlig alder. Det kunne evt. være et vendespil, eller en anden form for noget, som børnene lærer af.” 32 PRODUKTUDVIKLING ILLUSTRATIONER Vi har lavet en række dyremotiver, som skal være på vores forskellige produkter. De er udviklet i Adobe Illustrator. Først og fremmest har vi lavet dem med værktøjet ’pen’ i fri hånd samt værktøjet ’ellipse’ og trukket i kurvene med pilen ’direkte markering’. Derfor har vi heller ikke lavet nogle skitser af dyremotiverne. Undervejs at vi brugt linealer til at holde motiverne inden for nogenlunde samme størrelse. Vores valg af farver er sket undervejs i udviklingen. Vi har både forholdt os til dyrenes virkelige farve og sørget for, at de er tonet, så de også går sammen med vores to gennemgående farver lyserød og mintgrøn. Vi har designet disse dyremotiver, så de både har et barnligt udseende, men at barnet stadig vil kunne genkende dyret i virkeligheden. Derfor har det også været vigtigt for os, at vi nemlig gik efter dyrets virkelige farve, former og genkendelige træk. PLAKATER Plakaterne er vores første og førende produkt. Alle plakater er også udviklet i Illustrator. Vi har lavet en række forskellige plakater med både den mintgrønne og lyserøde farve. Baggrunden består enten af den mintgrønne eller lyserøde farve, og dertil har vi lavet et hvidt rektangel i kanten hele vejen rundt for at give det effekten af en ramme. Dette er et fast layout for alle plakaterne. Den første plakat vi lavede var med et dyremotiv og dyrets navn. Her har vi sat dyremotivet i midten og placeret navnet der under. Som skrifttype har vi brugt ’Orator Std’. Det har vi gjort, da det er en meget simpel skrifttype som går godt i spænd med vores simple design og hele konceptet. Denne skrifttype vises nemlig kun med store bogstaver, hvilket vi gør brug af, da det er børnene som skal lære at genkende bogstaverne. Dernæst er vi gået videre med en anden plakat, hvor at vi kun tager forbogstavet og dyremotivet med. F.eks. vises et ’T’ med en tiger. Her har vi bare gjort T’et større i skriften og minimeret dyremotivet. Ved at bruge de samme motiver og et fast layout, skaber vi en ensartethed og skaber en genkendelighed i vores design. MADKASSER OG DRIKKEDUNKE Ligesom med plakaterne er vi gået efter at lave to produkter med alle dyremotiverne, så produktet både fås i den mintgrønne og den lyserøde farve. Både madkassen og drikkedunken er allerede eksisterende produkter, som vi har bearbejdet i Adobe Photoshop og derved skabt vores eget produkt. Vi har brugt ’markeringsværktøjet til at vælge det af produktet som skulle være farve og dernæst brugt ’farveerstatningsværktøjet’ til at give det den mintgrønne eller lyserøde farve. Dernæst har vi indsat dyremotivet og lagt nogle skygger for at for det til at se mere ægte ud. 33 MALEBØGER For at videreudvikle på det med at børnenes læring, har vi valgt også at lave en malebog. Idet at barnet får lov til selv at sidde og tegne og farvelægger øger de indlæringen. Malebogen er fyldt med vores illustrationer af dyremotiverne, deres omgivelser og bogstaver. Malebogen er udviklet i Illustrator. På omslaget er vi gået efter i fast layout, og det er muligt at få malebogen i både den mintgrønne og lyserøde farve samt med et af hvert dyremotiv. Layoutet er opsat på den måde, at vi har lavet en baggrund som ligner ternet papir. Langs venstre kant har vi et smalt rektangel, som enten er mintgrønt eller lyserødt. Dertil er en overskrift hvor at der står ’Malebog’ i samme farve med skrifttypen ’Orator Std’, som vi også bruger på plakaterne. Derudover har placeret dyremotivet centreret med omgivelser som passer til dyret. Hunden står på en græsplæne med et kødben, mens mariehønen står på et blad. Vi har gjort det på denne måde for at børnene også skal lære om dyrenes omgivelser. Skitser LOGO PLACERING PÅ PRODUKTER På plakaterne er logoet at finde på bagsiden, nede i højre hjørne, og på madkasserne og drikkedunkene kan man finde logoet i bunden af produktet. Logoet er her ingraveret, sådan at det ikke bliver slidt af, På malebøgerne finder man logoet på bagsiden, nede i højre hjørne. 34 Eksempler på det endelige design MALEBOG TIGER 35 36 DESIGNUDVIKLING Skitser 37 Wireframes Forside Computer LOGO GLOBAL NAVIGATION SLIDER Forside Tablet LOGO GLOBAL NAVIGATION UDVALGTE PRODUKTER SLIDER Forside Mobil LOGO GLOBAL NAVIGATION UDVALGTE PRODUKTER INSTAGRAM UDVALGTE PRODUKTER INSTAGRAM INSTAGRAM FOOTER FOOTER FOOTER 38 Om Minimemo Computer LOGO OM GLOBAL NAVIGATION Webshop Computer LOGO BILLEDE Nyhedsbrev Computer GLOBAL NAVIGATION LOGO SUBNAVIGATION GLOBAL NAVIGATION NYHEDSBREV ALLE PRODUKTER ALLE PRODUKTER ALLE PRODUKTER ALLE PRODUKTER ALLE PRODUKTER ALLE PRODUKTER FOOTER Kontakt Computer LOGO KONTAKT OG FORMULAR GLOBAL NAVIGATION KONTAKT OG FORMULAR HANDELSBETINGELSER ALLE PRODUKTER ALLE PRODUKTER ALLE PRODUKTER FOOTER FOOTER FOOTER 39 Mock-ups For at se vores mock-up over forsiden i stor se bilag 7 40 Designprincipper ENKELTHED, ENSARTETHED & FARVER I vores design har vi gjort brug af enkelthed og ensartethed. Det har vi gjort ved hjælp af to gennemgående farver og ens former. Vi har skåret alt det unødvendige væk, og på den måde skabt en rød tråd gennem vores samlede design. Dette henvender sig både til forælderene, som er køberne af produktet, men også barnet som er ’brugeren’ af produktet. Hos forælderen drejer det sig om, at vores website er enkelt og ligetil. På den måde er det nemmere både at købe og udforske den række produkter, som vi forhandler hos Minimemo. Barnet derimod er i en aldersgruppe hvor for mange ting og detaljer hurtigt kan skabe forvirring , hvilket bestemt ikke er vores hensigt med konceptet. Vores farver, ensartethed og enkelthed skaber genkendelighed, som både kan ses på produkterne, websitet og annoncen. BRUGBARHED & GRIDS På websitet har vi vægtet brugbarhed frem for fleksibilitet. Vores website henvender sig til forældre som skal købe et produkt. Dette betyder også, at modtageren ikke nødvendigvis er en ekspert online, og derfor skal websitet være brugbart og let at betjene. For både at skabe en enkelthed i layoutet på vores website, har vi gjort brug af grids i vores kodning. Grids holder nemlig elementerne organiseret på en flade for at skabe en grundlæggende struktur, som sørger for orden i kompositionen. Disse grids er delt op i tolv kolonner, og hjælper os med at skabe ensartetheden på forskellige skærme såsom smartphone, tablet og computerskærmen. LINJER Ud over grids har vi også gjort brug af linjer. Først og fremmest i menuen, men også produkterne står på linjer. Objekter som står på linje opfattes nemlig som sammenhørende, hvilket har god sammenhæng med en webshop. Dette skaber også struktur. GENTAGNE EKSPONERINGER Vores design indeholder også gentagne eksponeringer. Da det er et nyt brand, har folk en neutral holdning til det og vores design. Derfor er det nemmere at påvirke dem til den positive holdning. Det har vi gjort ved at forsøge at holde os til et design, som brugeren nemt kan forholde sig til og passer ind i dagligdagen. Vi har gjort brug af de gode gamle drenge- og pigefarver, nemlig mintgrøn og lyserød. Vi understreger ikke nogen steder, at det er delt op i drenge- og pigeprodukter, men sådan har det altid været delt op, og det er derfor nemmere at forholde sig til. Denne gentagne eksponering med farverne kan også have en negativ effekt på en lille del af målgruppen. Der er nemlig flere og flere moderne forældre, som er begyndt at dyrke det med intetkøn, og at det hverken hedder han eller hun, men derimod hen. Dette betyder at de ikke vil ”skubbe” deres barn til at blive påvirket af samfundet og af drenge- og pigeting. 41 PRÆSENTATIONSDESIGN I vores design har vi fokuseret meget på at tydeliggøre, at vi som Minimemo er afsenderen. Gennemgående har vi både på vores website, i annoncen og på produkterne, brugt de to samme farver til at fremhæve vores visuelle identitet. Derudover har vi også brugt ’Raleway Light’ som typografi over alt på websitet, samt i annoncen. ’Raleway Light’ er en sans-serif font, som vi har valgt at bruge, fordi den giver et moderne udseende. På websitet har vi holdt os til et fast layout, og gjort brug af grids i vores kodning, og derved har vi også gjort brug af gestaltlovene; nærhed og lighed. Objekter som står tæt på hinanden bliver opfattet som sammenhængende. På den måde har vi skabt noget luft og på den måde danner objekterne en ramme i sig selv. Det har vi gjort brug af i både menulinjen, boksene på forsiden og ved produkterne i webshoppen. Her har vi også gjort brug af lighed ved at holde de grupperede elementer i samme størrelse og former. Objekter som ligner hinanden, opfattes nemlig også som sammenhængende. I vores faste layout har vi gjort brug af en klassisk opbygning. Vi har startet med vores logo oppe i venstre hjørne, som kan navigere hjem til forsiden. Dernæst har vi en horisontal menu som sidder i højre side. På forsiden har vi en slider i main indholdet, som viser eksempler på produkterne og viser eventuelle tilbud. Formålet med den er at give modtageren en præsentation af hvilke produkter vi forhandler, og give inspiration til børneværelset. 140 px 140 px 140 px 140 px 140 px 140 px 140 px 140 px 140 px 42 INFORMATIONSDESIGN I vores design af websitet, har vi lagt fokus på at vores informationer skal være konkrete og overskuelige. Vi har kigget på hvad der er vigtigt at informere, og hvor at kunden skal finde informationerne. Vores menupunkter har vi holdt til minimum for at gøre det nemt for brugeren at finde det som de søger. På produkternes individuelle sider har vi givet en kort beskrivelse af produktet, som forklarer hvorfor produktet er lærerigt og miljøvenligt. Dernæst tydeliggjort produktets pris, farve og størrelse. På siden ’Om Minimemo’ har vi fokuseret kort og præcist på at beskrive hvem vi er, og hvad vores grundværdier og formål med virksomheden er. Dette har vi nemlig undersøgt os frem til, at målgruppen er interesseret i at vide. Ved disse informationer skaber vi også troværdighed og loyalitet overfor vores kunder. Da vi har holdt vores informationer på minimum, har vi også lavet en kontaktside, som gør det nemt tilgængeligt for kunden, at kontakte os. Her har vi både oplyst vores telefonnummer, e-mailadresse og hovedkontorets adresse. For at skabe direkte kontakt fra sitet, har vi også lavet en kontaktformular. 43 NAVIGATIONSDESIGN Vi har lavet en global navigation, som er horisontal og placeret oppe i højre side af websitet. Vi har fokuseret på at imødekomme brugerens forventninger til, hvordan en menu ser ud og fungerer. Derfor har vi også vægtet funktionalitet frem for et fancy design. PLAKATER Vi har valgt at gøre global navigationen horisontal frem for vertikal, da det giver et bedre overblik for brugeren. Man læser fra venstre mod højre, og derfor har vi sat menupunkterne i rækkefølge efter relevans. For at gøre informationsarkitekturen mere logisk og tydelig er menupunkterne navngivet forståeligt. Af udseende har global navigationen hverken nogen baggrundsfarve eller border. Som tidligere nævnt, har vi nemlig gjort brug af gestaltlovene; nærhed og lighed. Det betyder også, at vi har kunne nøjes med at gøre brug af underline på det menupunkt, som man befinder sig på samt når man hover. På webshoppens side har vi gjort brug af en subnavigation, som giver brugeren mulighed for at vælge mellem de forskellige produkter. Den har vi valgt at gøre anderledes af udseende for at tydeliggøre, at det er en subnavigation. Dog ligner den stadig en menu og er også horisontal. Udover menuerne har vi lavet en simpel brødkrummesti, så brugeren hele tiden har mulighed for at vide hvor at de er, og linke tilbage til hvor de kom fra. 44 Sitemap Minimemo Forside Om Minimemo Webshop Nyhedsbrev Kontakt Plakater Plakater undersider Malebøger Malebøger undersider Madkasser Madkasser undersider Drikkedunke Drikkedunke undersider 45 DESIGNMANUAL RETNINGSLINJER LOGO Logoet findes kun i én version. LOGO / Gør altid brug af Minimemos originale logo LOGOFARVE / Gør altid brug af logoets originale farver: lyserød (#ebc5c8) og mintgrøn (#b7ded5) Logoet er Minimemos navn skrevet i en håndskrevet skråskrift. Logoet optræder i farverne: lyserød (#ebc5c8) og mintgrøn (#b7ded5). FARVER / Brug Minimemos farvepalet. Farverne må sammensættes frit efter behov. Logoets skrift er sammenhængende, men adskilles ved brug af de to farver. TYPOGRAFI / Brug altid Minimemos skrifttyper. Den primære skrifttype er ’Raleway Regular’, som bruges til overskrifter og kortere tekster. Den sekundære skrifttype er ’Raleway Light’, som bruges til brødtekst. Logoet skal optræde på alle brugte medier. På plakater og malebøger er logoet placeret på bagsiden i højre hjørne. Mens at det på madkasser og drikkedunke er at finde indgraveret i bunden af produktet. GRAFIK OG MOTIVER / Gør altid brug af motiverne barnlige udseende og dyrets virkelige farver. VIRKEMIDLER / Gør altid brug af ensartethed og genkendelighed PRODUKTER / Brug altid de samme produkter, ved forøgelse af motiver. 46 FARVER Konceptet for Minimemos design er at den visuelle identitet skal tydeliggøres. PRIMÆRE FARVER LYSERØD CMYK: 8/29/16/0 RGB: 235/197/200 HEX: EBC5C8 MINTGRØN CMYK: 33/0/210 RGB: 183/222/213 HEX: B7DED5 HVID CMYK: 1/1/1/0 RGB: 252/252/252 HEX: FCFCFC Vores primære farver bliver brugt i logoet og på vores produkter. Derudover skal de primære farver bruges til at tydeliggøre elementer eller skabe opmærksomhed i annoncer og andet markedsføring. Vores sekundære farver bruges til baggrund på websitet, tekster og andre simple elementer. Produkterne skal altid besidde én primær farve, mens at produktets motiver altid skal være dyrets virkelige farver i en pastel nuance. SEKUNDÆRE FARVER MØRKEGRÅ CMYK: 59/47/44/33 RGB: 96/98/101 HEX: 606265 LYSEGRÅ CMYK: 8/5/6/0 RGB: 239/293/293 HEX: EFEFEF 47 TYPOGRAFI Minimemos primære skrifttype er ’Raleway Regular’, som er en stilren sans-serif font. Den har et moderne udseende som er præget af den tynde vægt. Den bruges til overskrifter og kortere tekst, som f.eks. i annoncen. Minimemos sekundære skrifttype er ’Raleway Light’, som har samme udseende som ’Raleway Regular’, men har en tyndere vægt. Den er letlæselig, og derfor gør vi brug af den i vores brødtekster. I vores produkter gør vi altid brug af ’Orator Std’. Det er også en stilfuld sans-serif font, men vises kun i store bogstaver. PRIMÆR SKRIFTTYPE Raleway Regular: ABCDEFGHIJKLMNOPQRSTUVWXZYÆØÅ Abcdefghijklmnopqrstuvwxyzæøå 0123456789(!?”#&/;,:.) PRODUKTETS SKRIFTTYPE Orator Std: ABCDEFGHIJKLMNOPQRSTUVWXZYÆØÅ Abcdefghijklmnopqrstuvwxyzæøå 0123456789(!?”#&/;,:.) GRAFIK OG MOTIVER Alle Minimemos produkter skal besidde et dyremotiv. Et produkt skal findes i én af hver primær farve, samt med et af hvert dyremotiv. Skal sortimentet udvides, skal dyremotiverne stadig udvikles i samme stil med et barnligt udseende. Samtidig skal dyret altid vises med dyrets virkelige farve i en pastel nuance. Sortimentet af produkter kan altid udvides, så længe at motiverne og elementer altid bliver placeret i samme position. SEKUNDÆRE SKRIFTTYPE Raleway Light: ABCDEFGHIJKLMNOPQRSTUVWXZYÆØÅ Abcdefghijklmnopqrstuvwxyzæøå 0123456789(!?”#&/;,:.) 48 VIRKEMIDLER Som virkemidler skal der altid gøres brug af ensartethed og lighed. Dette skaber genkendelighed i vores design, og er derfor vigtigt at forholde sig til. Det drejer sig bl.a. om webshoppen, som viser Minimemos produkter, hvor at den samme størrelse benyttes på alle produkterne. 49 INTERAKTIONSUDVIKLING Pre-processed CSS Vi har valgt at bruge pre-processed css - LESS til at style vores website, da vi her har haft mulighed for at gøre brug af variabler i kodningen. Dette har gjort det nemmere i det lange løb, hvis vi har skulle ændre noget generelt på websitet fx en farve. Dette vil også være en fordel samt tidsbesparende i fremtiden, sådan at vi ikke skal ændre koderne i hele CSS’en, men kun få steder. Vi har haft vores LESS filer gennem en compiler der har genereret vores CSS filer, som vi har samlet i et dokument, som vi kalder ”styles.css” for at gøre det mere struktureret. Vores ”style.css” dokument ser således ud: Eksempel: I vores ”base.less” dokument har vi stylet hele vores website, men vi har stadig bevaret en struktur ved at holde undersiderne adskilt med kommentarer. Eksempel: // Index // Om // Shop // Nyhedsbrev // Kontakt I ”tablet.less” og ”mobile.less” har vi stylet indholdet på websitet, så den virker på de tre forskellige skærmstørrelser; computer, tablet og smartphone. @import “simplegrid.less”; @import “base.less”; @import “tablet.less”; @import “mobile.less”; 50 Responsivt design Vi har valgt at kode vores website ved hjælp af Simpel Grid, som er udviklet af Dallas Bass. Simple Grid gør det mere simpelt at arbejde med responsive layouts, da hele websitet består af kolonner placeret ud fra valgte antal. Vi har valgt at lave vores website, så den fungerer på tre forskellige skærmstørrelser. Eksempel: // TABLET CSS @media screen and (min-width: 768px) and (max-width: 940px) .col-3-12 {.col-4-12;} //mixin with less .col-9-12 {.col-1-1;} .col-2-12 {.col-3-12;} • Stor skærm (Computer størrelse): Over 940px i bredden • Mellem skærm: (Tablet vertikal): Over 768px og under 939px i bredden Som man kan i eksemplet, har vi valgt at ændre de kolonner vi i vores HTML-dokument har sat til at skulle fylde 3-12 kolonner, til i stedet at fylde 4-12 kolonner på vores tablet. • Lille skærm: (Smartphone vertikal): Under 767px i bredden Vi har i vores ”simplegrid.less” dokument på forhånd bestemt alle måleforholdene for vores kolonner. Nederst i dokumentet har vi selv bestemt hvordan vi vil have kolonnerne til at ændre sig i forhold til, om vi ser siden på en computer, tablet eller smartphone. Nedenfor ses eksempler på vores responsivt design. Eksempel: // MOBIL CSS @media screen and (max-width: 767px) .col-5-12 {.col-1-1;} .col-7-12 {.col-1-1;} .col-4-12 {.col-1-1;} .col-6-12 {.col-1-1;} Som man kan i eksemplet, har vi valgt at ændre de kolonner vi i vores HTML-dokument har sat til at skulle fylde 5-12 kolonner, til i stedet at fylde 1-1 kolonner på vores tablet. 51 SEO -Søgemaskineoptimering Det er en vigtig del i både salg og markedsføring, at ens website kommer op i søgeresultaterne på de forskellige søgemaskiner. Derfor har vi valgt at optimere vores website til søgemaskiner for at rangere så højt som muligt. Udover online og offline markedsføring af virksomheden, er der en række ting man kan gøre for at ens website ranker højere på søgemaskiner, som derved resultere i højere besøgstal. Til at starte med har vi optimeret vores url’er for at gøre det mere overskueligt og søgevenligt for brugeren. Vores url’er er korte, mens de samtidigt indeholder keywords der giver mening. Eksempel: http://minimemo.metteline.nu/madkasse_elefant_lyseroed. html Dernæst har vi lavet unikke titler med relevante søgeord på hver side på websitet. Titlerne er dem der bliver vist på søgemaskinerne, og derved dem der skal være fængende for at tiltrække besøgende. Vi har også valgt at gøre brug af ’meta tags’ i <head>, selvom disse ikke har nogen effekt på at rangeringen på søgemaskinerne. Dog vil disse stadig dukke op i søgeresultaterne, hvilket gør det vigtigt at have en tekst der fanger køberen. Eksempel: <meta name=”description” content=”Vores madkasser er uden kemiske stoffer, som både er til gavn for miljøet og dit barns sundhed. Vi har flere forskellige farver og motiver. Vi tilbyder også plakater, malebøger og drikkedunke.”> Til sidst har vi også skrevet ’alt tags’ på alle vores billeder, da søgemaskinerne ikke kigger på billederne, men derimod på disse ’alt tags’. Vores ’alt tags’ indeholder relevante keywords for hvad billedet illustrerer. Eksempel: <img id=”produktbilledet” src=”img/plakat_tiger_blaa.png” alt=”plakat_tiger”> Eksempel: <title>Minimemo | Plakater – malebøger – madkasser – drikkedunke. Bestil online nu – hurtig levering! </title> 52 jQuery Vi har blandt andet brugt jQuery til at lave vores webshopbilleder på computerversionen, sådan at man kan hover over billedet og få mere information vist i en gennemsigtig div. Når man trykker på den gennemsigtige div kommer man videre ind på produktbeskrivelsen. Eksempel på hovereffekt: Eksempel: HTML <div class=”col-3-12”> <section class=”produkter”> <div class=”imgHolder”> <a href=”plaket_t_blaa.html”> <img class=”shopfoto” src=”img/plakat_t_blaa. png” alt=”shop”> <div class=”semere”> <h3>SE MERE</h3> </div> </a> <a href=”plaket_t_blaa.html”> <span>”Tiger med T”<br><br>SE MERE</span> <div class=”billedtekstBG”></div> </a> </div> </section> </div> jQuery $(document).ready(function(){ $(‘#gallery span’).hide(); $(‘.billedtekstBG’).hide(); $(‘#gallery .imgHolder’).mouseenter(function(){ $(this).find(‘span, .billedtekstBG’).show(); }); $(‘#gallery .imgHolder’).mouseleave(function(){ $(this).find(‘span, .billedtekstBG’).fadeOut(‘fast’); }); • I jQuery koden bliver der i starten bestemt, at når siden er klar skal den Span der ligger inde i <div id=”gallery”> samt <div class=”billedtekstBG”> gemmes. • Herefter bliver der med en .mouseenter funktion bestemt, at når vi fører musen over skal <div class=”imgHolder”> der ligger inde i <div id=”gallery”> finde (‘span, .billedtekstBG’). og vise dem. • Bagefter vil .mouseleave funktionen at de samme elementer skal forsvinde igen ved hjælp af .fadeOut(‘fast’); 53 Vi bruger også jQuery til vores hamburgermenu, der kun er vist på mobilsiden. Eksempel på hamburgermenu: HTML <div class=”mobile-nav”> <div class=”menu-btn” id=”menu-btn”> <div></div> <span></span> <span></span> <span></span> </div> jQuery $( ‘.menu-btn’ ).click(function(){ $(‘.responsive-menu’).toggleClass(‘expand’) }); • Når man klikker på hamburgermenuen (menu-btn) bliver klassen ”expand” tilføjet til ”responsive-menu”. •.toggleClass skifter mellem hændelsesforløbet når man klikker på knappen. Den gør altså, at den bliver vist og bliver lukket hver gang man klikker på den. <div class=”responsive-menu hide-on-tablet hide-on-com”> <ul> <li><a class=”aktiv” href=”index.html”><p>FORSIDE</p></a></li> <li><a href=”om.html”><p>OM MINIMEMO</p></a></li> <li><a href=”shop.html”><p>WEBSHOP</p></a></li> <li><a href=”shop.html”><p>- PLAKATER</p></a></li> <li><a href=”shop.html”><p>- MADKASSER</p></a></li> <li><a href=”shop.html”><p>- MALEBØGER</p></a></li> <li><a href=”shop.html”><p>- DRIKKEDUNKE</p></a></li> <li><a href=”nyhedsbrev.php”><p>NYHEDSBREV</p></a></li> <li><a href=”kontakt.php”><p>KONTAKT</p></a></li> </ul> </div> </div> 54 Database Når brugeren tilmelder sig et nyhedsbrev, så ser det således ud i vores database med deres informationer: Vi havde fra start af et ønske om, at når brugeren tilmeldte sig nyhedsbrevet, så skulle deres fornavn, efternavn og e-mailadresse komme ind i en database, så vi nemmere kunne holde styr på informationerne. Vi gjorde brug af Adobe Dreamweaver til dette formål, hvor vi oprettede et local site til at starte med. Vi brugte xampp som server, som var vores localhost. Til at starte med oprettede vi en database på phpMyAdmin. Denne kaldte vi for ’minimemo’ og heri oprettede vi en table kaldet ’newsletter’ med følgende: ’id’, ’fornavn’, ’efternavn’ og ’email’. Grunden til, at vi har valgt både fornavn og efternavn, er så vi har mulighed for at gøre nyhedsbreve personlige ved at skrive kun fornavnet. Til sidst eksporterede vi denne til en live server dog i en ny database ved navn ’metteline_nu_db, da vi havde problemer med at flytte hele databasen, flyttede vi kun vores table ’newsletter’ til en ny database. På billedet kan man se, at ’id’ er vores primary key, og hvilke andre funktioner vi har tildelt de forskellige kolonner i tabellen. 55 PHP/SQL Da vi skulle forbinde vores database til vores php script lavede vi først et eksternt script hvor vi definerede de konstanter der skulle bruges til databasen: <?php define(“HOSTNAME”, “mysql24.unoeuro.com”); define(“MSQLUSER”, “metteline_nu”); define(“MYSQLPASS”, ”tkemz3”); define(“MYSQLDB”, “metteline_nu_db”); ?> Vi indsatte require_once(‘mm_const.php’); i vores nye php-fil i toppen for at få det nye til loade disse konstanter fra det eksterne php script. Vi lavede en form, hvor brugeren skulle kunne taste sine informationer ind og klikke på ”TILMELD”, hvor de herefter vil blive sendt ind i databasen via serveren: <form id=”signup” method=”post” action=”<?php echo $_ SERVER[‘PHP_SELF’]?>”> <p> <label for=”fornavn”>Fornavn:*</label> <input type=”text” name=”fornavn” id=”fornavn” data-validation=”required”> </p> <p> <label for=”efternavn”>Efternavn:*</label> <input type=”text” name=”efternavn” id=”efternavn” data-validation=”required”> </p> <p> <label for=”email”>E-mail:*</label><input type=”text” name=”email” id=”email” data-validation=”email”> </p> <p> <input class=”knapkontakt” type=”submit” name=”submit” value=”TILMELD”> </p> </form> 56 For at få dette til at fungere indsatte vi dette php script i toppen af vores php-dokument for forbinde til databasen når ”TILMELD”-knappen bliver trykket. if(isset($_POST[‘submit’])) { $connection = new mysqli(HOSTNAME, MSQLUSER, MYSQLPASS, MYSQLDB); if($connection->connect_error){ die($connection->connect_error); }else { echo “Forbundet!”; } Herefter skabte vi forbindelse mellem formen og de forskellige data i vores table i databasen. $fornavn = mysqli_real_escape_string($connection, $_ POST[‘fornavn’]); $efternavn = mysqli_real_escape_string($connection, $_ POST[‘efternavn’]); $email = mysqli_real_escape_string($connection, $_ POST[‘email’]); Dertil ønskede vi også, at databasen skulle melde tilbage, hvis en bruger ønskede at tilmelde sig nyhedsbrevet med en email der allerede var tilmeldt. Brugeren ville her for at vide, at de allerede var tilmeldt nyhedsbrevet – og så have mulighed for at bruge en anden email i stedet. $exists = 0; $check = $connection->query(“SELECT email from newsletter WHERE email = ‘$email’ LIMIT 1”); if($check->num_rows == 1){ $exists = 1; if($exists == 1) echo “<p>Du er allerede tilmeldt vores nyhedsbrev!</p>”; else { $insert = “INSERT INTO newsletter(id, fornavn, efternavn, email) VALUES (NULL, ‘$fornavn’, ‘$efternavn’, ‘$email’)”; if($connection->query($insert)){ echo “Du er nu tilmeldt vores nyhedsbrev!”; }else { echo “Ups! Der gik noget galt!”; }} } Samme fremgangsmåde har vi brugt til vores kontaktformular, men denne har vi ikke forbundet til databasen. Vi har gjort følgende, så når brugeren trykker på ”SEND”-knappen, så bliver beskeden sendt til vores email, hvor vi kan læse brugerens oplysninger og kommentar. 57 Hertil dette script som er indsat i <head> <?php> $to = ’[email protected]; $subject = ‘Henvendelse til Minimemo’; $headers = “From: [email protected]\r\n”; $headers .= “Content-type: text/plain; charset=utf-8”; $authenticate = null; $message = “Tak for din besked - vi vender straks tilbage!”; $mailSent = false; if(isset($_POST[‘send’])){ $mailSent = mail($to, $subject, $message, $headers, $authenticate); } ?> <script type=”text/javascript”> $(document).ready(function(){ var myLanguage = { badEmail : “<br>” + ‘Udfyld venligst e-mail adresse her!’, requiredFields : “<br>” + ‘Udfyld venligst!’, } $.validate({language : myLanguage}); }); </script> JQUERY -FORM VALIDERING Til de forskellige forms vi har udviklet, har vi gjort brug af javascript til at validere de forskellige informationer. Hvis relevante felter ikke er udfyldt ordentligt, kommer der en note frem med hvad der mangler at blive udfyldt. Eksempler på koderne: <input type=”text” name=”fornavn” id=”fornavn” data-validation=”required”> <input type=”text” name=”email” id=”email” data-validation=”email”> 58 Use-case ER-diagram Figuren illustrerer hvad de to aktører kan foretage sig og hvad deres funktioner er på websitet. Brugeren kan finde forskellige produkter på websitet samt agere ved at tilmelde nyhedsbrev og tage kontakt til Minimemo i kontaktformularen. Minimemo kan oprette flere produkter på webshoppen, sende nyhedsbreve ud, slette brugeren fra nyhedsbrevslisten i databasen hvis dette ønskes og være til hjælp i kundeservice. Vores ER-diagram illusterer vores database, som består af en række tabeller som viser hvilke data der er påkrævet. Dette gør det mere overskueligt at forstå, hvordan systemet er bygget op. Finde produkter newsletter PK Oprette produkter MINIMEMO BRUGER Tilmeld nyhedsbrev Sende nyhedsbrev id fornavn efternavn email Slette nyhedsbrevs registrering Tag kontakt i formularen Kundeservice For at se vores use-case i stor se bilag 7 59 User-story For at illustrere på hvilken måde vores webforms fungerer og fejlmelder hvis der skulle opstå problemer undervejs (form-validering), har vi udarbejdet en user-story for registering af nyhedsbrev og kontaktoplysninger i formularen. For at brugerens rigtige oplysninger i form af navn og email adresse kommer igennem til os, har vi kodet formularen sådan at systemet fortæller, hvis der opstår en fejl undervejs i registeringen ved at fejlmelde informationerne som er forkerte. Ønsker brugeren at tilmelde sig et nyhedsbrev for at holde sig opdateret, kan dette gøres nemt under ’Nyhedsbrev’, eller har brugeren et spørgsmål til os, kan vi kontaktes blandt andet i kontaktformularen under ”Kontakt” i navigationslinjen. Det er ikke muligt at tilmelde sig et nyhedsbrev, hvis ens mail i forvejen er i systemet. Dertil kommer denne fejlmeddelse: Desuden er det påkrævet at skrive sit navn og emailadresse, og hvis disse ikke er korrekt opfyldt, kommer denne fejlmeddelse: 60 Progressive enhancement Slideshow og annonce Progressive enhancement bygger på 3 lag På vores website har vi et slideshow, som er lavet i Edge Animate. Billederne skifter ved at de henholdvis har en opacity på 0 eller 100. Struktur - omhandler kun HTML Design – omhandler kun CSS → eksternt stylesheet Behaviour – omhandler Javascript osv. → eksternt javascript For at undgå at lave inline styles har vi benyttet os at progressive enhancement. Dette betyder at vi sikrer os at alle lagene fungerer uafhængigt af hinanden. Det vil altså sige, at vi har separeret alle HTML, CSS og og JS filer fra hinanden. På modellen til højre ses, hvordan vi har struktureret vores mapper og filer. Derudover har vi også lavet en online dynamisk banner annonce der er 30 sek lang. Vi lavede et langt billede i Photoshop, hvorefter vi satte det ind i Edge Animate og herefter køre billedet hendad som et banner Hvad de begge har til fælles er, at vi har sørget for, at de bliver ved med at fortsætte i en uendelighed. Nedenfor ses koden vi har brugt, for at de ikke stopper efter sidste billede, men som sagt bare fortsætter. Mapper CSS HTML & PHP sider HTML & PHP JAVASCRIPT IMG 61 BRUGERTEST www.minimemo.metteline.nu INDLEDENDE SPØRGSMÅL Hvad er dit navn? Hvor gammel er du? Hvad er din civilstatus? Hvilken uddannelse har du/ i gang med? Hvor bor du? Hvad er dine fritidsinteresser? Kan du lide sushi? SCENARIE 1: Du har hørt om Minimemo, som er en lille virksomhed der sælger miljøvenlige og lærerige produkter. Din veninde har lige købt en plakat til datter. Plakaten er lyserød og der er mariehøne og et M for Mariehøne. Du overvejer også bestille denne plakat, så du går ind og tjekker prisen på plakaten i en A2-størrelse. SCENARIE 3: Undervejs bliver du i tvivl, og vil egentlig gerne vide om produkter evt. Forhandles i nogle butikker i nærheden af dig. Så du vælger at tage kontakt til Minimemo. SCENARIE 4: Efter dit køb, vil du gerne følge med i hvad der ellers sker for Minimemo. Vælg hvorledes at du vil gøre dette. EVALUERING: På en skala fra 1-10, hvor nemt synes du at det er at finde rundt på Minimemos hjemmeside? SCENARIE 2: Da du har fundet prisen, vil du også gerne købe en tilhørende malebog. Så den går du ind og finder. 62 KONKLUSION For at motivere forældre til at købe en række miljøvenlige og lærerige produkter til deres børn gennem online/offline kommunikation, har vi udviklet et online website med en dertilhørende webshop, hvor vi har illustreret hvilke produkter vi kan tilbyde samt lagt stor vægt på, at vi er miljøvenlige både til gavn for miljøet og børnenes sundhed. Det grafiske design på produkterne skal give børnene en lærerig og brugbar oplevelse, og dertil også motivere forældrene til blive mere miljøbevidste med hensyn til valg af produkter til deres børn. Af offline kommunikation vil vi indrykke reklameannoncer for vores virksomhed og produkter i magasiner, som rammer målgruppen for at påvirke dem til, at vores produkter er det bedste valg til deres børn. Vores sekundære målgruppe er børn og andre familiemedlemmer der har en relation til børnene såsom bedsteforældre. Disse kunne netop være interesseret i at forkæle deres børnebørn med miljøvenlige og lærerige produkter. Vi mente, at det var mest hensigtsmæssigt at markedsføre vores virksomhed både igennem vores webshop og i magasiner, men også igennem de sociale medier. Vi havde fra start af et klart ønske om at kommunikere ordentligt ud til kunderne og have tæt kundekontakt, hvilket var muligt at få på de sociale medier. På de sociale medier kan vi nemlig kommunikere direkte med kunden både gennem markedsføring, men også kundeservice, da det er muligt at chatte direkte med kunden. Vores virksomhed henvender sig til forældre med børn i alderen 4-6 år. Vi har indsamlet en række informationer hos forskellige forhandlere, der tilbyder de samme slags produkter til børn for at underbygge vores målgruppeanalyse. Kigger man på forældrene, er det oftest mødrene der køber produkterne til deres børn. Mødrene er typisk i starten af 30’erne og har en gennemsnitlig til høj indkomst, hvilket altså vil sige, at det primært er kvinder fra middelklassen til overklassen, der er købere. Disse mødre har oftest flere penge mellem hænderne, hvilket gør at de har råd til at fokusere på deres børns sundhed og helbred ved netop at købe miljøvenlige produkter uden kemiske stoffer. 63 LITTERATURLISTE BØGER 20 Designprincipper af Ian Wisler-Poulsen Grafisk Litteratur, 1. udgave, 2012 ISBN-nummer: 978-87-91171-75-8 Digital Media Management af Louise Harder Fischer & Marie Oosterbaan Nyt Teknisk Forlag, 3. udgave, 2010 ISBN-nummer: 978-87-571-2723-2 Usability af Ian Wisler-Poulsen & Ole Gregersen Grafisk Litteratur, 1. udgave, 2011 ISBN-nummer: 978-87-91171-93-2 WEBSITES - Simple Grid udvikling http://thisisdallas.github.io/Simple-Grid/ (besøgt d. 06/05/15) - Guides til interaktionsudvikling http://www.w3schools.com (besøgt i perioden 07/05/1528/05/15) - Kompeto.dk – risikoanalyse model (teori) http://www.kompeto.dk/bloggen/risikoanalysen-lige-savigtig-i-et-frivilligt-projekt-som-i-en-virksomhed/ (besøgt d. 07/05/15) - Viden om Scrum-metoden https://www.scrumalliance.org/scrum/media/ScrumAllianceMedia/Files%20and%20PDFs/Why%20Scrum/Core%20 Scrum%20Translations/Core-Scrum-Danish.pdf (besøgt d. 08/05/15) - Ph.d. Lene Nielsen: ”10 trin til personas” (analyse) http://personas.dk/wp-content/10-trin-til-personas11.pdf (besøgt d. 11/05/15) - Opstart af virksomhed – forretningsplan (teori) https://startvaekst.virk.dk/opstart (besøgt d. 13/05/1515/05/15) - Kristeligt Dagblad (Ritzau): ”Flere og flere køber økologi” Udgivet: 23/05/15 (artikel) http://www.kristeligt-dagblad.dk/danmark/oekologi-bliver-billigere-og-salget-stiger (besøgt d. 14/05/15) - Skydeskivemodellen (markedsanalyse) http://hhxelev.dk/skydeskivemodellen/ (besøgt d. 20/05/15) 64 - Magasiner og e-magasiner til annonceringen http://voresborn.dk/ (besøgt d. 15/05/15) http://bornogfritid.dk/ (besøgt d. 15/05/15) http://issuu.com/freemags/docs/ditbarn9 (besøgt d. 15/05/15) - Størrelse til annoncen http://cdn.system.ipapercms.dk/iPaper/Files/3ee3ca7b-5fa242bd-a290-76e3982d44be.jpg?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cDovL2Nkbi5zeXN0ZW0uaXBhcGVyY21zLmRrL2lQYXBlci9GaWxlcy8qIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNDY0MjY1NzM1fX19XX0_&Signature=SPUGjIrRcVEc8~NDZOlZKYGKfoRibPKs74W7E--r6tSKcw9v1PVZpTRuqh8GGbwaYaIcRMJGlgh~m8x2N7Hm2WkAnmbpJwykNWHfVnOOkR~8khZPXN4oCZTw58OsG2-akOn1NsQ--tpdIrJh2cZAsVXEZKGgoMYI8iMRPiQI2p8_&Key-Pair-Id=APKAIPGQN6BDBMBZ2LCA&response-content-disposition=inline%3Bfilename%3DMediakit_2014_Teknisk_info_ugeblade_UK.jpg (besøgt d. 18/05/15) - Hamburger-menu med CSS og jQuery (guide) http://www.internetkultur.at/simple-hamburger-drop-downmenu-with-css-and-jquery/ (besøgt d. 20/05/15) - Søgemaskineoptimering http://seoanalyst.dk/det-perfekte-seo-title-tag/ (besøgt d. 22/05/15) - Sociale medier – markedsføring (vejledning) http://www.atak.dk/sociale-medier/ (besøgt d. 25/05/15) https://www.ibiz-center.dk/viden-om-it/sociale-medier/ hvad-er-sociale-medier (besøgt d. 25/05/15) BILLEDER - Persona: Den miljøvenlige (Søgeord på Google: Miljø kvinde) http://www.lf.dk/~/media/ARKIV/Mennesker/I%20landbrug/ Landmand_kvinde_900_503.ashx?w=833 - Persona: ”Jeg vil det bedste for mit barn” (Søgeord på Google: Stereotype mødre) http://voresborn.dk/wp-content/uploads/sites/3/2015/02/ mette-leder.jpg - Persona: Den velhavende (Søgeord på Google: Karrierekvinde) http://wizemeup.dk/wordpress/wp-content/uploads/2015/01/R7P0254.jpg - Navigationsdesign (teori) http://jboye.com/da/blog/navigationsdesign-pa-store-informationswebsites-sadan/ (besøgt d. 21/05/15) 65 INSPIRATION http://www.sebra.dk - Inspiration til at udvikle grafisk design til madkasser og drikkedunke http://www.alfabetdyr.dk - Inspiration til at opsætningen af website og plakater http://www.arrogantshop.dk - Inspiration til at opsætningen af website Billeder brugt til billedredigering til instagram-fotos: Billede 1 Billede 2 Billede 3 Billede 4 Billede 5 Billede 6 Billede 7 Billede 8 Billeder brugt til annoncer: http://thedesigninspiration.com/patterns/white-wall/ http://www.luxoliving.dk/ferm-living-wooden-frame-roegeteg/ http://www.luxoliving.dk/ferm-living-wallsticker-mini-butterflies/ http://www.houseandhold.com/ferm-living-mini-hearts-wallsticker-black.html Billeder brugt til andet billedredigering: http://www.hukit.dk Billede 1 Billeder brugt til produkter http://www.sebra.dk/da/drikkedunk-village-dreng/ http://www.sebra.dk/da/madkasse-village-dreng-465/ 66 BILAG 67 WBS - Bilag 1 Indledende Minimemo Indledende design Website Rapport Produkter Responsivt design Rapportopsætning Annonce (2 timer) (32 timer) Målgruppe Plakater (3 timer) (32 timer) Idéudvikling Moodboard (8 timer) (2 timer) Brainstorming Kodning (8 timer) Skitser, wireframes & mock-ups (8 timer) Problemformulering Designvalg (16 timer) (3 timer) Analyser, metoder & teorier (68 timer) Malebøger (8 timer) Designprincipper PBS Logo Database Designbrief Drikkedunke SEO optimering Designmanual Madkasser (2 timer) WBS (3 timer) Gantt-kort (3 timer) Forretningsplan (8 timer) (16 timer) (16 timer) (200 timer) (24 timer) (5 timer) Tekster & indhold (24 timer) Validering (3 timer) (5 timer) (8 timer) Aflevering Finpudsning (8 timer) (32 timer) (32 timer) (32 timer) Konklusion (8 timer) Korrektur (5 timer) Tilbage til WBS 68 GANTT-KORT - Bilag 2 Minimemo Start Slut Dage 4 Maj 5 Maj 6 Maj 7 Maj 8 Maj 9 Maj 10 Maj 11 Maj 12 Maj 13 Maj 14 Maj 15 Maj Man Tirs Ons Tors Fre Lør Søn Man Tirs Ons Tors Fre Indledende - Idéudvikling - Brainstorming - Problemformulering - PBS - WBS - Gantt-kort - Forretningsplan 04.05 04.05 04.05 05.05 05.05 06.05 06.05 06.05 08.05 04.05 04.05 06.05 05.05 06.05 06.05 08.05 5 1 1 2 1 1 1 3 Indledende design - Moodboard - Skitser, wireframes, mock-ups - Designvalg - Logo 05.05 05.05 05.05 05.05 07.05 08.05 05.05 06.05 08.05 08.05 4 1 2 3 2 Website - Responsivt design - Kodning - Designprincipper - Database - SEO optimering - Tekster & indhold - Validering 06.05 06.05 11.05 11.05 18.05 25.05 13.05 28.05 28.05 07.05 28.05 11.05 20.05 25.05 15.05 28.05 23 2 18 1 3 1 3 1 Rapport - Rapportopsætning - Målgruppe - Analyse, metoder & teorier - Design brief - Designmanual - Konklusion - Korrektur 05.05 11.05 05.05 11.05 12.05 21.05 26.05 28.05 28.05 11.05 05.05 22.05 12.05 22.05 27.05 28.05 24 1 1 12 1 2 2 1 Produkter - Annonce - Plakater - Malebøger - Drikkedunke - Madkasser 11.05 11.05 11.05 11.05 11.05 11.05 22.05 22.05 22.05 22.05 22.05 22.05 12 12 12 12 12 12 Aflevering - Finpudsning 28.05 29.05 28.05 28.05 16 Maj 17 Maj 18 Maj 19 Maj 20 Maj 21 Maj 22 Maj Lør Søn Man Tirs Ons Tors Fre 23 Maj 24 Maj 25 Maj 26 Maj 27 Maj 28 Maj 29 Maj Lør Søn Man Tirs Ons Tors Fre 2 1 Tilbage til Gantt-kort 69 STAKEHOLDER - Bilag 3 Keep satisfied High Manage closely • Forhandler • Målgruppe/købere • Børn/brugere • Investorer • Leverandør Power Monitor Keep informed • Konkurrenter • Bank Low Low Interest High Tilbage til Stakeholder 70 BUDGET - Bilag 4 Produkter solgt om måneden Måneder Omsætning om året (kr) 1250 1000 12 15.000.000 Antal Månedlige udgifter (kr) Måneder Udgifter om året (kr) 40.000 15.000 12 12 5000 12 1.920.000 180.000 5.000.000 60.000 Omsætning kr pr. produkt Plakater A3 Plakater A2 Malebøger Madkasse Drikkedunke 300 400 200 200 150 Udgifter Løn 4 Lokaleleje + lagerplads 1 Produktion (1/3 af omsætningen) Emballage til levering 1000 Produktionsudstyr (Computer, grafisk tablet, printer, kabler) Kontorartikler (Stole, borde, kontorartikler) Revisor Markedsføring (20%) Betalingsservice Telefon Abonnement Internet Domæne 1 1 1 1 1 1 Andet Andet 100.000 2700 250.000 1000 2299 299 235 32 12 12 12 12 12 12 30.000 32.400 3.000.000 14.000 2299 3.588 2.820 844 Inkl start- og årligt gebyr Inkl domænenavn 10.345.951 Overskud Overskud om året 15.000.000 10.345.951 4.654.049 4.654.049 Tilbage til budget 71 SKYDESKIVEMODEL - Bilag 5 Sportsmaster Disney Bog&Ide Matas IKEA Fermliving H&M Arrogantshop Ilva Sebra Stadium Alfabetdyr Rosenaa Krea BR Designletters Idemøbler LEGO Toys’R’us Tilbage til skydeskivemodellen 72 ANNONCE - Bilag 6 MOCK-UP - Bilag 7 USE-CASE - Bilag 7 Finde produkter Oprette produkter MINIMEMO BRUGER Tilmeld nyhedsbrev Sende nyhedsbrev Slette nyhedsbrevs registrering Tag kontakt i formularen Kundeservice Tibage til Use-case 75
