Onix stands with Ukraine. Please monitor current status here.
metroUaImage

Branded application for a nation-wide chain of wholesale grocery retail stores

mobileImage

Are you interested in shopping mobile application development too?
Please don’t hesitate to share your plans and needs with Onix’s team — we are here to turn ideas into reality!

The client
and their business needs

METRO C&C is an international company specializing in wholesale grocery retail. Their target audience includes both individuals who regularly shop for their personal needs and legal entities making bulk purchases for hotels, restaurants, and catering.

The company initiated the project as part of their long-term strategy to digitize the current offline customer processes. Namely, they are striving to make shopping more convenient for the customers.

metroMap

METRO C&C envisioned a branded mobile application that would:

shopIcon

Facilitate the physical process of shopping at METRO stores

notebookIcon

Facilitate the work of the chain’s marketing departments

gearIcon

Pave the way for eventual online sales

mobileInHandImage

For example, one of the functionalities enables customers to shift from plastic customer cards to virtual ones. People just download the free app and use their mobile phones at the cash desk to make the purchases.

Besides an effective solution to their business needs, METRO C&C was looking for a reliable software development partner that would:

  • support them in every possible way
  • help them with any technical issues
  • ensure a transparent cooperation and development process

METRO C&C considered ten candidates for the job. Onix’s team made a good impression during the project requirements discussion, demonstrating competence from the onset. Thus, Onix won the tender and our cooperation began.

The beginning
of the project

The client approached Onix already having a product specification and design for the minimum viable product (MVP).

Onix’s team started the work with a UI/UX audit of the design. We made some recommendations, the client accepted them, and the app design was adjusted before the wholesale grocery shopping app development began.

workerImage

The functionalities
of the METRO UA app

The grocery app encompasses a classic customer flow and auxiliary features for the METRO marketing department.

The customers’ functionalities include:

functionalityImage

Electronic METRO customer card

The customers don’t have to carry a physical card with them any longer. Existing customers just need to scan or enter their METRO card number in the app to register. When new customers create their account, their virtual customer card is issued automatically. When users show the customer card screen to the cashier, the latter will scan it to award or spend loyalty bonuses.

functionalityImage

Barcode scanner

The handy functionality helps users find out the goods’ current prices quickly when they can’t find a price tag. They can scan several products in a row, and all scanned products are conveniently saved to a carousel at the bottom of the screen. The user can keep all previously scanned products on their phone until they decide to delete them.

functionalityImage

Promotional brochures

Customers can view METRO’s promotional brochures on their phone in the comfort of their homes. Indicating a specific store where they’re shopping, they can quickly learn about new promotions.

functionalityImage

Shopping list

Users can create and edit a shopping list and share it with their contacts. They can both type the text and add scanned products to the list. Soon, they will be able to view an online catalog and add items from it.

functionalityImage

METRO stores

Users can view a map of all stores and their hours of work. This feature also provides a convenient way to select the closest one as the user’s default store and to set up a route to the nearest store.

functionalityImage

METRO loyalty program

The loyalty program is open to both Individual and B2B customers. After a customer registers as a program participant, they are assigned a status. B2B customers can also choose the type of reward that is more convenient for them — bonuses or discounts. After receiving the status, customers start accruing bonuses upon each purchase at any METRO store. Every quarter, if they reach a specified total, their status in the loyalty program levels up. Currently, there are 4 loyalty levels: Basic, Club, Profi, and Expert.

The mobile app enables customers to use either type of reward they’ve chosen:

voucherIcon

Vouchers

Users who accumulate bonuses can spend them by generating vouchers during subsequent purchases

discountIcon

Direct discount

Each status comes with different discount conditions for B2B customers. They use the app to learn about the discount available to them

The app’s admin panel provides functionalities through which a marketer/administrator can:

  • manage the addresses of the stores (create, delete, and edit)
  • create promotional brochures to display to the customers
  • send personalized push notifications
  • manage the banner carousel (add, delete, and link)
  • edit T&C

Do you need help with your shopping mobile app design?
Just book a free consultation with Onix’s design experts — we are here to create great user experiences!

The app’s killer features and their implementation

functionalityImage

Product scanner

With a wide variety of goods at the stores and frequent changes in product promotions, it is important that the customer always sees the correct price of each item. Still, customers may often have difficulty finding the right price tag.

The mobile application solves this problem. The user just needs to point the scanner at a product’s barcode, and its valid price will be promptly displayed on the mobile screen.

To implement this feature, we developed a compact design of the price tag including several price levels, an image, a description, and some legal text that is mandatory since the company specializes in wholesales.

After the first release and collecting user feedback, we discovered that it is convenient for the users to scan several products in a row and then view information about the products on the smartphone. This determined the next step: the development of a multi-scan and carousel of scanned products.

All scanned items are stored and can be conveniently viewed on the user’s smartphone at any time. Moreover, since the goods prices and the relevance of promotional offers may vary at different METRO stores, the app updates the price tags every time the user opens the app.

functionalityImage

Shopping list

Users have the option to compile a shopping list before going to the supermarket.

The products on the list will be automatically grouped by category that corresponds to the physical store’s different departments. This solution will save the customers’ time and effort while shopping: the list will help them move purposefully through the multiple departments in a huge store.

Several improvements related to the shopping list are being planned as well:

  • the app may send automatic reminders about frequently purchased items
  • the app would notify customers when products on their list are available at a discount
  • when the company launches online sales, the shopping list will be easily converted to the customer’s cart
functionalityImage

Loyalty program

This feature is realized on three screens:

Status screen

The app displays information about the user’s current and next possible status, bonuses they’ve accumulated, and bonuses to earn for the next level via a progress bar and figures.

functionalityImage

Vouchers screen

This screen allows users to generate vouchers with different values, depending on the amount of bonuses they’ve earned. They use the same screen to make new purchases with the vouchers: at the supermarket, the cashier will have to scan a voucher’s barcode.

functionalityImage

Direct discount screen

On this screen, the customer can see the available discount, as determined by their status, but doesn’t have to do anything with it. At the checkout, they will simply have their customer card scanned, and the system will automatically recognize their status and apply the direct discount percentage.

featuresResultImage

The launch of the loyalty program was a milestone in the development of METRO UA apps. By better satisfying customers’ day-to-day needs, the feature helped to significantly boost customer loyalty.

The development process and technology stack

All functionalities of the wholesale shopping app were developed by Onix in close cooperation with the client: they would give an idea, and we would develop the concept and implement it.

To attract new customers, we decided to launch an MVP version first. The basic functionality included: registration, customer card, list of stores, and advertising brochures.

Then, we began to build up the functionality, adding one by one: the product barcode scanner, shopping list, linking stores, push notifications, vouchers, and the products catalog.

The native mobile apps for Apple and Android devices were coded in Swift and Kotlin, respectively.

Building the admin panel for the marketing department, Onix’s developers used the Django (Python) web framework.

The business logic relating to the registration of new users was implemented on the client-side in compliance with the company’s internal policies.

swiftIcon
kotlinIcon
djangoIcon

The app design

The work on the wholesale grocery application’s design also proceeded in increments as follows:

a new idea or request for change from the client

formulation of requirements

study of the competitors’ apps

analysis of the current application

preparation of the user flow

user testing

client’s approval

design preparation or updates

METRO UA is a practical shopping application, so we keep it simple and clean, not overwhelming users with details.

The designers used Sketch and Invision for the wireframes and high-fidelity mockups. All later updates to the design were implemented in Figma.

sketchIcon
invisionIcon
figmaIcon

The result and prospects

The apps have been released on Google Play and App Store, where they are available for free. The version for iPhones requires iOS 10.0 and up. The Android version is compatible with Android 5.0 and up.

As of September 2021, the apps have been downloaded over 100,000 times.

iOS 10.0

requirement for iPhones

Android 5.0

requirement for Android

100,000+

downloads

Currently, Onix’s team is both fixing issues and actively developing the retail shopping applications by adding new functionality.

Do you plan to have any of the features in your shopping app? Wondering how to implement a feature? Please feel free to schedule a free consultation with Onix’s team — we are here to help!