Brandbook Klantportaal en Binnendienst

1

Het merk

Wat de apps doen, wat ze vervangen en wat ze beloven. De rest van dit brandbook volgt hieruit.

Zie zelf hoe je order ervoor staat.

De belofte in één regel. De stand, de werkbon en de factuur, zonder te bellen.

Wie we zijn Gegeven

Voorbeeld Installatietechniek installeert en onderhoudt warmtepompen en ventilatie bij bedrijven en scholen in Twente.

Wat het portaal doet Voorstel

In het Klantportaal zien klanten zelf hoe hun order ervoor staat.

Met de werkbonnen, de factuur en de documenten erbij. En met een vraag over de order, als er iets niet duidelijk is.

Wat het vervangt: het telefoontje Gegeven

Nu bellen klanten naar kantoor. Ze vragen hoe hun order ervoor staat, of willen een werkbon of factuur opnieuw. Dat zijn zo'n 40 telefoontjes per dag.

Een binnendienstmedewerker zoekt het stuk dan op in Exact Online. Daarna stuurt hij het per e-mail of WhatsApp.

Hoe het werkt

1. Inloggen. De klant vraagt een inloglink aan met zijn e-mailadres. Een wachtwoord is niet nodig.
2. Orders. Hij ziet de orders van zijn relatie, elk met één status.
3. Order. Hij opent een order, met de werkbonnen, de factuur en de documenten erbij.
4. Vraag. Hij stelt een vraag over de order. De vraag staat bij die order.
5. Antwoord. Een binnendienstmedewerker antwoordt in Binnendienst. De klant krijgt een e-mail met een link naar de order.
6. Onderhoud. De klant kiest een moment voor het jaarlijkse onderhoud. Niet in deze Build

De zes stappen zijn die van de Aanvraag, in die volgorde, in de woorden van de specificatie. Stap 6 is de Uitbreiding Afspraken (BUITEN-003).

Wat de apps beloven Voorstel

• Eén status per order. Met de geplande datum, zolang die nog komt.
• De stukken bij de order. Werkbonnen, factuur en documenten, uit Exact Online.
• Een vraag staat bij de order. Het antwoord komt eronder.
• Een e-mail bij een antwoord op je vraag. Met een link naar de order.
• Inloggen zonder wachtwoord. Een klant met een link per e-mail, een medewerker met een passkey.

Wie de apps gebruikt

Wie wat ziet, en wie wat beslist

1. Klant. Een e-mailadres waarmee iemand inlogt. Het staat bij een of meer contactpersonen in Exact Online.
2. Relatie. Het bedrijf of de school, met de relatiecode uit Exact Online en ten minste één order.
3. Orders. De orders van die relatie. Elke order heeft één status, en een geplande datum zolang die nog komt.
4. Stukken en vragen. Bij elke order de werkbonnen, de factuur, de documenten en het gesprek.

• Exact Online is de bron. Het portaal laat zien wat in Exact Online staat en verandert daar niets aan. Klopt er iets niet in een order? Stel een vraag bij die order.
• Je ziet de orders van je eigen bedrijf of school, en alleen die. Collega's bij hetzelfde bedrijf of dezelfde school zien dezelfde orders, vragen en antwoorden.
• Wie erin mag, volgt Exact Online. Wie in Exact Online met een e-mailadres contactpersoon is bij een relatie met een order, kan inloggen. Verdwijnt het adres uit Exact Online, of blokkeert de beheerder het bij die relatie, dan stopt de toegang.
• Geen wachtwoord. Een klant logt in met een link per e-mail. Een medewerker logt in met een passkey.
• Een vraag staat op schrift, bij de order. Een binnendienstmedewerker van Voorbeeld Installatietechniek antwoordt. Je krijgt een e-mail als er een antwoord is. De tekst lees je in het portaal.
• Je gegevens. Het portaal bewaart je naam, je e-mailadres en je vragen, en geen telefoonnummer. Voorbeeld Installatietechniek is daarvoor verantwoordelijk, als verwerkingsverantwoordelijke.

2

Logo

Voorstel

Er is geen logo aangeleverd. Dit logo is een voorstel. Het merkteken is een blauw vlak met een wit dak en een gele kern: de warmte binnen. Daarnaast staat de naam in kapitalen. Upload je eigen logo in het platform; dan vervangt dat dit logo overal.

Het merkteken alleen

Het merkteken staat alleen als app-icoon, favicon en avatar. Op 16 px is het een eigen tekening met een dikkere lijn, zodat het dak te zien blijft.

Zo bouw je het na

Het woordmerk is getekend: lijnletters van één dikte, op de verhoudingen van Arimo Bold. Het is niet uit een lettertypebestand omgezet, en het is niet in Arimo of Arial gezet. Het logo bestaat alleen uit paden, zonder lettertype. Gebruik daarom altijd het SVG-bestand hieronder, en zet de naam nooit opnieuw in een lettertype.

Niet doen

3

Kleur

Blauw en geel zijn gegeven. Blauw draagt het merk en elke actie. Geel is een accent en nooit tekst op wit. De andere kleuren zijn een voorstel, elk met één taak.

Hoeveel van elk

• Wit 50%
• Mist 22%
• Inkt 14%
• Blauw 10%
• Geel 2%
• Groen, Rood en Oker samen 2%

Licht en donker naast elkaar

Dezelfde orderregel en knoppen in beide thema's. In donker wordt een actie IJsblauw; de app-balk blijft blauw.

Welke kleuren tekst dragen

Elk paar dat tekst draagt, haalt 4,5 : 1 (WCAG 2.2, 1.4.3). Een vorm die iets zegt, haalt 3 : 1 (1.4.11). Kleur staat nooit alleen: een status heeft altijd een woord en een vorm.

De tokens

Elke kleur heeft een token met een vaste naam, met een waarde voor licht en een voor donker. De app gebruikt alleen deze tokens, nooit een losse kleurcode.

4

Typografie

Voorstel: Arimo in plaats van Arial

De offertes gebruiken Arial. Arial is niet vrij mee te leveren in een app. Arimo heeft dezelfde breedte per teken en een open licentie, dus de tekst loopt net zo. Twee gewichten: Regular 400 en Bold 700.

De letterladder

Elke stap met een echte regel uit de app. Lopende tekst is nooit kleiner dan 16 px; 14 px is alleen voor labels, datums en hints.

Ruimte en ritme

Alles staat op een raster van 8 px. Alles wat je aanraakt, is minstens 44 × 44 px.

• --vi-ruimte-14 px
• --vi-ruimte-28 px
• --vi-ruimte-312 px
• --vi-ruimte-416 px
• --vi-ruimte-524 px
• --vi-ruimte-632 px
• --vi-ruimte-748 px
• --vi-ruimte-864 px

Regels

• Een kop, knop of label begint met een hoofdletter; de rest is klein. Nooit een hele zin in kapitalen.
• Vet alleen voor koppen, knoppen, labels, statussen en de naam in een bericht. Geen cursief voor nadruk.
• Tekst staat links uitgelijnd en breekt af op een nieuwe regel. Nooit afgekapt met puntjes.
• Een regel is hoogstens 68 tekens.
• Cijfers in lijsten en tabellen hebben een vaste breedte, zodat ze onder elkaar staan.
• Een datum: do 12 nov 2026. Een tijd: 09:14.
• Een link is onderstreept.

Licentie

De licentie hoort bij de bestanden: wie Arimo meelevert, levert de licentietekst mee.

5

Beweging

In het Klantportaal en in Binnendienst beweegt alleen iets als je zelf iets doet. Beweging laat zien dat het gelukt is, en verder niets.

Geen groot bewegend moment: klanten komen hier voor een status of een werkbon, en de snelste weg daarheen staat stil.

De tokens

Elke beweging gebruikt een van deze tokens. Ze gelden in beide thema's.

Wat beweegt, en waarom

Wat nooit beweegt

• De status van een order. Geen knipperend of kloppend teken. De status staat er als woord en vorm, met de geplande datum waar die hoort.
• De focusrand. Hij staat er meteen, zodat je altijd ziet waar je bent.
• Laden. Het teken bij Versturen draait niet en het skelet van de orderlijst glanst niet. De tekst zegt wat er gebeurt.
• Een fout. Een veld schudt niet. De fout staat er meteen, bij het veld.
• Een knop die je indrukt. Hij wordt niet kleiner of groter. Hij krijgt meteen zijn ingedrukte rand.
• Wisselen van pagina, van thema of van filter. Het nieuwe staat er meteen.
• Het logo, de orderlijst en datums. Niets telt op en niets schuift binnen als een pagina opent.

Niets herhaalt zich en niets knippert. Elke beweging is binnen een seconde klaar, dus er is nooit iets om te pauzeren.

Een vraag versturen, beeld voor beeld

Zo ziet een klant zijn vraag over een order aankomen. De beelden staan stil. Open Beweging afspelen om de beweging te zien.

Beeld 3 is ook wat je ziet met minder beweging aan, en zonder script. Dan laadt de order opnieuw en staan de melding en de vraag er samen.

De regels

• Iets beweegt alleen als je zelf iets doet. Als een pagina opent, beweegt niets, behalve wat je net zelf verstuurde.
• Alleen wat nieuw is beweegt, en maar één keer. De app zet de klasse ‘is-nieuw’ op het nieuwe deel, nooit op wat er al stond.
• Zonder script werkt het hetzelfde: na het versturen laadt de pagina opnieuw en zet de server ‘is-nieuw’ op de nieuwe vraag en de melding.
• Een schermlezer hoort de melding uit een statusregel van de app. Dit document staat stil, dus hier is die regel alleen beschreven.
• Staat minder beweging aan, dan schuift en draait niets en verandert elke kleur meteen.

6

Stem

Zoals onze monteurs praten: kort en duidelijk, zonder vakjargon. Zakelijk, met een datum en een volgende stap.

De toon is gegeven: "Zakelijk" en "Zoals onze monteurs praten: kort en duidelijk, zonder vakjargon." De regels, pijlers, voorbeelden en taglines hieronder zijn een voorstel dat daaruit volgt.

Zes regels Voorstel

1. Kort. Hoogstens 15 woorden per zin. Eén boodschap per zin.
2. Gewone woorden. Zeg "ventilatie met warmteterugwinning", niet "WTW-unit". In het Klantportaal geen woorden uit Exact Online, zoals verkooporder.
3. Je, niet u. In beide apps en in elke e-mail. Nooit door elkaar.
4. Een datum, geen bijvoeglijk naamwoord. "Geplande datum: do 12 nov 2026", niet "binnenkort".
5. Eindig bij de volgende stap. Een melding zegt wat er is, en wat je nu kunt doen.
6. Een knop zegt wat hij doet. Een werkwoord in de onbepaalde wijs: Vraag versturen, Blokkeren, Toegang terugzetten.

Vier pijlers Voorstel

Zo zeggen we het Voorstel

• Wel: Gepland. Geplande datum: do 12 nov 2026.
  Niet: Uw order wordt binnenkort verwerkt.
• Wel: De werkbon van 23 oktober staat bij order 4093.
  Niet: Documentatie is beschikbaar in de documentenmodule.
• Wel: Deze inloglink werkt niet meer. Vraag een nieuwe aan.
  Niet: Token verlopen (fout 401).
• Wel: Dit is de stand van 09:40. De app probeert het elke 5 minuten opnieuw.
  Niet: Oeps! Er is een onverwachte fout opgetreden.
• Wel: Stel je vraag bij de order.
  Niet: Neem contact op met onze klantenservice.
• Wel: Na 12:00. De monteur is er om 12:30 en is rond 16:00 klaar.
  Niet: Uw melding wordt zo spoedig mogelijk opgepakt.
• Wel: Vraag versturen
  Niet: Klik hier

De regels gelden ook voor een binnendienstmedewerker die antwoordt: een datum of een feit, geen procedure.

Taglines Voorstel

Zie zelf hoe je order ervoor staat. Zonder te bellen.

De belofte van de omslag.

• Je order, je werkbon, je factuur. Op één plek.
• Werkbon nodig? Hij staat bij je order.
• Een vraag over je order? Stel hem bij die order.

Onze woorden

De woorden van de Begrippen van de specificatie. Eén woord per idee. Een naam heeft altijd een hoofdletter: Klantportaal, Binnendienst, Exact Online, Voorbeeld Installatietechniek. Elk ander woord is klein in een zin, en krijgt alleen een hoofdletter aan het begin van een kop, label, knop of status: "Order 4093", maar "open de order".

• Klantportaal (het Klantportaal). De app voor klanten. Een naam.
• Binnendienst (in Binnendienst). De app voor medewerkers. Alleen de app heet zo; de mensen zijn binnendienstmedewerkers.
• Installatiebedrijf (het installatiebedrijf). Het bedrijf dat de apps gebruikt. In de apps staat altijd de naam: Voorbeeld Installatietechniek.
• Relatie (de relatie). Een bedrijf of school in Exact Online, met relatiecode en ten minste één order. In het Klantportaal staat de naam: "Basisschool De Wilg".
• Contactpersoon (de contactpersoon). Een persoon bij een relatie in Exact Online, met naam en e-mailadres.
• Klant (de klant). Rol: wie met een e-mailadres inlogt in het Klantportaal. Nooit het bedrijf.
• Binnendienstmedewerker (een binnendienstmedewerker). Rol: een medewerker die vragen beantwoordt.
• Beheerder (de beheerder). Rol: nodigt medewerkers uit, blokkeert de toegang van een klant en zet die terug.
• Inloglink, inlogcode (een inloglink, de inlogcode). De link per e-mail waarmee een klant inlogt, en de code in dezelfde e-mail voor een ander apparaat.
• Passkey (je passkey). Waarmee een medewerker inlogt en de beheerder een handeling bevestigt.
• Order (order 4093). Een order van een relatie, met ordernummer en omschrijving.
• Status (de status). Het ene woord dat zegt hoe een order ervoor staat: Gepland, In behandeling, Deels geleverd, Afgerond of Geannuleerd.
• Geplande datum (de geplande datum). De leverdatum uit Exact Online. Alleen bij Gepland, en bij Deels geleverd zolang hij nog komt.
• Statuswijziging (een statuswijziging). Een wijziging van een order in Exact Online, zoals Binnendienst haar zag.
• Stuk (een stuk). Een document bij een order in Exact Online: een werkbon, een factuur of een ander document, met een of meer bestanden.
• Gesprek, vraag, antwoord (het gesprek, je vraag, het antwoord). De berichten bij één order. Een vraag is open, beantwoord of afgesloten.
• Toegang (de toegang). Of een klant bij een relatie kan inloggen: Kan inloggen of Geblokkeerd.
• Blokkeren, toegang terugzetten (blokkeren, de toegang terugzetten). De toegang van een e-mailadres bij één relatie beëindigen, en die blokkade weer opheffen.
• E-mail (een e-mail). Het enige kanaal van de app. Altijd e-mail, ook in een knop of kop.

Woorden die we niet gebruiken Voorstel

• Niet: u, uw. Wel: je, jouw. Eén aanspreekvorm in beide apps.
• Niet: de binnendienst, voor mensen. Wel: een binnendienstmedewerker, of Voorbeeld Installatietechniek. Binnendienst is de app.
• Niet: ticket, melding, chat. Wel: vraag. Zo heet het in de app; een melding is iets wat de app zelf toont.
• Niet: klantenservice. Wel: Voorbeeld Installatietechniek. Het bedrijf bij naam.
• Niet: verkooporder, account, token, sessie, module. Wel: order, toegang, inloglink. Systeemwoorden zeggen een klant niets.
• Niet: track-and-trace. Wel: geplande datum. De app volgt geen vervoerder (BUITEN-006).
• Niet: status niet beschikbaar. Wel: een van de vijf statussen. Een status is nooit leeg (STAT-003).
• Niet: binnenkort, zo spoedig mogelijk. Wel: een datum of een tijd. Een datum is te controleren.
• Niet: succesvol, helaas, sorry, oeps, even. Wel: wat er is, en wat je nu doet. Vulwoorden zeggen niets.
• Niet: conform, middels, ten behoeve van. Wel: volgens, met, voor. Zo praat een monteur niet.
• Niet: eenvoudig, simpelweg, naadloos, ontzorgen. Wel: het aantal stappen. Laat zien, beweer niet.

7

Onderdelen

Elk onderdeel van beide apps, in elke staat die iemand kan bereiken. De schermen in Toepassingen bouwen alleen hiermee. De knop Thema bovenaan wisselt alle voorbeelden tussen licht en donker.

• Knop
• Invoerveld en tekstvak
• Inloggen
• App-balk en menu
• Statuslabel en stand
• Orderregel
• Lijst: laden, geen lopende orders, fout
• Melding
• Order: kop en gegevens
• Stuk
• Vragen bij een order
• Filter
• Tabel
• Zoekveld
• Toegang en blokkeren
• Overslaan en terug
• Voet

8

Toepassingen

De twee apps van de Build, op de reizen van de specificatie. Het Klantportaal staat op telefoonbreedte, zoals een klant het opent vanuit een e-mail. Binnendienst staat op bureaubreedte, zoals een medewerker het de hele dag gebruikt. Elke staat die iemand kan bereiken, staat bij het onderdeel dat hem toont.

Het kernproces, stap voor stap

1. De klant logt in. Klantportaal: Inloggen
2. Hij ziet de orders van zijn relatie met hun status. Klantportaal: Orders
3. Hij opent een order, met de werkbonnen, de factuur en de documenten erbij. Klantportaal: Order
4. Hij stelt een vraag over de order. Klantportaal: Order
5. Een binnendienstmedewerker antwoordt en de klant krijgt een e-mail. Binnendienst: Vragen, Vraag
6. De klant kiest een moment voor het jaarlijkse onderhoud. Niet in deze Build Dat is de Uitbreiding Afspraken: optie 2 van de Bouwcheck, of later met Doorbouwen.

Elke tekst op deze schermen is de tekst die de app toont. Namen van mensen staan er niet in: het voorbeeld gebruikt rollen, zoals Contactpersoon facilitair. De app toont de naam uit Exact Online.

Klantportaal

Mobiel eerst. Op een order staat de stand bovenaan, dan de stukken, dan de vragen. In die volgorde leest het oog, en in die volgorde gaat de Tab-toets. Elke reis, met het aantal stappen tot haar uitkomst:

Binnendienst

Bureau eerst. Medewerkers loggen in met een passkey. Op Vraag staan het gesprek en de order naast elkaar, met de statuswijzigingen eronder; op een tablet of telefoon staat het gesprek eerst. De beheerder ziet in Klanten de knoppen Blokkeren en Toegang terugzetten; een binnendienstmedewerker ziet dezelfde lijst zonder die knoppen. Organisatiebeheer, waar de beheerder collega's uitnodigt, zit in elke Build en gebruikt dezelfde app-balk en onderdelen.

E-mail

De app meldt alleen per e-mail. Elke e-mail heeft een korte samenvatting en eindigt met één knop naar de plek in de app. De tekst van een vraag of antwoord staat er nooit in, en er zit nooit een stuk bij. De app ontvangt geen e-mail: een antwoord op een e-mail komt terug bij wie het stuurde. Afsluiten, blokkeren en toegang terugzetten sturen geen e-mail.

De woorden van elke e-mail: een onderwerp dat zegt waar het over gaat, een korte samenvatting, en aan het eind één knop met een werkwoord. Daaronder staat alleen de bedrijfsnaam. De afzender is altijd Voorbeeld Installatietechniek, vanaf mail.voorbeeld.example. Dat domein neemt geen e-mail aan; wie terugschrijft, krijgt zijn e-mail terug (MEL-002, MEL-007).

Systeempagina's

Een order, stuk of vraag die niet bestaat of niet bij jou hoort, geeft Niet gevonden. De pagina zegt niet welke van de twee het is (SCH-005). Binnendienst heeft ook Geen toegang, voor een pagina die alleen de beheerder mag openen. Een fout bij ons heeft in beide apps dezelfde pagina.

Stukken

De apps maken zelf geen document of pdf. Elk stuk komt uit Exact Online en opent zoals het daar staat, met het onderwerp dat het daar heeft.

Geef een stuk in Exact Online daarom een onderwerp dat de klant begrijpt: "Werkbon 4093-1, installatie dag 1", niet "WB_4093_1_def". Voorstel

Foto's en beeld

Beeld staat er alleen als het iets zegt. Elke afbeelding heeft een tekstalternatief dat zegt wat erop staat, zoals "Logo Voorbeeld Installatietechniek".

• Het portaal heeft geen foto's. Klanten voegen geen bestanden toe, en een order is te vinden zonder beeld.
• Een stuk toont onderwerp en datum; elk bestand staat op een eigen regel met bestandstype en grootte. Nooit een voorbeeldplaatje.
• Een icoon staat nooit alleen: naast elk icoon staat het woord. Voor een schermlezer is het icoon decoratief.
• In een e-mail is het logo het enige beeld, met een tekstalternatief. De e-mail is ook zonder beelden te lezen.
• Geen stockfoto's van monteurs of warmtepompen: ze zeggen niets over jouw order.