Inhoudsopgave Inleiding Aanloopfase Startdocument Conceptfase Concept Free Time Concept Hot or Not...

Transcriptie

1

2 Inhoudsopgave Inhoudsopgave... 1 Inleiding... 2 Aanloopfase... 3 Startdocument... 4 Conceptfase... 5 Concept Free Time... 6 Concept Hot or Not... 6 Concept UpToDate... 6 Gekozen concept... 6 Ontwerpfase... 7 Must haves... 8 Should haves... 8 Could haves... 8 Won t have this time... 8 Demofase... 9 RSS Database Meervoud 1

3 Inleiding Tijdens de afgelopen maanden zijn wij als team Meervoud bezig geweest met het vertalen van de website van Styletoday naar een variant voor mobiele telefoons. Tijdens de verschillende fases zijn wij langzamerhand tot een eindproduct gekomen dat aan de wensen van de doelgroep voldoet. De verschillende gebruikerstests leverden ons veel informatie op, zowel over de werking van de website op de verschillende mobiele telefoons, als de ervaring van de gebruiker. Dit einddocument vat de verschillende fases kort samen en laat zodoende het proces zien dat doorlopen is. De documentatie uit iedere fase is verder terug te vinden op de bijgeleverde CD. Aan het einde van dit document zijn ook instructies opgenomen om het eindproduct succesvol te implementeren. De bronbestanden zijn eveneens op de CD te vinden evenals een database gevuld met data die uitgelezen is uit de RSS-feed. Met dit document en de eindpresentatie komt dit project tot een einde. Het product is af en klaar voor gebruik. Wij hopen dat Styletoday binnenkort haar nieuwste aanwinst kan presenteren. Meervoud 2

4 Aanloopfase Actie Techniek, doelgroep en markt onderzocht. Opgeleverd Startpresentatie, startdocument en aanvullend doelgroeponderzoek. Meervoud 3

5 Aanloopfase Als team Meervoud zijn wij begonnen met het project Shopgids. Dit was ook een website van Ilse Media (Sanoma Digital). De website was bedoeld om de doelgroep leuke winkels te helpen vinden. Het was dan vooral de bedoeling om de winkels te vinden met unieke producten die je eigenlijk niet in de grote winkelketens vind. Het vinden van producten uit de zijstraatjes van leuke steden. De opdracht was om een website te maken voor gebruik op mobiele telefoons. Na een aantal weken is de opdracht veranderd en zijn wij ons gaan richten op een ander project. Vanwege de financiële crisis besloot men bij Ilse Media niet meer verder te gaan met Shopgids. Wij zijn hierom, niet met minder enthousiasme, verder gegaan met de website van Styletoday. Om te zorgen dat wij geen ernstige vertragingen opliepen zijn wij verder gegaan met de startdocumentatie die al aanwezig was van het andere team, dat direct was begonnen met Styletoday. MobileOne was verantwoordelijk voor dit startdocument waarin zij reeds onderzoek hadden gedaan naar de website, de doelgroep, de concurrentie en de markt. Dit onderzoek bestond voor het grootste gedeelte uit deskresearch, maar ook de mogelijke doelgroep was ondervraagd. Na de debriefing en de eerste presentatie bleek dat de doelgroep nog niet voldoende in kaart was gebracht. Ook was de onderzochte doelgroep te jong en wisten we te weinig van ze om een goed concept te bedenken dat op hun wensen en behoeften was afgestemd. In de verlenging van deze fase hebben we ons dan ook gericht op het onderzoek naar de doelgroep. We hebben met alle drie de teams het onderzoek gedaan om de vertraging van het project te beperken. De onderwerpen waar we antwoord op wilden krijgen waren de volgende: Welke mobiele telefoon gebruikt de doelgroep? Hoe bekend is de doelgroep met StyleToday? Waarom bezoekt de doelgroep de sites die ze regelmatig bekijken? Is de doelgroep lid van sociale netwerken, welke zijn dat en is ze daar actief? Hoe besteed de doelgroep haar vrije tijd? Wat voor rol spelen tijdschriften in de vrijetijdsbesteding van de doelgroep? Wil de doelgroep graag meningen delen op het gebied van fashion of beauty? De nieuwe opdracht, het vertalen van de Styletodaywebsite naar een mobiele versie had nog steeds betrekking tot mobiele telefoons. Daarom konden wij ons eigen onderzoek naar de techniek en interactie op mobiele telefoons nog steeds gebruiken. Startdocument Omdat geen van de groepsleden ervaring had met het bouwen van een mobiele website, was ons inleidende startdocument er vooral voor bedoeld om uit te vinden wat er allemaal komt kijken bij het bouwen van een mobiele website. Hierbij is vooral gekeken naar de techniek en interactie. Het is bijvoorbeeld erg belangrijk om een mobiele website als een losstaande site te zien met een andere functie dan een normale website. Verder zijn er in het startdocument een aantal analyses te vinden over onder andere de markt van mobiel internet, de concurrentie van StyleToday en de doelgroep van Styletoday die we willen bereiken. Meervoud 4

6 Conceptfase Actie Drie concepten bedacht. Opgeleverd Conceptpresentatie en conceptdocumentatie. Meervoud 5

7 Conceptfase Naar aanleiding van het onderzoek hebben we door middel van verschillende methodes een aantal ideeën ontwikkeld. De ideeën die het beste bij de doelgroep pasten hebben we doorontwikkeld tot een concept. We hebben in totaal 3 concepten ontwikkeld waaruit een mock-up is voortgekomen. Concept Free Time De nieuwste fashion en beauty nieuwtjes op ieder moment van de dag, gecombineerd met een fashion agenda. Concept Hot or Not Een concept gebaseerd op nieuwsverstrekking over Beauty en Fashion, met daarbij een Hot or Not-applicatie met commerciële mogelijkheden. Concept UpToDate Het laatste beauty- en fashionnieuws, een vraag met een poll en een leuk weetje. Gekozen concept Bij de presentatie bij Ilse media is de Hot or Not gekozen door de klant. In het Hot or Not concept kunnen de bezoekers de allerlaatste beauty en fashion nieuwtjes lezen zoals ze gewend zijn op de reguliere site. Maar ze kunnen daarnaast ook stemmen op bepaalde producten die te zien zijn in de Hot or Not applicatie die op de mobiele website te vinden is. Dit is voor meerdere partijen aantrekkelijk. De bezoeker ziet de nieuwste producten, de modeontwerper kan zien wat zijn product doet met de doelgroep, en de adverteerder wordt vrijwel zeker bekeken met zijn reclameboodschap. Styletoday krijgt op haar beurt meerd bezoekers en wordt hierdoor ook meer waard. Meervoud 6

8 Ontwerpfase Actie Design en techniek ontwerp voor de mobiele website gemaakt. Opgeleverd Ontwerpdocument. Meervoud 7

9 Ontwerpfase In de ontwerpfase hebben wij vastgelegd welke kleuren er gebruikt gaan worden, welke opbouw van de website we gaan gebruiken en welke content er in de mobiele website moet komen. Voor de content hebben wij het MoSCoW-principe gehanteerd. Must haves Fashion news Beauty news Tip van de dag Doorklikken naar het gehele artikel over de Tip van de dag Hot or Not Resultaat tonen van Hot or Not Een stijl, werkend op de mobiele site Should haves Doorklikken naar productinformatie uit de Hot or Not Plaatjes bij artikelen De drie verschillende stijlen geïmplementeerd Zoekfunctie Could haves Reclamebanners Weather Checker tip geïntegreerd met de Tip van de dag Won t have this time Tell-a-friend-functie Meervoud 8

10 Demofase Actie Demo s gemaakt en gebruiks- en doelgroeptesten gedaan. Opgeleverd Meerdere demo s Meervoud 9

11 Demofase In de demofase hebben wij de blauwdrukken van het ontwerpdocument omgezet naar een eerste versie van het product. Aan de eerste versie moest nog aardig worden gesleuteld. De opdrachtgever vond de kleuren niet de juiste uitstraling hebben. Omdat Styletoday niet wil worden gezien als een goedkoop merk, was er nog werk aan de winkel. Omdat het een demo was werkte ook nog niet alles naar behoren. Ook de doelgroep bleek tijdens de gebruikerstests nog het nodig op te merken te hebben. In de daarop volgende versies werd continue de feedback van de klant en de doelgroep verwerkt in steeds nieuwe prototypes. Design De feedback die we als eerste verwerkt hebben was de feedback over het design. De doelgroep vond hem wat aan de roze kant en ook de opdrachtgever had er bedenkingen over. Het moest gewoonweg meer in de stijl van Styletoday. Hieruit voort vloeide het design dat hieronder te zien is. Meervoud 10

12 Structuur De koppen Fashion en Beauty vielen niet heel goed op en haaden niet echt een uitstraling van een kop. De structuur van de site werd er onduidelijk door. We hebben dit aangepakt door er kenmerkende Styletoday pijltjes voor te zetten. Ook hebben we de koppen boven het lead-item van de categorie gezet. Dit om de algehele structuur te verduidelijken. De kleine stippelijn onder de lead-items weggehaald, omdat dit lijntje voor een soort van afbakening zorgde. Het lead-item leek niet bij het nieuws te horen en kreeg een bannerachtige uitstraling. Hoofditems In ons nieuwe design hebben we er voor gekozen om één artikel uit elke catergorie te belichten op de manier waarop de bestaand Styletoday site dat ook doet. Echter uit de tests bleek dat het niet duidelijk genoeg was dat ze klikbaar waren. We hebben de titelbalk onderin het plaatje gezet en er een doorklik-pijltje bij gezet. Hot or Not De knoppen van de Hot or Not werden niet goedgekeurd door ons test panel. De roze kleur was ditmaal niet het probleem maar men vond ze een beetje los staan van de rest van de site. Om een beter geheel met de rest van de site te krijgen heben we de knoppen een zwartgrijze tint gegeven. Meervoud 11

13 Eindproduct Actie Mobiele website en documentatie afgemaakt. Opgeleverd Mobiele website en eindocumentatie Meervoud 12

14 Eindproduct Het eind product is iets anders geworden dan we in eerste instantie gedacht hadden. Er zijn wat knopen door gehakt met betrekking tot de content en de feedback van de demo s is ook in het eindproduct verwerkt. De volgende punten zijn de belangrijkste aanpasssingen. Hot or not In de eerste schetsen stond er naast de Hot or Not altijd de Tip. Echter bij de gebruikers testenis gebleken dat dit niet duidelijk was. Men dacht vooral dat de tekst bij het plaatje hoorde. Wij hebben er daarom voor gekozen om in dit vlak een preview te zetten van het artikel waar het plaatje bij hoort. Zo kan men gelijk doorklikken naar het artikel en maakt de tekst in sommige gevallen duidelijk waar het plaatje over gaat. Tip In eerste instantie bevatte ons idee ook een Tip. Hierbij werd ons vertelt dat de opdrachtgever zo min mogelijk (eigenlijk geen) nieuwe content voor wilde maken. Ons idee was dan ook eerst om de tips uit artikelen te gebruiken. Ook de weatherchecker tips leken ons geschikt. Echter wat al snel bleek dat er niet veel artikelen gepubliceerd werden waarin tips stonden. Ook gaven de testers aan dat ze, als er een tip stond, toch wel dagelijks een nieuwe tip wilde zien. We expirimenteerden hiermee, maar er werd met deze functionaliteit naar ons inzien niet voldaan aan de verwachting van de gebruiker. Meervoud 13

15 Implementatie Om de mobiele website te kunnen implementeren moet er rekening worden gehouden met enkele zaken. Daarnaast moeten er enkele handelingen worden verricht, welke hieronder worden beschreven. Denk hierbij aan een kleine verandering in de database en de mobiele website zelf op de server zetten. RSS De artikelen worden uit enkele RSS-feeds gelezen middels het bestand xml.php. Dit bestand kan worden aangeroepen met een cron-job, waardoor bijvoorbeeld eens per half uur wordt gecontroleerd of er nieuwe artikelen zijn. Dit bestand is ook verantwoordelijk voor het verkleinen van de afbeeldingen en video s tot een formaat dat op mobiele telefoons goed te bekijken is. Verder worden hier in ook de links naar artikelen op Styletoday verwijderd en vervangen door de tekst van die link. Database Doordat wij niet beschikten over de database van Styletoday, hebben wij een eigen database gemaakt, waardoor deze anders is dan die van Styletoday. We hebben geprobeerd de verschillen zo minimaal mogelijk te houden. Daarom zal hier zo goed mogelijk worden uitgelegd hoe de database in elkaar steekt, zodat de beheerders bij Ilse Media het makkelijk moeten kunnen overzetten. Meervoud 14

16 De ERD toont de relaties van de tabellen in de database die is gebruikt voor de mobiele website. De tabel artikel slaat alle artikelen op van zowel Fashion en Beauty news, als Hot or Not. Deze worden uit elkaar gehouden door het categorienummer. Categorie 1 is Fashion news, categorie 2 is Beauty news, categorie 3 is Hot or Not. De website weet hierdoor automatisch welk artikel waar getoond moet worden. De tabel hot_or_not slaat alle stemmen op die worden uitgebracht op de Hot or Not artikelen. De website meet ook de percentages aan de hand van deze tabel. Deze tabel is nieuw voor Styletoday omdat deze functie uniek voor de mobiele website is bedacht. Alle tabellen zijn eigenlijk ondersteunend voor de tabel artikel. Voor de meeste is duidelijk waarvoor ze worden gebruikt, hieronder volgt echter toch een korte uitleg: artikel: voor het opslaan van elk artikel op de website. auteur: voor het opslaan van de auteurs van de artikelen. categorie:voor het opslaan van de categorieën van de artikelen. hot_or_not: voor het opslaan van de stemmen op de Hot or Not producten. koppel_artikel_media: voor het opslaan van de koppeling tussen een artikel en zijn hoofdafbeelding (lead). Op deze manier zouden meerdere artikelen dezelfde afbeelding kunnen gebruiken of één artikel meerdere afbeeldingen. Daarnaast wordt in deze tabel ook bepaald welke afbeelding voor de Hot or Not functie zal worden gebruikt. media: voor het opslaan van hoofdafbeeldingen en Hot or Not afbeeldingen. Website overzetten Wat moet er gebeuren om de website werkend te krijgen? Ten eerste moeten alle bestanden voor de website online op een server worden gezet zodat alle PHP-bestanden door de server kunnen worden verwerkt. Verder is het van belang dat het volgende bestand correct wordt aangepast: includes/config.php in dit bestand staan de gegevens die PHP nodig heeft om contact te maken met de database. Als dit bestand niet correct wordt ingevuld zal de website veel fouten tonen omdat de artikelen niet benaderd kunnen worden. Als deze twee zaken zijn gedaan zou de website al moeten werken. De map waarin alle data staat maakt voor de website niet uit, zolang de submappen zoals: images, includes en style maar niet worden aangepast. Wordt dit wel gedaan, dan zal er in verschillende PHPbestanden een verandering van de map moeten worden doorgevoerd. Dit is dus niet raadzaam. Onze instellingen Om fouten te voorkomen hebben wij de website getest op verschillende servers. Hieronder staat welke versies van PHP en MySQL wij hebben getest. Dit wil niet zeggen dat de website bij andere versies een foutmelding zal geven, maar wij kunnen niet met zekerheid zeggen of het op andere (vooral oudere) versies wel werkt. Werkende versies: Php: en Mysql a en a Meervoud 15