De website update momenteel niet correct. Kijk op een later moment even.
Klik op een item om direct naar het onderzoek te gaan.
Ik design en ontwikkel niet simpelweg websites, apps en UIs, ik creëer ervaringen.
Iquality is een bedrijf dat zich richt op technologie. Het is opgericht in 1994 om software voor kinderopvang te ontwikkelen. Inmiddels is het uitgegroeid tot een bedrijf met meer dan 60 medewerkers en werkt het aan projecten voor vele klanten.
Iquality is onderdeel van The Digital Neighborhood, een groep bedrijven die zich richten op technologie en veelal vergelijkbaar en complementair werk doen. Klanten van een van deze bedrijven kunnen daarmee een groter kennisnetwerk aanspreken en werk kan efficiënter gedaan worden.
Iquality staat voor een uitdaging: de hoeveelheid tijd die nodig is voor projecten van Aeres. De grote hoeveelheid aan websites van de scholengemeenschap heeft geleid tot inefficiëntie in het werk van onder meer designers en ontwikkelaars. Iquality onderzoekt elke manier van tijd besparen zonder in te leveren op kwaliteit. Waar ik het meest van betekenis kan zijn is tijdens het design en front-end ontwikkelproces. De meest effectieve oplossing wordt in de looptijd van dit project onderzocht en als een proof of concept gerealiseerd. Ook wordt er een advies gegeven over de oplossing naar aanleiding van het verrichte onderzoek.
Voor een high-level overzicht van het project is het projectplan geschreven. Hierin wordt de voorlopige planning, de scope, de deliverables en de projectmethodiek besproken en vastgelegd. Het projectplan omvat een document waarin afspraken worden vastgelegd met Fontys en Iquality, zodat er zekerheid wordt geboden over het uit te voeren project en om miscommunicatie te voorkomen.
Tijdens de Discover fase van de Double Diamond is het de bedoeling om een groot aantal inzichten te verzamelen en een beter idee te krijgen van de uitdaging die speelt. Met behulp van een divers pallet aan onderzoeksmethoden wordt in deze fase een zo breed mogelijke oriëntatie uitgevoerd.
Tijdens de start van het project heb ik me georiënteerd op het probleem dat speelt bij Iquality. Om de omvang van dit probleem in kaart te brengen heb ik drie expert interviews gehouden voor een gevarieerd beeld van dit project. Daaruit blijkt dat er een complex en gevarieerd probleem speelt omtrent de efficiëntie bij Aeres websites, en dat de ervaring van front-end, backend en data-analyst zeer verschillend is.
Op basis van de expert interviews is gebleken dat het probleem dat speelt breder is dan de originele opdrachtomschrijving, ‘geïntegreerd designsysteem’. Om dit uitgebreid te bestuderen is het van belang om de kernoorzaak van de problemen met efficiëntie voor Aeres te achterhalen. Uit dit onderzoek is gebleken dat de kernoorzaak van efficiëntieproblemen is dat er geen directe koppeling is tussen wat designers maken en front-end programmeert.
Met behulp van zowel de expert interviews als de root cause analysis is het probleem duidelijker in kaart gebracht. Van belang is dat deze en toekomstige bevindingen met de juiste personen gecommuniceerd worden. Met behulp van een stakeholder analysis kom ik erachter wie de stakeholders zijn in dit project en op welke manier deze op de hoogte moeten worden gehouden. Hierbij is het resultaat dat de stakeholders met de meeste invloed de product owners van Aeres zijn, hoewel ook Iquality veel invloed en belang heeft.
Op basis van de expert interviews is gebleken dat de uitdagingen die de efficiëntie van ontwikkelaars en designers beïnvloeden binnen het Aeres project voornamelijk neerkomt op een viertal factoren.
De kernoorzaak van deze efficiëntie, zoals bleek uit de root cause analysis, is een gebrek aan een directe 1:1 koppeling tussen design en front-end ontwikkeling. Op basis van de root cause analysis vervolgens nog een aantal nieuwe oplossingen aan het licht gekomen.
De gevonden oplossingen in zowel de expert interviews als de root cause analysis moeten worden gevalideerd bij de meest betrokken stakeholders. De interne stakeholders, zoals de product owner van Iquality en de medewerkers van team Transformation, zijn de uiteindelijke gebruikers. Deze zijn daarom extra belangrijk in het project, maar ook de klant en diens product owners zijn van groot belang in het project.
De volgende stap in het project is het gedetailleerd onderzoeken van de gevonden en voorgedragen oplossingen, en deze beoordelen op basis van hoeveel de efficiëntie zal verbeteren.
De diepere analyse naar het probleem heeft verschillende mogelijke oplossingen opgeleverd. Elk van de gevonden oplossingen wordt bestudeerd en beoordeeld op bruikbaarheid voor het oplossen van het probleem. Dit onderzoek laat zien dat de oplossingen met de meeste invloed op de efficiëntie voor Aeres een designsysteem en nieuw CMS zijn.
Literature study – detailanalyse
Voor een duidelijker beeld van een van de oplossingen, namelijk een nieuw CMS, wordt gekeken naar welke andere opties er zijn qua CMS en wordt beoordeeld wat de beste vervanging zou zijn voor het huidige CMS, Sitecore. Dit blijkt na afloop van het onderzoek Sanity CMS te zijn, een headless CMS. Strapi en Prismic zijn mogelijke alternatieven.
Available product analysis – CMS
Met behulp van een dark side ideation wordt het breedst mogelijk blikveld ingezet om een groot aantal ideeën te genereren en innovatieve oplossingen te bedenken. Tegen de verwachtingen in zijn hier echter voornamelijk ideeën gevonden die de al ontdekte resultaten bevestigen. Dit laat zien dat een dark side ideation mogelijk eerder in het proces meer had opgeleverd.
Welke bestaande oplossingen zijn er al voor betere efficiëntie tijdens het design- en ontwikkelproces?
Wat blijkt uit de uitgevoerde onderzoeken is dat er meerdere bestaande oplossingen zijn die het design- en ontwikkelproces aanzienlijk efficiënter kunnen maken. Hiervoor is in detail onderzocht in hoeverre en op welke manier de verschillende oplossingen ondersteunen in het verbeteren van efficiëntie.
Figma plugin voor Sitecore
Een Figma plugin voor Sitecore levert een kleine efficiëntiewinst op voor Iquality, hoewel de afhankelijkheid van externe ontwikkelaars in de toekomst problemen op kan leveren.
Designsysteem
Een designsysteem zorgt voor aanzienlijk betere efficiëntie. Het kost tijd en onderhoud om een designsysteem te ontwikkelen, maar gezien de tijdbesparing is dit een zeer logische keuze.
Nieuw CMS
Een nieuw CMS lost het merendeel van de problemen op die momenteel te efficiëntie van het Aeres-project belemmeren. Hoewel de benodigde tijdinvestering is een mogelijk struikelblok kan zijn, is een nieuw CMS voor Aeres een verstandige keuze voor het verhogen van efficiëntie.
DesignOps
DesignOps verhoogt de efficiëntie van designers aanzienlijk. Echter is er geen oplossing voor lage efficiëntie bij front-end werk.
Deze resultaten maken duidelijk dat een designsysteem en een nieuw CMS de beste keuzes zijn. In de volgende fase wordt een concept beschreven op basis van deze bevindingen.
De tweede fase van de Double Diamond, de Define fase, is bedoeld om de verzamelde inzichten en informatie uit de Discover fase te combineren tot een substantieel concept. Met dit concept wordt een duidelijke omschrijving gegeven van wat er ontwikkeld gaat worden en wat de doelen zijn van het project. Hiermee is het mogelijk om antwoord te geven op de onderzoeksvragen van deze fase.
Naar aanleiding van de resultaten die zijn verzameld in de Discover fase kijk ik in dit onderzoek naar de zakelijke impact van de mogelijke oplossingen. Hierbij neem ik in overweging hoeveel de individuele oplossingen kosten, hoeveel tijd er nodig is en wat de mogelijke risico’s zijn. Daaruit blijkt dat een designsysteem de oplossing is met de meeste impact zonder een grote tijdsinvestering. Een nieuw CMS heeft ook veel impact, hoewel deze optie wel veel meer tijd kost. Een plugin voor Figma voor integratie met Sitecore is niet aanbevolen vanwege de afhankelijkheid van een onbekende ontwikkelaar en de twijfelachtige impact die het zal hebben. DesignOps is wel aan te raden, maar is zo groot in scope dat het onrealistisch is, en het biedt geen oplossing voor front-end inefficiëntie.
De conceptdefinitie wordt geschreven op basis van alle verzamelde resultaten tot nu toe. Daaruit is gebleken dat een nieuw CMS gecombineerd met een designsysteem een aanzienlijke verbetering aanbrengt met betrekking tot efficiëntie.
Om een doelkrachtig designsysteem te kunnen opleveren, is het nuttig om huidige UX-problemen binnen de Aeres websites geïntegreerd op te lossen in het designsysteem. Door middel van een diepgaande analyse is gebleken dat er veel verbeteringen mogelijk zijn binnen de Aeres websites. De belangrijkste resultaten zijn het gebrek aan white space, niet correct toegepaste constraints en een overvloed aan designelementen.
Design pattern research – Aeres
Naar aanleiding van het onderzoek naar design patterns zijn er UX-problemen gevonden, die opgelost worden in het te creëren designsysteem. In dit onderdeel kijk ik naar beschikbare designsystemen en in hoeverre deze geschikt zijn voor gebruik bij Aeres.
Hoe kunnen de uitdagingen in het huidige ontwerp- en ontwikkelproces worden aangepakt?
Er zijn vier aspecten relevant voor het beantwoorden van de deelvraag.
Business Case Analysis.
In de Business case analysis is gebleken dat zowel een designsysteem als een nieuw CMS haalbaar zijn, hoewel een nieuw CMS een grotere tijdsinvestering nodig heeft.
Conceptdefinitie.
Door middel van een designsysteem op basis van Material design en een nieuw CMS genaamd Sanity wordt het overgrote merendeel van de efficiëntieproblemen bij Aeres verholpen.
UX-uitdagingen.
De vastgestelde UX-uitdagingen, namelijk het gebrek aan white space, een overvloed aan informatie en een overschot aan designelementen, zijn op te lossen met een designsysteem. Naast de drie grote uitdagingen zijn er kleinere, tevens relevante UX-problemen.
Designsysteem.
Door het designsysteem te ontwikkelen met behulp van Atom Design en een aangepaste versie van Material Design, is het mogelijk om een herkenbaar uiterlijk te creëren die toch uniek is voor Aeres.
Samenvattend kunnen de uitdagingen in het huidige ontwerp- en ontwikkelproces worden aangepakt met een nieuw CMS genaamd Sanity en een designsysteem, waarbij het designsysteem zowel huidige UX-uitdagingen oplost als een nieuwe, unieke maar toch herkenbare uitstraling geeft aan de websites.
Tijdens de derde fase van de double diamond, Develop, is er opnieuw een divergeer-fase. De specifieke implementatie van het project wordt onderzocht met een breed blikveld. Er wordt onder meer gekeken naar de opties voor realisatie, zoals frameworks, programmeertalen en designsysteem-methodieken. Ook wordt in deze fase een prototype gecreëerd, welke door wordt ontwikkeld tijdens zowel de Develop als de Deliver fase.
Op basis van de bevindingen van de Define fase is gebleken dat een aangepaste versie van Material Design het meest geschikt is voor Aeres. In dit onderdeel maak ik een start met de Figma versie van dit designsysteem.
Het is van belang om bekend te worden met de technologieën die gaan worden ingezet tijdens dit project. Om die reden verken ik in dit onderzoek hoe Sanity gebruikt dient te worden.
Tinkering onderzoek – Sanity CMS
Vanwege de manier waarop Sanity (en alle headless CMS’en) werken, is er standaard geen front-end omgeving. In dit onderzoek analyseer ik de meest geschikte frameworks en technologieën voor gebruik in het Aeres project. Daarbij is gebleken dat een combinatie van React, NextJS en Tailwind CSS de meest geschikte keuze is wat betreft front-end.
De verkenning van de technologieën door middel van het tinkering onderzoek gecombineerd met de keuze voor frameworks en front-end technologieën stelt me in staat om een prototype te ontwikkelen gebruikmakend van het CMS.
Voor de start van het ontwikkelen van een web-versie van het designsysteem, maak ik een schets van componenten en layouts om een beeld te scheppen van het te ontwikkelen designsysteem.
Naar aanleiding van zowel het Figma designsysteem als het CMS-prototype, is het mogelijk om een web-versie van het designsysteem te creëren.
Nadat bekend is geworden dat Aeres niet bij Iquality blijft als klant, is een verkenning naar de bruikbaarheid van de oplossing voor andere klanten gedaan, om zo het project meer toekomst te geven. Tijdens dit onderzoek kijk ik naar hoe bruikbaar mijn resultaten en oplossingen zijn voor de SER, staatsbosbeheer en Caldic. Hieruit is gebleken dat de SER efficiëntie en consistentie kan verbeteren door middel van een aangepaste versie van het designsysteem. Caldic en Staatsbosbeheer hebben, gezien de geringe omvang van de websites, geen voordeel bij het implementeren van een designsysteem.
Hoe ziet de optimale oplossing voor de uitdagingen omtrent efficiëntie bij Aeres-projecten eruit?
Door ervaring op te doen met Sanity en bijbehorende Studio is gebleken dat dit CMS geschikt is voor gebruik bij Aeres als vervanging van het huidige CMS, Sitecore. Het is een zeer flexibel CMS met een zeer hoge snelheid. Met dit CMS is het mogelijk om eigen contenttypes te creëren naar wens. Omdat Sanity headless is, zijn er geen beperkingen met betrekking tot front-end. Gezien de snelheid, flexibiliteit en herbruikbaarheid is Nextjs gecombineerd met Tailwind CSS de aanbevolen keuze.
Daarnaast is een designsysteem een groot onderdeel van de optimale oplossing voor efficiëntie bij Aeres. Door zowel een Figma als een web-versie van het designsysteem te hebben, hebben zowel designers als front-end ontwikkelaars snel toegang tot de benodigde componenten. Met oog op deze efficiëntieverbeteringen is dit project ook eenvoudig uitbreidbaar naar de SER.
De optimale oplossing voor de uitdagingen omtrent efficiëntie bij Aeres projecten ziet er dus uit als een Material Design-gebaseerd designsysteem, waarin alle componenten benodigd voor Aeres zijn opgenomen in een Figma en web-versie. Daarnaast geeft het gebruik van Sanity voor het creëren van content en front-end ontwikkelwerk een grote verbetering aan de efficiëntie.
In de laatste fase van het project, de Deliver fase, wordt het eerder gecreëerde prototype verder uitgewerkt tot een volwaardig POC, en wordt er een adviesrapport geschreven op basis van de bevindingen uit het project om over te dragen aan Iquality. Aanvullend wordt er een eindconclusie en overdrachtsrapport geschreven en wordt een reflectie uitgewerkt van de stageperiode en de persoonlijke leerdoelen. De combinatie van deze onderdelen en de onderzoeken uit de vorige fases maakt dat er een antwoord kan worden gegeven op de hoofdvraag.
Met het web-designsysteem als startpunt is het mogelijk om een POC te creëren, waarbij alle aspecten van het concept terugkomen in het gerealiseerde product. Het dient als een high fidelity uitvoering van het prototype dat tijdens de Develop fase is ontwikkeld. Het product heeft deze high-fidelity status bereikt door hechter geïntegreerd te zijn met het Figma designsysteem, een component-detailpagina te implementeren en het toevoegen van patterns.
Bekijk hieronder de commit geschiedenis en het eindresultaat van het designsysteem.
In het adviesrapport wordt beschreven hoe het project in de toekomst kan worden uitgebreid en worden aanbevelingen gedaan ten aanzien van verdere efficiëntieverbeteringen.
Het gecreëerde POC wordt overgedragen aan Iquality met het overdrachtsdocument, waarin de technische details en de interne werking van het project worden beschreven.
Alle resultaten gecombineerd leveren een zeer compleet beeld op van de huidige situatie, de oplossing en de daarbij behorende toekomst, wat leidt tot de eindconclusie.
Terugkijkend op dit semester is het mogelijk om uitgebreid te reflecteren op de behaalde resultaten en op de leerdoelen die ik in het begin van de stageperiode heb opgesteld.
Op welke manieren kan de efficiëntie van het ontwerp- en ontwikkelproces voor de Aeres websites worden verbeterd?
Wat is gebleken uit dit project is dat er twee manieren zijn waarop de efficiëntie voor de Aeres websites aanzienlijk kan worden verbeterd.
Met behulp van een aangepaste variant van Material Design is het ontwikkelen van een designsysteem een grote stap voor de efficiëntie van het ontwerp- en ontwikkelproces. Dit systeem zorgt voor een centrale plaats waar componenten kunnen worden aangepast en vervolgens hergebruikt over meerdere websites. Een Figma variant van het designsysteem is het startpunt van UX-designers, waarop vervolgens een web-variant van het designsysteem wordt gebaseerd.
Daarnaast biedt een overstap naar een nieuw CMS een grote verbetering in efficiëntie, door de problemen met Sitecore weg te nemen. De lage efficiëntie bij het oplossen van bugs, wat door Sitecore regelmatig twintig minuten duurt, wordt op deze manier verbeterd. Een headless CMS biedt bovendien meer flexibiliteit over het uiterlijk van de websites en houdt de keuze voor front-end omgeving open. Het kiezen van NextJS als framework zorgt voor een zeer snelle en efficiënte website, en Tailwind CSS zorgt voor eenvoudige herbruikbaarheid van componenten en een soepele integratie met designsystemen. Door Sanity te combineren met NextJS en Tailwind CSS wordt een optimale mate van efficiëntie bereikt.
Concluderend, om de efficiëntie van werkzaamheden aan de Aeres websites naar een hoger niveau te tillen is de tweevoudige aanpak van de overstap naar Sanity CMS met NextJS en Tailwind CSS als frameworks en een Material-designsysteem de meest effectieve oplossing.
Het belangrijkste keerpunt van dit semester vond plaats op de helft van de periode. Het feit dat Aeres niet bij Iquality blijft betekent dat het project nooit 1:1 gebruikt kan worden, wat heel teleurstellend was. Daarnaast had ik het idee dat mijn vooruitgang heel gestaag verliep, maar na een meeting met de semestercoach is deze zekerheid plotseling verdwenen. Er bleek een groot probleem te zijn met de duidelijkheid van de documenten.
Het was juist mijn doel om dit semester als een media-professional te communiceren. Nu leek het er echter op dat mijn communicatie nog niet goed was. Om toch een duidelijk beeld te scheppen en hopende op nuttige feedback, bereidde ik de intervision meeting pitch voor, ondanks dat ik weinig verwachtingen had.
Tijdens de intervision meeting gaf ik de pitch die ik had voorbereid. Gezien de stevige kritiek waarop de student voor mij kon rekenen was ik nerveus over het geven van de pitch, van een project waarin het vertrouwen langzaam wegebde.
Wat gebeurde was echter precies het tegenovergestelde van wat ik had verwacht. De docenten waren zeer enthousiast over het project. Ondanks dat ik naar mijn idee prima presenteerde en duidelijk het project uitlegde, had ik geen idee hoe goed de presentatie daadwerkelijk was. Er was oprechte teleurstelling toen ik aankaartte dat de klant voor wie het project bedoeld is, Iquality gaat verlaten, en dat ik toch door zou gaan met het project. Uiteindelijk was er niet veel echte feedback vanwege dit moment, en was alles gericht op het project uitbreiden naar andere klanten.
Dit alles leidde ertoe dat mijn vertrouwen in het project volledig terug is. Ondanks het feit dat het project niet voor de klant ingezet gaat worden voor wie het bedoeld was, ben ik nu zelf ook weer volledig overtuigd van mijn vooruitgang. Ook bij de semestercoach zijn naar eigen zeggen zorgen weggenomen door hoe de presentatie verliep. Deze situatie laat me zien dat ik sterker ben in mondeling communiceren dan schriftelijk. Het heeft me laten zien dat ik niet altijd via bijvoorbeeld Teams moet reageren bij het ontvangen van feedback. Veelal kan ik beter wachten tot de online of fysieke meetings, wat zorgt dat ik beter duidelijk kan maken wat ik wil zeggen. Ook is het voor mij duidelijker wat ofwel de semestercoach ofwel de bedrijfsbegeleider bedoeld als ik het mondeling kan bespreken.
Overige reflecties
Bekijk de intervision meeting pitch, de 360º co-reflection review, de midterm reflectie en de reflecties op de persoonlijke leerdoelen hieronder.
Bekijk hier de deelproducten en gebruik de filterbar om een duidelijk overzicht te krijgen per leeruitkomst.