Datavisualisatie voor opdrachtgevers van YoungOnes

Opdrachtgever Dashboard

Projectjaar: 2023
Projectdoel: Een dashboard creeëren die opdrachtgevers van YoungOnes kunnen gebruiken om inzichten te maken op hun data.
Doelgroep: Opdrachtgevers die YoungOnes gebruiken (35-70 jaar)

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

Het opsplitsen van data in relevante categorieën, gebruik van ratio-diagrammen en tabellen waarin gescrold kan worden zorgt voor een overzichtelijke datavisualisatie waar snel conclusies uit gehaald kunnen worden.

Een globale filter bovenaan past de algehele dataoverzicht aan, zodat op die manier makkelijk alle data over alle categorieën in 1 keer gefilterd kan worden.

Huidig gebruikt PowerBI dashboard

Huidig dashboard

De eerste schets van het nieuwe dashboard

LoFi iteratie

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 ratios visueel in de sidebar getoond
Overzicht met filters
Hieronder vind u een iteratie van het overzichtscherm waarbij er een filter is geselecteerd.
Klussen met filters
Hieronder vind u een iteratie van het klussenscherm waarbij er een filter is geselecteerd.

Eerste versie van de schetsen met kleur

HiFi V1 iteratie

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

Consistentie toegepast met het vernieuwde dashboard

HiFi V2 iteratie

Na het ontwikkelen van de eerste HiFi kreeg ik te horen van de opdrachtgever dat er al een dashboard was die de opdrachtgevers van YoungOnes al gebruiken. Het design is daarom iets aangepast om deze in de huidige huisstijl van het gebruikte dashboard te kunnen plaatsen.

Overzicht
Freelancer
Klussen

Feedbackverwerking van opdrachtgevers

HiFi V3 iteratie

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

Het uiteindelijke resultaat in NextJS, Tailwind en ChartJS

Ontwikkelde versie

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.

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.

Overzicht
Freelancer
Klussen

Opdrachtgever Dashboard

Huidig dashboard

LoFi iteratie

Overzicht

Freelancer

Klussen

Overzicht met filters

Klussen met filters

HiFi V1 iteratie

Overzicht

Freelancer

Klussen

HiFi V2 iteratie

Overzicht

Freelancer

Klussen

HiFi V3 iteratie

Overzicht

Freelancer

Klussen

Ontwikkelde versie

Overzicht

Freelancer

Klussen