Module 1.6 - User-Centred design

Module 1.6 - User-Centred Design

Docent: Patrick Gielisse

Student: Arjan Snijders

Klas: DDM2C
Datum: 12 Januari 2024

In deze Behance pagina heb ik het proces van deze opdracht vastgelegd. Voor deze opdracht moest ik een deel van een app ontwerpen voor een basisschool waar in de leerlingen spelenderwijs een basisschoolvak kunnen leren.

Debriefing

De app moet worden gemaakt voor basisschool leerlingen, zodat die spelenderwijs een basisschoolvak kunnen leren. Zo wordt het leren interessanter.

Het doel van de opdracht is om te leren werken met Adobe XD en Adobe Illustrator.

In XD moet je leren hoe je een goeie userflow en goed de indeling van pagina's maakt.

In Illustrator leer je al een beetje icoontjes maken en die te exporteren naar XD.

Wanneer je de app gebruikt, moet het duidelijk zijn hoe de app werkt, zodat je niet zomaar vast blijft zitten op een bepaalde pagina of veel moet zoeken naar waar de levels bijvoorbeeld zijn. Verder moet alles er ook overzichtelijk uitzien, dus niet rommelig.

Product analyse

Voor ik ben begonnen met het maken van de app, heb ik eerst onderzoek moeten doen naar al bestaande serious games. Zo heb ik een kijkje genomen in Squla, Duolingo en Rekentuin. Maar ik heb ook online, op pinterest, gekeken naar de UI van zelfde soort apps.

Via deze link kun je het pinterest bord bekijken wat ik gemaakt heb voor deze opdracht.

Wireframes & Userflow

Voor ik digitaal ging werken, heb ik eerst in mijn schetsboek een wireframe geschetst en met pijltjes de userflow aangegeven.

Ik wilde een reken app maken waarin je een bakker genaamd Bart helpt met het bakken van broden. Je helpt hem door de droden, waar een som staat, te slepen naar een van de drie oventjes die te zien zijn op het scherm. Bij elk oventje staat een antwoord. Heb je het antwoord goed? Dan kun je door naar de volgende som zonder problemen. Heb je het antwoord fout, dan is het brood aangebrand!

Daarna heb ik alles digitaal uitgewerkt.

In de onderstaande afbeeldingen zie je nog een klein proces in hoe ik de indeling van de tabladen heb verbeterd aan de hand van feedback. Ik kan helaas slechts het proces van 1 tablad laten zien, aangezien ik vergeten ben eerder screenshots te maken van de andere tabladen. :(

Ik heb steeds meer gebruik durven maken van white space, zoals te zien is.

Tabladen uitwerken

Vervolgens moest ik drie tabladen van de app uitwerken door er icoontjes voor te maken en te stylen.
Het Illustrator bestand met de icon kun je vinden in de bijlagen.

Hier zijn de drie tabladen die ik had uitgewerkt.

Ik heb in de apps die ik had uitgeprobeerd veel simplistische icoontjes gezien. Vandaar dat ik zelf ook simplistische icoontjes heb getekent...

en dat bespaarde me ook veel moeite :p
Verder heb ik nog een voorbeeld genomen aan wat ik online heb kunnen vinden aan knoppen die voor bepaalde tabladen gebruikt worden.

Hier is nog de wireframe en userflow helemaal uitgewerkt.