In 2019 startte ik met het ontwerp van GPR Materiaal.
Een bijzonder en omvangrijk project van een product dat impact maakt.
Voordat ik iets vertel over de case, is het misschien wel aardig om te vertellen wat GPR Materiaal is.
GPR Materiaal is één van de producten van GPR Software (onderdeel van W/E Adviseurs). Het is online software dat wordt toegepast voor milieuvriendelijk bouwen en is bedoeld voor architecten, ontwikkelaars, gemeentes en corporaties.
Met GPR Materiaal kun je doormiddel van het samenstellen en aanpassen van bouwmaterialen MilieuPrestatie Gebouwen (MPG) berekeningen maken en hiermee kun je vervolgens bouwvergunningen en subsidies aanvragen.
De eerste versie van GPR Materiaal heette GPR Bouwbesluit. De software was niet heel eenvoudig in gebruik en miste een aantrekkelijke vormgeving.
Om nieuwe gebruikers aan te trekken en het product sterker in de markt te zetten moest hier iets aan gedaan worden: Zowel de usability als de aantrekkelijkheid (delightfulness) moesten verbeterd worden.
Om het project in goede banen te leiden werd er gekozen voor een Scrum-aanpak, met een Scrum Master en een Product Owner. Ik werkte veel samen met de Product Owner en een UX researcher. Ook werkte ik nauw samen met de lead developer en een front end developer, voor een goede afstemming van design en techniek.
Om snel resultaat te boeken, en goed gebruik te kunnen maken van feedback kozen we voor een iteratieve werkwijze. De volgorde van de stappen kunnen dus soms door elkaar lopen. Het design proces zag er als volgt uit:
Voordat we begonnen met het project besprak ik samen met GPR Software een aantal zaken die ik graag wilde weten, zoals: doelstelling(en), doelgroep, propositie, uitstraling (tone of voice), beleving en waardes.
Samen met de UX researcher werden een aantal interviews gedaan met gebruikers en er werd een customer journey ontwikkeld. Enkele verbeteringen die we hebben aangebracht na aanleiding van gebruikersonderzoek zijn bijvoorbeeld een zoekveld bovenaan het scherm en de ontwikkeling van een lijstweergave.
Ook heb ik tijdens het proces een prototype ontwikkeld. Hiermee konden we de eindgebruiker opdrachten geven en aan de hand daarvan bepaalde keuzes maken.
Samen met de Product Owner maakten we een user flow en een aantal ‘low fidelity’ schetsen.
Aan de hand van deze grove wireframes heb ik meer gedetailleerde, ‘high fidelity’ wireframes ontworpen, waar developers direct mee aan de slag konden. Op deze manier hoefden ze niet te wachten op de uitgewerkte UI ontwerpen.
In deze ontwerpen dacht ik na over de precieze positiebepaling van elementen zoals buttons, velden en iconen.
In deze fase leg ik de stijl van het product vast. Denk hierbij aan het bepalen van kleur, typografie en stijlelementen.
Voordat ik achter mijn laptop begin met ontwerpen, vind ik het prettig om even ‘van het scherm af te gaan’. Ik maakte schetsen en brainstormde met de Product Owner. Daarna maakte ik een moodboard.
Ik had gekozen voor vriendelijke, ‘engaging’ kleuren: Voornamelijk neutrale lichtblauwe tinten en ‘warm’ koraalrood als signaalkleur. Deze kleur steekt mooi af en is belangrijk voor het tonen van de MPG score. Deze score moet overal opvallen.
Voor de typografie had ik Circular gekozen. Een geometrisch, modern en goed leesbaar font, passend bij de stijl. De ronde hoekjes in de elementen maken het ontwerp vriendelijk en benaderbaar.
In de basis gebruiken we Google Material, maar dan met een eigen ‘skin’. Google Material elementen zoals transitie animaties en formulieren heb ik ook terug laten komen in het ontwerp.
Op basis van het styleboard kon ik de wireframes omzetten naar een visual design.
In eerste instantie gebruikte ik voornamelijk Sketch als ontwerptool en InVision voor het delen van de ontwerpen en prototyping. Later ben ik overgestapt naar Figma. Dit had als voordeel dat de samenwerking en overdracht met developers soepeler verliep. Daarnaast kon ik hiermee sneller en gemakkelijker prototypes maken.
Om te zorgen voor een consistente toepassing van design elementen heb ik een design system ontwikkeld, waar ook developers gebruik van konden maken.
Een belangrijk onderdeel van de interface zijn de iconen. Hier heb ik een eigen set voor ontworpen. De iconen moesten uiteraard zo herkenbaar mogelijk zijn. Om hier zeker van te zijn hebben we de iconen gevalideerd bij gebruikers.
Een aantal keer heb ik de ’10 Usability Heuristics for User Interface Design’ van Jakob Nielsen gebruikt, als een soort design controle. Deze ‘usability heuristics’ zijn 10 algemene principes voor interactie design. Een aanrader voor designers!
Naast GPR Materiaal ben ik ook betrokken geweest bij de volgende projecten als designer:
“Aangenaam! Mijn naam is Ivo de Vink, freelance UI/UX designer. Al meer dan 15 jaar werk ik met passie, creativiteit en oog voor detail aan digitale producten.“