In deze reeks van vier blogs nemen wij, Talent Area Digital, jullie mee in ons avontuur om een (web)app te ontwikkelen. In de eerste blog bespraken wij ons idee, onze Agile werkwijze en de eerste fase van de app ontwikkeling: de Onderzoeksfase. In deze blog zoomen we in op Fase 2 - Concept ontwerp: Het ontwikkelen van een prototype.

🎨 Fase 2 - Concept ontwerp: Het ontwikkelen van een prototype

Stel: je hebt een idee voor een gave app; je hebt dit idee onderzocht bij je beoogde gebruiker en het lijkt een behoefte te vervullen. Wat nu? Voordat je overgaat tot daadwerkelijke ontwikkeling van de applicatie (waar vaak een flinke prijskaart aan hangt) is het raadzaam om een prototype te ontwikkelen. Een prototype is een soort proefversie van je eindproduct. Er zijn talloze tools die je kunt gebruiken voor prototype ontwikkeling, bijvoorbeeld Sketch, InVision Studio of Figma. Voor onze app gebruiken wij Figma: een tool die je eenvoudig vanuit je browser kunt gebruiken. Volgens Wikke, onze User Experience (UX) expert, zijn de drie grootste voordelen van het gebruik van Figma: 

1. 'Multi-player': Het is heel gemakkelijk om in Figma tegelijkertijd, dus met meerdere gebruikers, te werken aan je prototype.
2. Community: De Figma community is erg groot. Hierdoor zijn veel voorbeelden, tutorials en templates online te vinden.
3. Gebruiksgemak: De tool werkt heel intuïtief en is daardoor eenvoudig om je eigen te maken.

Een prototype bouwen in Figma

Stap 1: Wireframes

De eerste stap van het ontwikkelen van een prototype is om wireframes te maken. Wireframes worden ook wel eens de bouwtekening van een app of website genoemd. Een wireframe is een globale opzet van je website of app waarin je het scherm opdeelt in elementen die daadwerkelijk in je product moeten terugkomen. Dit bevat dus details over welke functionaliteiten je app moet hebben, maar gaat niet in op precieze details. De kracht van het gebruik van wireframes is dat dit je in staat stelt om laagdrempelig feedback op te halen bij de gebruiker en/of belanghebbenden. 

De uitdaging is hier: houd het simpel! Hoe eenvoudiger je wireframes, hoe makkelijker men zich kan focussen op functionaliteit en de userflow in plaats van esthetiek zoals kleur of lettertype.

Stap 2: Een visueel, interactief prototype maken

Na het definiëren van de wireframes is de laatste stap om deze om te zetten tot een visueel aantrekkelijk en klikbaar ontwerp. Dit prototype komt al dicht in de buurt van het daadwerkelijke eindproduct. Dit wordt ook wel een high fidelity prototype genoemd. 

Stap 3: Testen

Nu je een werkbaar prototype hebt kun je dit gaan testen met je eindgebruikers. Zo kun je eenvoudig feedback ophalen die meegenomen kan worden in de daadwerkelijke ontwikkeling. 

De twee grootste voordelen van prototyping zijn volgens ons:

1. Risico mijdend: je ontvangt feedback eerder in het proces, waarmee je het risico mijdt dat je een product ontwikkelt waar niemand op zit te wachten.
2. Flexibiliteit: in een tool als Figma kun je snel zelf feedback verwerken en dat vervolgens weer testen. Je hoeft hierdoor niet te wachten op development teams. 

Kortom, het grote voordeel van prototyping is dus dat je kosten en tijd bespaart: je kunt eenvoudiger aanpassingen doen dan wanneer je product al echt ontwikkeld is. 

Hoe nu verder….?

In onze volgende blog gaan we in op Fase 3: de daadwerkelijke ontwikkeling van de app, waarin we werken van prototype tot werkend eindproduct. Hiervoor maken wij gebruik van Wix. Stay tuned!