Anastasiia Kucher
Web designer
The art is to find the extraordinary in the ordinary and the ordinary in the extraordinary.
© Diderot Denis
Stack
-
Adobe Illustrator
-
Adobe Photoshop
-
Figma
01
/ 05
Contacts: pleasant to contact
We have traditionally provided access to the company's contacts from each page. The phone number with a callback button is located in the right corner of the screen and is duplicated in the footer (along with the address and email).
Also in the footer, the user will find glowing icons of social networks and instant messengers for alternative communication with company representatives. The user can determine the location via the Yandex.Maps widget.
The «We will call you back» window appears in the lower right corner of the screen after clicking on the handset and does not open by itself, so as not to disturb the visitor. It unobtrusively offers, «Let us pick up a vehicle for you?». The dialing time is 27 seconds and is displayed as a counter in the same window.
For more convenience and the ability to ask additional questions, the site also offers LeadBack. This is an online chat through which operators and visitors can communicate with each other. When operators are busy or outside business hours, the chat collects customer contacts (leads).
Admin panel: made easy
As we said before, one of the main advantages of a WordPress website is a very simple admin panel that even an inexperienced user can easily understand. We have put together a detailed guide for website administrators to help them correct the catalog, and add and remove categories of vehicles and the vehicles themselves.
For example, to add a vehicle, you need to perform the following steps:
- Log in to the administration console.
- Go to the «Vehicles» section and select «Add a vehicle».
- We will get to the list of all vehicles and click «Add a vehicle».
- Next, you need to select a category, write a title, and add a small image for the pop-up, a photo in the gallery.
- Fill in the fields of the tables in the vehicle item card, where you can specify prices and properties.
Following the same principle, the vehicle categories are edited and filled in, and the menu, the footer of the main page, the contact area, etc. are changed.
Results
Websites on WordPress are a convenient and cost-effective solution for businesses, and when the specialists of Webnauts start working, the client receives a custom web design, well thought-out UX and UI elements, a stylish logo, competent advertising and informative texts, as well as easy management of the finished site.
[post_title] => Website for the Rental of Special Vehicles [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => website-for-the-rental-of-special-vehicles [to_ping] => [pinged] => [post_modified] => 2023-09-13 17:09:11 [post_modified_gmt] => 2023-09-13 14:09:11 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=9700 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [1] => WP_Post Object ( [ID] => 16488 [post_author] => 10 [post_date] => 2022-08-02 12:15:45 [post_date_gmt] => 2022-08-02 09:15:45 [post_content] =>About the project
The consulting company Enercor operates on the international market of services for the management and restructuring of inefficient enterprises. Previously, the client cooperated with us in web development, and at the time of the request, he already had his own logo, corporate identity and design layouts of the site. After the completion of the project, the client turned to us again, only this time for the development of a company presentation in Microsoft PowerPoint.
By the way, we have quite a lot of cases when clients return. We don’t want to brag, but they say that it is pleasant and efficient to work with us.
The objective
So, following the new web design, Enercor decided to update the presentation about the company in order to refresh the look of the slides in accordance with the style of the site. A redesign is a good idea, because over time the appearance of digital products becomes outdated and needs to be updated, based on modern visual trends.
What we have
The client provided us with an old version of the presentation that needed a complete design upgrade. The content and structure of the text did not require any special changes, so the services of our copywriters were not needed:
What was required of us:
- to create a modern business presentation in a minimalistic European style;
- to maintain the corporate identity of the company, in particular, the style of the site;
- to save the text content and structure of the presentation;
- to use only light background for slides;
- to make a presentation in Power Point due to the wide possibilities of the program for animation and content editing on the client side.
Presentation development and design
The principle of content placement
All blocks on the slides are placed according to the principle of visual hierarchy: information blocks are logically grouped and connected in meaning, which makes it possible to distinguish between the important and the unimportant. We tried to organize all the content in such a way that it would be most convenient for the listeners of the presentation to perceive the information. And so that the presentation does not look boring, almost all slides are visually different from each other.
Before:
After:
Some points on the placement of content were additionally agreed with the client. So, one of the wishes of the customer was to place a logo in the header of the slides, and opposite it, where possible, an active link to the company's website:
Fonts
For the presentation, we used the same font as on the company's website: Plain is simple, versatile and quite flexible, as it has 12 styles and their corresponding italics.
Short and apt headlines are in large capital letters in the signature gentian blue color. The quotes are in italics, and the main text of the presentation is a moderately wide and saturated font, which will not allow the text to get lost or blurred when demonstrating slides on the projector screen:
Icons and illustrations
To save time and reduce design costs, some of the icons were taken from the corporate site or stock sites. However, we drew most of the graphic elements ourselves in the Adobe Illustrator vector graphics editor. Let's see what came of it.
Before:
After:
Background illustrations in the form of abstract elements similar to neural networks were part of the company's corporate style, so we had to correctly arrange them according to all the principles of composition:
Infographics
This is one of the most effective ways to visualize dry and complex information. Structured data in the form of infographics is perceived 30 times better than plain text. That is why we paid special attention to it and thought through all the details: the semantic placement of elements based on the convenience of perception, the consistency of the style and structure of the presentation, as well as the selection of suitable animation effects.
Before:
After:
Before:
After:
Images
At the request of the client, most of the images were taken from the Enercor website. In cases where there was a shortage of visual content, we turned to stock services and selected suitable photo options with a license to use.
In working with images, we used the Adobe Photoshop raster graphics editor, in particular, to remove unnecessary details and color correct portrait photographs.
Before:
After:
Animation
To bring a formal business presentation to life, we applied smooth animation effects, following the example of a company website. The difference is that the animation on the site is triggered when the cursor is hovered over an interface element, while in the presentation, the effects are applied to images and text and are played when the slide transitions.
The choice of animation was based on the existing effects of the corporate website in order to emphasize the unity of the brand in the digital (and not only) environment. As we already mentioned, there are no identical slides in the presentation, with the exception of those that carry the same semantic load. But at the same time, all 28 slides of the presentation are permeated by the unity of not only elements similar in style (for example, icons + description, headings + dice, etc.), but also similar animation effects: appearance, rise, movement, etc. As a result, the smooth movement of objects inspires a sense of calmness to the listeners of the presentation, and the competent setting of the direction of this movement (from left to right, top to bottom) creates a convenience for the perception of the presentation:
Slides also have a certain sequence of animations, implemented by adjusting the speed and duration of this or that effect. And on some slides, the animation gives a response to the user's action. So, on the slide showing the company's branches, you can see the gradual appearance of points on the map, as well as the flickering of the name of the country where it appears:
Summary
Consulting company Enercor can rightfully be called our regular client, because we managed to develop for them not only a stylish and functional website, but also a business presentation of a similar style that meets all the requirements of modern design and specific marketing tasks of the company. All slides of the presentation are designed in the corporate style, and the entire array of complex information is presented in a convenient format in the form of dynamic infographics. Smooth animation not only maintains interest, but also focuses the attention of listeners on the most important.
[post_title] => Presentation Redesign for a Consulting Company [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => presentation-redesign-for-a-consulting-company [to_ping] => [pinged] => [post_modified] => 2023-09-13 17:28:05 [post_modified_gmt] => 2023-09-13 14:28:05 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=16488 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [2] => WP_Post Object ( [ID] => 20618 [post_author] => 14 [post_date] => 2024-03-10 17:51:35 [post_date_gmt] => 2024-03-10 14:51:35 [post_content] =>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:
Android mobile application for DiDiDo drivers
- The objectives
- UX / UI design of the application
- iOS application development
- Android application development
- The result
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:
[post_title] => Mobile application for iOS and Android for diesel delivery [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => mobile-application-for-ios-and-android-for-diesel-delivery [to_ping] => [pinged] => [post_modified] => 2025-08-13 13:06:33 [post_modified_gmt] => 2025-08-13 10:06:33 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=20618 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [4] => WP_Post Object ( [ID] => 21088 [post_author] => 14 [post_date] => 2025-08-13 13:02:20 [post_date_gmt] => 2025-08-13 10:02:20 [post_content] =>Many successful start-ups are connected with the development of mobile applications, and today we will tell you about one of them. It's a story about how a petrol station chain once came up with a cutting-edge service that would likely have an impact not only on business scaling but also on the entire industry. It was our team's job to implement the idea.
As part of this project, we have already developed an app for fuel delivery customers:
Mobile application for iOS and Android for diesel delivery
Today, we'll tell you how we created an app for fuel delivery drivers.
So sit back and enjoy our case study.
The objective
No more, no less: to take DiDiDo's business to a whole new level with the help of mobile technologies. Namely, including design, to develop an Android application for fuel truck drivers that would allow:
- pass authorization easily and securely,
- track and process orders quickly,
- instantly generate contracts and waybills,
- plan routes to refuelling points for clients' and colleagues' vehicles.
Interface design
The app for fuel truck drivers is currently designed for Android devices, as at the time of development there were no apple smartphone users among the petrol station chain's employees.
To start driving for DiDiDo, you need to download the app on Google Pay and go through a simple authorisation process:
There are 3 sections in the app for drivers to work efficiently: "Profile", "Fuel discharge" and "Operator", and at the end of the working day, the app automatically summarises the results in figures:
Refuelling customers' cars
New orders are received along with audible push notifications and saved under the corresponding button "Number of orders". The driver accepts the request and goes to the address, where he waits up to 20 minutes and fuels the customer's car after confirming the order via a special code:
After refuelling at one or more points, the driver must print out the documents at the delivery address and give them to the customer for signature. For individuals, this is a waybill and an expense invoice, and for individual entrepreneurs and legal entities, a contract and an excise invoice in addition. It is interesting to note that the documents are printed using a portable printer that every DiDiDo driver has, as a delivery is possible only if the waybill is physically available:
Refuelling fuel trucks of fellow drivers
It takes place in 3 scenarios depending on the meeting place:
- waiting for the fuel truck on the spot;
- going to the fuel truck;
- going to the refuelling point determined by the administrator.
Own refuelling
When the tank of the fuel truck has less than 35% and then 10% of fuel, the app notifies the driver with a push notification.
The driver is assigned to refuel at the nearest petrol station or from another fuel truck:
Android application development
The application programming is implemented in Kotlin, and its architecture is designed using the MVVM template. It allows you to organise the code and separate the visual part from the application logic thanks to three components:
- Model — the brain of the application,
- View — the visual display of data on the screen,
- ViewModel — the glue that holds the two together.
The application interface is built without the use of XML layout on the basis of the Jetpack Compose framework. The Ktor framework and the Socket.IO library, which works on the basis of real-time web sockets, are used to communicate with the server.
The Room and Proto DataStore libraries were used to store and retrieve data locally.
Additionally, we used such Android libraries as:
- Coil — for uploading images,
- Hilt — for implementing dependencies in the application,
- kotlinx-serialisation — for serialising Kotlin data into formats that can be transferred over the network or stored on devices (JSON, XML, etc.).
In addition, the app has been enhanced with Google services:
Maps — for location search, object tracking and real-time route planning.
Firebase Cloud Messaging (FCM) — for secure and free messaging.
The result
A convenient android application for DiDiDo drivers is already available for download on Google Play. Moreover, the employees of the petrol station chain have already made their first fuel deliveries and appreciated the simple design and rich functionality of the app. A reliable and intuitive work programme in your hand: it includes CRM, an online map, and all the necessary documents. Everything a DiDiDo driver needs on the road.
[post_title] => Android mobile application for DiDiDo drivers [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => android-mobile-application-for-didido-drivers-2 [to_ping] => [pinged] => [post_modified] => 2025-08-13 13:04:21 [post_modified_gmt] => 2025-08-13 10:04:21 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=21088 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) )Worked on
-
Website for the Rental of Special Vehicles
-
Team:
3
-
Cases:
0
-
Reviews:
0
-
-
Presentation Redesign for a Consulting Company
-
Team:
4
-
Cases:
0
-
Reviews:
0
-
-
Mobile application for iOS and Android for diesel delivery
-
Team:
5
-
Cases:
0
-
Reviews:
0
-
-
Android mobile application for DiDiDo drivers
-
Team:
4
-
Cases:
0
-
Reviews:
0
-
