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.
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)
Huidig dashboard
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
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.
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
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
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
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