Ontwerpdocument
Jonathan
Geerman Student CMD 2015
Inhoudsopgave
H1. MoSCoW Prioritisation H2. Sitemap H3. Schetsen H4. Scenario H5. Digitale ontwerp H6. Testrapport Trelotest H7. Reflectieverslag Bijlage
2
3 4 5 10 12 15 16 19
MosCoW Prioritisation Must-have: • Zoekfunctie • Winkelwagen • Sociale Mediakanalen • Contact gegevens van de webwinkel • Profiel/login pagina • Bestel pagina • Product pagina met af beeldingen en een kleine beschrijving • Korte beschrijving van de webwinkel (betrouwbaar en veilig) • Link naar Customer Service
Could-have: • Mouse-over preview • Snelknop “BackToTop” • Slideshow producten
Should-have: • Filter • Beloning systeem (punten verzamelen)
Would-like: • Mogelijkheid om beoordeling achter te laten • Productvideo • 3d afbeeldingen
3
H 2. Sitemap LighInTheBox.com
Home
CategorieĂŤn
Mode & Kleding
Huis & Tuin
Schoenen & Tassen
Coole Gadgets
Telefoons & Electronika
Sport & Lifestyle
Bruilloften & Feesten
Sieraden & Horloges
Mobiele Telefoonacc.
4
Actieknallers
Opruimingszone
Social Media
Nieuwe producten
Betalen & Verzenden
Login/ register
Winkelwagen
Populaire pagina s
Bedrijfsinfo
Bedreifsbeleid
Search
Home
Populaire categorieĂŤn
Klantenservice
Overige zaken
Klantenservice
H3 Schetsen
5
6
7
8
9
H4 Use Case Scenario
Hoofdpersoon: Henk Doel: een nieuw horloge kopen. Henk zit achter zijn laptop naar YouTube- muziek te luisteren. Opeens herinnert hij zich dat hij een nieuw horloge nodig heeft voor zijn werk. Hij gaat naar Google.nl en zoekt op ‘goedkoop horloge’. De eerste advertentielink die op zijn scherm verschijnt is die van LightInTheBox.com. Hij klikt hierop en gaat direct naar de hoofdpagina voor herenhorloges [LightInTheBox.com /herenhorloges/]. Hij heeft al een idee van wat voor soort horloge hij wil gaan kopen. Hij ziet drie grote af beeldingen met het type horloge dat verkocht wordt op de website. Hij klikt direct op de af beelding met het type horloge dat hij wil kopen. Hij zit nu bij de artikelpagina van herenhorloges (voor het type x). Hij ziet dat er best veel horloges zijn, dus hij gaat gebruikmaken van het filtersysteem. Hij klikt op de optie om alleen zwarte horloges met een leren band te tonen. Hij ziet dat de lijst met horloges kleiner wordt. Op de tweede pagina ziet hij het horloge dat hij wil. Hij klikt hierop en gaat vervolgens naar de productpagina. Hij bekijkt de grote af beeldingen van het horloge en beslist om het te kopen. Naast de bestelknop ziet hij dat de website gratis verzending biedt en dat er met iDEAL betaald kan worden, waardoor hij blij van wordt. Hij drukt op de bestelknop en gaat naar de bestelpagina. Voordat hij kan afrekenen echter, heeft hij de optie om eerst in te loggen of te registreren, of als gast af te rekenen. Hij kiest ervoor om als gast af te rekenen. Hij vult zijn gegevens in op het bestelformulier en vervolgens betaalt hij met iDEAL. Hij krijgt een notificatie, zowel op de website als in zijn inbox, dat de bestelling voltooid is.
10
11
H5 Digitale ontwerp
12
13
14
H6 Testrapport Trellotest Om erachter te komen of mijn ontwerp bij de doelgroep paste moest ik een Trellotest doen. Helaas heb ik deze niet kunnen uitvoeren omdat ik nog niet zo ver was . Om een optimaal resultaat te krijgen moet ik ook minimaal negen personen testen (omdat ik drie verschillende persona’s had die best verschillend waren van elkaar ). Zou ik mijn gebruikerstest hebben gedaan, dan zou ik zeker de resultaten over verleiding (seduction ) willen weten. De vraag waar ik antwoord op zou willen, zou zijn: past mijn ontwerp bij alle drie persona’s? Ik wilde weten of ik een ontwerp had gemaakt dat iedereen aanspreekt
15
H7 Reflectieverslag Situatie Heb je de uitgangssituatie goed omschreven in het concept? Ik heb mijn best gedaan om de uitgangssituatie zo goed mogelijk te omschrijven in het concept. Was de planning realistisch en bruikbaar? Ik heb een heel gedetailleerde planning gemaakt voor de course Webdesign. Het plannen was niet moeilijk, het uitvoeren van de opdrachten wel . Aan sommige hoofdstukken (zoals doelgroepanalyse) bleef ik te lang werken waardoor ik achterliep met de planning. Daarom heb ik een nieuwe planning (zie bijlage 1) gemaakt die bruikbaarder was voor mijn persoon . Deze nieuwe planning heb ik op de website Trello.com gemaakt. Alle opdrachten heb ik een kaart gegeven. Zodra ik een opdracht af had, plaatste ik de kaart van die opdracht op de hoofdkaart, ‘done’ genaamd. Had je al ervaring met HTML & CSS? Ik heb wat kennis over HTML en CSS, maar website bouwen blijft moeilijk voor mij. Taak In deze course ben je in aanraking gekomen met taken van de conceptontwikkelaar, de ontwerper en de webbouwer. Omschrijf per beroepsprofiel wat je hebt uitgevoerd. Conceptontwikkelaar: Als conceptontwikkelaar was ik voornamelijk bezig met het uitzoeken van informatie en schrijven. Ontwerper: Als ontwerper was ik meer bezig met het ontwerp van de website. Ik moest veel met het programma Adobe Photoshop werken om af beeldingenassets en high-fidelitywireframes te maken voor de website. Webbouwer: Als webbouwer moest ik drie webpagina’s bouwen met HTML5 en CSS3 . Welk onderdeel werkte je het liefst aan? Ik werk het liefst aan het ontwerp van de website. Hier heb ik alle ruimte om mijn creativiteit te gebruiken om iets moois te maken . Heb je jouw aandacht goed kunnen verdelen? Ik vind dat ik veel te veel aandacht heb besteed aan het concept. Ik heb veel uren gestoken in het het maken van een 16
goede analyse, een mooie infographic en een mooie opmaak van het conceptdocument. Actie Wat was een keerpunt in de course? Voordat ik ben begonnen met het bouwen van de website heb ik verschillende schetsen gemaakt. Mijn idee was om een minimalistische website te ontwerpen om zo een grotere groep mensen aan te spreken . Een van de feedbackpunten die ik terugkreeg op de schetsen was dat, hoewel ik probeerde te streven naar een minimalistisch design, er toch overbodige informatie was, die beter anders op de website geplaatst had kunnen worden (bijvoorbeeld in de footer), en niet op alle pagina’s . Wat betekende dat keerpunt voor de wijze waarop je vanaf dat moment aan het werk ging? Omdat dit nog een schets was, was dat makkelijk aangepast en geen grote ramp. Resultaat Ben je tevreden met het eindresultaat? Wel met mijn documenten, maar niet met de website. De website heb ik niet af kunnen krijgen. Programmeren blijft lastig voor mij. Heb je het concept gevolgd? Het concept stond helemaal centraal bij het bouwen van de website. Is het eindresultaat beter, minder goed of anders dan het concept? Licht toe. Bij het bouwen van de website heb ik mijn best gedaan om zo min mogelijk af te wijken van het ontwerp en het concept dat ik eerder had gemaakt. Helaas zijn mijn vaardigheden in webdesign niet zo uitgebreid , waardoor ik veel te veel tijd nam met het bouwen van een onderdeel, waardoor ik op het laatst erg moest haasten. Hierbij missen er een heleboel nog. Hoe reageerden anderen op het eindresultaat? Ik heb het eindresultaat nog niet met anderen gedeeld.
17
Reflectie Wat neem je mee en wat ga je anders doen bij een volgend concept? Besteed niet te veel tijd aan onderzoek. Onderzoek is belangrijk, maar een grondig onderzoek doen kost te veel tijd voor deze course en het risico is dat je dan in tijdsnood komt. Voor de volgende keer wil ik mijzelf eerst afvragen hoeveel tijd ik voor het onderzoek nodig denk te hebben, wat de vragen zijn die ik wil gaan onderzoeken. Wat neem je mee en wat ga je anders doen bij een volgend ontwerp? Schetsen, schetsen en meer schetsen. Schetsen is een van de beste manieren om je ideeĂŤn en je creativiteit uit je hoofd, en concreet op papier te krijgen, waardoor je beter kan beslissen welke richting je met het ontwerp op wil gaan. Wat neem je mee en wat ga je anders doen bij het realiseren van een volgend ontwerp? Voor de volgende keer zou ik eerst mijn schetsen laten testen op de doelgroep om een idee te krijgen of ik goed bezig ben en of er iets aangepast moet worden, om vervolgens te werken aan het realiseren van het ontwerp. Wat heb je nodig voor een succesvol vervolg? Blijf focussen op het einddoel en als je ergens in vastloopt of hulp bij nodig hebt, durf dan te vragen (hierbij denk ik meer aan het bouwen van de site in html).
18
19
Jonathan
Geerman Student CMD 2015
ISSUU.com/TG1Maximus