Iteraties

Eerste ontwerp

Overzicht en detail afhaalpunt - Versie 1

Figma: Afhaalpunten overview met map

• Aan de linkerzijde is er een overzicht van de afhaalpunten momenteel in het beheer van de vervoerder.
• Links aan de onderkant worden de afhaalpunten getoond op de kaart.
• Links in de tabel is er 1 regel grijs gekleurd, dit betekent dat deze afhaalpunt is geselecteerd, dezelfde afhaalpunt is in de map getoond als een groen bolletje in plaats van blauw.
• Aan de rechterkant is er een overzicht van het geselecteerde afhaalpunt, hier staan de gegevens van het afhaalpunt en de pakketten die het afhaalpunt momenteel in bezit heeft.
• Belangrijke keuzes:
  • Het gebruik van de tabel samen met de kaart; Deze twee elementen bestaan al in het Veloyd systeem, de keuze om deze elementen te gebruiken komt voor uit het naadloos integreren en een consistente gebruikerservaring. Daarnaast is het wel nieuw dat deze elementen naast elkaar op één pagina worden gebruikt.
  • Voor experimentatie staan de details van het geselecteerde afhaalpunt aan de rechterkant, dit is gedaan om het aantal clicks te verminderen vergeleken met de norm in Veloyd: pop-ups.
• Wat nieuw is:
  • De compositie en de statistieken zijn nieuw, elementen zoals de knoppen, tabel, kaart bestonden al.

Overzicht en detail afhaalpunt - Versie 2

Figma design: Afhaalpunt detail popup

• Het verschil met versie 1 is dat dit ontwerp de gegevens en statistieken van het geselecteerde afhaalpunt wél in een popup zet. Veloyd werkt veel met popups dus om consistentie te behouden is deze versie gemaakt.

Tweede ontwerp en start prototype

Overzicht van afhaalpunten (leeg)

• Bovenaan hebben we 3 actie knoppen die acties uitvoeren met betrekking tot afhaalpunten.
• Daaronder staat de opzet van een tabel, deze is nu leeg omdat er nog geen afhaalpunten zijn aangemaakt.
• Belangrijke keuzes:
  • De kaart is nog niet te zien...
• Nog toe te voegen:
  • Als er nog geen afhaalpunt is aangemaakt is de tabel leeg, voor een gebruiker die dit voor de eerste keer ziet is dit verwarrend. Een goede zero state met uitleg wat deze pagina doet en wat een volgende actie kan zijn moet nog worden toegevoegd.

Nieuw afhaalpunt toevoegen

• Na het klikken op de '+ Nieuw' knop komt deze popup tevoorschijn, hier kan de gebruiker de gegevens invullen van het afhaalpunt.
• Belangrijke keuzes:
  • Visueel gezien zijn er niet veel nieuwe keuzes gemaakt, het is voornamelijk gebouwd vanuit het Figma ontwerp met bestaande Veloyd componenten en elementen. De belangrijke keuzes zitten in het technische aspect. Hier is de data structuur van afhaalpunten bepaald:
    (Zie meer hierover in de technische analyse).

  {
    "_id": 0,
    "naam": "Jumbo",
    "adres": {
      "straat": "Westboschlaan",
      "huisnr": 107,
      "postcode": "2265 GB",
      "stad": "Leidschendam",
      "land": "NL"
    }
  }

Overzicht van afhaalpunten (gevuld)

Afhaalpunten overzicht met kaart

• De tabel is hier gevuld met twee afhaalpunten.
• Aan de rechterkant is de kaart te zien met drie gebieden, het idee is dat de gebruiker een gebied kan tekenen en deze kan toewijzen aan een afhaalpunt. Het tekenen van gebieden kennen de gebruikers al van bezorggebieden tekenen in de instellingen. (Zie prototype)
• Belangrijke keuzes:
  • Uit de enquête bleek dat vervoerders meerdere afhaalpunten per stad of postcode willen. Hierdoor is er gekozen om gebieden te kunnen tekenen zodat de gebruiker de afhaalpunten kan verspreiden over de stad zoals ze zelf willen. Zoals eerder vermeld is de gebruiker al bekend met het mechanisme van gebieden tekenen, dus dit kon hergebruikt worden.
• Wat nieuw is:
  • De compositie van de tabel naast de map is nieuw.
  • Het koppelen van de gebieden aan een afhaalpunt via de dropdown in de rijen van de tabel is nieuw.

Detail van afhaalpunt

Afhaalpunten detail popup met statistieken en openingstijden

• In de bovenste sectie staan de gegevens van het afhaalpunt vermeld.
• In het midden staan statistieken van het geopende afhaalpunt. Deze statistieken kunnen op datum gefilterd worden.
• Onderaan staan de openingstijden van het afhaalpunt vermeld, zodat de vervoerder kan nachecken of afhaalpunt geopend is voor het sturen of ophalen van pakketten.
• Belangrijke keuzes:
  • Het gebruik van de popup tegenover Versie 1 is gekozen na gesprekken met collega's, hier kwamen volgende punten uit:
    • Alle drie de overzichten op één pagina zou te druk en rommelig worden. Waardoor gebruikers het overzicht verliezen.
    • Consistentie behouden en verwarring te voorkomen.
    • Versie 1 blijft in het archief en gaat Veloyd verder bestuderen voor een eventuele redesign op grotere schaal.
  • Het tonen van de statistieken, uit de enquête kwam dat vervoerders graag dit inzicht wilden hebben.
• Wat nieuw is:
  • De statistieken sectie, dat statistieken op deze manier worden gepresenteerd is nieuw voor Veloyd. Op de planning van Veloyd staat een statistieken-dashboard, deze sectie is hier een voorloper op.

Overzicht van afhaalpunten

Overzicht met radius cirkels.

• Aan de rechterkant de kaart zijn er twee cirkels getekend om de afhaalpunten heen.
• Belangrijke keuzes:
  • In deze iteratie is er weg gestapt van het tekenen van de gebieden. Want na indirecte gesprekken met gebruikers bleek het dat vervoerders voornamelijk denken vanuit de afstand die een consument moet afleggen, dit is moeilijk uit de losse pols te tekenen op een digitale kaart. Vandaar is er gekozen voor het maken van een cirkel met het afhaalpunt in het midden. De radius van de cirkel wordt bepaald door een instelling die de vervoerder kan invullen:

Nieuw afhaalpunt

Nieuw afhaalpunt met kaart.

• Wat nieuw is:
  • De contactpersoon en opmerking velden zijn nieuw, deze extra gegevens maakt het bezorgproces makkelijker voor de vervoerder. De koeriers kunnen deze gegevens goed gebruiken.
  • De kaart aan de onderkant, deze kaart laat in real-time op de kaart zien waar het afhaalpunt komt en welk gebied het dekt. Zo kan de gebruiker dit beoordelen voordat hij/zij dit eerst moet opslaan. Dit inzicht kwam naar boven uit interne testen en evaluaties.

Overzicht van afhaalpunten

Overzicht van afhaalpunten met nieuw gebied tekening.

• Aan de rechterkant zijn nu de gebieden te zien in een meer accurate vorm dan een perfecte cirkel. Meer over dit is te lezen in Gebied berekening.
• Belangrijke keuzes:
  • Het vervangen van de perfecte cirkel naar de isochronen is een goed voorbeeld van virtueel tegenover praktijk. In de praktijk is afstand niet in een perfecte cirkel te tekenen, hiervoor zijn isochronen, deze vormen representeren accurate afstanden. Dit is heel duidelijk te zien bij het rechter afhaalpunt, het gebied heeft 2 uitstekende punten aan de rechterkant, omdat daar twee grote wegen uitlopen. Het verschil tussen virtueel en praktijk is hier goed te zien:

Instellingen

Algemene instellingen met betrekking tot afhaalpunten.

• De volgende instellingen zijn in kaart gebracht, gebaseerd op de enquête, interne en externe gesprekken en testen:
  • Maximale afstand tussen ontvanger en afhaalpunt: zodat het gebied kan worden getekend.
  • Aantal dagen op afhaalpunt voor retour: na het aantal dagen moet het pakket gemarkeerd worden als retour en weer opgehaald worden om terug naar de klant te gaan.
  • Bezorging op afhaalpunt: op welk moment een pakket naar een afhaalpunt moet gaan.
    • Automatisch inplannen aan eind van de route
    • Via nieuwe gebundelde rit op dezelfde dag
    • Via nieuwe gebundelde rit op volgende dag
  • Bezorgopties bij afhaalpunt: verschillende opties waar koeriers en afhaalpunten rekening mee moeten houden zodat vervoerders het process kunnen waarborgen.
  • Afwijken van afhaalpuntlocatie: wat er moet gebeuren als de koerier een pakket bezorgt op een ander afhaalpunt dan toegewezen.
    • Toestaan met waarschuwing
    • Toestaan zonder waarschuwing
    • Niet toestaan
  • Ontvanger via T&T pagina laten kiezen voor afhaalpunt: de consument laten kiezen bij welk afhaalpunt het pakket wordt afgeleverd.
  • Cut-off tijd wanneer ontvanger afhaalpuntlocatie niet meer kan wijzigen: tot wanneer de consument kan aangeven bij welk afhaalpunt het pakket wordt afgeleverd
    • Tot moment van bezorging
    • Starten van route door koerier
    • Route geoptimaliseerd door planner

Eindproduct

Het eindproduct is te zien op https://veloyd.jelmerovereem.nl. Inloggen kan met:
Email: demo@veloyd.nl
Wachtwoord: demo