Portfolio

Concept

B.J. Fogg, competitie, coöperatie, invloed, motivatie, psychologie, R.B. Cialdini, sociologie

Om de speler te motiveren het spel te spelen, heb ik gekozen voor het gebruik van sociale motivatie. Zo spelen zowel competitie, coöperatie als erkenning een grote rol tijdens de simulatie. Er zijn altijd 2 spelers nodig om het spel op coöperatieve wijze te kunnen spelen. Het competitie element wordt toegevoegd wanneer er meerdere teams tegen elkaar spelen.

competitie, simulatie

Bij het spelen van het spel, was het mogelijk voor meerdere teams om tegen elkaar te spelen door opdrachten sneller uit te voeren. Een team bestond uit één helper en één ‘doof’ persoon. Het dove persoon, maakte gebruik van een dempende koptelefoon, waardoor geluid werd gefilterd. Door tijdsdruk toe te voegen, werden de spelers gestimuleerd om creatief te zijn in het uitvoeren van de opdrachten.

Buzz, controllers, eenvoud, interactie, leercurve

Voor interactie met de simulatie, werd er gebruik gemaakt van de controllers van Buzz. Op deze manier werden er geen complexe handelingen verwacht en werd de leercurve voor het ervaren van de simulatie zo klein mogelijk gehouden.

controllers, coöperatie, omgeving, samenwerking, team

Het was mogelijk om de simulatie met 6 mensen tegelijk te ervaren. De plekken waarop de spelers konden staan, waren gemarkeerd door een rood kruis. Voor elk team was daarnaast één controller beschikbaar, om op deze manier interactie met het spel te kunnen hebben.

Terug naar top

Creatie

CSS, mobiele website, mobile design, responsive design

De opdrachtgeefster wilde een responsive design voor haar website, zodat haar foto’s ook op mobiele apparaten te bekijken zouden zijn. Het ontwerp is daarom gemaakt voor smartphones, tablets en desktops. Met behulp van CSS media queries is het responsive design toegepast.

code, CSS, fotografie, HTML, Javascript, PHP, programmeren, responsive design

Het ontwerp van deze website is gedaan met behulp van Adobe Illustrator CS4, om vervolgens omgebouwd te worden in Dreamweaver naar een website. Voor de website zelf is gebruik gemaakt van HTML, CSS, Javascript en PHP.

huisstijl, TEDx, TEDxYouth@Amsterdam, Vormgeving, website

Het ontwerpen van de website gebeurde op basis van wireframes die het communicatieteam al hadden verzorgd. Op deze manier hoefde alleen het uiterlijk van de website nog te worden verzorgd. De kleuren van de website, zijn gebaseerd op de huisstijl van TEDx waaraan elk evenement moet voldoen. Ook de lettertypes en afbeeldingen zijn gebruikt zoals beschreven staat in het huisstijl document van TEDx. De gebruikte tekeningen in de website en het ontwerp, komen van Kim Ravers. De website is uiteindelijk gebouwd door Toscani, waar ik vooral een adviserende rol bij had.

custom post types, responsive design, wordpress

Voor het nieuwe jaar moest er een nieuwe website komen die eenvoudiger te gebruiken was dan de website van 2012. Daarom heb ik het ontwerp gedaan op basis van de opgedane ervaringen van het afgelopen jaar. Voor de eenvoud werd er gebruik gemaakt van WordPress en werd er voor elk soort object een apart post type gemaakt in WordPress. Zo hoefde geen van de gebruikers met HTML of code aan de slag om bijvoorbeeld een teamlid toe te voegen en volstond het invullen van een formulier. De website is ook responsive ontworpen en gebouwd, zodat hij op mobiele apparaten ook zo goed mogelijk uit de verf komt.

contact administratie, CSS, HTML, PHP

Met de tool was het mogelijk om contacten toe te voegen, te bewerken en te verwijderen. Daarnaast was er een uitgebreide zoekfunctionaliteit toegespitst op het vinden van contacten aan de hand van details. De back-end van de tool is ontwikkeld in PHP en de front-end in HTML, CSS en Javascript.

Apple VoiceOver, document structuur, JAWS, prikkelarm, skiplink

Resulterend uit het onderzoek en het ontwerp voor mensen met een beperking, is een website gekomen die vanuit de kern ondersteunend is aan deze doelgroep. In de code is rekening gehouden met eventuele tools als JAWS of Apple VoiceOver die ondersteuning bieden aan de doelgroep. De intensiteit van de website is aanwezig in een prikkelrijke en een prikkelarme versie en de tekst op de website kan worden vergroot of verkleind.

3D, 3D Studio Max, Jopenkerk, modelling, texturing

Het uiteindelijke resultaat is gerenderd met een standaard render engine van 3D Studio Max. Op de afbeelding is een 3D replica te zien van de Jopenkerk in zijn huidige vorm.

Terug naar top

Onderzoek

autisme, ontwerpen voor autisme, persona's

Om een eenzijdig en concreet beeld te krijgen van de doelgroep voor iedereen die betrokken was bij het project, werd er gebruik gemaakt van fictieve personen. Ook wel bekend als persona’s. Deze persona’s heb ik geschreven aan de hand van het doelgroep onderzoek wat ik heb uitgevoerd voor iPet. Je kunt hier deze persona’s hier downloaden en gebruiken voor je eigen project(en).

doelgroep, doelgroep onderzoek, lichamelijke beperking, persona's, verstandelijke beperking

Om een concreet inzicht te kunnen creëren in de doelgroep, zijn er aan de hand van de onderzoeksresultaten persona’s gemaakt. Deze persona’s kunnen hier worden gedownload en kunnen worden gebruikt voor een eigen project.

Terug naar top

Ontwerp

Axure RP Pro, wireframes

Voor het concretiseren en ontwerpen van een interface, is er gebruik gemaakt van wireframes. De wireframes zijn uitgewerkt in Axure RP Pro en vervolgens omschreven in een document om verdere specificaties nader te kunnen aanduiden.

informatie ontwerp, seo, taakanalyse, user needs

Om inzicht te krijgen in het proces voor het zoeken van begeleiding, is er gebruik gemaakt van een taakanalyse. Aan de hand van deze analyse, is er verder gekeken naar de content van de website om te bepalen welke informatie benodigd is. Op deze manier is de website vindbaar op basis van de informatie waarop wordt gezocht en die de gebruiker belangrijk acht.

ekman, flowchart, maslow, processen

Om inzicht te krijgen in de verschillende processen die binnen het product spelen, is er gebruik gemaakt van een flowchart. De processen rondom activiteiten en het verzorgen van de avatar werd zo inzichtelijk gemaakt. Ook werd de relatie tussen de theorie van Maslow en de emoties van Ekman inzichtelijk voor het maken van een koppeling naar niveau’s.

Terug naar top