Quick and easy in-store stock management for Medi-Market

Medi-Market is a chain of parapharmacies owned by Belgian company Medi-Market Group which operates in the pharmacy and parapharmacy sector. Medi-Market’s mission is to make the most comprehensive range of high-quality products available to as many people as possible at the lowest price. Medi-Market runs some 70 points of sale in Belgium, Luxembourg, Italy and elsewhere.

The challenge: improving the ergonomics for shop assistants during stock management

In 2019, we developed the Automatic Stock Replenishment (ASR) application for Medi-Market. This ASR application ensures optimum stock management. Based on a number of parameters, ASR determines the optimum amount of stock required for each shop. As soon as stock levels at the shop fall below the defined minimum stock level, the application autonomously orders the right products until the optimum stock level is reached again. This approach enables Medi-Market to keep stocks at their shops and warehouses at optimum level, which drives down the stock cost and reduces the risk of having products in stock with an expired sell-by date.

The ASR application had been designed to be used on desktop or laptop screens. When shop assistants are counting on-shelf products as part of stock-takes or in order to replenish the shelves, having to lug around a laptop is not exactly ideal from an ergonomic perspective. Which is why Medi-Market asked us to port the functionality of ASR to the smaller screen of a handheld device in the shape of a mobile application. This also entailed a new interface, delivering an optimized user experience for mobile use.

Our solution: a progressive web app with an excellent user experience and interface

Working in tandem with Medi-Market, we soon came to the conclusion that a Progressive Web App (PWA) was the right solution. A PWA runs in the browser, but behaves as users would expect from a native app: the PWA can be put on the home screen, it is visible in the app switcher and can enable components such as the camera or the microphone. As the app is not available from any app stores, this moreover allows for app updates to be pushed without having to wait for the approval of app store supervisors.

Appealing UI and high user comfort

To deliver the best possible user experience, we put ourselves in the shoes of a shop assistant. We critically reviewed what shop assistants need and what their expectations are. Moreover, we properly researched the Zebra handhelds with a touchscreen, which the ASR PWA runs on, to find out how it is used.

We then worked up a proposal which we presented to Medi-Market. Based on their feedback, we continued to iterate (develop and try out new iterations) to build the components and screens on a step-by-step basis.

The main information the user requires is always at the top and in the middle of the screen, such as a zoomable image. The item and other codes too are instantly visually recognizable from the different house style colors and are displayed above the ‘fold’, i.e. without the user having to  scroll.

UX best practices

In addition to our step-by-step Agile approach, we also implemented quite a few best practices for mobile design. For one thing, all interactive elements are large enough to be ticked by finger and we positioned the main action elements in places that are easily reached by thumb (thumb zone). This raises shop assistants’ user comfort and efficiency.

Moreover, the UI design is responsive. If ever Medi-Market decides to switch to a different handheld device with a different screen size, such as a tablet, the interface will nicely scale along to the new screen size.

The Medi-Market ASR application is now running on some 120 handhelds.