Gig Worker Of The Year Award

Een wedstrijd onderling verschillende YoungOnes zzp'ers

  • Projectjaar: 2021
  • Projectdoel: Geef de zzp'ers van YoungOnes een overzicht van hun punten tijdens de GWOTY wedstrijd
  • Doelgroep: ZZP'ers van YounOnes

Tijdens de eerste 5 weken van mijn stage bij YoungOnes kreeg ik de opdract om een nieuw dashboard te ontwerpen voor de zzp'ers van YoungOnes. De marketing afdeling van YoungOnes gaf deze opdracht. Hierin kunnen ‘gig workers’, ofwel freelancers, in een korte tijd punten scoren door te werken en hier leuke prijzen mee winnen. Om dit idee te realiseren moest er een dashboard ontworpen en ontwikkeld worden, dit is waar ik in het verhaal kom. In dit dashboard kunnen de zzp'ers zien hoe ze punten kunnen verdienen, hoeveel punten ze hebben, op welke positie ze staan en hoeveel tijd ze nog hebben om meer punten te verdienen. Hiervoor had ik veel contact met marketing om een globaal idee te krijgen over wat ze nu precies wilde hebben en hoe dit de jaren hiervoor verliep.

mockup image

LoFi

Eerste schetsen

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.

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 gwoty inloggen afbeelding

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 gwoty dashboard versie 1

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 pagina's.

Lofi gwoty dashboard versie 2

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 gwoty leaderboard pagina

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 gwoty about pagina

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.

HiFi

Kleur geven aan het ontwerp

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.

Inloggen

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.

HiFi van het dashboard van GWOTY-awards

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 ontwerp van het dashboard van de GWOTY-awards

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.

Hifi ontwerp van het profiel van de GWOTY-awards

Leaderboard

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

Hifi ontwerp van het leaderboard van GWOTY-awards

Over GWOTY

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

Hifi ontwerp van de about-pagina van GWOTY-awards

Voorwaarden

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.

HiFi - Mobiel

De mobiele responsive versie van het HiFi-ontwerp

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.

Inloggen

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

Mobiele HiFi van het inloggen van GWOTY-awards

Dashboard

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

Mobiele Hifi ontwerp van het dashboard van de GWOTY-awards

Profiel

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

Mobiele Hifi ontwerp van het profiel van de GWOTY-awards

Leaderboard

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

Mobiele Hifi ontwerp van het leaderboard van GWOTY-awards

Over GWOTY

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

Mobiele Hifi ontwerp van de about-pagina van GWOTY-awards

Eindversie

Het uiteindelijke resultaat in NextJS en Tailwind

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

Inloggen

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.

Eindversie van het inlogscherm

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.

Eindversie van het dashboardscherm

Dashboard Instagram

Op verzoek van team marketing moest er nog een informatie pop-up toegevoegd worden om instagram stories uit te leggen. Deze werd toegevoegd in de vorm van een toggable i-knop waardoor er een uitlegscherm verschijnt.

Eindversie van het Dashboardscherm met instagram stories uitleg

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.

Eindversie van het leaderboard

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.

Eindversie van het profielscherm

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.