Ontwerpdocument BVA iPhone & Apple Watch App
Naam Omar Vasquez Jesus Studentnummer 500 704 100 Klas DMCI V1-11 Docent H.E.M. van Vugt Vak Design Patterns Opdracht Eindopdracht BVA Smartphone & Watch Versie 1 Datum 9-10-2015
1
Inhoudsopgave
Feedback tabel
Over de BVA? 3 Inleiding 3 Ge誰nterviewde persoon 3 1e ontwerp - Specifiek product in detail bekijken (iPhone)
4
Probleem & 3 passende oplossingen 5 Lo-Fi schetsen & gekozen Lo-Fi schets 6 Hi-Fi ontwerp 6 2e ontwerp - Kavel opslaan (iPhone) 7 Probleem & 3 passende oplossingen 8 Lo-Fi schetsen & gekozen Lo-Fi schets 9 Hi-Fi ontwerp 9 3e ontwerp - Bericht ontvangen (Apple watch)
10
Probleem & 3 passende oplossingen Lo-Fi schetsen & gekozen Lo-Fi schets Hi-Fi ontwerp
11 12 12
4e ontwerp - Bieden, bedrag instellen (Apple watch)
13
14 15 15
Probleem & 3 passende oplossingen Lo-Fi schetsen & gekozen Lo-Fi schets Hi-Fi ontwerp
Screenflow BVA App
16
Feedback
Aanpassing herkansing
Feedback van
Wat is BVA?
Inleiding
BVA is een van de grootste online veilinghuizen van Nederland. Ze brengen in opdracht van banken, curatoren, leasemaatschappijen, industrie en het bedrijfsleven (on)roerende zaken ter veiling. https://www.bva-auctions.com/
Dit is een ontwerpdocument (interactieontwerp) voor de App van de veilingsite BVA Auctions B.V. Dit ontwerpdocument richt zich voornamelijk op het ontwerpen van de App voor de iPhone en de Apple watch. De verschillende onderdelen van de App zijn ontworpen aan de hand van vier User Stories.
Concept van BVA
1.
BVA is toegespitst op de verkoop van grote partijen goederen van bedrijven en instellingen. Vaak gaat het om de verkoop van de complete inventaris van een failliet bedrijf. De kopers van de goederen zijn vrijwel altijd zakelijke klanten. Meestal handelaren die (een deel van) de complete veiling van een failliet bedrijf opkopen om per stuk door te verkopen. Het aankopen van producten voor particulieren is minder aantrekkelijk aangezien een gekocht product opgehaald moet worden bij het depot van BVA of bij het failliet bedrijf. De aankoop van motorvoertuigen is voor particulieren complex, meestal zitten er geen papieren of sleutels bij de motorvoertuigen. Daarnaast gaat de verkoop van kleinere artikelen meestal niet per stuk maar per kavel.
Look & Feel BVA richt zich voornamelijk op de zakelijke gebruiker; de professionele handelaar of een bedrijf die geïnteresseerd is in de inboedel van een failliete concurrent. De stijl van het herontwerpen moet uitgaan van regelmatig terugkomende klanten en een zakelijke tone-of-voice.
Begrippen • Kavel: is een verkoopbare eenheid, deze kan bestaan uit een aantal stuks producten of een enkel product. • Veiling: een verzameling van meerdere van kavels die op dezelfde plaats liggen opgeslagen en tegelijkertijd geveild worden. Meestal is een ‘veiling’ de complete inboedel van een failliet bedrijf.
2. 3. 4.
De gebruiker kan op zijn iPhone een specifiek product in detail bekijken, zodat hij weet of dit product interessant is. De gebruiker kan op zijn iPhone een kavel opslaan, zodat hij op de hoogte blijft van de start van de veiling. De gebruiker ontvangt een bericht op zijn Apple Watch, zodat hij weet dat hij kan gaan bieden. De gebruiker kan op zijn Watch het te bieden bedrag instellen, zodat hij kan bieden.
Aan de hand van deze User Stories, een interview met de gebruiker en een Mental Model kunnen we van de User Stories gespecificeerde probleemstellingen maken. Per probleemstelling kunnen we doormiddel van Design Patterns zowel structural als behavioural en het Mental Model van de gebruiker mogelijke oplossingen vinden. Na het zoeken en analyseren van mogelijke oplossingen wordt hier uit de beste oplossing gekozen. Deze oplossing wordt vervolgens ontworpen naar de behoeftes van de BVA App, eerst ontwerp ik twee Lo-Fi wireframe schetsen en van deze twee Lo-Fi wireframe schetsen wordt de beste gekozen. De Lo-Fi wireframe schets die het beste aansluit als oplossing voor het probleem wordt vervolgens uitgewerkt tot een detail Hi-Fi ontwerp. Alle Hi-Fi ontwerpen van de verschillende onderdelen van de App worden in één geheel getoond achterin dit document in de vorm van een screenflow. In de screenflow zie je een overzicht van het hele ontwerp en wordt de interactie getoond van de gebruiker met de App.
Geïnterviewde Jessica (21 jaar) Studente maatschappelijk werker (zorg en welzijn) Jessica studeert aan de ROC Nova college te Haarlem, ze volgt een opleiding voor maarschappelijk werker en zit nu in het tweede jaar van haar opleiding. Ze heeft wel eens eerder van BVA gehoord maar nog nooit de website, mobiele website of app bezocht. Ze is in het bezit van een iPhone en zit hier regelmatig op.
3
Specifiek product in detail bekijken De gebruiker kan op zijn iPhone een specifiek product in detail bekijken, zodat hij weet of dit product interessant is.
4
User story...
Passende oplossingen (structural patterns - Detail)
De gebruiker kan op zijn iPhone een specifiek product in detail bekijken, zodat hij weet of dit product interessant is.
Kieskeurig.nl - Detail scherm
Bol.com - Detail scherm
Vakantie veilingen - Detail scherm
Kieskeurig.nl heeft een hele lange en erg uitgebreide detail lijst. Er is veel informatie te zien over een bepaald product, nadeel hiervan is, is dat er bij het ontbreken van informatie er lange lege lijsten ontstaan.
Bol.com heeft een vooraf bepaalde lijst met specificaties, bij Bol.com worden de details van het product meer in context aan de gebruiker gepresenteerd, in de vorm van een verhaal. Hierdoor vorm je een beeld.
Vakantieveilingen heeft te maken met producten die veranderen van specificaties. Het is hierdoor erg moeilijk om producten (vakanties) te vergelijken met elkaar. Dit is een wat minder goed voorbeeld voor detail.
Interview gebruiker V: Je bent op de App en zoekt nu een specifiek product of kavel. Waar ga je deze zoeken en hoe verwacht je de resultaten te zien? A: Ik ga deze zoeken bij de zoekbalk bovenaan, als ik type verwacht ik mogelijke suggesties van wat ik zoek zoals bij de Google zoekbalk. V: Wat verwacht je te zien tijdens het zoeken? A: Detail foto’s van het product. V: Wat voor details vind je belangrijk bij de specificaties van een product? A: Kleur, maat, staat van het product, materiaal en locatie waar het eventueel opgehaald kan worden. V: Wat wil je kunnen doen vanaf het detail scherm? A: Details van het product bekijken, bieden op een product en zoeken naar andere producten. V: Hoe verwacht je terug te gaan naar het vorige scherm? A: Met het terugknop van me telefoon. V: Wat zou je toevoegen of juist weglaten? A: De terugknop bovenaan het scherm, deze is overbodig aangezien ik ook terug kan met de terugknop van mijn telefoon.
Mentaal model gebruiker
Gekozen oplossing
De gebruiker verwacht het product met zoveel mogelijk detail omschrijving te kunnen zien, zowel de kleur, maat, staat van het product als de locatie waar deze mogelijk opgehaald kan worden. Daarnaast wilt de gebruiker kunnen bieden op het product vanaf dit scherm en zoeken naar veilingen.
Ik heb gekozen voor het detail scherm van de kieskeurig.nl App. Het is misschien onhandig met de lange lijst maar dit detail scherm geeft wel de juiste informatie over de details aan de gebruiker. Daarnaast zit er een soort snelmenu in dit scherm verwerkt waardoor de gebruiker snel van het ene detail naar het andere kan swipen om met andere producten te kunnen vergelijken. Ook wordt het probleem met de lange lijsten verholpen door de details dicht te houden en pas te laten zien als de gebruiker hiervoor kiest. Wat ik ook erg handig vond is dat kieskeurig zoals Bol.com allebei werken met beoordelingen en reviews dit is erg handig als je snel een specifiek product wilt beoordelen.
Probleemstelling Ontwerpdocument BVA iPhone & Apple watch app 9 oktober 2015 Versie: 1 Ontwerper: Omar Vasquez Jesus Studentnummer: 500 704 100
De gebruiker verwacht een uitgebreid detail lijst met hier op relevante informatie over het product/kavel. De gebruiker wilt ook een duidelijke foto zien en gelijk kunnen bieden op de veiling.
5
Lo-Fi schetsen specifiek product in detail bekijken
Gekozen Lo-Fi schets Structural pattern - Detail Ik heb gekozen voor schets B hier zijn twee iconen toegevoegd die de gebruiker toestaan om gelijk een bod te kunnen plaatsen of om direct te zien waar dit product zich bevindt . Doormiddel van kleur is ook aangegeven of de bepaalde detail van toepassing is op deze manier zijn er geen lege lijsten.
Gekozen oplossing - B Door de details van het product in een lijst te zetten kan de gebruiker in één oogopslag de specificaties van het product zien. Omdat dit voor een mobiele App is wordt dit menu verstopt en werkt als een dropdown menu om ruimte te besparen. Vergelijken van producten is nu ook overzichtelijk. Ontwerp A
Ontwerp B
Hi-Fi ontwerp
Dit ontwerp is meer gericht op een snelmenu’s onderin zodat de gebruiker naast het bekijken van de details snel naar andere menus kan gaan. De basis details zijn zichtbaar de rest zit in het dropdown menu.
Hier zijn een aantal dingen toegevoegd die het de gebruiker makkelijker maakt bepaalde acties te voltooien. Zoals de beoordeling boven aan, de map icoon om direct te kunnen zien waar het product of de kavel zich bevindt. Ook is hier de basis detail per direct te zien maar zijn meer specifieke dingen zitten in het dropdown menu. Met de hamer icoon kan er gelijk geboden worden op de veiling. Doormiddel van kleur is duidelijk aangegeven welke detail wel van toepassing is en welke niet.
Toelichting 1. Beoordeling product 2. Foto product 3. Algemene informatie Interactie 4. Drop down voor de beschrijving 5. Map opent voor locatie van product 6. Hamer, om te bieden op de veiling 7. Specifieke details (drop down menu) 8. Terug 9. Ververs scherm
9
8 1 2
3 5 4
Ontwerpdocument BVA iPhone & Apple watch app 9 oktober 2015 Versie: 1 Ontwerper: Omar Vasquez Jesus Studentnummer: 500 704 100
6
7
6
Kavel opslaan De gebruiker kan op zijn iPhone een kavel opslaan, zodat hij op de hoogte blijft van de start van de veiling.
7
User story...
Passende oplossingen (design patterns)
De gebruiker kan op zijn iPhone een kavel opslaan, zodat hij op de hoogte van blijft van de start van de veiling.
Ness (iPhone) - coach marks
Rdio (iPhone) - Detail scherm
Pinterest (iPhone) - Feed scherm
Dit is eenbehavioural pattern, door naar boven te swipen krijg je meer informatie te zien en door naar beneden te swipen kan je de content opslaan. Dit kan ook gebruikt worden voor kavels en veilingen van BVA.
Behavioural pattern, door naar boven te swipen slide er een menu open met opties. Deze pattern past bij de BVA App, door de opties te vertalen naar de handelingen van de gebruiker, zoals kavels opslaan.
Strutural pattern, de pinterest App heeft een priboord in het menu waar zich geprikte items bevinden, dit kan gebruikt worden in de context van de BVA App om kavels op deze manier op te slaan.
Interview gebruiker V: A: V: A: V: A: V: A: V: A: V: A:
Mentaal model gebruiker
Gekozen oplossing
Uitleg over mentaal model gebruiker...
Uitleg gekozen oplossing...
Probleemstelling Ontwerpdocument BVA iPhone & Apple watch app 9 oktober 2015 Versie: 1 Ontwerper: Omar Vasquez Jesus Studentnummer: 500 704 100
Probleemstelling defineren...
8
Lo-Fi schetsen kavel opslaan
Gekozen Lo-Fi schets Wat voor pattern? Leg hier uit wat voor pattern dit is...
Gekozen oplossing Leg hier uit wat voor pattern dit is...
Ontwerp A
Ontwerp B
Licht het ontwerp toe...
Licht het ontwerp toe...
Hi-Fi ontwerp
Ontwerpdocument BVA iPhone & Apple watch app 9 oktober 2015 Versie: 1 Ontwerper: Omar Vasquez Jesus Studentnummer: 500 704 100 9
Bericht ontvangen De gebruiker ontvangt een bericht op zijn Apple Watch, zodat hij weet dat hij kan gaan bieden.
10
User story...
Passende oplossingen (design patterns)
De gebruiker ontvangt een bericht op zijn Apple Watch, zodat hij weet dat hij kan gaan bieden
Apple watch - Bericht
Apple watch - Mail
Apple watch - Bel melding
Structural pattern, de message App laat de gebruiker weten dat die een bericht heeft en dat hij kan antwoorden. De gebruiker kan op deze manier ook een bericht van de BVA ontvangen, zo dat die kan gaan bieden.
Strutural pattern, mail App laat de gebruiker weten dat die een mail heeft. Dit bericht kan direct gelezen worden. Mogelijke oplossing maar niet optioneel.
Structural pattern, de bel functie, als er wordt gebeld kan de gebruiker direct antwoorden of het gesprek beindigen zonder zijn telefoon te pakken. Op deze manier kan je hem alarmeren over een bod.
Interview gebruiker V: A: V: A: V: A: V: A: V: A: V: A:
Mentaal model gebruiker
Gekozen oplossing
Uitleg over mentaal model gebruiker...
Uitleg gekozen oplossing...
Probleemstelling Ontwerpdocument BVA iPhone & Apple watch app 9 oktober 2015 Versie: 1 Ontwerper: Omar Vasquez Jesus Studentnummer: 500 704 100
Probleemstelling defineren...
11
Lo-Fi schetsen bericht ontvangen
Gekozen Lo-Fi schets Wat voor pattern? Leg hier uit wat voor pattern dit is...
Gekozen oplossing Leg hier uit wat voor pattern dit is...
Ontwerp A
Ontwerp B
Licht het ontwerp toe...
Licht het ontwerp toe...
Hi-Fi ontwerp
Ontwerpdocument BVA iPhone & Apple watch app 9 oktober 2015 Versie: 1 Ontwerper: Omar Vasquez Jesus Studentnummer: 500 704 100 12
Bieden, bedrag instellen De gebruiker kan op zijn Watch het te bieden bedrag instellen, zodat hij kan bieden
13
User story...
Passende oplossingen (design patterns)
De gebruiker kan op zijn Watch het te bieden bedrag instellen, zodat hij kan bieden.
Apple watch - Alarm instellen
Apple watch - Stopwatch
Apple watch - Start met rennen
Behavioural pattern, op de alam App kan je vooringestelde alarmen activeren door naar rechts te sliden. Dit kan ook in de vorm van vooringestelde prijzen om ronde bedragen snel te kunnen bieden.
Behavioural pattern, het instellen van de timer gebeurt met de digital crown. Door te draaien kan de tijd ingesteld worden. Door te draaien kan je ook geld bedragen instellen om te kunnen bieden.
Structural pattern, door de plus en min knop kan je de afstand bepalen. Dit kan een gepaste oplossing zijn om een bedrag in te stellen om vervolgens te kunnen bieden.
Interview gebruiker V: A: V: A: V: A: V: A: V: A: V: A:
Mentaal model gebruiker
Gekozen oplossing
Uitleg over mentaal model gebruiker...
Uitleg gekozen oplossing...
Probleemstelling Ontwerpdocument BVA iPhone & Apple watch app 9 oktober 2015 Versie: 1 Ontwerper: Omar Vasquez Jesus Studentnummer: 500 704 100
Probleemstelling defineren...
14
Lo-Fi schetsen bieden, bedrag instellen
Gekozen Lo-Fi schets Wat voor pattern? Leg hier uit wat voor pattern dit is...
Gekozen oplossing Leg hier uit wat voor pattern dit is...
Ontwerp A
Ontwerp B
Licht het ontwerp toe...
Licht het ontwerp toe...
Hi-Fi ontwerp
Ontwerpdocument BVA iPhone & Apple watch app 9 oktober 2015 Versie: 1 Ontwerper: Omar Vasquez Jesus Studentnummer: 500 704 100 15
Screenflow coming soon...
16
Naam Omar Vasquez Jesus Studentnummer 500 704 100 Klas DMCI V1-11 Docent H.E.M. van Vugt Vak Design Patterns Opdracht Eindopdracht BVA Smartphone & Watch Versie 1 Datum 9-10-2015
17