Van schets naar succes
Bij het ontwerpen van digitale toepassingen gebruik je een iteratief (herhalend)en op de mens gericht ontwerpproces bij het oplossen van complexe problemen. Prototyping speelt hierbij een cruciale rol. Diverse prototypes worden gebruikt om oplossingen te verkennen en te testen. Voor het vak ‘Prototypen‘ heb ik diverse types prototypes onderzocht die ingezet kunnen worden binnen zo’n proces. Als casus heb ik Democratische basisschool de Vallei gekozen. Mijn streven was het creëren van een verbindende factor tussen visie van de school en de praktijk. In dit showcase item laat ik stap voor stap het hele ontwerpproces zien, van schetsen, storyboards, paper prototypes, wireframes en hi-fidelity prototypes.
aanpak
Door het leren toepassen van verschillende prototypes in het ontwerpproces. Het proces omvatte schetsen, en het maken van storyboards, paper prototypes, wireframes en hi-fidelity prototypes. Alles met de nadruk op het genereren van ideeën, het verzamelen van feedback op de prototypes en het nemen van ontwerpbeslissingen.
Verkenning van de opdracht met eerste conceptschetsen
Interactieve plattegrond
De school weergegeven als een overzichtelijk en kleurrijke tekening van bovenaf bezien. De markers op de plattegrond zijn vrolijke pictogrammen die overeenkomen met de verschillende ruimtes en locaties in de school, zoals een klaslokaal, een bibliotheek, een speellokaal en een buitenruimte.
Smoelenboek
Dit scherm met foto’s van begeleiders en leerlingen. Een korte beschrijving vertelt je hun achtergrond en bijzonderheden. Leer ze beter kennen door op een foto te tikken, krijg een uitgebreider profiel en kom met ze in contact.
Dashboard
Een centraal overzicht met verschillende ‘meters’ waardoor je o.a. overzicht krijgt van de sfeer op school. Welke activiteiten zijn er bijvoorbeeld. Denk ook aan een sfeermeter, aftelkalender, challenges tussen begeleiders en kinderen onderling, communicatie updates, foto en video-album.
Welkom
Een kleurrijk startscherm met de titel “Welkom bij Basisschool De Vallei!” in een speels lettertype. Het scherm toont een illustratie van een groep blije kinderen die samen spelen en leren. Onderaan het scherm is een grote knop met de tekst “Start de Tour” met een uitnodiging voor een virtuele rondleiding.
Keuze ontwerp
Concept: Interactieve Schoolgids, werktitel: Ontdek de vallei
Het uiteindelijke concept dat is uitgewerkt is een mix geworden; een interactieve schoolgids. Bedoelt om een indruk van de school te krijgen, waarbij functionaliteiten gecombineerd worden. Met dit ontwerp krijgen zowel ouders als (nieuwe) leerlingen, een boeiende en informatieve virtuele rondleiding door de school. Via het beginscherm kom je op een overzicht waar de belangrijkste tegels getoond worden, dit is je ingang naar de rest van de interactieve schoolgids.
Creëren van een storyboard, stap in de schoenen van de gebruiker…
Low fidelity wireframe
Vanuit het storyboard concretiseer je je ideeën tot een stappen die een gebruiker zet op het scherm. In dit geval heb ik de Low fidelity schermen tevens gebruikt om de paper prototype test uit te voeren. Deze Low fidelity schetsen zijn een selectie van alle schermen die getekend zijn.
Mid fidelity wireframe
Op basis van de verzamelde informatie heb ik een eerste aanzet gemaakt met het ontwerpen van een mid fidelity type, hierbij heb ik ben ik gaan bouwen in Adobe Xd omdat mij dit hielp in het maken van structuur.
High fidelity wireframe
Door de wireframes verder uit te werken, de navigatiestructuur te optimaliseren en interactieve elementen toe te voegen, biedt het uiteindelijke prototype een realistische en gebruiksvriendelijke ervaring aan de gebruikers. Bovenstaande screenshot is een selectie. Klik hier voor de high fidelity uitwerking in Adobe XD.
