Mobile application for iOS and Android for diesel delivery
In the spring of 2022, we took part in the implementation of a startup by DiDiDo, a Kyiv-based network of gas stations, to create a mobile application for the delivery of diesel in bulk. The product is unique and has no analogs in Ukraine so far. All we had at the beginning was the customer’s idea and logo. Therefore, we were tasked with developing an iOS and Android application for fuel consumers from scratch and preparing the product for release.
As part of this project, we also created an application for fuel truck drivers, which we describe separately in this case study:
The objectives
The startup’s goal is to create mobile applications that allow you to quickly and conveniently order diesel delivery in Kyiv and Kyiv region. To achieve this goal, we needed to:
- Create the interface design and clear application logic.
- Implement the application for iPhone and Android users.
- Integrate services for customer identification.
- Set up a cashless payment function.
- Implement the ability to automatically generate documents.
- Test and upload applications to marketplaces.
UX/UI design of the application
The web designer, together with the UX writer and project manager, thought through the ordering mechanics and designed pages at different stages of user interaction.
Registration / Authorization
After downloading the application from Google Play or the App Store, the user is greeted with a registration or authorization screen with password recovery functions:
Registration is possible in three scenarios, depending on the status of the client:
- natural person,
- individual entrepreneur,
- legal entity.
This is due to the rules for making cashless payments, which affects the form, content, and list of invoices that are automatically generated by the application after each order (waybill, expense note, and excise note). It should be noted that before each trip to the refueling point, the driver must print out the waybill generated on the basis of the customer’s request. In addition, the customer enters into contracts with individual entrepreneurs and legal entities. Of course, we have taken all these subtleties into account in the development of applications.
1) Registration of an individual involves registration with an individual tax number. This information is required to identify the client and generate a delivery note and invoice. We are currently awaiting permission to implement the BankID technology, which will further facilitate the registration and authorization process and free users from the need to manually enter their tax number.
For individuals, payments are made using a personal bank card.
2) Registration of an individual entrepreneur, in addition to the tax number, requires additional information: the name of the bank and the IBAN account number. This is required for the automatic generation of a contract, a waybill, an expense note, and an excise note. The client is identified through the OpenData service for monitoring the registration data of Ukrainian companies.
Payment for services is made from the current account of the individual entrepreneur.
3) Registration of a legal entity also requires information about the tax number, bank name, and IBAN bank account. Again, verification is done through OpenData. By integrating this technology, we made it easier for the client to fill out the already long registration form, because when entering the EDRPOU (register code), the name, address of the company and the name of the head are automatically pulled up. After filling out the form, the application automatically generates the necessary list of documents (contract and invoices) for each order.
Legal entities pay for fuel delivery from their current business account.
We take care of the protection of users’ personal data, so each stage of registration involves verification of the client’s email, mobile, and tax number through a special confirmation code:
The user profile is quite minimalistic and contains several sections: “Profile”, “Personal account”, “Order archive”, and “Instructions”. Despite the fact that the application is automated, it has a “Support Service” and a “Call Us” function:
Making an application
You can order fuel in 2 ways: delivery or pickup.
Delivery
The service provides for the delivery of fuel within Kyiv and Kyiv region. In addition, delivery can be scheduled for a specific day and time:
When filling out an application, the customer indicates the number of drain points and the required fuel capacity, also they can pay for the order online and leave a review.
1) Ordering:
2) Waiting for the driver:
3) Refueling process:
What’s more: the app also offers the ability to enter coordinates. A convenient solution to awkward situations when the customer-driver has neither fuel nor an idea of his location:
The delivery of fuel over long distances can be solved individually through an additional request:
Pick-up
The second method of ordering fuel — pick-up — is based on the principle of placing an order and booking the nearest fuel truck on the map in real time.
1) Ordering:
2) Pickup and refueling:
iOS application development
The iOS application was created for DiDiDo gas station customers using the Swift language.
The application’s functionality is designed based on the MVC architectural pattern, which consists of 3 components:
- Model — responsible for storing, updating, and deleting data;
- View — responsible for displaying this data on the user’s screen;
- Controller — responsible for the program logic and communication between the other two components.
The Alamofire framework was used to send and receive data, allowing requests to be made in the background without interfering with the application.
The design was recreated with pixel accuracy using the Figma graphics programme, which ensured a high quality display of the layouts in the real application.
The user interface was developed using the UIKit framework, which contains a set of elements (icons, buttons, tables, lists, etc.) in the Apple style.
The Lottie library was used to display animations in real time. Another framework — Core Animation — helped to create a dynamic and smooth interface, optimising the process of rendering visual effects and improving user experience.
The following frameworks were also used in the development of the iOS application:
- CoreData — for storing and managing data on users’ iPhones, providing convenient access to data and improving application performance in the background.
- CoreLocation — to acquire and process geospatial data in the application, i.e. to determine the exact location and monitor the movement of the user’s device.
- SocketIO — for two-way, real-time communication between the browser and the server.
- PushNotification — for sending push notifications about new orders, refuelling, etc.
Google services came in handy during the development of the app:
- Maps — for geolocation of devices of users using the application;
- Firebase — for real-time push notifications.
Android application development
We used the Kotlin language to develop our applications, which is known for its cross-platform capability, i.e. the ability to run on different operating systems: Android, iOS, macOS, Windows, Linux, etc.
When designing the architecture of the Android application, we used the MVVM (Model-View-ViewModel) pattern, which, like the aforementioned MVC, divides the application into 3 functional parts. The difference is that MVVM has more flexible logic and wider possibilities for structuring the application.
The interactive user interface is created using the Jetpack Compose framework, which is compatible with Kotlin and allows you to easily change the styles and themes of the application.
The Retrofit 2 framework and the Socket.IO library provide reliable communication between the client and the server without high latency and load on the application.
The animation effects were created with the help of the Lottie library. Other libraries were also used:
- AndroidX — to improve the functionality of the application on Android devices of the latest versions;
- Coil — for downloading and caching images;
- Work Manager — for scheduling and performing tasks in case of application or device failure;
- Room — for effective interaction between the application and the database.
Payment for fuel delivery is made through the app’s integration with the LiqPay service.
In addition to the already mentioned Google services Maps and Firebase, the Places API tool was also used. It greatly expands the application’s ability to interact with geospatial data, allowing you to find locations by address, coordinates, or name and get additional information about them.
The result
We’ve talked a lot, so let’s give you the chance to see the result for yourself. Or rather, two results. Download the apps from Google Play and the Apple Store and use them to your heart’s content:
Comments