multimediedesign projekt crowdfunding 3. semester
Kolofon Projekt 3. projekt Crowdfunding (web database) Mark Kristensen kristensen.theman@gmail.com www.markkristensen.dk Skole CPH Business Academy Lyngby Uddannelse Klasse Fag Multimediedesign (3. semester) MulBe14 Interaction development Design & visuialization Andreas Haag ahaag1708@gmail.com www.haagmedia.dk Periode 21/9 2015-04/10 2015 Undervisere Tue Becher Jesper Hinchely Pernille Sjøegreen pernillesjoegreen@gmail.com www.pernillesjoegreen.com Rapportindhold Sider 24 Anslag (u. spacing) 11.233 Bilag 1 Domæne www.markkristensen.dk/projekter/ crowdfunding/ Jonas Lunding jonaslunding@gmail.com www.jonaslunding.dk Patrick Klint klintpatrick@gmail.com www.patrickklint.dk
Indholdsfortegnelse 1. Indholdsfortegnelse 2. Problemformulering 3. Metode 4. Projektstyring 5. Designbrief 6. Visuel identitet 6.1. Typografi 6.2. Farvevalg 6.3. Logo dokumentation 7. User stories 8. Database 8.1. ER diagram 8.3. Attributtabel 9. Hjemmeside 9.1. Wireframes og mockups 9.1.1. Forside 9.1.2. Discover 9.1.3. Projektside 9.1.4. Om os 9.2. PHP koder 9.3. Sitemap 9.4. Undersider 1 2 3 4 5 7 7 7 8 9 10 11 12 13 14 14 15 16 17 18 20 21 Bilag 1: Moodboard 22 Indholdsfortegnelse 1
Problemformulering I dette projekt vil vi undersøge hvordan vi på bedste vis kan udvikle en webbaseret platform, der kan understøtte et system til crowdfunding for medievirksomheden, CFunding-IT. Vi vil samtidig udvikle en service eller et produkt, der kan fremvises på samme hjemmeside. Projektet vil i større grad berøre databasearbejde i MySQL, da vi vil undersøge hvordan vi opstiller en database i 3. normalform, der kan håndtere de funktioner, der indgår i en hjemmeside til crowdfunding. Vi glæder os til at få et indblik i et stadigt voksende marked for crowdfunding. Problemformulering 2
Metode Vi har anvendt SCRUM, som er en agil udviklingsproces. Den iterative metode passer godt til arbejde i fællesskab, da vi har mulighed for at gå tilbage i projektets faser og samtidig lære af hinandens kompetencer. Projektet og dets scope kan løbende ændre sig, og det er bl.a. derfor fleksibilitet er værdsat. Mentaliteten stiller høje krav til samtlige involverede parter, da hver enkel prototype konstant skal revideres. Et konstant fokus på forbedringer af vores prototypes har været med til at forme en mentalitet i os, der indebærer inklusion af samtlige gruppemedlemmer. Daglige sprintmøder (se nedenstående billede) á ti minutters længde har holdt os opdateret i processen samt uddelegering af det næste sprints arbejde. Til vores sprint reviews har vi haft mulighed for at reflektere over projektet samt planlægning og sikret, at vi løbende har nået vores delmål. Metode 3
Projektstyring Vi har anvendt et burndownchart til at holde styr på projektet. Vores burndownchart er baseret på vores product backlog. Burndownchartet er blevet dagligt opdateret til vores daglige sprintmøder. Brugen af burndownchart har hjulpet os med at kalkulere mængden af resterende arbejde kontra resterende tid igennem hele forløbet. Vi valgte at lave to burndowncharts; et til den indledende fase og et til hovedforløbet (se nedenstående diagram). Det indledende burndownchart bestod af tre sprintdage, mens hovedforløbet bestod af ti sprintdage. Begge burndowncharts findes i afleveringszipfilen. 250,0 Burn Down 200,0 196,9 191,8 177,2 182,2 171,0 150,0 157,5 155,8 Effort left 137,8 118,1 134,0 Planned Effort Left 100,0 98,5 78,8 81,0 50,0 59,1 43,4 39,4 19,7 0,0 0,0 0,0 0,0 1 2 3 4 5 6 7 8 9 10 11 Days in Sprint Projektstyring 4
Designbrief Klient CFunding-IT (et mindre mediebureau lokaliseret i København, der fokuserer på at lave webbaserede løsninger til klienters behov) Launch Søndag 4/9-2015 Opdateringer efter launch Internt i CFunding-IT Crowdfunding Crowdfunding er en ny form for fundraising, hvor man ved hjælp af et netværk samler penge ind til sine projekter/ideer. Man går uden om den klassiske proces, når man starter et projekt. Banken, som normalt er den afgørende faktor for om ens projekt kan blive til noget. I crowdfunding udgives ideer på en platform hvor alle kan gå ind og vælge om de ønsker at støtte/bidrage til projektet. Interessenter De bidragende interessenter har stor magt for projektets opstart, da bidragene er grundlaget for rent faktisk at udføre projektet. Efter bidraget mister disse interessenter magt, men deres interesse og forventninger til projektet forbliver intakt. Interessen og forventninger kan stige via marketing eksempelvis på de sociale medier. Platformen, som ideen udgives på, har stor magt og interesse i projektet. Eksempelvis kan et godt projekt skabe god omtale for den givne platform og modsat. Platformen kan lave regler for, hvilke krav der er til projektet. I sidste ende kan platformen vælge at fjerne projektet, hvis det ikke lever op til platformens krav. Målgruppe Målgruppen for en crowdfunding platform er folk kender til konceptet og har interesse for crowdfunding. Heriblandt first-movers og folk der gør brug af sociale medier; Twitter, Facebook, Instagram, Linkedin osv. De sociale medier er en vigtig faktor, da de forskellige idéudviklere gør stor brug af de sociale medier når de deler deres projekt. Disse medier bliver brugt som springbræt for at få mere trafik på crowdfunding platformen. Designbrief 5
Designbrief Klientens ønsker CFunding-IT ønsker at få udformet en platform til crowdfunding, som fremtidige klienter kan gøre brug af. Firmaet har prøvet at lave denne portal i diverse CMS uden held, da systemerne var for begrænsede til deres krav. Af samme grund har de hyret vores firma til at udvikle en hjemmeside, som indeholder en database, der kan oplagre registreringer og mulige søgekrav i en database. Systemet skal kunne registrere personers bidrag til de forskellige ideer. Derudover skal systemet kunne oplagre nye ideer til crowdfunding. Design og stil (se nedenstående moodboard) Vi er ude efter en visuel stil, der kan udtrykke virksomhedens moderne tilgang til tingene. Vi vil gerne have, at designet er så simpelt som muligt, uden at det mister personlighed. Farverne må gerne give et seriøst indtryk hos brugeren, men må også gerne udstråle lidt leg og kreativitet. Vi ser farven grøn som en mulig kandidat, da denne farve ofte er associeret med vækst og vitalitet. Denne platform vil på sigt blive en indholdsrig portal for mange spændende virksomheder og deres idéer, så derfor har vi brug for et design, der giver overskuelighed blandt hjemmesidens mange informationer og funktioner. 1. Frontend: Hjemmeside til Crowdfunding systemet 1.1. Forside 1.2. Opdag 1.3. Produktside 1.4. Kontakt 1.5. Sign up 2. Backend: Database 2.1. Oplagring af brugerregistreringer 2.2. Oplagring af nye ideer til crowdfunding 2.3. Søgefunktion 2.4. Registrere bidrag til ideerne 3. Eksempel på crowdfunding ide og side Designbrief 6
Visuel identitet Farvevalg Vi har valgt at anvende farver, der understøtter vores flade designstil. Vores primærfarve er en nuance af grøn, som er med til at give et balanceret udtryk, som psykologisk set kan minde om vækst og vitalitet. Det er en positiv farve, som er med til at give vores visuelle stil et venligt og humørfyldt udtryk. Den livlige grønne farve er balanceret ved brugen af flere grå nuancer, der tilsammen skaber et roligere udtryk. AaBbCcDdEeFfGgHhIiJjKkLlMmNnOo PpQqRrSsTtUuVvWwXxYyZzÆæØøÅå Open Sans Open Sans af Steve Matteson, er designet med åbne og naturlige former som gør den meget letlæselig. Vi har valgt denne typeface til både vores rapport og website, da den giver et rolig udtryk og virker både på print og til web. AaBbCcDdEeFfGgHhIiJjKkLlMmNnOo PpQqRrSsTtUuVvWwXxYyZzÆæØøÅå Raleway Raleway, designet af Matt McInerney, er bedst beregnet til skærm brug. Det er en meget letvægt typeface med et geometrisk look, som virker fint med Open Sans på websitet. AaBbCcDdEeFfGgHhIiJjKkLlMmNnOo PpQqRrSsTtUuVvWwXxYyZzÆæØøÅå Eurostile Eurostile er designet af Aldo Novarese. Eurostile er endnu en geometrisk sans-serif typeface og fungerer derfor godt sammen med Raleway.Ligesom Raleway er Eurostile passende til skærm brug, specielt god til overskrifter og skilte. Eurostile har et teknisk og funktionelt look og passer derfor godt sammen med vores flat design på websitet. Visuel identitet 7
Visuel identitet Logo og navn Vi har valgt at udarbejde et logo til den platform, som vi er ansat for at skabe til CFunding-IT. Processen har berørt flere forskellige farvekombinationer samt logodesigns, for til sidst at ende på det nuværende logo. Selvom vi har været flere forskellige navne igennem, har vi valgt at kalde platformen for startr. Navnet er stavet uden ordets sidste e, ligesom man ser det med Flickr og Tumblr. På den måde forsøger vi at give et huskeværdigt indtryk hos brugeren, når han ser vores navn. En sidebonus er, at navnet med stor sandsynlighed vil give mere præcise søgeresultater på søgemaskiner, da det er mere unikt end hvis det eksempelvis blev stavet som Starter. Navnet startr udspringer fra idéen om, at denne platform skal være med til at starte idéer og virksomheder igennem crowdfunding. Denne idé er yderligere illustreret ved brugen af de to tandhjul, som bruges i logoet og i virksomhedens visuelle identitet. Dette skal symbolisere, at der kommer gang i maskineriet. Til slut har vi valgt at erstatte hullet i det ene tandhjul med en opadvendt pil, som skal illustrere vækst. Udkast fra logo brainstorm Visuel identitet 8
User stories User stories er en kort og simpel beskrivelse af de forskellige funktioner, som et website eksempelvis kan have. Vi har interviewet potentielle brugere af Startr og fundet frem til nogle eksepler på krav til et crowdfunding website. Vi har fokuseret på basale krav såsom; at donere penge som en såkaldt backer og oprettet et projekt som en såkaldt creator. User stories 9
Database
ER diagram KLIK HER FOR AT SE SQL KODEN Database - ER diagram 11
Attributtabel Database - attributtabel 12
Hjemmeside
Wireframes - forside Wireframes er en vigtig del af processen, når man udvikler et website. Vi bruger wireframes for at skabe et overblik over websitets layout, hvor vi finder frem til placering af fx logo, navigationsmenuen, billeder og forskellig tekst på websitet, samt hvordan disse elementer virker i en sammenhæng. Dette er et blueprint, før vi går i gang med selve kodningen af websitet. Vi startede ud med at diskutere udseendet af websitet, og derefter kom med nogle forslag, som vi tegnede i hånden for at visualisere dette. Derefter tog vi fotografier af disse tegninger og udviklede vores wireframes på baggrund af disse tegninger. Vi skabte de forskellige wireframes på www. mogups.com. Vi valgte at bruge denne hjemmeside, da den skaber et ensformigt udseende for alle siderne. Hjemmeside - wireframes 14
Wireframes - discover Hjemmeside - wireframes 15
Wireframes - projektside Hjemmeside - wireframes 16
Wireframes - about us Hjemmeside - wireframes 17
PHP Vi har valgt at udforme et login-system i PHP, der håndtere SESSIONS, så du fx ikke kan besøge nogle af siderne, uden at være logget ind. Dette gøre sig gældende ved oprettelse af nye projekter til hjemmesiden. Du vil således heller ikke være i stand til at donere til et projekt uden at have et login. I vores PHP koder, har vi blandt andet valgt at lave oprettelsesfunktioner der bliver delt op i klasses. Så selve registreringen foregår i en funktion, i PHP-koderne. Ved registreringen bliver brugerens kodeord også hashed og salted, som betyder at der sker en kryptering af brugerens kode. I filen password_compatibility_library.php, kan der ses hvordan Password_ BCRYPT, kryptiserer brugerens kode, så administrator ikke får mulighed for at kende brugerens kode nogensinde. Vi har opdelt vores sider, så den består af en masse include og requires, så vi altid har de nødvendige informationer til rådighed på hver side. Derfor har vi oprettet organisering der gør at vi har nogle mapper, med enten opsætning, oprettelses og valideringskrav, kodeordsbeskyttelse og de praktiske PHP-sider, hvor bl.a. HTML formularerne indgår. Et eksempel på brug af SESSIONS: Hjemmeside - PHP 18
PHP Påbegyndt kodning Donationer Vi startede på et donations system, der skulle kunne overfører fra brugerens pung til projektets. Dette ville vi have gjort ved at sætte en UP- DATE regel for både brugerens og projektets pung, som så ville tilføje til projektets, og reducere i brugerens pung. Vi havde lidt besvær med at få funktionen til at registrere de forskellige regler vi satte, og blev nødt til at afslutte forsøget. Eksempel på forbindelse mellem bruger og oprettede projekter. User_ID er relateret. Se dine egne projekter Vi har gjort et forsøg på at forbinde vores projekter med hvem der oprettede dem, da du kun har tilgang til oprettelse af projekter, når du er logget ind. Vi fik lavet en forbindelse i vores projekt registrering og har derefter forsøgt at lave en side, med mulighed for, at danne dig et overblik over de projekter du selv har oprettet. Vi løb ind i nogle komplikationer med at få PHP en til at trække informationerne ud, da den skulle registrere sammenhængen imellem projekter og brugeren. Hjemmeside - PHP 19
Sitemap Hjemmeside - sitemap 20
Undersider Hjemmeside - Undersider 21
Bilag 1 - moodboard Bilag 22