Retail shopping mobile application development
Branded application for a nation-wide chain of wholesale grocery retail stores
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.
METRO C&C envisioned a branded mobile application that would:
Facilitate the physical process of shopping at METRO stores
Facilitate the work of the chain’s marketing departments
Pave the way for eventual online sales
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.
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:
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.
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.
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.
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.
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.
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:
Vouchers
Users who accumulate bonuses can spend them by generating vouchers during subsequent purchases
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
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.
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
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.
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.
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.
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.
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
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.