PROJECT WEBSHOP DEEL II | REALISATIE
Project Webshop Elect!ve Bikes Gemaakt voor: Hugo Verlaat, Docent Media technologie op het Mediacollege Amsterdam Auteurs: Emil van den Toorn en Vincent Pelicaan, Studenten van het Mediacollege Amsterdam 25 november 2014
REALISATIE WEBSHOP DEEL II | PLANNING
INHOUD Briefing | Debriefing
Het project is gestart middels een briefing, deze briefing is gegeven door Emil vd Toorn aan Vincent Pelicaan. In deze briefing zijn alle details ter sprake gekomen wat betreft de lay-out, vormgeving en typografie voor de webshop. Middels een debriefing die geschreven wordt door Vincent Pelicaan worden de overeengekomen afspraken vastgelegd op papier. Deze debriefing dient als terugkoppeling voor de opdrachtgever. Projectorganisatie
Het project wordt uitgevoerd door een projectorganisatie bestaande uit twee studenten van het Mediacollege te Amsterdam. Deze twee studenten zijn uitgekozen om het concept te realiseren tot een complete webshop waarop elektrische sportfietsen van het merk Specialized en Koga Miyata aangeboden worden aan consumenten. Doelstelling project
Hier wordt nader besproken over de te bereiken doelstellingen binnen de projectorganisatie.
Wat is de doelstelling van het project? dit kan je in dit kopje allemaal terugvinden. Planning
Hier vindt u de vooraf opgestelde planning voor het goed uitvoeren van het project. Projectgrenzen
Hier staat informatie over het project zelf weergegeven. Moodboard
Hier vindt u het ontworpen moodboard. Flowchart
Hier vindt u de flowchart van de webshop van Elect!ve Bikes. Userstories
Hier vindt u de userstories over de webshop Evaluatie
Hier komen de evaluatie verslagen te staan die geschreven zijn door de twee studenten die gekozen zijn om dit project uit te voeren.
BRIEFING | DEBRIEFING
Aan Emil van den Toorn Van Vincent Pelicaan Datum vrijdag 7 november 2014 Betreft Debriefing realisatie webshop Elect!ve Bikes
Geachte meneer Toorn, Naar aanleiding van de briefing op vrijdag 7 november 2014 stuur ik u hierbij de debriefing. Zoals u aangaf tijdens de briefing wilt u een webshop laten realiseren dat beschikt over een CMS systeem. CMS staat voor Content Management system en met dit systeem kan de eigenaar van de webshop later zelf na oplevering van zijn/haar webshop zelf aanpassingen verrichten. Tevens heeft u aangegeven graag een responsive webshop opgeleverd te zien waardoor de webshop op alle soorten apparaten vertoond kan worden. Apparaten zoals Smartphones, iPads, Desktops ect. Mocht u nog wijzigingen of aanvullingen hebben dan hoor ik dat graag van u voor vrijdag 14 november 2014. Met vriendelijke groet, Creat!ve Artworks BV. Vincent Pelicaan
[email protected] 06- 48 18 58 39
DEBRIEFING
Bedrijf: Creat!ve Artworks BV. Naritaweg 19
1014 AN Amsterdam Contactpersoon en functie: Emil van den Toorn
[email protected] 06- 27 26 04 97 Amsterdam Emil van den Toorn is CEO’er van Creat!ve Artworks BV. En volgt daarnaast de opleiding Mediamanagement aan het Mediacollege te Amsterdam.
Emil van den Toorn wil een webshop op de markt zetten waar hij elektrische sportfietsen van het merk Specialized en Koga Miyata aan consumenten wil aanbieden.
Probleem/wens/vraag: Aanvraag voor een webshop concept, er moet een prototype ontwikkeld worden. Deze webshop moet responsive zijn. Dit wil zeggen dat de webshop zowel geschikt is om op een laptop te bekijken maar ook op mobile devices. Op deze webshop worden dure, goede kwaliteits elektrische sportfietsen aangeboden.
Deze fietsen worden vooral aangeboden voor personen die liefhebbers zijn van fietsen en graag
met de fiets naar hun werk willen gaan of lange afstanden af willen leggen met de fiets.
Gewenste producten: ¥ Een webshop wat elektrische sportfietsen verkoopt van het merk Specialized en Kogamiyata. ¥ Collectie bestaande uit 10 artikelen. Dit zijn elektrische sportfietsen van het merk Specialized en Kogamiyata
Doelgroep: De doelgroep op wie deze webshop zich richt zijn personen van 25 jaar t/m 60 jaar. Deze doelgroep is bovenal sportief en zijn gericht op kwaliteitsproducten. Veelal beschikt deze doelgroep over een boven modaal inkomen.
DEBRIEFING
Communicatiedoelstelling: Hij wil laten zien dat u bij het bedrijf in goede handen bent. Hierin staat vertrouwen, kwaliteit en service centraal. Bestaand materiaal: Foto’s van bestaande stockwebsites kunnen hiervoor gebruikt worden. Eigen iniatief voor het fotograferen wordt zeer op prijs gesteld. Eventueel inhuren van een fotograaf om geschikte fotomateriaal te kunnen gebruiken. Gewenste sfeer / uitstraling: Een webshop met een sportieve look & feel uitstraling. Eigen invulling bij gebruik van kleuren. Technische specificaties: Deze webshop moet beschikken over een toegankelijk CMS Systeem (content management system) De opdrachtgever kan hierdoor na het opleverproces, zelfstandig zijn webshop beheren/aanpassen. Verder gebruik van trefwoorden; jong,sportief,kwaliteit, e-bikes, boven modaal inkomen. Budget: De opdrachtgever heeft drie verschillende offerteprijzen getoond gekregen, Hij heeft gekozen voor de offerte versie 3 dat een totaalbedrag heeft van € 13.303,00,- exclusief BTW. Tijdsplanning: 1. Concept lay-out maken. 2. Prototype webshop maken. 3. IV opleiding coderen van de webshop. 4. Oplevering webshop na Kerstvakantie (22 december 2014 t/m 4 januari 2015) Overige afspraken: Concept lay-out deadline in week 49. Bij vragen contracteer Emil van den Toorn. Prototype deadline op vrijdag 19 december 2014.
PROJECT ORGANISATIE
OPDRACHTNEMERS Project realisatie webshop De projectorganisatie bestaat uit twee studenten van het Mediacollege te Amsterdam. Dit zijn Emil van den Toorn en Vincent Pelicaan die respectievelijk Mediamanagement en Media vormgeving studeren. Zij zitten in het 2e leerjaar en zijn uitgekozen om als duo het concept dat vooraf bedacht is vorm aan te geven naar een werkende webshop.
DOELSTELLING PROJECT
De doelstelling voor het dit project ‘ Shop till you drop’ is het realiseren van een complete webshop dat werkt middels een CMS (content management system) dat ervoor zorgt dat de opdrachtgever na oplevering zelf zijn webshop kan aanpassen en beheren zonder daar hulp van derden nodig te hebben. Tevens is het voor de mediamanager belangrijk om ervaring te krijgen in het samenwerken met een student van een andere opleiding en ervaring opdoet met het maken van een planning, het opstellen van deadlines, en veel met je mede opdrachtnemer communiceert om misverstanden te voorkomen en op de eind deadline een complete webshop presenteert zoals vooraf overeengekomen is met je projectbegeleider. Beide studenten proeven hoe het er in de arbeidsmarkt aan toe gaat, wat ervan je gevraagd en verwacht wordt. Hierdoor bouw je kennis en ervaring die van belang zijn als je later zelf in een bedrijf aan het werk gaat of een eigen bedrijf opricht. Voor de Media vormgever is het belangrijk ervaring op te doen in het samenwerken met een student van een andere opleiding en ervaring opdoet in het communiceren met je projectpartner en ervaring krijgt in het maken van de te maken opdrachten die de media vormgever wellicht later ook moet ontwerpen wanneer hij of zij in een bedrijf werkt.
PLANNING PROJECT
De planning van het project staat hieronder weergegeven.
PLANNING PROJECT WEBSHOP DEEL II Fase
Wat
Wie
Deadline
Voortraject
Debriefing schrijven
Vincent Pelicaan
11/11/14
Goedkeuring debriefing
Emil van den Toorn 18/11/14
Trello board, scrum opstellen & onderhouden
Emil & Vincent
22/11/14
Userstories, cardsorting schrijven
Vincent Pelicaan
28/11/14
Logo Elect!ve Bikes ontwerpen
Vincent Pelicaan
28/11/14
Teksten voor advies & omschrijving product
Emil van den Toorn 28/11/14
Brainstorm webshop ideeën
Emil & Vincent
Moadboard ontwerpen
Emil van den Toorn 02/12/14
Beeldmateriaal verzamelen
Emil & Vincent
07/12/14
Mindmap & Storyboard maken
Vincent Pelicaan
08/12/14
Wireframes, storyboard maken
Vincent Pelicaan
12/12/14
Technisch onderzoek naar betaalsystemen
Emil & Vincent
12/12/14
Aanklikbare Prototype
Emil & Vincent
12/12/14
Webshop realisatie Extra’s (ideeën?)
Emil & Vincent
12/12/14
Pitch presentatie (video)
Emil van den Toorn 12/12/14
Webshop realisatie CMS
Vincent Pelicaan
15/12/14
Webshop realisatie Responsive
Vincent Pelicaan
15/12/14
Webshop realisatie Linked so. mediakanalen
Emil & Vincent
16/12/14
Pitch presentatie opmaken (18 dec)
Emil van den Toorn 16/12/14
Swot analyse maken van het eindproduct
Emil van den Toorn 17/12/14
Nacalculatie werkuren
Emil van den Toorn 17/12/14
Slotevaluatie schrijven
Emil & Vincent
Concept
Realisatie | Productie
Nazorg
02/12/14
volgt
PROJECTGRENZEN
PROJECTGRENZEN REALISATIE PROTOTYPE Begin datum: 7 november 2014
Eind datum: 18 december 2014
Verantwoordelijkheden Creat!ve Artworks BV. • Het ontwikkelen van een webshop die specifiek gericht is op het verkopen van sportieve elektrische sportfietsen met trapondersteuning. • Een webshop ontwikkelen met een Content Management system (CMS) • Het bedenken van een goede bedrijfs/domeinnaam met een goede hostingpakket erbij. • Het aanmaken van verschillende sociale media kanalen waar Elect!ve Bikes zich wil adventeren op advies van de opdrachtnemer Creat!ve Artworks. • Het vooraf gesproken ‘kwaliteit’ uitstraalt op de webshop • Zorgen dat de webshop Responsive is, zoals vooraf afgeproken is met de opdrachtgever. Wanneer de webshop Responsive is, is de webshop op alle soorten platformen te bezoeken. • Meerdere betaalfuncties creëren waardoor het mogelijk is om als klant/consument af te kunnen rekenen met IDEAL, PayPal, Mastercard of overboeking op de webshop zoals gewenst is door de opdrachtgever.
PROJECTGRENZEN REALISATIE COMPLEET WERKENDE WEBSHOP Begin datum: 5 januari 2015
Eind datum: 23 januari 2015
Creat!ve Artworks is geheel verantwoordelijk voor de levering van de webshop en de hierboven genoemde verantwoordelijkheden. Echter, zodra het eindproduct is geleverd aan de klant, is de klant zelf volledig aansprakelijk voor de website. Mocht de klant behoefte hebben aan nazorg of extra diensten, zal dit in rekening gebracht worden.
MOODBOARD
Het ontworpen moodboard voor dit project is hieronder weergegeven.
‘ELECT!VE BIKES PRESENTS BRAND NEW ELECTRIC SPORTBIKES’
BE THERE ON ……. AND MISS NOTHING. A NEW REVOLUSION IS BEGUN.
FLOWCHART
De flowchart van ons ontwikkelde webshop ziet er uit zoals onderstaand is afgebeeld.
USERSTORIES
Userstories E-‐bikes. Als gebruiker wil ik; De site makkelijk kunnen vinden in Google door middel van zoekwoorden. Als gebruiker wil ik; Gemakkelijk zien waar de site over gaat. Als gebruiker wil ik; Verschillende producten op een pagina kunnen bekijken. Als gebruiker wil ik; InformaCe kunnen lezen over het product waar ik naar kijk. Als gebruiker wil ik; Een account aan kunnen maken. Als gebruiker wil ik; Kunnen inloggen om zo bij mijn account te komen. Als gebruiker wil ik; Mijn gegevens kunnen aanpassen als ik bijvoorbeeld verhuis. Als gebruiker wil ik; Kunnen aanvinken dat ik een nieuwsbrief wil ontvangen. Als gebruiker wil ik; Weten welke producten het meest worden gekocht. Als gebruiker wil ik; Kunnen zoeken via een zoekfuncCe. Als gebruiker wil ik; Weten op welke manieren ik kan betalen. Als gebruiker wil ik; Kunnen zien welke producten populair zijn gevonden door andere bezoekers. Als gebruiker wil ik; Voorbeelden zien hoe de sporGiets eruit ziet. Als gebruiker wil ik; Weten hoe lang ik met de accu van de fiets kan fietsen voordat die leeg is. Als gebruiker wil ik; In mijn boodschappenmandje kunnen kijken Als gebruiker wil ik; Producten in mijn boodschappenmandje kunnen aanpassen of verwijderen. Als gebruiker wil ik; Kunnen zien wat het totaalbedrag is van mijn bestelling. Als gebruiker wil ik; Weten waar ik mij op de site bevind. Als gebruiker wil ik; Een duidelijke beschrijving van de e-‐bike weergegeven staat op de webshop. Als gebruiker wil ik; Kunnen kiezen tussen verschillende kleuren en type e-‐bikes Als gebruiker wil ik; Makkelijk kunnen betalen door middel van duidelijke instrucCes. Als gebruiker wil ik; Een overzicht van de producten die in mijn winkelmandje ziKen.
Als sitebeheerder wil ik; gemakkelijk pagina’s kunnen beheren
EVALUATIE PRODUCTIE PROJECT WEBSHOP
EMIL
1. Hoe is de productie verlopen, wat waren de tops, wat zijn de tips? Het productie proces is naar onze mening prima verlopen. We hebben veel contactmomenten ingepland en we hebben veel gecommuniceerd om tot een goed resultaat te komen. Enige tip is om toch wat vaker af te spreken en tijd vrij te maken om tussenresultaten en overleg momenten te houden. 2. Voldoet het eindproduct (het prototype) aan je verwachtingen? Waarom wel/niet? Ik ben content met het uiteindelijke prototype. Er zijn natuurlijk altijd verbeterpunten, dit komt door mijn perfectionistische houding tegenover alles. Ik probeer me tegenwoordig altijd tevreden te stellen met het behaalde resultaat ook al heb ik toch nog aan/ opmerkingen. In eerste instantie nam ik aan dat de IV’er ook een betaalpagina die doorverwezen wordt naar de betreffende bank om te betalen. 3. Van de zes sessies met elkaar, hoe vaak was jij aanwezig en hoe vaak was jouw partner afwezig? Heb je van de afwezigheid last ondervonden? We hebben 3 sessies bij elkaar gezeten. Dit omdat Vincent Pelicaan niet altijd aanwezig kon zijn bij de projectlessen ivm privé omstandigheden. Dit is opzich geen probleem aangezien we veel contact hebben gehouden via de mail en whatsapp en Trello. Ik kan me best verplaatsen in zijn situatie. De regel die is dan stel is dat het eindresultaat wel op tijd af is. En dat is gehaald. Dus het ergt mij niet echt, omdat we genoeg contact hebben gehouden en het eindproduct op tijd opgeleverd is. 4. Hoe was de samenwerking tussen jullie? Prettig, stroef of Anders? Zoals hierboven al meermaals antwoord op deze vraag is gegeven vond ik de samenwerking prima verlopen tussen ons. Dit omdat ondanks het weinig op schoolbesprekingen aanwezig te zijn hebben we door veel telefonisch, mail en whatsapp contact het project met veel plezier en hard werken de deadline kunnen halen en een goed product op te mat weten te brengen. 5. Hoe verliep de communicatie tussen jullie? Leg uit Op het gebied van communicatie is het goed gegaan. We hebben veel telefonisch contact gehad, we hebben vooraf punten opgesteld waar we ons aan moeten houden en zodoende zijn we goed communicatief vaardig te werk gegaan ondanks het feit dat we er niet altijd waren, wanneer er op school twee projecturen bezig waren waar je alle werkzaamheden kon bespreken met je IV partner. 6. • • •
Welke punten zou je in een volgend productieproces weer hetzelfde doen? Veel contact met je partner houden middels mail,whatsapp,telefoon Het werken middels een opgestelde plan van Aanpak inclusief planning. Het werken met Trello. Deze punten vond ik goed werken bij ons productieproces omdat mijn IV partner en ik elkaar al kenden, waardoor het zakelijke contact via mail,whatsapp en telefoon prettig te noemen was. Verder werk ik altijd middels een Plan van Aanpak, daar zal ik dus ook never vanaf stappen. Het werken via Trello was voor mij vorig jaar een klein struikelblok maar ik vind het nu zeer prettig om hiermee te werken.
EVALUATIE PRODUCTIE PROJECT WEBSHOP
EMIL
7. Welke punten zou je in een volgend productieproces anders willen doen? Benoem en leg uit hoe je het dan aan zou pakken/ anders willen doen. Meer persoonlijk contact waar je toch wat meer overleg momenten hebt. Bij contact via een netwerk is het voor mij gevoel altijd plichtsmatig. Wanneer je in een bespreking zit wordt er vaak anders gesproken en overlegd dan wanneer je dit via een netwerk doet als voorbeeld e-mail, whatsapp ect. 8. Wat zou jij je partner als advies willen meegeven? Schrijf reacties van beide op. Durf hulp in te schakelen wanneer je denkt dat je het niet trekt/op tijd af krijgt.
Jij kent namelijk jezelf het best en het is niet verkeerd om hulp te vragen. Noteer eventueel dingen die per dag gedaan moet worden. Een enkele keer vergat je mij een mail te sturen, zoals afgesproken. 9. Wat heb jij van je partner geleerd? Vooral het omgaan met een persoon die ik al kende & daarmee samenwerken in een project. Vaak zijn de personen waar je in de toekomst een project mee doet toch mensen die je in 1e instantie niet (goed) kent.
Tevens heb ik mijn communicatie vaardigheid opgeschroefd mede door dit productieproces. 10. Heb jij of je partner nog andere evaluatiepunten die jij/hij/zij zelf wil benoemen? Veel vaker meetings houden waarin iedereen zijn ideeën op tafel kan gooien en voort gangs gesprek houden of het gelukt is, of je tevreden bent over de groep of persoon. 11. Geef elkaar een totaalcijfer voor het gehele project Mediamanager(s) krijgt een 7,3. Interactief Vormgever krijgt een 7,3. 12. Maak een korte samenvatting met het kopje “Wat heb ik geleerd…” “Wat heb ik geleerd…” Het continu bezig zijn met het bewaken van tussenresultaten, voortgangen, trello upto-date houden, Het samenwerken met vriend(en) die ik voor dit project al kende. Dan is je houding toch anders dan wanneer je met iemand samenwerkt die je niet kent. Het omgaan met een wat moeilijkere periode voor m’n mede student met wie ik samenwerkte. (begrip tonen voor de situatie maar ook hard door blijven werken) Een belans hiertussen vinden. Het leren van een stukje technische kennis die gebruikt wordt door de interactief Vormgever om de webshop te maken.
EVALUATIE PRODUCTIE PROJECT WEBSHOP
VINCENT
1. Hoe is de productie verlopen, wat waren de tops, wat zijn de tips? Het productie proces is naar onze mening prima verlopen. We hebben veel contactmomenten ingepland en we hebben veel gecommuniceerd om tot een goed resultaat te komen. Enige tip is om toch wat vaker af te spreken en tijd vrij te maken om tussenresultaten en overleg momenten te houden. 2. Voldoet het eindproduct (het prototype) aan je verwachtingen? Waarom wel/niet? Ik ben content met het uiteindelijke prototype. Er zijn natuurlijk altijd verbeterpunten, dit komt door mijn perfectionistische houding tegenover alles. Ik probeer me tegenwoordig altijd tevreden te stellen met het behaalde resultaat ook al heb ik toch nog aan/ opmerkingen. Ik heb er uiteindelijk veel tijd in gestoken en ben uiteindelijk gelukkig dat ik er zelf content mee ben. Als dit niet zo was dan had ik er echt de pest in, aangezien ik er toch veel tijd in heb gestoken. 3. Van de zes sessies met elkaar, hoe vaak was jij aanwezig en hoe vaak was jouw partner afwezig? Heb je van de afwezigheid last ondervonden? We hebben 3 sessies bij elkaar gezeten. Dit omdat ik niet altijd aanwezig kon zijn vanwege privé omstandigheden. Dit is opzich geen probleem aangezien we veel contact hebben gehouden via de mail en whatsapp en Trello. Gelukkig hebben we een goede werksfeer gecrieeerd tijdens het project waardoor we toch alles hebben kunnen realiseren De regel die is dan stel is dat het eindresultaat wel op tijd af is. En dat is gehaald. Dus het ergt mij niet echt, omdat we genoeg contact hebben gehouden en het eindproduct op tijd opgeleverd is. 4. Hoe was de samenwerking tussen jullie? Prettig, stroef of Anders? Zoals hierboven al meermaals antwoord op deze vraag is gegeven vond ik de samenwerking prima verlopen tussen ons. Dit omdat ondanks het weinig op schoolbesprekingen aanwezig te zijn hebben we door veel telefonisch, mail en whatsapp contact het project met veel plezier en hard werken de deadline kunnen halen en een goed product op te mat weten te brengen. 5. Hoe verliep de communicatie tussen jullie? Leg uit Op het gebied van communicatie is het goed gegaan. We hebben veel telefonisch contact gehad, we hebben vooraf punten opgesteld waar we ons aan moeten houden en zodoende zijn we goed communicatief vaardig te werk gegaan ondanks het feit dat we er niet altijd waren, wanneer er op school twee projecturen bezig waren waar je alle werkzaamheden kon bespreken met je IV partner. 6. Welke punten zou je in een volgend productieproces weer hetzelfde doen? • Veel contact met je partner houden middels mail,whatsapp,telefoon • Het werken middels een opgestelde plan van Aanpak inclusief planning. Deze punten vond ik goed werken bij ons productieproces omdat mijn MM partner en ik elkaar al kenden, waardoor het zakelijke contact via mail,whatsapp en telefoon prettig te noemen was. Verder werk ik graag met duidelijke afspraken en een vooraf opgestelde planning zodat ik een beeld krijg wat er verwacht wordt.
EVALUATIE PRODUCTIE PROJECT WEBSHOP
VINCENT
7. Welke punten zou je in een volgend productieproces anders willen doen? Benoem en leg uit hoe je het dan aan zou pakken/ anders willen doen. Meer persoonlijk contact waar je toch wat meer overleg momenten hebt. Bij contact via een netwerk is het voor mij gevoel altijd plichtsmatig. Wanneer je in een bespreking zit wordt er vaak anders gesproken en overlegd dan wanneer je dit via een netwerk doet als voorbeeld e-mail, whatsapp ect. daarom vind ik het belangrijk om voortaan meer aanwezig te zijn tijdens projectweken. 8. Wat zou jij je partner als advies willen meegeven? Schrijf reacties van beide op. Oefen meer als er gevraagd wordt om improvisatie bij opdrachten als presenteren voor een camera of een presentatie van een project die misschien niet helemaal goed voorbereid is. 9. Wat heb jij van je partner geleerd? Vooral het gestructureerd werken van mijn Mediamanager heb ik veel van geleerd. Dit omdat ik zelf nog wel is dingen uitstel. Nu komt het duidelijk tot mij door dat je het werk beter reëel in kan plannen zodat je het ook daadwerkelijk mee bezig bent en het werk volgens planning af hebt. 10. Heb jij of je partner nog andere evaluatiepunten die jij/hij/zij zelf wil benoemen? Zelf wil ik bij volgende projecten vaker aanwezig zijn tijdens projecturen aangezien je tijdens deze lessen veel kan bespreken en nieuwe ideeën op tafel leggen en hierover discussiëren. 11. Geef elkaar een totaalcijfer voor het gehele project Mediamanager(s) krijgt een 7,3. Interactief Vormgever krijgt een 7,3. 12. Maak een korte samenvatting met het kopje “Wat heb ik geleerd…” “Wat heb ik geleerd…” Het continu gestructureerd werken van mijn Mediamanager heeft mij een goed inzicht gegeven over het aanpassen van mijn werkwijzen tijdens dit project. Tevens heb ik geleerd hoe je qua ontwerpen van een webshop een winkelmandje en de betaalprocedure kan simuleren.