Een wedstrijd onderling verschillende YoungOnes zzp'ers

Gig Worker Of The Year Award

Eindproduct YoungOnes
  • Projectjaar: 2022
  • Projectdoel: Geef de ZZPers van YoungOnes een overzicht van hun punten tijdens de GWOTY wedstrijd
  • Doelgroep: ZZPers van YounOnes (35-70 jaar)

Vanuit de marketingafdeling van YoungOnes kreeg ik de opdracht om een nieuw dashboard te ontwerpen en ontwikkelen voor de ZZP’ers die via het platform werken. Het doel van dit dashboard was om ‘gig workers’ op een speelse manier te motiveren: door te werken konden zij punten verdienen, waarmee leuke prijzen gewonnen konden worden.

Het dashboard moest in één oogopslag inzicht geven in:

  • Hoe gebruikers punten konden verdienen
  • Hoeveel punten zij al hadden gespaard
  • Hun huidige positie op het leaderboard
  • Hoeveel tijd er nog over was in de campagneperiode

Om dit te realiseren werkte ik nauw samen met het marketingteam. Zij gaven mij inzicht in hun wensen, het doel van de campagne en hoe vergelijkbare acties in voorgaande jaren waren verlopen. Op basis hiervan heb ik het ontwerp en de gebruikerservaring afgestemd, zodat het dashboard niet alleen functioneel was, maar ook aansloot bij de doelgroep en marketingdoelen van YoungOnes.

Bekijk de statische website
Bekijk de Github

Het dashboard geeft in één oogopslag inzicht in hoe gebruikers punten kunnen verdienen, hoeveel punten ze hebben, hun positie op het leaderboard en hoeveel tijd er nog over is in de campagneperiode.

Eindproduct dashboard YoungOnes

De profielpagina geeft een snel overzicht waar welke punten vandaan komen en waar nog punten behaald kunnen worden.

Eindproduct profiel YoungOnes
De eerste schetsen

LoFi

Op basis van verschillende beelden en informatie over voogaande GWOTY-awards begon ik met het itereren. Dit deed ik eerst in de vorm van een LoFi om eerst te focussen op de inhoud voordat ik aan de slag ga met de volledige vormgeving. Op deze manier zouden eventuele aanpassingen sneller toegepast kunnen worden.

  • Lofi schets #1

    Inlogpagina

    In het dashboard moet uiteraard ingelogd kunnen worden. Dit werd daarom ook in de LoFi meegeneomen om te controleren dat ik geen informatie mis.

  • Lofi schets #2

    Dashboard V1

    De belangrijkste pagina is het dashboard. Dit is waar alle essentiele informatie te vinden is. In de eerste iteratie had ik de timer klein linksboven staan.

  • Lofi schets #3

    Dashboard V2

    Uiteindelijk besloot ik om knoppen te maken van de kaders bovenin. Dit geeft meer rust, en een mogelijk hogere conversieratio voor de secundaire paginas.

  • KBO Reeshof Menu uitgeklapt

    Leaderboard

    Tijdens de wedstrijd willen de freelancers natuurlijk ook een ranglijst zien met hun positie en die van hun concurrenten. Hiervoor is er een leaderboard beschikbaar

  • Lofi schets #4

    Over GWOTY

    Om mensen te informeren over wat GWOTY precies inhoud, werd er een about-pagina ontworpen. Hier kan de gebruiker stap voor stap lezen hoe de puntenscore van GWOTY precies werkt.

  • Lofi schets #4

    Voorwaarden

    Naast de informatie over GWOTY, is het ook belangrijk om de algemene voorwaarden helder te hebben. Hiervoor is er een voorwaarden pagina waar de gebruiker alle voorwaarden kan vindne.

Kleur geven aan het ontwerp

HiFi iteratie

Nadat de LoFi ontwerpen klaar waren, had ik een gesprek met een marketing medewerker van YoungOnes. Zij was erg enthousiast over de LoFi en het ontwerp zag er een stuk moderener uit dan de website die ze hiervoor gebruikte. Daarnaast werd er nog iets meer duidelijkheid gegeven over de schermen die wel of niet nodig waren. Zo bleek dat een aanmeldscherm en een dashboard voor medewerkers niet nodig waren en dus werden deze schetsen geschrapt voor de HiFi.

Ook de algemene voorwaarden pagina was niet meer nodig. Hiervoor kunnen de freelancers naar de youngones website zelf gaan waar het al in detail wordt uitgelegd. De pagina in het dashboard werd daarom geschrapt.

  • Lofi schets #1

    Inlogpagina

    Voor de HiFi voor het inloggen was er niet veel werk nodig. Er werd een bijpassende afbeelding gebruikt en de kleuren en lettertype werden toegepast volgens de huisstijl.

  • Lofi schets #2

    Dashboard

    Ook het dashboard kreeg een update door hier een nieuw logo toe te voegen in de header en bijpassende iconen en huisstijl toe te voegen. Ook werden de menuitems geüpdate.

  • Hifi Profiel

    Profiel

    Een van de feedbackpunten vanuit marketing is dat ze graag een profielpagina willen hebben. Op deze manier heeft de gebruiker een beter inzicht over zijn of haar behaalde punten.

  • KBO Reeshof Menu uitgeklapt

    Leaderboard

    Voor het leaderboard was niet veel werk nodig. Alleen de huisstijl werd toegepast.

  • Lofi schets #4

    Over GWOTY

    Ook de HiFi van de about-pagina was erg makkelijk te ontwerpen. Hier was weinig feedback voor ontvangen

De mobiele responsive versie van het HiFi-ontwerp

HiFi iteratie mobiel

Uiteraard is het ook belangrijk om een beeld te geven over een mobiele versie. Een standaard website moet namelijk in deze tijd altijd geoptimaliseerd zijn voor alle vormen en maten schermen. Hiervoor werd de content in een smallere kader getoond. In de frontend kan dit makkelijk geautimatiseerd worden met een custom hamburgermenu en stylingselementen zoals flex en grid.

  • Lofi schets #1

    Inlogpagina

    Voor de mobiele versie werd de afbeelding verborgen om direct de content weer te geven.

  • Lofi schets #2

    Dashboard

    Het dashboard werd onder elkaar gezet in volgorde van relevantie. De timer werd daarom bovenaan getoond.

  • Hifi Profiel

    Profiel

    Bij het profiel werd de sidebar volledig onderaan gezet en het hoofdvak met belangrijke informatie bovenaan.

  • KBO Reeshof Menu uitgeklapt

    Leaderboard

    Ook bij het leaderboard verschijnt de sidebar onderaan en het hoofdvlak met belangrijke informatie bovenaan

  • Lofi schets #4

    Over GWOTY

    In de mobiele versie verdwijnt de overflow en wordt de tekst volledig onder elkaar getoond om het scrollen te versoepelen

Het uiteindelijke resultaat in NextJS en Tailwind

Uitgewerkte versie

Nadat er een akkoord was bereikt over de Hifi, werd er al snel een NextJS met Tailwind project opgezet om het ontwerp te realiseren in de frontend. Dit was mijn eerste echte project met NextJS en daarom duurde sommige elementen wat langer. Hiervoor had ik alleen ervaring met Svelte, wat nog steeds mijn voorkeur is. Het handmatig opzetten van verschillende hooks om variablen te laten updaten op de canvas vind ik ergens wel handig. Maar toch vind ik dit ergens ook nog een ouderwetse manier. Zeker wanneer je dit vergelijkt met Svelte waar dit volledig is geautimatiseerd zonder enige prestatieverlies

Hieronder vind u de link naar een statische versie van deze website. Dit is niet de laatste versie. In de laatste versie staan veel connecties met de database van YoungOnes en andere gevoelige informatie. Om die reden is de website zo goed mogelijk om de website alsnog in statische vorm weer te geven.

Bekijk de statische website
Bekijk de Github
  • Lofi schets #1

    Inlogpagina

    Voor de eindversie werd de afbeelding veranderd naar iets toepasselijker voor de doelgroep: hard werken, ofwel strijden. Ook werd de gekleurde kring verwijderd om meer rust te creeëren.

  • Lofi schets #2

    Dashboard

    Voor het dashboard heb ik snel een nieuwe bannerafbeelding gemaakt die minder druk overkomt, hierdoor komt de inhoud beter naar voren. Daarnaast is de prestatiesectie ook overzichtelijker vormgegeven.

  • Hifi Profiel

    Profiel

    Als laatste is de profielpagina verwerkt. Hier is vooral de overzicht sectie aangepast. Er is veel onnodige uitleg verwijderd en deze uitleg is samengevat tot belangrijkst gegevens met grote getallen.

  • KBO Reeshof Menu uitgeklapt

    Tussenstand (Leaderboard)

    Het Leaderboard werd hernoemd naar tussenstand op verzoek van team marketing. Leaderboard is te engels en team marketing wilde hiervoor een nederlandse benaming. Daarnaast is er meer padding toegevoegd en meer kleuren voor de top 3.

  • Lofi schets #4

    Over GWOTY

    Ook de HiFi van de about-pagina was erg makkelijk te ontwerpen. Hier was weinig feedback voor ontvangen