Interaction design, Webdesign, Front-end
Centre of Expertise
De opdracht.
Naast onderwijs is onderzoek een belangrijke activiteit binnen de Haagse Hogeschool. De school wilde een aparte website voor haar onderzoeken in plaats van één pagina met beperkte informatie over hun onderzoeksplatforms. Hierom ontstond het Centre of Expertise.
In het eerste jaar van mijn opleiding heb ik de opdracht gekregen om een deel van de website van het Centre of Expertise te ontwerpen dat is afgestemd op een van haar doelgroepen, en deze te realiseren tot een betaversie. Voor deze opdracht richtte ik mij op de huidige en toekomstige partners van het Centre of Expertise van het onderzoeksplatform ‘Kwaliteit van Leven: Mens en Technologie’.
In het eerste jaar van mijn opleiding heb ik de opdracht gekregen om een deel van de website van het Centre of Expertise te ontwerpen dat is afgestemd op een van haar doelgroepen, en deze te realiseren tot een betaversie. Voor deze opdracht richtte ik mij op de huidige en toekomstige partners van het Centre of Expertise van het onderzoeksplatform ‘Kwaliteit van Leven: Mens en Technologie’.
Opdrachtgever
De Haagse Hogeschool
Mijn rol
User research, concepting, wireframing, prototyping, usability testing, front-end development
Programma's
Axure RP, Adobe Illustrator
Jaar
2019
Opdrachtgever
Mijn rol
Programma's
Jaar
De Haagse Hogeschool
User research, concepting, wireframing, prototyping, usability testing, front-end development
Axure RP, Adobe Illustrator
2019
Het proces.
Om tot de realisatie van de website te komen heb ik een ontwerpproces doorlopen, waarbij ik de volgende technieken heb toegepast:
- user needs
- systeemeisen
- design principles
- paper prototyping
- heuristic evaluation
- card sorting
- sitemap
- navigatiemodel (sitemap)
- flowcharts
- wireframing
- styleguide
- mock-ups
- scenario based user testing
Een aantal van deze technieken worden hieronder verder toegelicht.
Onderzoek
Voordat ik ben begonnen met het maken van een ontwerp, ben ik eerst onderzoek gaan doen naar het gedrag, de behoeftes, wensen en doelen van de huidige en toekomstige partners van het onderzoeksplatform en heb ik deze gevormd tot systeemeisen. De belangrijkste doelstelling die hier naar voren is gekomen, is dat partners snel en gemakkelijk onderzoeken, partners en evenementen
willen vinden die passen bij hun onderzoeksgebied.
Ideevorming
Door onderzoek te hebben gedaan naar de behoeftes, wensen en doelen van de partners is het voor mij duidelijk geworden aan welke eisen het ontwerp van de site moest voldoen. Deze eisen heb ik eerst geprioriteerd om ze vervolgens te verwerken in een paper prototype. Door een paper prototype te maken heb ik snel een beeld kunnen krijgen van hoe het systeem zou kunnen werken.
De paper prototype heb ik door medestudenten laten beoordelen op een heuristic evaluation om mogelijke usability problemen zo vroeg mogelijk te achterhalen.
De paper prototype heb ik door medestudenten laten beoordelen op een heuristic evaluation om mogelijke usability problemen zo vroeg mogelijk te achterhalen.
Flowcharts
Aan de hand van de navigatiemodel die ik heb gemaakt, heb ik flowcharts gecreëerd. Deze heb ik gemaakt om een weergave te geven van de uitvoering van taken, die door de gebruikers op de website uitgevoerd kunnen worden en deze te kunnen begrijpen.
Wireframes
Door digitale clickable wireframes te maken heb ik een idee gekregen van hoe het definitieve ontwerp eruit zou komen te zien. In de wireframes heb ik de aanpassingen, die uit de heuristic evaluation op mijn paper prototype zijn voortgekomen, erin verwerkt. Daarnaast is de navigatie van de wireframes gebaseerd op de flowcharts die ik heb gemaakt.
Ontwerp
Om de look en feel van de website vast te leggen heb ik een style guide gemaakt. Ik heb ervoor gekozen om de kleuren van de Haagse Hogeschool hierin terug te laten komen, omdat het Centre of Expertise hier onderdeel van is.
