Wireframes

Workshop : Prototyping

Aanleiding

Om alle functionaliteiten in te bouwen heb ik minimaal vijf schermen nodig. Deze functionaliteiten zijn ontstaan vanuit het gebruikersonderzoek met de daarbij horende MoSCoW-methode, de lijst met randvoorwaarden en de inzichten van de co-reflection sessie.

  • Homepagina met zoekfunctie
  • Pagina met overzicht van de koffiebars met filtering
  • Pagina met een uitgelichte bar
  • Winkelmand pagina
  • Kassa pagina

Dit zijn de pagina’s die minimaal nodig zijn om een Koffiekaartje zelf samen te stellen en te bestellen. In het begin is het vooral puzzelen geweest om te kijken hoe ik een zo goed mogelijk user-flow kon creëren binnen de functionaliteiten die ik nodig heb om een Koffiekaartje zelf samen te stellen. De functionaliteiten waren duidelijk maar de vorm was dat nog zeker niet. Vandaar dat ik de functionaliteiten in meerdere wireframes heb laten terugkomen om zo via een wireframe proces de juiste vorm te bepalen. Het voordeel hiervan is dat je efficiënt zonder visuele afleiding deze keuzes kan maken.

Onderzoeksvraag:
Wat heb je minimaal nodig om een Koffiekaartje digitaal aan te bieden?

Doelen

  • Pagina’s uit de kennissessies en onderzoeken
  • Functionaliteiten omzetten naar pagina’s
  • Iteratief de beste design oplossing ontwikkele

Resultaten

Door de functionaliteiten in diverse vormen en methodes in te bouwen is er een ontwikkelproces ontstaan waarmee doormiddel van een twingtal ontwerpen een uiteindelijk prototype variant is ontstaan om mee door te ontwikkelen. In dit proces kan de gebruiker een Koffiekaartje zelf samenstellen en aanschaffen.  Door te klikken op de volgende en vorige knop kan je door de wireframes navigeren. Gebruik je muis om te scrollen door de webpagina’s.

Prototype een: Functionaliteiten omzetten naar pagina’s

Uiteindelijk is er een selectie ontstaan van vijf unieke schermen die het meeste potentie hebben. Deze zullen na de expert review in het designproces verder uitgewerkt worden.

Conclusie

De wireframes zijn door de experts middels een expert review ondervonden aan een feedback ronde. Deze feedback wordt doorgevoerd in deelvraag drie. er zijn nu vijf ontwerpen van pagina’s ontwikkeld die door gaan naar de design ronde. Hier worden deze inzetbaar gemaakt voor meerdere branches en zal er een uiteindelijk ontwerp gerealisseerd worden.