Yapoki: mobile delivery app for the future of the Enterprise

Here we’d like to share our experience in developing a delivery application with big ambitions and complex architecture. It all started with the customer's dream - make it like Enterprise (the direct reference was Dodo Pizza). It came true, but with a lot of technical nuances that we managed to solve during the project. The case will be of interest to both brands and developers: it tells how to avoid the many pitfalls that are inevitable in projects of this scale.

What did the customer want from the app?

• Increase the number of online orders.
• Become one of the largest food delivery services in the country.
• Increase average cheque size and market share.

What'd we do?

• Delivery app based on React Native for iOS and Android with flexible order detail management.

It doesn't look like something extraordinary to create an app as an additional sales channel to support offline stores. But it's another thing entirely to turn a product into a main order processing channel that can compete with the biggest brands in its segment over the long term. And all this in the context of rapid customer growth.

We wanted to make it as easy as possible to place an order with Yapoki Delivery, so that people would want to come back to the app again and again.

The client chose dev.family on the recommendation of our partners. But it was our vast experience in foodtech and a in React Native development that helped us win the project.

By then, Yapoki was an experienced foodtech brand with an established network which consists of:

• 3 own restaurants.
• 2 partner restaurants.
• dark kitchen network for fast delivery.

Delivery orders were placed via the website, which provided the following results:

The launch of the mobile app was intended to boost online sales, which it successfully did.

Spoiler: there were lots of challenges

As any experienced developer knows, it is only in typical projects with simple tasks, where it is rarely possible to do anything outstanding, that things usually go smoothly. In our case, the team had to solve several tasks with an asterisk. But let's start with the context in which we started development.

Yapoki's designer had good experience in graphic design, but not in working with the application interface, where it is important to consider nuances and components (fonts, grids, button colors and other elements) that will be used in further development. We tried to work with the first variants, but then the client decided to make a redesign. Our designer was involved in the audit, which highlighted weaknesses and opportunities for improvement in the interface. Although we had to stop development for this, we ended up with a good design that could be taken to work.

Here you can see how it comes and how it goes:

Let's take a look at the app and talk about its cool features and details. And also about the difficulties and challenges we faced.

After authorization, users choose the delivery format and browse the catalog, which is divided into categories like "Rolls" and "Pizza." A widget shows the average delivery time based on the nearest restaurant's load. The Home screen features a 'No need to wait' section with ready-made but canceled orders for faster delivery.

In the catalog and in the showcase, a product may look the same and have the same name. But for application logic, they are two different products. Ordering a Margarita pizza that was originally in the catalog and the one that appeared in an online showcase after the cancellation will be processed differently on the back end. That's why we had to do a lot of extra processing to make sure that the product ordered from the storefront was displayed correctly in the shopping basket.

The main card contains a photo of the dish, a description of the ingredients and the price. In addition, nutritional information can be viewed in a pop-up window. The user can customize their order - changing the size of the dish and other details, and add up to four extra ingredients to the pizzas. No more are allowed, so as not to compromise the recipe. We warn users about this in the message.

The search for products by name and description was also performed on the client's side. We set up the process so that only exact matches from the entire product range were included in the output. In this way, the system was able to accurately display the correct dishes on request.

All products in the catalog have basic parameters and layout. So if a new product appears in the menu that doesn't match these, it is thrown out of the general dimensions and design. In the Yapoki catalog, product cards have a rectangular shape and transparent filling, so it was already problematic to embed a slightly rounded card with a different filling. If you want to highlight certain items, use the format provided for the main card. Also, the background blur in the menu is only available for iOS apps.

You can use loyalty programme bonuses to pay for your order in two ways - by paying 100% or 50% of the total order value with the minimal limit for free delivery. Other interesting tricks and examples of gamification for loyalty programmes can be found in this article.

Two types of bonus can be used at the same time in a single order. We had to set up sliders to activate them, taking into account all the limits.

The user can choose the delivery time, payment method, and order fulfillment format—either to the specified address or delivered to a specific table number in the restaurant. If any dish is unavailable at the time of placing the order, a notification will appear.

If you plan to accept orders from other time zones (in case someone wants to surprise a loved one), make sure you specify this condition in the backend. Otherwise, when confirming an order, the user will get an error that restaurants and dark kitchens are not working at the given time. It is quite easy to fix this to make your delivery work worldwide.

And the difficulties they caused

The user can not only use personal promo codes, but also get a discount through the referral system.All they have to do is copy the link and share it with their friends.The solution works on the principle of a universal link, where the user is immediately taken to a specific page where a specific action is automatically performed.For example, if you don't have the Yapoki app, the first thing you'll do is go to the AppStore or Google Play to download it.But if you follow the same link again, the promo code for a discount from a friend will be automatically applied.

Each promo code has its own conditions - some activate a discount on a specific type of product, others provide the product for free. The logic of applying discounts and handling promo code restrictions was handled by us on the application side. Now we get a list of products and conditions from the backend, we check this match and let them know if the promotion can be used. Or we specify the conditions that need to be met for it to work. Such notifications reduce negativity from customers who don't understand why a promo code doesn't work. And they help increase the average order size if the user intends to use the discount.

Once an order has been placed, the user can view its status and follow the preparation live. Yes, just like the Dodo 🍕

If you're adding streaming from a restaurant kitchen to your app, be aware that not all mobile players can play links in this format. We've moved the streaming to the web view to make everything work. We just made a few style corrections to make the stream fit nicely into the application's interface. Also, to automatically change the order status and other actions in real time without having to refresh the screen, it is better to use sockets - a software interface for continuous data exchange between processes.

In the pursuit of uniqueness, entrepreneurs often try to cram in a bunch of extra ideas and features. But there are patterns that users are used to. And they ignore them because: "Oh my God! We don't want to be like our competitors! - is silly. If you want people to enjoy using your product, make sure it has familiar functionality.

Fast address tracking, the ability to flexibly manage loyalty points, apply personalized promo codes and manage the composition of dishes - that's the basics. Even if there is complex logic behind it that requires custom development.

And to differentiate yourself, give your customers good service: extra offers, bonuses, promo codes - anything that makes their experience better.