Makkelijk en snel stockbeheer uitvoeren in de winkel voor Medi-Market

Medi-Market wilde de ergonomie van de voorraadbeheerprocessen in hun winkels verbeteren voor hun verkoopmedewerkers. We transformeerden hun bestaande systeem voor voorraadaanvulling naar een Progressive Web App, geoptimaliseerd voor handheld apparaten. Het resultaat? Een naadloze, mobielvriendelijke ervaring die de efficiëntie verhoogt en de dagelijkse werkzaamheden in meer dan 70 winkels vereenvoudigt.

Lees meer

Uitdaging

Medi-Market had een mobielvriendelijke tool voor voorraadbeheer nodig om de ergonomie en gebruiksvriendelijkheid voor winkelmedewerkers te verbeteren.

Oplossing

We hebben een responsive Progressive Web App gemaakt die is geoptimaliseerd voor draagbare apparaten en die efficiëntie combineert met gebruiksgemak.

Aanpak

Onze aanpak bestond onder andere uit het selecteren van een PWA vanwege de flexibiliteit, het toepassen van gebruikersgericht ontwerp door middel van onderzoek en feedback, en het volgen van Agile-ontwikkeling met UX-best practices.

Resultaat

De ASR PWA draait nu op 120 handhelds, waardoor de gebruiksvriendelijkheid en efficiëntie voor winkelpersoneel is verbeterd, terwijl de schaalbaarheid voor toekomstige upgrades behouden blijft.

In 2019 ontwikkelden we de Automatic Stock Replenishment (ASR) applicatie voor Medi-Market. Deze ASR-toepassing zorgt voor een optimaal voorraadbeheer. Op basis van een aantal parameters bepaalt ASR de optimale hoeveelheid voorraad die nodig is voor elke winkel. Zodra het voorraadniveau in de winkel onder het gedefinieerde minimum voorraadniveau komt, bestelt de applicatie autonoom de juiste producten totdat het optimale voorraadniveau weer is bereikt. Deze aanpak stelt Medi-Market in staat om de voorraden in hun winkels en magazijnen op een optimaal niveau te houden, wat de voorraadkosten drukt en het risico verkleint dat er producten op voorraad zijn waarvan de uiterste verkoopdatum is verstreken.

De ASR-toepassing is ontworpen voor gebruik op desktop- of laptopschermen. Wanneer winkelbedienden producten op de schappen tellen als onderdeel van een voorraadtelling of om de schappen aan te vullen, is het niet bepaald ergonomisch om met een laptop rond te lopen. Daarom vroeg Medi-Market ons om de functionaliteit van ASR over te zetten naar het kleinere scherm van een handheld in de vorm van een mobiele applicatie. Dit betekende ook een nieuwe interface, met een geoptimaliseerde gebruikerservaring voor mobiel gebruik.

In samenwerking met Medi-Market kwamen we al snel tot de conclusie dat een Progressive Web App (PWA) de juiste oplossing was. Een PWA draait in de browser, maar gedraagt zich zoals gebruikers van een native app zouden verwachten: de PWA kan op het beginscherm worden geplaatst, is zichtbaar in de app switcher en kan onderdelen zoals de camera of de microfoon inschakelen. Omdat de app niet beschikbaar is in app stores, kunnen app-updates bovendien gepusht worden zonder te hoeven wachten op de goedkeuring van app store toezichthouders.

Aantrekkelijke UI en hoog gebruikerscomfort

Om de best mogelijke gebruikerservaring te leveren, kropen we in de huid van een winkelbediende. We hebben kritisch gekeken naar wat winkelmedewerkers nodig hebben en wat hun verwachtingen zijn. Bovendien hebben we goed onderzoek gedaan naar de Zebra handhelds met een touchscreen, waar de ASR PWA op draait, om erachter te komen hoe deze wordt gebruikt.

Vervolgens werkten we een voorstel uit dat we aan Medi-Market presenteerden. Op basis van hun feedback bleven we itereren (nieuwe iteraties ontwikkelen en uitproberen) om de componenten en schermen stap voor stap op te bouwen.

De belangrijkste informatie die de gebruiker nodig heeft, staat altijd bovenaan en in het midden van het scherm, zoals een inzoombare afbeelding. Ook de item- en andere codes zijn direct visueel herkenbaar aan de verschillende huisstijlkleuren en worden boven de 'vouw' weergegeven, d.w.z. zonder dat de gebruiker hoeft te scrollen.

PWA selectie

Identificeerde een Progressive Web App (PWA) als de ideale oplossing vanwege de browsergebaseerde aard, native app-achtige functionaliteit en naadloze updatemogelijkheden zonder afhankelijkheid van app stores.

Gebruikersgericht ontwerp

Voerde grondig onderzoek uit naar de behoeften van winkelpersoneel en de handhelds van Zebra die ze gebruiken, en herzag het ontwerp van de app op basis van feedback om bruikbaarheid te garanderen.

Agile ontwikkeling & UX best practices

Bouwde en verfijnde componenten iteratief en paste daarbij best practices voor mobiele UX toe, zoals responsief ontwerp, duimvriendelijke zones en eenvoudig scanbare interfaces.

Naast onze stapsgewijze Agile aanpak hebben we ook een aantal best practices voor mobiel ontwerp geïmplementeerd. Zo zijn alle interactieve elementen groot genoeg om met de vinger te worden aangevinkt en hebben we de belangrijkste actie-elementen op plaatsen geplaatst die gemakkelijk met de duim te bereiken zijn (duimzone). Dit verhoogt het gebruiksgemak en de efficiëntie van winkelpersoneel.

Bovendien is het UI-ontwerp responsief. Als Medi-Market ooit besluit om over te stappen op een ander handheld apparaat met een andere schermgrootte, zoals een tablet, zal de interface netjes meeschalen naar de nieuwe schermgrootte.

De Medi-Market ASR-applicatie draait nu op zo'n 120 handhelds.

De app stelt ons in staat om een reeks taken die voorheen handmatig werden uitgevoerd, sneller, gebruiksvriendelijker en efficiënter uit te voeren en te controleren. Hierdoor hebben onze winkelbedienden meer tijd om onze klanten te helpen.

Peter Bos

CIO bij Medi-Market