Designer UI/UX

1. Context

BXLGIS is de cartografische toepassing van de Stad Brussel. Het dient als technische basis om een breed scala aan thematische applicaties te produceren en te verspreiden voor verschillende doelgroepen:

• Het grote publiek (externe doelgroep), via applicaties zoals Ville à 10 Minutes of Projets Urbains
• Stadsmedewerkers en partners (interne doelgroep), via tal van business applicaties.

De interne doelgroep (medewerkers) is de prioriteit voor dit project.

Het ecosysteem van applicaties is door de jaren heen gegroeid en vertoont vandaag visuele en ergonomische verschillen. Deze situatie zorgt voor een inconsistente gebruikerservaring (UX) en verhoogt de onderhoudscomplexiteit (UI-schuld).

2. Doel van de Overeenkomst

2.1. Doelstellingen & Problemen om op te lossen

Om deze situatie te verhelpen, wil BXLGIS beschikken over een Design System (DS). Dit DS zal fungeren als de enige bron van waarheid (Single Source of Truth) voor al onze interfaces, met als belangrijkste doelstellingen:

• Het verminderen van de bestaande UI/UX-schuld en het vermijden van toekomstige accumulatie.
• Het waarborgen van de consistentie binnen het ecosysteem en het behouden van een uniforme gebruikerservaring (UX).
• Het faciliteren en versnellen van de ontwerptaken voor Product Management.
• Het optimaliseren van de ontwikkeling door het aanbieden van “ready-to-use” componenten, zodat ontwikkelaars hiervan worden ontlast.
• De tool aantrekkelijk maken door het te voorzien van een moderne, intuïtieve en waardevolle visuele identiteit.
• De toegankelijkheid van de interfaces en interacties waarborgen (conformiteit met de WCAG-normen, wat een wettelijke verplichting is).

2.2. Verwachte Diensten

Deze opdracht bestaat uit het begeleiden van het BXLGIS-team bij het opzetten van de fundamenten en een eerste componentenbibliotheek (UI Kit) van het Design System.

De geselecteerde dienstverlener zal verantwoordelijk zijn voor:

• Het uitvoeren van een audit van het bestaande
• Het definiëren van de visuele fundamenten (design tokens, brand identity)
• Het ontwerpen van een eerste robuuste en toegankelijke componentenbibliotheek (UI Kit)
• Het documenteren van de gebruiksregels (Guidelines) van deze componenten

Het referentie design tool voor deze opdracht is Figma.

3. Beschrijving van de fasen en verwachte deliverables

De opdracht is onderverdeeld in verschillende fasen met duidelijke deliverables:

Fase 1: Audit & Inventarisatie (Discovery)

• Analyse van het bestaande (via 2-3 belangrijke BXLGIS-applicaties, voornamelijk intern, die zullen worden aangeleverd).
• Opstellen van een UI Inventory van alle interface-elementen (kleuren, typografie, knoppen, formulieren, modals, enz.).
• Identificeren van inconsistenties, “duplicaten” en ergonomische knelpunten.

Deliverable 1: Een audit- en inventarisatierapport (bv. Figma-bestand) met een samenvatting van de bevindingen en strategische aanbevelingen.

Fase 2: Visuele Fundamenten (Design Tokens & Brand Identity)

• Bepalen van het kleurenpalet (primair, secundair, semantisch, neutraal).
• Bepalen van het typografisch palet (lettertypes, groottes, weight, regelhoogtes).
• Bepalen van spacingsystemen (grids, margins, paddings).
• Bepalen van andere “tokens”: schaduwen, border-radius, enz.

Deliverable 2: Een grafisch en ergonomisch charter geleverd als gestructureerde variabelen (Design Tokens) in een Figma-bestand.

Fase 3: Ontwerp van de Componentenbibliotheek (UI Kit)

• Ontwerpen van een basis UI componentenbibliotheek, gebruikmakend van de fundamenten uit Fase 2.
• Componenten moeten worden opgebouwd volgens Figma best practices (auto-layout, variants, enz.).
• Focus op toegankelijkheid (WCAG).
• Responsive Design: Het hoofdzakelijke gebruik is “desktop-first” (business applicaties). De consultatie moet echter perfect functioneel en leesbaar zijn op mobiel (responsive). We mikken niet op een volledige mobile-first ervaring die alle functionaliteiten repliceert, maar wel op een vlotte, intuïtieve mobiele consultatie-ervaring die de visuele identiteit respecteert.

Deliverable 3: De componentenbibliotheek (UI Kit) in de vorm van een proper en publiceerbaar Figma-bestand.

Fase 4: Documentatie & Gebruiksprincipes (Guidelines)

• Voor elk component duidelijke en beknopte gebruiksregels schrijven (“Do’s & Don’ts”).
• Deze regels kunnen rechtstreeks in Figma worden geïntegreerd (via de componentbeschrijving) of in een losstaand document (zeroheight, storybook).

Deliverable 4: Een gebruiksdocumentatie (Guidelines) voor de componentenbibliotheek.

5. Verwachte Wijze van Indienen

Om als volledig te worden beschouwd, moet het voorstel van de inschrijver de volgende documenten bevatten:

• Een portfolio (link of PDF)
• Een methodologische nota (max. 3 pagina’s):
• Die blijk geeft van een goed begrip van de specifieke behoefte van BXLGIS.
• Die de voorgestelde aanpak en methodologie voor elke fase beschrijft, inclusief een voorlopig plan met een inschatting van de werkbelasting (in D/U) per fase.
• Een up-to-date CV.

Hybride opdracht met minimaal 2 dagen per week op locatie.