Inleiding
4
Planning
5, 6, 7
Opdracht analyse
8
Doelgroep analyse
9
Probleemstelling Persona’s
10 11, 12, 13
Gevoel voor humor
14, 15
Trends
16, 17
Concurrentie analyse Conclusie
18, 19, 20, 21, 22, 23 24
Inhoudsopgave
Mindmap
25
PUMP interacties
26
Concept
27
Programma van eisen
28
Reflectie
29
Inleiding
Dit is het analyserapport voor de course Webdesign. In deze course is het de bedoeling om een website te maken voor één van de bestaande casussen. Echter heb ik besloten om een zelfbedachte casus te gebruiken. Bij deze casus draait alles over het fictieve kledingmerk “Russiah”. Dit merk is in Rusland razend populair onder studenten. Het merk krijgt echter geen voet aan de grond op de Europese markt, en in dit geval ons koude kikkerlandje Nederland. De reden dat Russiah geen voet aan de grond krijgt heeft voornamelijk te maken met het imago van de Russen. In deze casus is het zeker niet de bedoeling om dat imago geheel te veranderen. Het is echter wel de bedoeling om de Nederlandse studenten te laten weten dat Russische mede-studenten vrijwel exact hetzelfde leven als de Nederlandse studenten. In dit analyserapport beschrijf ik het proces dat doorlopen wordt met deze casus.
4
Planning
Op het volgende spread is mijn planning te vinden. Deze planning is in de eerste week van de course gemaakt met “Tom’s Planner”. Omdat er na de eerste week een aantal dingen zijn verschoven kan het zijn dat het schema niet meer exact klopt. Echter is de basis van de planning nog steeds hetzelfde.
5
Tom’s p
6
planner
7
Opdracht analyse
Opdrachtgever Russiah Clothing Situatieschets Op dit moment heeft Russiah alleen een Engelse en Russische website. Er is nog geen Nederlands domein en ook de betaalmogelijkheden zijn nog niet aangepast zodat Nederlanders gemakkelijk kunnen betalen met bijvoorbeeld iDEAL. Aanleiding Het merk Russiah moet op de Nederlandse markt gebracht worden. Russiah krijgt nog steeds geen voet op de Europese markt. Om te beginnen moet er een Nederlandse webshop gemaakt worden waar Nederlanders de producten van het merk Russiah kunnen aanschaffen. Ook moet er door interacties een verhaal aan de doelgroep vertelt worden. Wensen van de opdrachtgever Betrouwbaar Informeel aanspreken Sociale media centraal Nederlandse betaalmogelijkheden Interactie met de doelgroep Doelstelling Het aantal bestellingen omhoog halen door de doelgroep te laten weten dat de Russische doelgroep exact hetzelfde is als de Nederlandse en dus geen slechte mensen zijn.
8
Doelgroepen analyse
Demografische gegevens: Geslacht Man, vrouw Leeftijd 16 - 28 jaar Leefsituatie Student, Hipster, thuis- en uitwonend Etnische gegevens Nederlands Oost-Europees Sociale klasse Laag, modaal, hoog Geografische gegevens: Omdat het de Nederlandse website betreft komt de doelgroep uit Nederland. Psychografische gegevens: Nederlandse studenten die interesse hebben in nieuwe en alternatieve kleding komen bij Russiah terecht. Gedrag: Het inkomen van de studenten komt voornamelijk van de overheid in de vorm van studiefinanciering. Hiernaast hebben de meeste studenten een simpele bijbaan in de horeca of supermarkt. Qua mediaal gedrag zijn de studenten hipster en constant op zoek naar nieuwe kleding. 9
Probleemstelling
Hoofdvraag Hoe kunnen we er voor zorgen dat de Nederlander met kleren van Russiah gaat lopen gezien het slechte imago van Rusland? Deelvragen Wie is de doelgroep? Hoe kunnen we deze doelgroep het makkelijkste overhalen om Russiah te dragen? Hoe kunnen we deze doelgroep het makkelijkste overhalen om Russiah te dragen? Waar moet de website zich in onderscheiden ten opzichte van andere webshops? Waarom zou een Nederlandse student kleren van het merk Russiah gaan dragen? Hoe kunnen we deze doelgroep het makkelijkste overhalen om Russiah te dragen?
10
Persona’s
Persona 1 Naam Jasper Leeftijd 17 Geslacht Man Geografisch Amsterdam, Nederland Leefsituatie Student Online mediagebruik Facebook Twitter Offline mediagebruik Volkskrant Televisie Radio
11
Persona’s
Persona 2 Naam Lisa Leeftijd 19 Geslacht Vrouw Geografisch Utrecht, Nederland Leefsituatie Student, Hipster Online mediagebruik Facebook Offline mediagebruik Televisie
12
Persona 3 Naam Pyotr Leeftijd 24 Geslacht Man Geografisch Moskou, Rusland Leefsituatie Student Online mediagebruik Facebook Offline mediagebruik Televisie
13
Gevoel voor humor
Studenten - Vieze kamers en huizen - Drinken veel - Iedereen is goed genoeg voor het bed - Altijd lui - Uitgaan boven studie Verwoording Een luie student die een hangover heeft na een nacht met een meid die hij heeft opgepikt op een studentenfeest waar hij veel te dronken was. Toen de student wakker werd bleek dat hij het ochtenddeel van de les gemist heeft.
14
Hipsters - “Mainstream” gebruiken als er iets is wat iedereen doet of heeft. - Muziek op de radio is mainstream - Kleding uit normale kledingwinkels is mainstream - Tegen het systeem in Verwoording Een hipster loopt voor de hogeschool in een nieuwe Russiah hoodie en ziet een andere student in een Chasin’ shirt. Hij/zij vindt het direct mainstream en vermijdt de persoon in kwestie.
15
Trends
Flat design Er wordt de laatste tijd veel gebruikt gemaakt van flat design. Om alle trends te volgen kun je het beste op dribbble.com zijn, waar alle designers hun werken posten. Op dribbble is de laatste tijd te zien dat alle designers gebruik maken van deze simpele manier van designen. Basis onderdelen zijn: licht kleurgebruik, geen patterns én weinig echte foto’s. Responsive Een must voor alle websites is tegenwoordig dat het responsive is. Dit betekent dat de website op elk apparaat beschikbaar is en daarop ook perfect functioneert. Wanneer je op een smartphone een responsive website bekijkt zullen alle onderdelen van de website meeschalen met de grootte van jouw telefoon scherm. Dit geldt ook voor een Tablet en natuurlijk de computer. “Full-width” design Op steeds meer websites zie je dat de website gebruik maakt van het gehele scherm. Dit zogenaamde “full-width” design is handig om een website responsive te maken en ziet er verzorgd uit. Concurrenten die een full width website gebruiken zijn Wehkamp en Zalando.
16
Voorbeeld van “Flat design”
17
Concurrentie analyse
Website Wehkamp.nl Algemene indruk Wanneer je op de website van Wehkamp komt merk je direct dat het allemaal erg netjes en overzichtelijk is ingericht. Er is gebruikt gemaakt van een responsive full width website in flat UI kleuren. Rechtsboven op de website heb je alle facetten voor je eigen account, en aan de linkerzijde is een zoekveld geplaatst waar klanten snel een artikel kunnen zoeken. Wanneer je op “Inloggen” klikt is er een interactie. Er schuift een inlog formulier uit het menu, waardoor je op elke pagina gemakkelijk kunt inloggen. Onder de header en het menu bevindt zich een grote foto van een vrouw die een artikel van Wehkamp aan heeft die nu in de sale is. Onder deze foto zijn nog 3 andere artikelen te vinden waarna de website een footer heeft. De website is bij het betreden dus netjes en overzichtelijk en bevat veel foto’s en weinig tekst. Sterke punten - Overzichtelijk - Modern door het gebruik van flat design - Weinig tekst, veel afbeeldingen - “Full-width” Zwakke punten - Bewegende sneeuwvlokjes in het beeld - Geschetste tekst boven in het menu slecht leesbaar Conclusie Wehkamp heeft een nette en goedwerkende website. Er is veel gebruikt gemaakt van flat design wat de webshop een moderne look geeft. Er zijn een paar kleine min puntjes, maar die zijn niet van dusdanig groot belang dat het de website compleet verpest.
18
19
Concurrentie analyse
Website Chasin.com Algemene indruk Wanneer je de website van Chasin’ betreedt heb je niet echt een sfeer gevoel. Er is vrijwel alleen gebruik gemaakt van zwart en wit en er is vrijwel geen gebruik gemaakt van icons. Onder het menu zijn een aantal nieuwe en populaire artikelen te vinden. Bovenaan de pagina is een inlog interactie net als bij Wehkamp. Er schuift een inlog formulier uit zodat je vanaf elke pagina snel kunt inloggen. Social media hebben wel een belangrijke plek op de website, namelijk links bovenaan. Rechts is een zoekveld waar je alle artikelen van Chasin kunt zoeken. Sterke punten - Overzichtelijk Zwakke punten - Weinig kleurgebruik - Weinig icons - Niet “full-width” - Trage website Conclusie Van alle concurrenten heeft Chasin’ de slechtste website. Het straalt weinig tot geen sfeer uit en misschien wel het allerbelangrijkste: het werkt traag. De laadtijd ligt enorm hoog waardoor klanten sneller weg gaan.
20
21
Concurrentie analyse
Website Zalando.nl Algemene indruk Op de website van Zalando is het erg druk. De website heeft net als de andere twee concurrenten een interactie bij het inloggen, waardoor je altijd en overal kunt inloggen. Onder de inlog knop is een zoekveld waar klanten alle artikelen van Zalando kunnen vinden. Wat ik wel ontdekte was dat ik bij het betreden van de website direct op de “heren-home” terecht kwam. Ik zat tegelijkertijd op Facebook, waardoor ik denk dat Zalando via Facebook het geslacht van de bezoeker zoekt zodat het direct op een gepersonaliseerde homepagina terecht komt. De website heeft onder de foto’s van de artikelen enorme lappen tekst wat het niet overzichtelijk houdt. Sterke punten - Slim gebruik van Facebook/Cookies - Foto’s van artikelen op de homepagina Zwakke punten - Veel tekst - Niet “full-width” Conclusie Zalando maakt enorm slim gebruik van de surf geschiedenis van klanten. Ze maken het hierdoor persoonlijk en dat is iets wat ik in de website van Russiah ook wil gaan doen. Een groot min-punt zijn de grote lappen tekst onderaan de homepagina.
22
23
Conclusie
“Veel websites zijn anno 2014 nog te traag” In mijn concurrentie analyses heb je kunnen lezen wat ik van de websites vindt. Kort samengevat is mijn algehele beeld dat er nog veel verbeteringen mogelijk zijn. Er zijn al wel handige interacties als het gaat om het inloggen, maar sneeuwvlokjes en lappen tekst horen niet meer bij de moderne website. Er wordt nog weinig gebruik gemaakt van “full-width” flat websites. Door flat design maak je veel gebruik van CSS en weinig van foto’s, wat de laadtijd weer omlaag helpt. Als we op laadtijd komen valt er op elke website wel iets te verbeteren.. Het dieptepunt was de website van Chasin’, die af en toe 10 seconden in beslag nam om een nieuwe pagina te laden. Ik denk dat het belangrijk is dat de website van Russiah door het gebruik van flat design een korte laadtijd heeft. Toen ik op de website van Chasin’ zat ben ik weggegaan omdat het allemaal té lang duurde, iets waar de klanten zich enorm aan kunnen storen.
24
Mindmap
25
Pump interacties
Personal Bij het betreden van de website wil ik door cookies zorgen dat de klant op een gepersonaliseerde homepagina komt op basis van het geslacht van de klant. Ook wil ik dat de klanten informeel worden aangesproken, aangezien dat beter werkt bij de doelgroep studenten. Unexpected Op de homepagina komt een Vimeo widget waarin een animatie video afspeelt. In deze video is er een animatie van een Russische student te zien die vertelt over zichzelf en zijn leven als student. Deze Russische student draagt kleding van het merk Russiah, waardoor de doelgroep (Nederlandse studenten) zich gelijk moet voelen aan deze Russische student. Door deze interactie hoop ik dat klanten sneller een bestelling plaatsen en de slechte daden van Rusland vergeten. Meaningful Bij elk artikel is een like en dislike knop. Klanten kunnen een artikel “Liken” of “Disliken”. Hierdoor kan gemakkelijk een overzicht gemaakt worden van de populairste en meest gewilde artikelen. Pleasantly packed Na elke bestelling ontvangt de klant punten. Deze punten zijn te zien in een grote meter. Als de meter volledig vol is en je dus het maximale aantal punten hebt ontvangt de klant een kortings coupon. Deze punten zijn ook te verdienen door te klikken op de share button. Hiermee kan de klant het artikel dat hij/zij aan het bekijken is delen met al zijn/haar vrienden. Als de klant het bericht heeft gedeeld ontvangt het de punten die ook weer op de grote meter te zien zijn.
26
Concept
De doelgroep van Russiah zijn de Nederlandse studenten. Deze studenten moeten met de Russiah kleding gaan lopen. De website moet een moderne look hebben en moet gemaakt worden aan de hand van flat UI colors en flat design. Op de homepagina zal een zoekveld zijn met daaronder 3 populaire artikelen van Russiah. Ook zal er een video animatie op de homepagina komen waarin een Russische student beschrijft wie hij is en wat hij doet. Omdat er in eisen staat dat sociale media centraal moeten staan komen er drie sociale media vakken. In deze vakken zullen de laatste tweets, de laatste Facebook posts en de laatste Instagram foto’s te zien zijn. Op Instagram komen bijvoorbeeld foto’s van klanten die kleding van Russiah dragen. Hierdoor kunnen nieuwe klanten snel zien of de kleding mooi is en zien ze ook dat andere leeftijdsgenoten de kleding dragen. Bij elk artikel zal een share knop zijn waarmee klanten gemakkelijk een artikel kunnen delen met hun vrienden. Als een klant het artikel gaat delen met zijn/haar vrienden zullen er punten worden toegevoegd aan een zogenaamde meter. Ook bij aankoop van een artikel zullen er punten bij worden geschreven. Als de meter vol zit en dus het maximale aantal punten bereikt zal zijn, zal de klant een korting ontvangen bij de volgende bestelling.
27
Programma van eisen
Functionele eisen - “Spaar systeem”, bij elke aankoop ontvang je 10 punten en bij de 100 punten is de balk vol en krijg je een 5 euro kortingsbon. - Zoekveld - Inlog mogelijkheid - Nieuwsbrief - Snelle laadtijd - Sociale media - Winkelwagen - Contact formulier Niet-functionele eisen - Flat design - Keurmerken van betrouwbaarheid - Goed leesbaar - Weinig tekst, veel foto’s
28
Reflectie
Sterke punten Ik wist vanaf het begin waar ik mee bezig was en wat ik wilde. Hierdoor kon ik snel aan de slag en was het erg gemakkelijk om een analyse te maken voor mijn eigen casus, Russiah. Ik wist al een beetje wat de trends waren op het gebied van webdesign en dit heeft ook zeker in mijn voordeel gewerkt. Mindere punten Doordat ik dacht dat ik de analyse makkelijk kon invullen heb ik er te lang mee gewacht. Uiteindelijk had ik alles wel uitgewerkt in Pages maar nog niet in inDesign. Doordat ik nog een heel magazine spread ontwerp moest maken en alles nog netjes moest verwerken in inDesign heb ik enige vertraging opgelopen. Dat is wel een minpuntje waar ik beter op moet gaan letten. Verbeter punten Een verbeter punt is dat ik meer moet gaan werken volgens de planner en deze planner ook beter moet gaan invullen. Ik had nu maar 2 รก 3 dagen opgeschreven voor het ontwerpen en verwerken van het analyserapport waardoor ik enige vertraging op liep. Dit is een les voor de volgende keer, waarin ik langer de tijd moet gaan nemen om een magazine spread te maken en alle opdrachten daarin te verwerken.
29