Opdrachtgever Dashboard

Een overzicht van alle freelancers via YoungOnes

Projectjaar: 2022
Projectdoel: Een dashboard creeëren die opdrachtgevers van YoungOnes kunnen gebruiken om inzichten te maken op hun data.
Doelgroep: Opdrachtgevers die YoungOnes gebruiken

YoungOnes gebruikte tot nu toe een automatisch gegenereerde PowerBI dashboard die de opdrachtgevers konden geberuiken om inzichten te doen. PowerBI gaf alleen tabellen en had geen enkele vorm van datavisualistie. Hierdoor is het lastiger om nuttige inzichten te doen over de data. Er moest daarom een nieuw dashboard ontworpen en hier kreeg ik de opdracht

Huidig dashboard

Huidig gebruikt PowerBI dashboard

LoFi iteratie

De eerste schets van het nieuwe dashboard

Na wat snelle schetsen op papier besloot ik de data op te splitsen in 3 categorieën: Overzicht, Freelancer en Klussen. Bovenaan zijn de tijd- en loactiegerelateerde filters beschikbaar die alle data op het scherm update. Daarnaast kunnen staven in de legenda uitgezet worden om meer in de specifieke data te duiken. De populairste inzichten waar de opdrachtgevers het meest om vroegen, worden in kleine blokken bovenaan getoond met grote visuele getallen.

Overzicht

In het overzicht is de globale en populairste data beschikbaar. De stapelstaafdiagram wordt gedraaid voor in het geval er gescrold kan worden wanneer er te veel locaties zijn om het op één scherm weer te geven.

Freelancer

Op de freelancer pagina is heel veel data beschikbaar. Er werd daarom gekozen om hier wel een tabel te tonen. Wel wordt er een verhoudingvisualisatie getoond waarbij in 1 keer zichtbaar is hoe populair een medewerker is.

Klussen

Klussen bevat veel tekstuele data die daardoor erg gevoelig is voor menselijke fouten. Daarom wordt er hier een tabel getoond met het totaal of gemiddelde. Daarnaast worden reacties en ratio's visueel in de sidebar getoond

Lofi ontwerp van de kluspagina van de opdrachtgeversdashboard

Overzicht met filters

Hieronder vind u een iteratie van het overzichtscherm waarbij er een filter is geselecteerd.

Lofi ontwerp van het overzichtpagina met filters van de opdrachtgeversdashboard

Klussen met filters

Hieronder vind u een iteratie van het klussenscherm waarbij er een filter is geselecteerd.

Lofi ontwerp van de klussenpagina met filters van de opdrachtgeversdashboard

HiFi V1 iteratie

Eerste versie van de schetsen met kleur

Voor de HiFi wilde ik de kleuren van YoungOnes terug laten komen. Dit vond ik erg lastig aangezien YoungOnes maar 1 kleur heeft en verder voornamelijk zwart en wit gebruikt. Vooral het kleuren van de staafdiagrammen was wat lastig. Uiteindelijk kwam ik uit op een website die kleuren kon genereren op basis van een huisstijl kleur voor datavisualisaties (https://learnui.design/tools/data-color-picker.html). Deze heb ik gebruikt en dit maakte de visualisatie een stuk makkelijker.

Overzicht

Freelancer

Klussen

HiFi V2 iteratie

Consistentie met het vernieuwde dashboard

Overzicht

Freelancer

Klussen

HiFi V3 iteratie

Feedbackverwerking van opdrachtgevers

Om een beter beeld te krijgen over de wensen van de doelgroep werden mijn iteraties gedeeld met verschillende opdrachtgevers. Hier kwamen een paar feedbackpuntjes en wensen uit die vervolgens werden verwerkt in een volgende iteratie.

Vanuit de opdrachtgevers kreeg ik het verzoek om de stapelstaafdiagram te draaien en rechtop te zetten. Dit is wat onwennig met horizontaal scrollen, maar maakt het diagram wel beter leesbaar. Daarnaast heeft niet elke opdrachtgever meerdere locaties. Het is daarom aangeraden om bij het overzichtscherm de volgende filters toe te voegen: Locatie, subaccount, functietitel en per week.

De medewerkers van YoungOnes gaven aan dat het dashboard niet perse op 1 scherm hoeft te passen. Er mag best verticaal gescrold worden. Hierdoor is er meer ruimte beschikbaar voor diagrammen.

Overzicht

Freelancer

Klussen

Verhouding uitleg

De verhouding in de tabel kan voor wat verwarring zorgen. Daarvoor is er nu een informatieblok toegevoegd die uitlegd waar elke kleur voor staat

Derde HiFi ontwerp van de freelancerpagina met uitleg over de verhouding van de opdrachtgeversdashboard

Klussen filters

Verschillende diagrammen hebben lokale filters bovenin de kader naast de titel. Hieronder vind u een voorbeeld van de werking daarvan bij de kluspagina.

Derde HiFi ontwerp met werking van lokale filters

Staven uitzetten

In elke staafdiagram is het mogelijk om de staven 'uit te zetten'. Op die manier kan er ingezoemd worden op de data en kunnen er beter inzichten gedaan worden.

Derde HiFi ontwerp met voorbeeld voor het aan en uitzetten van de staven

Eindversie

Het uiteindelijke resultaat in NextJS, Tailwind en ChartJS

Na goedkeuring van de product owner was het tijd om het dashboard te realiseren in de frontend. Na wat onderzoek, bleek dat ChartJS het beste gecombineerd kon werden met NextJS en Tailwind. Met ChartJS kun je, met de kracht de van D3 library, snel krachtige diagrammen ontwikkelen.

Tijdens het ontwikkelproces werd er ook nog wat geïtereerd. Zo werd het menu bovenin geplaatst, werd de locatiefilter bovenaan verwijderd om verwarring te voorkomen voor opdrachtgevers met 1 locatie en werd het diagram op de kluspagina bovenaan gezet om eerst de globale data te tonen. Daarnaast zijn er nog wat kleuren veranderd en heb ik tijdelijke iconen ontworpen voor de kaders boven de diagrammen.

Overzicht

Freelancer

Klussen

Tijdfilter

Met de 'react-datepicker'-plugin kan de gebruiker een bereik aan dagen selecteren om daarvan de date te tonen.

Helaas is het dashboard ontwikkeld in een bestaand project van YoungOnes waardoor er ook veel geschreven code van andere aanwezig is in het project. Daarnaast wordt er gewerkt met gevoelige informatie en diverse connecties met databases van verschillende bedrijven. Ik heb daarom helaas geen toestemming gekregen om de code online te hosten en dus is er geen github link beschikbaar.