Mijn aandeel in het project behelsde het visuele ontwerp van een aantal secties in het dashboard, het uitdenken van de secties van de toolkit en het helpen brainstormen bij de functies van de website. Daarnaast heb ik geholpen bij het uitwerken van de feedback en het maken van de design rationale samen met Inge.

Uitdenken drie secties

In het begin van het project moesten we bedenken wat de architectuur zou worden van de toolkit. Ik had als voorstel om de toolkit te verdelen in drie secties: discover, connect en build.

Deze verdeling is grotendeels behouden gebleven in het eindproduct. De sectie build is vervangen door de sectie profile. Maar op deze sectie is nog steeds te zien wat de voortgang is van verschillende projecten. De voortgangsbalken zijn behouden gebleven.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/04c529dc-fdfc-4582-a711-6837f277cc53/Schermafbeelding_2021-01-19_om_16.33.14.png

Zoals te zien is hieronder zijn de voortgangsbalken behouden gebleven in de profile sectie.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/dad6ad8b-0f46-4e8e-a912-997f8669ea29/Schermafbeelding_2021-01-20_om_23.15.55.png

Persona's

In Notion heb ik geholpen met het uitwerken van levendige persona's die passen bij de toolkit. Wie willen we bereiken met de toolkit? Voor wie is het geschikt? Wat is de context van de gebruikers? We hebben drie persona's uitgewerkt.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ec1d7e78-0669-42e9-853a-6c12276be7da/Schermafbeelding_2021-01-21_om_11.47.17.png

Ontwerp widgets

In Figma heb ik meegeholpen met het ontwerpen van de widgets. Dit is de sectie waarin van de verschillende soorten energie te zien is hoe hoog ze zijn. Ik heb hier gekozen voor een simpele widget stijl, die geïnspireerd is op de widgets in iOS14, omdat ik vierkantjes heb gebruikt. Het leek me ook leuk als je bij de selectie van elke gemeente het logo van de gemeente te zien zou krijgen. Daarnaast wilde ik het mogelijk maken om op een eenvoudige manier gemeentes met elkaar te vergelijken door op het kleine plusje onderin te klikken. Beide zaken zijn in het online prototype niet teruggekomen (vanwege tijdgebrek), maar wel behouden gebleven in alle versies van het prototype in Figma.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ade68e62-b626-4d16-9dd1-94ca23c10eac/Schermafbeelding_2021-01-20_om_23.20.26.png

Ontwerp sidebar

Om veel meer informatie per gemeente uit te lichten hadden we een overzichtelijke sidebar nodig. Hiermee kan je in een oogopslag zien wat de data is omtrent bevolkingsdichtheid, aantal huizen, aantal auto's en nog veel meer. Ik wilde dit gedeelte makkelijk te scannen maken, met duidelijke icoontjes, die ook weer niet teveel opvielen. Naar mijn mening is dit gelukt. Een belangrijke verbetering was het toevoegen van extra indicatoren. Dit is gelukt in Figma, maar bleek een stap te ver in het online prototype.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d0406c45-7e4d-48b8-a2bc-aceed0ea614e/Schermafbeelding_2021-01-19_om_16.34.27.png

Hieronder is de widgetbalk te zien met extra indicatoren.