Digitas LBi Scotch & Soda mobiele omgeving Einddocumentatie Bart van den Brink & Wouter Greveling
Hogeschool Utrecht Communication & Multimedia Design Docenten: Laurens Vreekamp & Hans Kemp Proofing & Reflecting 20-01-2014 wouter.greveling@student.hu.nl bart.vandenbrink@student.hu.nl
Voorwoord Web-shop pagina’s speciaal ontworpen om te navigeren op een mobiel device. Het is de nieuwe trend. Mensen zitten tegenwoordig vaak op de bank met hun telefoon in de hand en zelfs onderweg in het OV zijn we onlosmakelijk verbonden met onze mobiele telefoon. Wouter en ik kregen de keuze uit verschillende opdrachten waaronder het geweldige aanbod van DigitasLBi om ons te verdiepen in de mobiele navigatie van Scotch & Soda. Natuurlijk onder begeleiding van Lost Boys zelf. De opdracht heeft geleid tot het maken van dit User Experience document. Een pittige klus. Zelfs onder begeleiding is het lastig om zo iets voor de eerste keer in elkaar te zetten. Wel drukt het je met de neus op de feiten. Het maken van een UX document bevat veel meer details dan je zou verwachten. Het is een verfijnde klus waar ze bij DigitasLBi dan ook een eigen afdeling voor hebben. Tijdens het maken van dit document zijn Wouter en ik er achter gekomen dat de kleine details er echt toe doen. We hebben dan ook ons best gedaan om deze details bij elk onderwerp te bespreken. Ben je nu net zo benieuwd naar het eindresultaat als wij? Lees dan snel verder. Fotografie van Scotch & Soda Ik wens u in ieder geval veel leesplezier Bart van den Brink
Inhoud Inleiding Over DigitasLBi
3 3
Team
4
Opdracht Over Scotch & Soda
5 5
Onderzoek De winkels De website Concurrentie Nelly.com Asos.com G-star.nl
6 6 7 8 9 10 11
Idee
12
Onderbouwing & functies
13
Flowchart
14
UX documentatie
15
Eindwoord
24
Inleiding Watsapp, Facebook, e-mail, tegenwoordig kan het allemaal on the go. Waar we ons maar bevinden via mobiel internet en onze smartphone zijn we altijd verbonden met het wereldwijde web. Maar een nadeel van onze smartphone is het kleine scherm. De gemiddelde website is gemaakt voor een groot beeldscherm. Op bijvoorbeeld een laptop of desktopcomputer zijn dan alle opties en mogelijkheden zichtbaar. Maar of het kleine scherm van een smartphone is dit helaas niet mogelijk. Speciaal voor deze kleine schermen word dan ook vaak een eigen pagina ontworpen. DigitasLBi heeft ons gevraagd om speciaal voor Scotch & Soda ons te verdiepen in deze mobiele pagina’s en dan met name de navigatie. Details over de opdracht kunt u terug lezen in het hoofdstuk opdracht. Verder bestaat dit document uit een aantal kleine onderdelen zoals onderzoek en onderbouwing. Maar het gaat met name om de User Experience. Welke functies bevat de door ons ontworpen omgeving en welke details komen hier in terug. Dit document geeft de technisch developer en grafisch designer de mogelijkheid om de functies vorm te geven en werkzaam te maken zodat de gebruiker een complete ervaring heeft bij het gebruiken van de Scotch & Soda mobiele web-shop
Over DigitasLBi DigitasLBi is een marketing en technologie bureau dat bedrijven helpt in het transformeren van hun promotie en werk naar dit digitale tijdperk. We vinden het niet erg om een klant vanaf het begin te begeleiden in deze reis. Zolang de klant gelooft in onze creativiteit, technologische en media kennis kunnen wij een merk naar een hoger niveau tillen. We geloven dat je met samenwerking er voor kan zorgen dat er zich een nieuwe toekomst opent voor de klant en er op deze manier achter te komen waar de kansen liggen.
3
Team Ons team voor dit project bestaat uit twee personen. Bart en Wouter studeren allebei Communicatie & Multimedia Design aan de Hogeschool Utrecht. Op dit moment zitten we in het derde leerjaar en doen we een specialisatie User Experience Design. Als team hebben we voor de opdracht van DigitasLBi gekozen in verband met de expertise die Lost Boys in huis heeft op het gebied van User Experience.
Bart van den Brink Student nr: 1606257 Bart.vandenBrink@student.hu.nl Wouter Greveling Student nr: 1603592 Wouter.Greveling@student.hu.nl
4
Opdracht Het kledingmerk Scotch & Soda heeft op dit moment een web-shop die alleen goed te bekijken is op een laptop of desktop computer. Echter is de verwachting dat de bezoekers van deze web-shop ook steeds vaker op hun smartphone de kleding gaan bekijken. Speciaal voor deze bezoekers moet er een mobiele omgeving worden ontworpen. Scotch & Soda heeft als merk een eigen beleving ontwikkeld. Het draait in de winkels niet om verkoop maar om styling en dit komt ook weer terug in de details van de kledingstukken. Het merk probeert zich met deze beleving anders in de markt te zetten dan de concurrentie. Echter komt deze beleving nog niet erg terug in hun huidige web-shop. De mobiele web-shop omgeving moet hier dan ook op inspelen. DigitasLBi vraagt ons om een concept te bedenken plus het uitwerken van dit concept met bijbehorende wireframes. Nieuwe ideeën met betrekking tot navigatie of het helpen bij een kleding keuze staan hierbij voorop. Dit alles wordt tot slot gepresenteerd in de vorm van een User Experience document en een presentatie. Het gaat bij deze opdracht vooral om de brainstorm en wireframe fase. Als de uitwerking technisch niet word ondersteund is dit geen belemmering voor het eindproduct.
Over Scotch & Soda Scotch & Soda legt z’n hart en ziel in het maken van unieke kleding die draagbaar is voor iedereen. We vinden het belangrijk dat onze kleding met plezier en liefde wordt gedragen. Scotch & Soda producten zijn rijk aan details, van uitstekende kwaliteit en betaalbaar. De ontwerpers van Scotch laten geen enkel middel onbenut bij het uitwerken en verfijnen van hun kledingstukken, waarbij ook de afwerking van de binnenkant niet wordt vergeten. We investeren in het product, waarbij we gewoonlijk beginnen met de beste classic en vintage stijlen en die verrijken met inspirerende ideeën van over de hele wereld.
5
Onderzoek - de winkels Voor dat we van start konden gaan met het bedenken van het concept hebben we onderzoek gedaan naar de uitstraling van Scotch & Soda. Niet alleen de online uitstaling van Scotch & Soda is hierin belangrijk maar juist ook de offline beleving. Daarom zijn wij de binnenstad van Amsterdam, Utrecht en Haarlem in gelopen om te kijken welke beleving de Scotch & Soda winkels hier hebben. Per winkel blijkt de beleving te verschillen. Maar de uitstraling van het merk zelf is wel gelijk. Zo is de winkel in Haarlem erg licht van binnen in vergelijking met de winkels in Amsterdam en Utrecht. Maar de winkel in Utrecht heeft weer een industriĂŤle look en verschilt hiermee met de winkel in Amsterdam.
Tijdens het gesprek vertelde de werknemer ook dat het gevoel binnen het bedrijf anders is dan de werkgevers die hij eerder had gehad. Het lijkt knusser te zijn. De designers kiezen hun eigen stoffen en dit zorgt al direct vanaf het begin voor de eerste details in de kleding. Er heerst een soort rust in het bedrijf. Daarnaast zijn de winkels ook niet te vinden in de drukke winkelstraten. De meeste Scotch & Soda winkels zitten net even buiten de reguliere wandelroute van het winkelend publiek. Eigenlijk moet je dus al weten waar de kleding te koop is en waar de winkel zich bevind.
Naar aanleiding van ons bezoek aan Haarlem en Amsterdam hebben we in Utrecht gevraagd of het personeel bereid was een kort interview te geven. De winkelmedewerker vertelde ons dat het niet helemaal de bedoeling was om interviews te geven en hierdoor hebben wij dan ook geen uitgebreide documentatie gemaakt van dit interview. Wel was hij bereid om met ons een gesprek aan te gaan over de beleving en uitstaling van Scotch & Soda. Een aantal belangrijke punten uit dit gesprek zijn hiernaast opgesomd.
- Scotch & Soda winkels hebben een boetiek achtig uiterlijk als je vanaf de straatzijde voorbij loopt. - Verkopers in de winkel zijn geen verkoper maar stylist. - Scotch & Soda zorgt voor veel detail in de kleding. - De ervaring en het advies aan de klant zijn belangrijker dan de daadwerkelijke verkoop van een product. (Als de klant het advies kan waarderen leid dit uiteindelijk tot verkoop) - Online verkoop naar aanleiding van kleding advies in de winkel, zelfs op de iPad in de winkel. Zorgen niet voor een extra omzet van de winkel. Het online systeem is een aparte onderneming.
6
Onderzoek - de website Wat ons direct opvalt aan de Scotch & Soda web-shop is dat deze niet lekker werkt is elke browser. Dat is vreemd. Vooral als je je bedenkt dat ze verwachten dat de online verkoop zal stijgen. Verder valt direct op dat er gebruik word gemaakt van geweldige fotografie. De sfeer die hiermee word gecreÍerd is duidelijk anders dan bijvoorbeeld die van G-Star. Groot verschil tussen de foto’s is het gebruik van een achtergrond. Zo zie je direct hoe de kleding er uit ziet in de omgeving. Naar aanleiding van het bekijken van meerdere webshops zijn wij tot de hier naast genoemde inzichten gekomen.
- Scotch & Soda hanteert een eigen fotografie. De modellen staan in een omgeving en bewegen zich vaak vrij. (Helaas is dit niet bij elke foto het geval) - De kleding word weergegeven op een witte achtergrond. Dit zorgt voor overzicht maar geeft niet echt het Scotch & Soda gevoel. - In de web-shop zit een duidelijke structuur. De navigatie heeft een duidelijke verdeling met de balk bovenin en het drop down menu aan de linker kant. - De detailpagina bevat ook een klein verhaaltje over het product. Hierin worden onder andere de details van de kleding besproken.
Detail en fotografie gaan hand in hand op de Scotch & Soda website. Maar het is geen site waarop je lekker plaatjes gaat kijken. Tenzij je een lookbook weet te vinden. Hierin showen de modellen de nieuwe collectie. Helaas is het lookbook van de Heren en Dames van de Herfst/ Winter collectie gemaakt met een witte achtergrond. De kids collectie daarin tegen laat duidelijk het Scotch & Soda gevoel zien door de achtergrond waar de modellen tegen gezet zijn. Hierdoor is de lifestyle die Scotch & Soda wil uitdragen ook duidelijker.
7
Onderzoek - concurrentie Omdat DigitasLBi ons heeft gevraagd een mobiele omgeving te ontwikkelen voor Scotch & Soda is het voor ons van belang om te focussen op de ontwikkelingen op dit gebied. Sommige web-shops hebben als een stapje voor omdat zij afhankelijk zijn van de inkomsten van online verkoop. Goede voorbeelden zijn bijvoorbeeld Nelly. com en Asos.com maar ook g-star.nl heeft al een mobiele omgeving. Wat bij al deze web-shops duidelijk naar voren komt is dat ze graag alles laten zien. Alle kleding moet vindbaar zijn. Hierdoor zie de door de bomen het bos bijna niet meer.
Scotch & Soda zal zich misschien niet direct identificeren met G-Star als concurrent maar er is zeker goed nagedacht over de online uitstraling van het bedrijf. De navigatie is minder rommelig dan die van Asos en Nelly en dit pas perfect bij de uitstraling van G-Star. Het is dan ook een goed voorbeeld wat voor ons als inspiratiebron kan dienen.
Echter hebben de shops dit opgelost met een filterfunctie. Je kunt bijna alles kiezen en uitzoeken. Onze ervaring is dat je er bijna jeuk van krijgt aan je vingers. Druk je wel op het juiste woordje? En als dit niet goed gaat moet dan alles opnieuw? Even lekker kleding kijken is er bijna niet meer bij. Alle informatie is constant in beeld. Deze bevindingen geven ons het idee dat dit niet de uitstaling is die Scotch & Soda voor ogen heeft. Hiernaast leest u nog even de belangrijkste punten op een rij.
- De concurrentie heeft een zeer uitgebreide navigatie.
Die hieropvolgende pagina’s van dit document geven een impressie.
- Het bewaren van favorieten en een winkelmandje komen terug bij elke shop. - G-Star heeft de mobiele website voorzien van een store locator, erg logisch voor een mobiele site. - De pagina is vaak volgepropt met afbeeldingen en andere informatie.
8
Onderzoek - Nelly.com
De homepagina van Nelly.com bied direct filtermogelijkheden om kleding te zoeken.
Het hamburger menu bied de gebruiker nog meer filter mogelijkheden. Als je niet kunt vinden wat je zoekt.
De zoekresultaten zijn ook nog extra te filteren. De resultaten worden als vertical stack weergegeven.
9
Onderzoek - Asos.com
Asos maakt ook gebruik van een hamburger menu als filter.
De kleding word ook hier als vertical stack weergegeven maar wel per stuk.
Na het kiezen van een kledingstuk bied Asos veel mogelijkheden.
10
Onderzoek - G-Star.nl
De store locator bij G-Star is duidelijk aanwezig op de home.
Na het filteren van kleding via het hamburger menu laat de site steeds vier stuks zien.
Er worden na de keuze voor een kledingstuk minder opties gegeven dan bij Asos.
11
Idee Al snel is bij ons het idee ontstaan om de gebruiker kleding tips te geven. Omdat het personeel van de Scotch & Soda winkel geen verkopers zijn maar stylisten brengt dit natuurlijk wel het Scotch & Soda gevoel over. Mooie fotografie met hierbij een kleding tip. Bij elk kledingstuk komt dan een andere tip te staan. Omdat dit idee al heel erg front-end gericht is moesten we dit gaan vertalen naar UX wireframes. Plat gezegd is ons idee dus het kijken van plaatjes. Het moet niet te veel moeite kosten om naar de kleding te navigeren die jou interesse heeft. Als je dit hebt gedaan kan je namelijk lekker fullscreen kleding bekijken. En vind je het niks dan moet je heel makkelijk naar het volgende kledingstuk kunnen navigeren. Onze focus ligt dus bij het laten zien van de huidige collectie.
De manier van fotografie is bij de Scotch & De achtergrond laat direct zien hoe de Soda kinderkleding duidelijk anders dan bij kleding er in een omgeving uitziet. de concurrentie.
12
Onderbouwing & Functies Naar aanleiding van ons onderzoek hebben we besloten welke functies er in de applicatie moeten voorkomen. Dit samengevoegd met ons idee heeft het geleid tot de eerste schetsen en wireframes. Om duidelijkheid te scheppen over de functionaliteiten van de mobiele Scotch & Soda omgeving zijn deze hiernaast op een rij gezet. Al deze functies zijn terug te koppelen naar ons onderzoek. Zo is het bekijken van de kleding naar voren gekomen in de brainstorm als scope. Dit lijkt voor de hand liggend maar omdat we eigenlijk tips wilde geven aan de gebruiker blijft deze optie open voor de visual designer. Het invoegen van de store locator is deels afgekeken van G-Star. Het lijkt een logische stap om deze in de website te verwerken. Het filteren en opslaan van de kleding is belangrijk voor de relevantie voor de gebruiker. Als de website geen relevante informatie kan bieden zal de gebruiker namelijk geen gebruik maken van de mobiele website. De koppeling naar het winkelmandje is daarop een gevolg. Om kleding te kunnen kopen moet er een plek zijn om de kleding af te rekenen. De uiteindelijke deelfunctie is ingevoegd om afbeeldingen de kunnen opslaan en versturen naar vrienden. Op deze manier kan de gebruiker vragen wat anderen van de kleding of foto vinden.
- Kleding bekijken: De basis van ons idee is het bekijken van de kleding van Scotch & Soda deze functionaliteit is dan ook erg belangrijk. - Store locator: Omdat de site te bezoeken is op een device wat je vaak onderweg gebruikt is dit een element wat terug moet komen. - Kleding filter: Niet alle kleding is relevant, als man ben je waarschijnlijk niet opzoek naar vrouwenkleding. - Favorieten: Het opslaan en bekijken van favorieten. Onze focus ligt niet bij het bekijken van de favorieten maar je moet bekeken kleding wel kunnen opslaan. - Winkelmandje: Uiteindelijk is de mobiele site wel een web-shop het moet dus mogelijk zijn om kleding te kopen. - Delen: Tegenwoordig is het heel normaal om afbeeldingen te delen via Facebook, Watsapp of Twitter. Het moet dus mogelijk zijn om een afbeelding te delen.
13
Flowchart De flowchart van de door ons ontworpen mobiele omgeving is lastig weer te geven door middel van pijlen en vakjes met hierin de naam van het scherm. Daarom hebben we er voor gekozen om in dit hoofdstukje even kort de functionaliteiten per scherm op te sommen. Daarna volgt de uitgebreide UX uitleg. Het Hoofdmenu scherm: - Keuze man - Keuze vrouw - Store locator Het Design-tips scherm: - Nieuwe tip - Vorige tip - Kleding carrousel - Openen filter menu - Openen overlay
Het filter menu: - Store locator - Favorieten bekijken - Winkelmandje bekijken - Keuze man/vrouw - Keuze winter/zomer - Keuze maat - Keuze kleur
Het Overlay scherm: - Product informatie - Afbeelding toevoegen aan favorieten - Afbeelding toevoegen aan winkelmandje - Afbeelding delen - Afbeelding opslaan
14
Hier komt een knop die je brengt naar het design-tips scherm voor mannen. Visueel wordt hier duidelijk gemaakt dat het om de mannelijke categorie gaat. Wanneer de gebruiker hier op klikt, vergroot het vakje totdat het hele scherm gevuld is en wordt hierin het nieuwe scherm geladen. Alle andere iconen op het scherm verdwijnen uit het scherm met een schuivende beweging. Hier komt een knop die je brengt naar het design-tips scherm voor vrouwen. Visueel wordt hier duidelijk gemaakt dat het om de mannelijke categorie gaat. Wanneer de gebruiker hier op klikt, vergroot het vakje totdat het hele scherm gevuld is en wordt hierin het nieuwe scherm geladen. Alle andere iconen op het scherm verdwijnen uit het scherm met een schuivende beweging. Hier komt een knop die de gebruiker brengt naar het Store-locator scherm. Wanneer hier op wordt geklikt, wordt het vakje vergroot totdat het hele scherm is gevuld. Hier wordt vervolgens het nieuwe scherm in geladen. Alle andere iconen op het scherm verdwijnen uit het scherm met een schuivende beweging. Hier komt een knop die de gebruiker brengt naar het favorietenscherm. Wanneer hier op wordt geklikt, wordt het vakje vergroot totdat het hele scherm is gevuld. Hier wordt vervolgens het nieuwe scherm in geladen. Alle andere iconen op het scherm verdwijnen uit het scherm met een schuivende beweging. Hier komt een knop die de gebruiker brengt naar het winkelmandje. Wanneer hier op wordt geklikt, wordt het vakje vergroot totdat het hele scherm is gevuld. Hier wordt vervolgens het nieuwe scherm in geladen. Alle andere iconen op het scherm verdwijnen uit het scherm met een schuivende beweging. Hier komt het logo van Scotch & Soda of een andere notificatie zoals aanbiedingen.
15
First time use Als de gebruiker voor het eerst gebruik maak van de interface krijgt hij een uitleg te zien. Kleine tips die het gebruik van de mobiele omgeving aansporen. Bijvoorbeeld het sliden van de pagina of het omlaag trekken van het filter. In dit UX document word je rondgeleid door de Scotch & Soda mobiele website. Placeholder voor een achtergrond die bij de desbetreffende tip hoort. Dit kan wit zijn, maar ook een plaatje als het onderdeel is van de bijbehorende tip. Het achtergrondplaatje beweegt dus met dezelfde slidebeweging mee als het model.
Hier komt een model met het willekeurige kledingstuk dat aan de hand van de ingevulde instellingen wordt gekozen. Door van rechts naar links te sliden, verdwijnt het plaatje uit de linkerkant van het scherm en verschijnt de nieuwe tip vanuit de rechterkant met een schuivende beweging. Dit kader vormt een selectietool om de juiste kledingcategorie te kunnen selecteren. Het kledingtype dat zich binnen het kader bevindt staat in verbinding met de tips die getoond worden.
Dit werkt als een band met daarop iconen voor de verschillende kledingtypes. Deze band kan naar links en naar rechts gesleept worden, zodat de juiste categorie in het selectiekader geplaatst kan worden. Het complete menu aan de bovenkant kan naar beneden getrokken worden, zodat er een extra menu tevoorschijn komt met enkele functies waaronder filters.
16
Wanneer de gebuiker het scherm aanraakt zal er een overlay menu over het complete scherm verschijnen. Hierin worden enkele opties aangeboden en zal er wat meer informatie staan over het desbetreffende kledingstuk en de tip.
Hier komt informatie te staan over het desbetreffende kledingstuk en de tip die erbij gegeven wordt.
Dit icoon staat voor de optie om de kledingtip op te slaan in je favorieten. Na er op gelikt te hebben zal het icoon dikker gedrukt worden om aan te geven dat de tip vanaf dat moment in de favorieten staat. Door er nog een keer op te klikken gaat het icoon weer terug naar de normale grootte en wordt de tip verwijderd uit de favorieten.
Dit icoon staat voor de optie om de kledingtip te delen met je sociale omgeving. Door er op te klikken zal er een extra menu geopend worden.
Dit icoon staat voor de optie om het kledingstuk binnen de tip toe te voegen aan je winkelwagen. Na er op gelikt te hebben zal het icoon dikker gedrukt worden om aan te geven dat de tip vanaf dat moment in de winkelwagen staat. Door er nog een keer op te klikken gaat het icoon weer terug naar de normale grootte en wordt de tip verwijderd uit de winkelwagen.
17
Wanneer je op de delen knop drukt verschijnt dit extra menu. Door op de bovenste optie te klikken zul je de foto opslaan op het geheugen van de smartphone. Dit is de optie om de foto te delen met je sociale omgeving. Wanneer hier op geklikt wordt zullen er extra opties tevoorschijn komen.
Door hier op te klikken ga je terug naar het vorige menu.
Door te klikken op het gebied buiten de aangegeven opties ga je eveneens terug naar het vorige menu.
18
Wanneer er op ‘foto delen’ is geklikt, zullen deze extra iconen tevoorschijn komen. De bovenste optie van het menu, foto bewaren, zal omhoog schuiven door middel van een schuivende animatie om op die manier ruimte te maken voor de nieuwe iconen. De nieuwe iconen achter de nieuwe ruimte die open gaat al te zien zijn alsof ze er altijd al waren. Wanneer er op een van deze iconen wordt geklikt, zal de foto van de tip die op dat moment geopend is, gedeeld worden via het bijbehorende programma.
Door te klikken op het gebied buiten de aangegeven opties ga je terug naar het vorige menu. De ‘Annuleren‘ knop onderaan heeft hetzelfde effect.
19
Door de vinger op het scherm te plaatsen en naar links te bewegen, zal de nieuwe tip geladen worden. Het plaatje zal samen met de achtergrond naar links bewegen en uit het scherm verdwijnen.
Wanneer er gewisseld wordt van kledingtip, zal het plaatje naar links bewegen en hier uit het scherm verdwijnen. Tegelijkertijd zal aan de rechterkant een nieuw plaatje tevoorschijn komen en naar het midden van het scherm gaan. Dit gebeurt allemaal met een schuivende animatie. Als er van kledingcategorie gewisseld wordt, zoals dat eerder beschreven werd, zullen alle iconen een (aantal) plaats(en) opschuiven. De gebruiker is niet geheel vrij in het bewegen van deze band, omdat er gebruik wordt gemaakt van ankerpunten. Door lichte magnetische kracht zal het icoon dat het dichtste bij het markeerkader staat, naar het midden van het kader getrokken worden wanneer de gebruiker de vinger loslaat. Wanneer er van kledingcategorie gewisseld wordt, zal de kledingtip die bij de vorige categorie hoorde ook gewisseld worden. Dit gebeurt eveneens met een schuivende beweging waarbij het plaatje uit het scherm verdwijnt. Of dit links of rechts is, wordt bepaald door de richting waarin de kledingcategorie bewogen wordt. De iconen voor de kledingcategorieĂŤn zullen uit het scherm verdwijnen door middel van een schuivende beweging. Of dit de linkerkant of rechterkant is wordt bepaald door de beweging van de vinger.
20
Dit menu komt naar voren, wanneer de band met kledingcategorieĂŤn naar beneden getrokken wordt. Deze beweging zal gepaard gaan met een schuivende animatie. Wanneer er met de vinger een schuifbeweging naar boven gemaakt wordt, zal het uitgeklapte menu weer terugkeren naar zijn vorige positie. Dit icoon staat voor de lijst met opgeslagen favorieten. Door er op te klikken zal de gebruiker naar een nieuw scherm gebracht worden. Dit icoon staat voor de store-locator. Door er op te klikken zal de gebruiker naar een nieuw scherm gebracht worden. Dit icoon staat voor het winkemandje. Door er op te klikken zal de gebruiker naar een nieuw scherm gebracht worden. Een filter waar de gebruiker kan aangeven of hij op zoek is naar tips voor mannen of vrouwen. Door de slider naar links of rechts te schuiven kan de gebruiker een keuze maken. Een filter waar de gebruiker kan aangeven of hij op zoek is naar tips voor de zomer of winter collectie. Door de slider naar links of rechts te schuiven kan de gebruiker een keuze maken. Een filter waar de gebruiker kan aangeven welke maat hij heeft. De maataanduiding verandert aan de hand van de kledingcategorie die geselecteerd is. Door de slider naar links of rechts te schuiven kan de gebruiker een keuze maken. Standaard zal de slider op L staan voor de mannen en M voor de vrouwen Een filter waar de gebruiker kan aangeven in welke kleur hij wilt dat de kledingstukken gekozen worden. Er kunnen hier meerdere kleuren aangevinkt worden door op het vakje te klikken. Er wordt dan een glow om de rand van het vakje geplaatst om de selectie te laten zien
21
Dit is het overzicht waarin de gebruiker al diens opgeslagen kledingtips kan terugzien. De tips worden in twee verschillende kolommen onderverdeeld. De band met iconen voor alle kledingcategorieĂŤn fungeert nu als filter om de opgeslagen favorieten onder te verdelen. De slide-beweging is hetzelfde gebleven zoals eerder vermeld werd. Ook kan dit menu weer naar beneden getrokken worden voor een extra menu De plaatjes staan voor de kledingtips die de gebruiker interessant vind en op heeft geslagen. Deze worden hier onderverdeeld in twee kolommen met de meeste recente tip bovenaan. Wanneer de gebruiker klikt op een plaatje zal deze uitvergroot worden, zoals dat het geval is bij het design-tip menu. De mogelijkheid om het overlay menu op te roepen, wordt dan ook weer geactiveerd, zodat de gebruiker de desbetreffende tip ook weer kan verwijderen uit diens favorieten. De gebruiker kan door met diens vinger over het scherm te sliden, alleen naar boven en beneden, scrollen door alle opgeslagen favorieten. Er wordt hier gebruik gemaakt van een infinite list zodat de gebruiker oneindig lang kan doorscrollen totdat hij het einde van de lijst heeft bereikt.
22
Dit icoon staat voor een knop die de gebruiker naar het store-locator scherm zal brengen. Er wordt hiervoor een nieuw scherm geopend.
Op deze plek stond normaal het icoon en de knop om naar de favorieten te gaan, maar aangezien de gebruiker hier nu is, wordt de knop verandert naar de home knop. Via deze optie keert de gebruiker terug naar het kledingtip menu.
Dit icoon staat voor een knop die de gebruiker naar het winkelmandje zal brengen. Er wordt hiervoor een nieuw scherm geopend.
Dit menu kan gebruikt worden om het extra menu tevoorschijn te halen. Door deze balk met de vinger naar beneden te trekken, verschijnt het extra gedeelte door middel van een schuifbeweging.
23
Eindwoord En zo is er na alle UX omschrijvingen een eind gekomen aan deze documentatie. Voor ons was het een vernieuwend project. Juist omdat de scope klein moest blijven konden we de focus houden op ons idee. Helaas zijn we na het bespreken van onze schetsen niet meer aan een echte testfase toegekomen. Het leren van Axure heeft hierin te veel tijd gekost. Toch denken we dat we in vooral de laatste weken grote stappen hebben gemaakt naar ons eindproduct. Er is een mooie documentatie gekomen met duidelijke uitleg over de gemaakte stappen. Dit heeft er toe geleid dat we trots kunnen terugkijken op de door ons opgeleverde UX. Daarnaast willen we ook nog een dankwoord uitspreken naar de heren van DigitasLBi. Hartelijk bedankt voor de ondersteuning en gegeven tips. We zijn hierdoor een stukje dichter bij de realiteit van CMD gekomen. Nogmaals Bedankt. Bart van den Brink & Wouter Greveling
DigitasLBi bedankt voor de samenwerking.
24