The interface of the mobile application on a green background

Green Delivery Mobile App

Sophisticated delivery mobile app with a built-in loyalty system

About the client

  • Our client is the Green hypermarket chain, one of the largest retailers in the country, and also one of the first to offer delivery of goods through its website. The PixelPlex team originally worked on this Green Delivery online web store, and our client was highly satisfied with the quality of our work and the experience invested.

  • Now they have turned to us to take the next step — creating a mobile application to increase their user base, offer multiple ordering options, and allow customers to purchase goods on the go.

A mobile eCommerce solution offering Green Hypermarket's customers easy and convenient access to more than 15,000 SKUs, their delivery, and a self-pickup option.

Team

  • Developers

    4

  • QA engineer

  • Business analyst

  • UI/UX designer

Project goals

We aimed to create an advanced, intuitive, and secure mobile app with an integrated loyalty system to help our client increase customer loyalty and conversion rates.Our goal was to provide Green Hypermarket’s customers with a convenient tool they can use to seamlessly order goods 24/7 and enjoy additional features such as adding items to their “favorites” and placing orders in just a few clicks.

Challenges

  • A large number of SKUs that need to be correctly categorized and easily found by the buyer

  • The creation of a loyalty program that includes several options such as using a bonus card and issuing tokens and coupons

  • Regularly changing priorities due to new regulations and feedback from the hypermarket’s customers

  • Requests for expanding the app’s functionality, in particular developing and adding new features and directions to the loyalty system

Work done

  • 1

    Cross-platform iOS and Android mobile app for customers

  • 2

    UI/UX design and feature prototyping

  • 3

    Web-based admin panels for three user roles: logistician, supervisor, and marketing specialist

  • 4

    Built-in loyalty system and integration with the existing loyalty program’s base

Solution

PixelPlex has built a mobile application for the Green hypermarket chain from the ground up. The application we delivered enables grocery shoppers to browse thousands of products, receive money-saving coupons, and order items to be delivered to their doorstep.
Using the app, customers can also check current prices and delivery time slots, create a family bonus account to receive bigger discounts, and track the status of their orders at all stages of delivery.

Technologies used:

  • Java
    Java
  • React
    React
  • React Native
    React Native
  • Redux
    Redux
  • Firebase
    Firebase
  • Android System Webview
    Android System Webview

Why React Native?

  • While the development is based on the popular React library, mobile apps are displayed as if they were developed natively for both iOS and Android
  • React Native offers fast mobile development and provides a smooth and responsive UI and fast loading speeds
  • If there is a need to make any changes to some components, they will be updated for iOS and Android at the same time. This is a huge advantage for this project as new features are constantly being added

Project features

The green icon of a shield and a lock

Secure data storage and simple registration via a phone number

The green icon of two arrows

Flexible architecture allowing developers to add new features without disrupting system workflows

The green icon of a monitor

Simple yet engaging UI making it easy to navigate the application

The green icon of a circled arrow forming a clock

Speedy loading of screens and design elements

The green icon of a message notification on a phone

Push notifications implemented through the OneSignal service and sent to loyalty program participants on the specified date and time

Details

The interfaces of several pages of Green Delivery Mobile App

User roles

  • Customer

    Mobile application

    Uses grocery delivery service, orders items, and chooses the preferred delivery option

  • Logistician

    Web-based admin panel

    Receives information about the order and handles the entire delivery process

  • Supervisor

    Web-based admin panel

    Monitors all stages of order picking, checks the availability of goods, and regulates VAT rates on hypermarket products

  • Marketing specialist

    Web-based admin panel

    Manages goods categories and push notifications, posts news about discounts and special offers, and updates coupon rules

Loyalty program

The Green Delivery application allows customers to view relevant
information about bonuses, coupons, and tokens and check how they are
accumulated and used, thereby ensuring the transparency of the program.

Bonus card

We have implemented two options for Green’s buyers to create and use
bonus cards:

  • 1

    If a customer already uses a bonus card in physical stores and it is linked to their phone number, the application automatically adds the card.

  • 2

    If a customer doesn’t have a bonus card, they can create an electronic version directly in the mobile application by filling out a form with their personal data.

With the bonus card, the buyer can:

  • Accumulate points and use them as discounts
  • Get access to personal promotional coupons and tokens
  • Track their purchase history and see how points were used
The interface of an order placement page of the application

Family bonus account

We have made it possible for friends, relatives, and even neighbors to participate in the loyalty program together.

Here is how it works:

  • The customer has their bonus card linked to the application
  • Friends or relatives who are also participants of the loyalty program decide to create a family bonus account with the customer
  • The customer goes to the "Bonus card" blockchain-section and clicks the "Add user" button
  • The customer enters their friend's phone number, the friend receives a code, the customer enters it and adds the friend's bonus card to their application
  • Done!

We designed this feature in such a way that customers can merge their bonus cards into one. Thus, they are able to collect each other's points and receive much higher discounts.

“Favorites” and regularly ordered items

  • Users can

    Add items to their “Favorites”

    Compose a list of regularly ordered items

  • In order to

    Add a product to the cart faster and more conveniently

    Buy things in just a few clicks

More information — better quality of life

Our team has created a well-thought-out UX/UI design for the application. We analyzed what is important for the buyer to know about the product and added a description to each item.

Green’s customers can view detailed information about each product: country of origin, storage conditions and shelf life, nutritional value, ingredients, and more.

Now that the customer knows every detail about the item they want to buy, they can make more informed decisions regarding their health and nutrition.

Payment options

Green’s customers have three options to choose from:

  • Payment upon receipt by credit card
  • Payment upon receipt in cash
  • Online payment

Online payment flow

PixelPlex developers integrated the mobile app with the banking payment system
and modified it specifically for our client's application.

The interface of the QR-scanner page of the application

Users pay for their items at the final stage of the ordering process. If the payment was successful, the process continues as follows:

  • A hold, which corresponds to the original order price, is placed on the bank card.

  • The original order price may change, for example, if the ordered item is out of stock and the customer agrees to replace it with a similar one, which can be cheaper or more expensive.

    If the final price is higher than the original price, then an additional transaction is created and performed automatically once the delivery is completed.

    If the final price is lower than the original price, the hold amount changes as well. When the buyer receives their order, the balance is returned to the buyer's card.

  • The bank stores the information about bank cards and we safely perform these transactions using the bank’s API.

One-click payment

The user can attach a bank card to the application in advance to pay for the order with one click.

The user will only need to enter the CVC/CVV code of the card. Other credit card information doesn’t need to be provided.

Payment with a new card

If the user hasn't linked a bank card or selected the "Other card" option when paying for the order, they are redirected to the bank's payment page.

They will then fill in a form and complete the payment.

Delivery options

Green’s customers can place orders via the app 24/7 and receive delivery the next day.

Users choose a suitable delivery time and pick a delivery option: regular delivery, touch-free delivery, or self-pickup from the store.

  • Regular delivery

    The customer's order arrives right at their doorstep.

  • Touch-free delivery

    This option helps customers maintain social distance, which is especially relevant during the global pandemic.

    If the customer selects touch-free delivery, the courier calls them in advance and delivers the order to the door without any actual face-to-face contact with the customer.

  • Self-pickup

    The buyer chooses the store and specifies the time period when it will be convenient for them to pick up the order.

The interface of an order placement page of the application

Project stages

1

Idea and analysis

Our client asked our team to create an advanced mobile application for their delivery service. We analyzed their ideas and requirements and proposed application architecture, tech stack, and other technical solutions, for example, how to implement online payments and integrate the hypermarket loyalty system into the application

2

UX/UI design and prototyping

PixelPlex designers meticulously mapped out the user journey and created intuitive and aesthetically pleasing interfaces that Green's customers can easily navigate

3

Development

Our development team built a perfectly functioning application with multiple features such as item sharing via social media, adding goods to their “favorites”, one-click payments, and more

4

Testing

Our QA engineers conducted extensive testing, checked the functionality and usability of the application, and ensured that the app was functioning bug-free

5

AppStore and Play Market launch

We prepared the application taking into account AppStore and Google Play Store guidelines and successfully submitted the Green Delivery app to these platforms

6

Maintenance and support

We consistently monitor the application’s performance and fix issues once they are detected. In addition to this, we regularly introduce new and advanced features at our client’s request

Future plans and improvements

  • Add functionality for issuing coupons and enabling customers to use them not only when ordering delivery online, but also at the checkout in the Green Hypermarket
  • Implement the ability to filter items by price, weight, and country of origin
  • Provide users with the ability to scan QR codes of coupons and activate them instantly in the mobile app
  • Create clubs (e.g. kids club or pet club) in the application so that users can get extra discounts on certain items
The interface of the QR-scanner page of the application