GrowPad is een platform waarop bewoners en coaches persoonlijke ontwikkeling, doelen, begeleidingsmomenten en voortgang organiseren. Ik werkte eraan bij B302 als frontend developer.

Deze pagina gaat over mijn deel van het werk: de profielpagina, de dashboardschermen voor organisatie en beheer, het kaartoverzicht van groeiplannen met archivering en de tijdlijnfunctie.

Mijn aandachtsgebieden

Profielpagina

De profielpagina was vooral layout- en interactiewerk: persoonsgegevens, instellingen, notificatievoorkeuren, beveiligingsopties en accountacties begrijpelijk houden zonder dat het scherm één lang formulier wordt.

<ProfileLayout>
  <ProfileHeader editableAvatar />

  <ProfileColumn title="Persoonlijke gegevens">
    <PersonalDetailsForm />
  </ProfileColumn>

  <ProfileColumn title="Instellingen">
    <NotificationSettings />
    <SecuritySettings />
    <AppSettings />
  </ProfileColumn>
</ProfileLayout>

Op mobiel wordt dezelfde informatie een eenvoudigere, gestapelde flow. Het belangrijkste doel was dat gebruikers de belangrijke acties ook zonder desktoplayout nog kunnen vinden.

Schermen voor organisatie en beheer

Voor de organisatie- en beheerschermen werkte ik aan de overzichts-UI: tabs, dashboardkaarten, filters, tabellen en lege staten. Deze schermen moesten gestructureerd genoeg voelen voor beheerders, maar niet zo vol dat elke weergave op een spreadsheet leek.

const dashboardSections = [
  { label: 'Organisatie', icon: OrganisatieIcon },
  { label: 'Missies', icon: MissieIcon },
  { label: 'Doelen', icon: GoalsIcon },
  { label: 'Effecten', icon: EffectsIcon },
];

<DashboardNav>
  {dashboardSections.map((section) => (
    <Button key={section.label} prefixIcon={<section.icon />}>
      {section.label}
    </Button>
  ))}
</DashboardNav>

De beheerpagina gebruikt een eenvoudig kaartraster. Elke kaart legt één beheeronderdeel uit en geeft de gebruiker een duidelijke volgende stap.

<Card title="Effectdoelen">
  <p>Beheer outcomes en verantwoording voor de organisatie.</p>
  <Button>Beheer Effectdoelen</Button>
</Card>

Groeiplannen: kaarten, bewerkmodus, archief

De groeiplannenpagina is opgebouwd uit kaarten. Ik heb tijd gestoken in het tonen van precies de juiste hoeveelheid informatie op de kaarten: titel, icoon, aantal missies, deelstatus en knoppen om te bewerken of archiveren.

<GrowPlanCard
  title="Mijn groeiplan"
  icon="star"
  missionCount={4}
  sharedWith={2}
  mode="view"
/>

In de bewerkmodus krijgt dezelfde kaart een andere rol. Het wordt een object dat je kunt beheren in plaats van alleen openen. Gearchiveerde plannen zijn visueel rustiger en kunnen vanuit een aparte sectie worden hersteld.

<GrowPlanCard
  title="Gearchiveerd groeiplan"
  missionCount={3}
  mode="archived"
  actionLabel="Herstellen"
/>

Tijdlijnfunctie

De tijdlijn was de interessantste UI-flow. Die maakt van verschillende soorten activiteit één chronologisch overzicht: berichten, missies, doelen, acties, evaluaties en stemmingsupdates.

const timelineItems = [
  { type: 'message', title: 'Bericht toegevoegd', side: 'right' },
  { type: 'goal', title: 'Doel aangemaakt', side: 'left' },
  { type: 'evaluation', title: 'Evaluatie ingevuld', side: 'right' },
];

<VerticalTimeline items={timelineItems} />

Het kaartontwerp moest elk item scanbaar maken: een label voor het type, een titel, metadata, optionele berichtinhoud en een visuele markering op de tijdlijn.

<TimelineCard
  type="evaluation"
  title="Evaluatie ingevuld"
  meta="Coach · vandaag"
  status="Op schema"
/>

Responsive details

De schermen moesten ook op kleinere apparaten blijven werken. Voor mij betekende dat vooral dashboardrijen omzetten naar gestapelde layouts, kaartacties bereikbaar houden en voor belangrijke acties niet afhankelijk zijn van hover-states.

Resultaat

Mijn deel van GrowPad was de frontendimplementatie van de plekken waar gebruikers vaak terugkomen: profielinstellingen, dashboards, groeiplannen, archiefflows en de tijdlijngeschiedenis. De uitdaging was die schermen begrijpelijk houden en tegelijk genoeg data en acties beschikbaar maken voor coaches, organisaties en beheerders.