Kateryna Vasilieva
Project Manager
If you work on your goals, those goals will work for you.
01
/ 05
After scrolling through the instructions, we get to the transaction page. It is the main page of the service and consists of three blocks:
- The amount of income for the specified period. On the green line above you can see the amount of income for the week, month, quarter or six months.
- Feed of expenses and incomes. Records can be sorted by date and filtered by type (income/expense/all). Each of them, despite the concise interface, contains maximum information about the operation: date, amount, project name, groups and categories of expenses. In order for the user to quickly navigate the types of transactions, expenses are highlighted in red, and incomes in green.
- Adding a new transaction. In order not to overload the interface with elements, this block is translucent until the cursor is hovered over it. It allows you to enter a transaction with all of the above information.
Taking a look at the top menu, we will see three sections for analyzing the current financial situation:
- Income reports. They allow you to visualise which services and in which month brought the most money. Under the summary table of income for the year there are two blocks that will help you evaluate which services are most profitable to provide and to which customers.
01
/ 02
- Expense reports. Here you can see which item of expenditure is the most significant. For a more detailed analysis, you can add both expense groups and categories. For example, the group «Household expenses» and the category «Products».
- Account balances. In this section, you can evaluate how much money is on each of the accounts, on all of them in total, and how much you managed to save during this month.
The last section «Settings» is intended for specifying the list of services, customers and accounts. You can also add expense groups and categories for them here.
Adaptivity
For a financial accounting service, it is vital to have a mobile version in order to promptly make transactions immediately after spending. For most users, this may be the main criterion for choosing such a service. Therefore, we have adapted the service for use on computers, tablets and phones. On small screens, the interface completely changes, taking the form of a mobile application.
Summary
Together with Milya Kotlyarova, we developed and launched a service for freelancers' finance accounting. It is both simple and flexible to set up, allowing you to consider revenues from different projects and evaluate which services and clients bring in the most money.
You can register on the service by clicking on the easy and memorable link
https://broccoli.tools/.
About the customer
The American service «ArcHHunter» provides services for the recruitment, selection and outstaffing of specialists in the field of design, engineering and architecture. Their young professionals can provide services on a part-time or full-time basis. They are also ready to advise, develop and implement projects both online and offline.
For the first time «ArcHHunter» turned to our company for the development of the site. Given their line of work and customer base, they wanted the site to be uncluttered, light, simple, with a good balance of text and images. Also, it was important to make further scaling of the service possible - the development of personal accounts of the applicant and specialist, a catalog of professionals, etc.
https://wnauts.com/wp-content/uploads/2022/06/archunter-video.mp4The objective
At the beginning of the work on the project, we only had tentative wishes for color and design: in addition to the basic lightness and simplicity, the client wanted the site to be done in gray shades. They also voiced a wish to introduce a questionnaire during the application registration process, which would interactively help to better understand the needs of the customer.
Solution
A draft on Wixsite suggested by the customer was taken as an example design.
Wixsite is a website builder. It allows anyone, even a person with no programming knowledge, to create their own website.
Based on an example from the customer, our specialists developed their own website design, made mainly in gray tones. Prototypes were offered to the client and the final result was agreed upon.
The promo site for the «ArcHHunter» service consists of a main page, a portfolio and a page for each completed project. We have also integrated a short and concise questionnaire to better understand the needs of the customer.
Project implementation
The site is made on the latest version of PHP framework Laravel.
Laravel is a PHP framework - a set of tools and templates that greatly facilitate and speed up product development. A significant part of our projects was written in Laravel.
Advantages of Laravel:
- it allows you to create any project without restrictions;
- its functionality is adjusted to specific tasks;
- it allows you to implement projects of any complexity, online services, implement non-standard functionality;
- numerous ready-made packages contribute to the rapid filling of the site with the necessary functions and capabilities;
- the framework itself includes ways to protect against two of the most common dangers on the web: XSS attacks and SQL injections;
- caching management helps to save a lot of page loading time.
The implementation used the MySql database and included the vue.js library to dynamically display content. Among other things, such a set of solutions from the front-end and back-end means the absence of any compromises in terms of performance. In other words, the site will work as quickly as possible - both now and under high loads in the future. The projects implemented on CMS (for example, Wordpress) cannot boast of the same.
The Vue.js library is a progressive framework for building user interfaces. Unlike monolithic frameworks, it is suitable for gradual implementation. Vue is also good for building complex single page applications when used together with modern tools and additional libraries.
A special request of the customer also includes a detailed admin panel, in which you can change all parts of the landing page, create and edit projects in the portfolio on the site.
Blocks and promo site design
Traditionally, such a product consists of several semantic blocks. They guide visitors through a pre-designed scenario, prompting them to fill out a questionnaire during the application registration process.
Block «Our team»
In this part of the promo site, a special emphasis is on the young and talented specialists of «ArcHHunter». All photos of designers, constructors and architects are made in the style of the company and harmoniously fit into the overall content. The card of each specialist carries information that makes it possible to make a choice.
«Portfolio»
In this block, special attention is paid to completed projects. After all, it is very important for future clients of the company to see the visual embodiment of the work of designers and architects of a company that directly or indirectly deals with architectural design.
The block is formed in such a way that it is easy for future customers to navigate the type of projects: architecture, landscape, interior, graphic design or product design. The portfolio displays the already implemented projects of the company.
Gallery
Cards in the portfolio are displayed with smooth animation when scrolling. Each project page contains detailed information and a gallery. And as usual, we paid maximum attention to the convenience of the site for use on mobile devices.
In addition, the site administrator has the ability to independently add project categories and projects. For each project, metadata is edited to customize SEO.
Questionnaire block
The questionnaire form interactively helps to better understand the needs of the customer. After sending an application with contacts, the customer is invited to take a short dynamic questionnaire. It allows you to more accurately identify customer needs and prepare a commercial offer for the first contact.
After passing the stage with contacts, answers to leading questions, which are linked to the client's contacts, appear in the admin panel.
The questionnaire consists of 5 items and, depending on the previous choice, the client is offered various options for answers. The administrator has the ability to change the text, pictures and the number of answer options.
The implementation of the quiz is made in the form of a modal window, where the content inside changes dynamically using the included Vue.js library.
Design
The whole design is made in rather moderate and unobtrusive gray tones, which in one way or another make the visitor think about modern laconic architecture and design. All the main elements: icons, images and buttons are made in the same style and maintain the overall mood of the site - simplicity and elegance.
The result
After the work was carried out by the Webnauts team of specialists, our client received an inexpensive, but at the same time very stylish, logical working product. We have developed and implemented not only a reliable and secure website, but also a corporate design, complemented by high-quality text and a convenient questionnaire in the process of registering an application for hiring specialists in the field of design, engineering and architecture.
We are sure that this project has a great future, and we are already working together with the customer to move further - from a promotional site to a large technological online service for young professionals and employers in the field of architectural design.
[post_title] => Promo Site for Recruitment and Outstaffing Services [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => promo-site-for-recruitment-and-outstaffing-services [to_ping] => [pinged] => [post_modified] => 2023-09-14 16:57:36 [post_modified_gmt] => 2023-09-14 13:57:36 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=14637 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [2] => WP_Post Object ( [ID] => 11155 [post_author] => 10 [post_date] => 2022-05-18 17:22:26 [post_date_gmt] => 2022-05-18 14:22:26 [post_content] =>The objective
ВloggerMall is the first Ukrainian platform aimed at making it easy for advertisers and Instagram bloggers to find each other and establish effective and safe collaborations.
After a successful experience of cooperation in the development of the site, BloggerMall turned to us again, only this time for the superpower of an iOS developer who is ready to create a convenient modern application for users of apple gadgets.
See also:
BloggerMall.com.ua blogger exchange
The desire of our client to make the service for regular customers even more convenient and enjoyable turned into a task: to develop a stylish and understandable application that duplicates the capabilities of the site and is in no way inferior to it in terms of its functions:
- registration and authorization of users;
- blogger profile with a description and detailed analytics of the target audience;
- blogger's advertising account;
- payment system through the UAPAY service;
- messenger.
This is what we actually did.
The design department received the task to design layouts for the mobile application. And for our iOS developer, with 5 years of experience, one large-scale task “Develop an application” immediately broke into several specific steps:
- Create pixel perfect based on design layouts;
- Develop application screens, navigation between them, transitions and animations;
- Build a functional part based on API calls to the server part;
- Create application components and set up a library that will match the functionality and design of the layouts.
Read more about how we implemented the project in our case study.
Technological solutions
When developing complex applications for iPhone and iPad, our specialists use Swift, the native language of the iOS mobile platform: reliable, intuitive and fast not only in development, but also in work on Apple devices.
Implementation of design and animations
At the time when BloggerMall came to us with a new project, the company already had a successful site made by Webnauts with a ready-made logo, bright corporate colors and a ready-made UI kit. Previously, our designers took part in the development of website design. Now the task is to design a mobile application for iOS devices.
Despite the fact that our first project assumed an adaptive design of the platform for any type of device, the design of the mobile application has its own characteristics. If the mobile version of the site looks almost the same as the site in a regular browser, then the design of the application must meet the requirements of the OS manufacturer for the user interface (in our case, the requirements of iOS). So the mobile application for apple devices will look “native”, and thanks to integration with the platform, it will work faster.
Based on the layouts developed in the Figma graphics program, our developer implemented and “revived” the pixel design of the application using the following technologies:
- Modal ViewController - bottom sheet modal view controller. This is a useful feature with a great UI/UX design that helps present a quick preview with minimal content.
- UINavigationControlleris a specialized view controller that manages navigation through hierarchical content. It is a navigational interface that allows you to effectively visualize data and make it easier for the user to navigate through this content. Simply put, the UINavigationController helps the application user remember where they are at the moment (name of the navigation bar) and how they can return to the previous screen (the built-in back button).
Animation plays an important role in mobile app design. It is designed not only to distinguish an IT product from competitors, but also to increase the usability of the application. Animation "reacts" to the user's actions and helps them quickly get used to it, making the process dynamic and interesting.
In the BloggerMall application, we animated interface elements such as a hamburger menu, buttons, registration fields, radio buttons and a bottom navigation (tab bar) with 3 main sections of the application (My Ads, Posts, Profile).
Animation of visual elements is implemented using the following technologies:
- Core Animation is a program developed by Apple for rendering, compositing, and animating images. It allowed us to deliver high frame rates and smooth animations without consuming the CPU or slowing down the application.
- Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time. Using animation with it is as easy as using static images.
Functional part of the iOS application
User registration and authorization
Registration and access to the application is possible both by entering an email and password, and by logging in through Facebook and Google.
The blogger registration process includes 6 steps, during which you must specify personal data and a password, information and blog topics, rates and a method of payment for advertising services.
01
/ 06
If you enter an incorrect password, the system offers the usual way to recover it via e-mail:
Registering an advertiser is easier and takes just 2 steps. To do this, you must fill out the form and accept the user agreement.
Blogger Profile
It contains several sections: Personal data, My Instagram account, Prices for my services, My payment card.
01
/ 08
Blogger's advertising account
Contains all information about advertising cooperation and includes 3 main sections: All advertising, In progress and Waiting. It allows you to control not only the status, terms and payment of advertising requests, but also quickly go to the chat with the advertiser to agree on the terms and details of the transaction.
Payment system
The principle of payment for advertising services on the exchange is as follows: after mutual confirmation of the order, the advertiser pays for the service from a previously linked bank card, and the funds are “frozen” on the platform (90% - payment to the blogger and 10% - exchange commission). After the advertiser has confirmed the successful completion of the order, the blogger receives his money on his bank card. In case of non-fulfillment of the order, the money is returned to the advertiser's account in full. Like on the site, all mobile payments are made using the UAPAY National Payment Service.
All of the above functionality of the BloggerMall application is implemented on the basis of API calls to the server side using technologies:
- UI Kit is a structured library of native components based on Apple guidelines. Thanks to interface elements grouped into categories (buttons, pop-ups, navigation bars, icons) and implemented in accordance with the apple design specification (typography, style, colors), UI Kit allows you to significantly speed up the creation of an application for iPhone and iPad.
- Alamofire is a Swift-based HTTP networking library for iOS and Mac OS X. It provides an elegant interface on top of the Apple Foundation networking stack that simplifies common networking tasks. Its features include chain methods of request and response, encoding and decoding responses, and data authentication.
Socket.IO technology was used to receive and send data between users of the BloggerMall application. It is a JavaScript library for real-time data exchange. It provides bidirectional, event-based communication between client and server with minimal data transfer delay.
Development of a messenger for an iOS application
Chat between users of the BloggerMall application was implemented using MessageKit technology, an open source Swift library for sending and rendering messages between users of iOS devices.
Perhaps the implementation of the chat was the trickiest task of the project. The server part of the messenger had previously been written for the BloggerMall website, and it should have been “transferred” to the iOS platform so that the principle of the chat was the same on the site and in the application.
But, as you know, it is easier (though longer) to write programs from scratch than to unravel someone else's code. And the use of third-party libraries can not always be clearly customized to the client's request.
Here the MessageKit technology helped, although not immediately, since our developer encountered it for the first time. At first, it was not entirely clear how to send, receive and compare data: not only text, but also large photo and video files. There were some difficulties with the design, namely with setting up the library and displaying the interface that the client requested. However, having gradually mastered the technology and figured out how the backend with the frontend works on the site, our iOS developer began to implement the messenger. As a result, we got both a convenient chat and an even more advanced specialist.
01
/ 04
The results
It took 2 months to create an iOS application, as a result of which BloggerMall received not only another source of income, but also the most thoughtful, understandable and reliable tool for effective cooperation between its clients: bloggers and advertisers. Analytics, advertising account, transaction history and internal chat - now everything is at hand for comfortable and safe cooperation. More satisfied customers means more successful transactions, and hence the growth of the company's income.
During this difficult project, we not only successfully implemented the product, but also replenished our technology stack. We love challenges, because they allow us to develop and make really cool things.
[post_title] => Mobile iOS Application for Bloggers' Platform [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => mobile-ios-application-for-blogger-exchange [to_ping] => [pinged] => [post_modified] => 2023-09-14 16:57:09 [post_modified_gmt] => 2023-09-14 13:57:09 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=11155 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [3] => WP_Post Object ( [ID] => 13961 [post_author] => 10 [post_date] => 2022-04-30 14:44:54 [post_date_gmt] => 2022-04-30 11:44:54 [post_content] =>We often work with competitive topics where we have to compete for a «place in the sun». Website promotion for a company renting special equipment cannot be called easy — there are a lot of companies that provide these services. The experience of the Webnauts team allows even these search giants to be challenged.
About the project
Our client, special equipment rental service, needed competent website promotion in Google search engines. The site has an extensive catalog of construction and repair equipment. All positions are divided into non-thematic categories according to the types of machines provided for rent: «Truck cranes», «Manipulators», «Bulldozers», etc. For the convenience of the user, filters for selecting equipment by model and parameters are made in the catalog.
It should be noted that the work on the site was not smooth and had its own surprises, which negatively affected both the workflow and the results of promotion. But we will get to this story — it is better to tell about everything in order.
Preparatory work
Before starting to promote a commercial site, we must conduct not only an automated, but also a manual audit of the resource, as well as monitoring competitors in the search results. At this stage, we identify shortcomings in the internal optimization of the site, draw up a checklist for correcting errors by programmers.
Search engine optimization helps to:
- Find errors in code and layout;
- Detect functional flaws;
Analyze behavioral factors, bounce rate on the site (including from contextual advertising), create a checklist to improve engagement and user experience on the site; - Research and evaluate the content, its relevance to the search demand of users;
- Identify the strengths and weaknesses of competitors, develop a strategy and plan for further work.
Why is it important to pay attention to all these points in the context of SEO promotion?
Since search promotion is no longer just about preparing category descriptions and buying links, you have to work out all the search signals in a complex - only this approach can give results in 2021.
The beginning of the promotion and real difficulties
So, work on the site began with a series of standard and typical «rituals» of an SEO specialist — technical audit, correction of detected errors, collection of a semantic core, preparation of relevant content.
There was no rise in traffic in the first month, which is normal for a young site that just got into the index. However, after another month of work, we found that the site was still outside the TOP-100 for all targeted queries. There was still no traffic from the search — all our efforts did not give any result. This situation alerted us and forced us to look for possible reasons for the current state of affairs.
Soon, suspicious and unusual activity on the site was detected. A large percentage of visits to the site were made from direct hits, which is extremely atypical for a young site. Moreover, all direct visits had a high bounce rate:
The number of direct visits was carried out on an industrial scale, exceeding all other traffic. After analyzing the behavior of such traffic, it became obvious that these were bots. It was necessary to do something urgently , because in such cases the reputation of the site (especially a young site!) quickly «drains» and the resource simply becomes unsuitable for further high-quality organic promotion.
However, finding the problem turned out to be easier than fixing it. We are not alone in this issue, and there have been legends about such a problem for a long time.
Through trial, we managed to block such direct calls. However, it was necessary to make sure that the site was still able to «shoot» and would not have to move to a new domain. To do this, it was decided to send a signal to update the resource. At the same time, it was necessary to improve both the functional and content parts. All these actions led to the fact that the site finally began to appear in the search for the main queries and hits from the search started.
However, this work was not over…
Having eliminated the problem with behavioral factors and technical optimization, we continued to functionally improve the site, and also began to gradually increase the link profile for Google.
Summary
After a complex of works on the site, traffic has increased significantly. The resource shows a positive trend in the growth of traffic from search engines.
01
/ 05
[post_title] => SEO Promotion for the Rental of Special Equipment [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => seo-promotion-for-the-rental-of-special-equipment-in-2021 [to_ping] => [pinged] => [post_modified] => 2023-09-17 15:44:43 [post_modified_gmt] => 2023-09-17 12:44:43 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=13961 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [4] => WP_Post Object ( [ID] => 10878 [post_author] => 10 [post_date] => 2022-04-17 14:19:23 [post_date_gmt] => 2022-04-17 11:19:23 [post_content] =>About the project
The Webnauts team took on an interesting Black Room project from a client from the German city of Karlsruhe. The scope of the customer's activity is the organization of intellectual leisure, namely the provision of themed quest rooms for collective games, in which there is a joint solving of puzzles and overcoming difficulties.
At the time when our team took the project to work, the customer already had five categories of quests and eight rooms completely ready for the game. And the number of Black Room guests by this time amounted to more than 1025 people.
The objective
We were required to create a website, the main purpose of which is to attract customers with the subsequent sale of tickets / gift vouchers and, as a result, online booking of quest rooms. The target audience of the project is residents and guests of Germany who want to have fun and spend their free time entertainingly.
To do this, we had to develop an architecture, build a website according to the provided layout, implement an administrative panel and integrate payment systems for online payment.
What have we done?
To develop a website for booking quest rooms, we chose a not quite standard technology stack. To work on the back-end, we decided to use WordPress and the WooCommerce plugin.
WordPress is one of the most popular content management systems in the world. With its help, developers can create websites of any complexity with minimal time. It is easy to set up for clients, so you do not need to have special knowledge to edit and contribute content. Thanks to this simplicity and responsiveness, almost 30% of all sites on the Internet use this CMS.
We decided to implement the front-end on the «reactive» Vue.js framework, which interacts with the back-end part via the REST API.
Vue.js is a JavaScript framework for creating UI and fully responsive websites and single page web applications. Although it is a library, thanks to the ecosystem of various components, it can be scaled into a complete and flexible framework that can be easily integrated with other projects.
On the one hand, this combination provides the convenience of managing and administering the site, with support for the “admin panel” interface familiar to the client, and on the other hand, the impressive performance and quality of the front-end component on Vue.js.
And now let’s talk about everything in more detail.
Front-end development with Vue.js
At the initial stage, we had a series of joint discussions with the client, during which we planned all our further work. We also approved a certain stack of technologies that we had to use in the process of creating the site.
The next step was coding. We made it in full accordance with the rendered design layout and adapted it to all the most common devices and displays of various widths.
In order to achieve the goal of the project and attract customers with the subsequent sale of tickets and vouchers, we had to work on ensuring that web pages were indexed by search robots. To do this, we had to guarantee high-quality rendering of the page on the server side. For this purpose, we used the high-level Nuxt.js framework with SSR technology.
Nuxt.js is a framework for building Vue.js apps. It is designed to simplify the development of one-page services and sites. This is achieved due to the speed of optimization, the modularity of the architecture and the convenience of developers working with the framework. Nuxt.js generates the static version of the site itself and transfers the pages into separate JavaScript files that contain only the code needed to run.
Back-end development on WordPress
Since the customer was well acquainted with the WordPress CMS, the entire back-end component was built on this content management system. We implemented the future functionality of the site not directly through the CMS, but using the API. Thus, we were able to implement more complex ideas, such as purchasing vouchers on the site.
Thanks to this, site visitors have the opportunity to purchase a voucher for a fixed amount of 25, 50, 100 or 150 euros, or for any other amount that the user can enter manually.
Implementing a WooCommerce Booking System
In order for everyone to be able to pre-book their favorite quest room on the site, we used the WooCommerce booking system and the WooCommerce Bookings plugin during development. This is one of the most popular platforms that has allowed us to implement a way to book leisure activities. It makes it possible to choose the date and time of visiting the quest room, set the number of participants, and it displays the final amount "for payment". Additionally, the system automatically reduces the cost of participation in the quest for players in groups of three to seven people.
We also used additional features from WooCommerce Bookings:
- The confirmation is intended to allow the member to review and clarify all the details before finalizing the room reservation.
- Automatic reminder of the upcoming visit to the quest to minimize the number of rejections and collect all the participants in the game in time.
Role differentiation and a new notification system
In the process of work, we have created the ability to differentiate the roles of employees. This is necessary so that managers have access to the administration of only the quest rooms assigned to them, and not to all rooms at the same time.
The next step was the implementation of notifications about booking quest rooms through the Telegram messenger. Prior to this, all such messages came to the manager's email. By connecting this instant messaging service, we ensured that employees were quickly informed about the event.
Payment systems integration
The next considerable layer of work on the back-end part is the implementation of services that, in our opinion, cover all payment methods as much as possible:
- PayPal is the largest debit electronic payment system. Today it is popular in different regions of the world and provides contactless payments in twenty-five types of currencies.
- Stripe is an international secure online payment system. It allows you to accept payments from both individuals and companies, while the commissions remain quite acceptable.
Thus, visitors have the opportunity to pay for the cost of the quest on the site both with the help of payment cards and through the Apple Pay and Google Pay mobile payment systems.
And, of course, we implemented booking when paying on the spot.
Development features
Since the website for booking quest rooms in Germany had to be available in English and German versions, the next task that we successfully completed was multilingualism. To implement interface translation, we used the i18n library — it was the one which provided a comprehensive solution for product localization and further scaling.
We moved static texts for each language version into separate JSON files. Getting all dynamic content is configured through the interaction of information objects with the API. Such generation is carried out when passing the selected language in the request parameters.
01
/ 02
Implementation of the process of booking quest rooms
The process of booking quest rooms deserves special attention. It is based on the principle of sequential passage of several stages:
- City selection.
- Location selection.
- Quest selection.
- Selecting date and time.
- Selecting the number of players.
- User data entry.
- Completion of payment.
At the same time, we wanted to provide a convenient user interaction with an extremely clear and simple interface, so that the collection of data based on the choice of the visitor goes as correctly and accurately as possible.
We divided the whole process into three screens. Each screen consists of two steps that appear one after the other when filled in sequentially. For example, it could be making a certain selection or entering data into a field.
As you progress through the stages of the booking, at the top of the page, each completed step is displayed dynamically as so-called «progress of filling out the form».
At the same time, dynamic tips appear at the bottom of the form, where you can see the actions that have already been performed by the user. When you complete the two current steps, you will be able to proceed to the next screen.
The stage where the process of choosing the number of players and the date of visiting the quest rooms is implemented is divided into three blocks:
- at the top of the form there is a dynamic counter that calculates the total cost when entering the number of participants;
- immediately below it is a graph that, in accordance with the dates, displays the available time for booking;
- on the right — brief information about the quest.
At the final stage, visitors can choose a convenient way to pay for the quest. Next to it, we have created a special field for entering a promotional code. If it is available and activated, the total cost is automatically recalculated, and participants are provided with a discounted price.
Summary
Thanks to the professional and well-coordinated work of our developers, the customer received a functional and fully adaptive website in English and German with full functionality for ordering, paying and booking escape rooms. The resource allows from any device to:
- view quest rooms available for order;
- find out detailed information about each quest;
- receive information about ongoing events;
easily and quickly book a quest room; - contact the organization to host your own event.
About the project
AVOCADO CLINIC is our client from Kremenchuk, a modern dental clinic that relies on the use of innovative technologies, a high level of professionalism and quality of services. AVOCADO CLINIC has been on the market for 10 years and during this time specialists have helped more than 20 thousand patients. It's time for us to help the clinic and create a cool product for it - a dentistry website with an individual design. About how it was, and what solutions we proposed and implemented, read below.
https://wnauts.com/wp-content/uploads/2021/11/avocado-clinic-video.mp4The objective
We were given the task of creating a business card website for a premium class dental clinic. The overall structure of the site should reflect the quality of services, and the color scheme should match the finished company logo. Also, our task included basic SEO-optimization of the site for local Google issuance.
Solution
A team of our specialists has developed a website according to the aim. And the first thing we focused on is individual design.We have created a custom grid to make the site look modern and elite. The emphasis of the clinic is premium services, and the best tools to emphasize this are the big elements.
Among other things, when developing and creating layouts, we used large informative photographs to attract the user's attention. We selected from the clinic's photo bank those photos that are able to establish connections and associations with the main values of Avocado Clinic - premium quality, care of patients, safety and comfort. Photos play the main role of quickly perceived content: the client will receive what he sees on the screen. And this is: healthy and happy smile, friendly staff, cozy atmosphere of the clinic. This visual technique has long proven itself as an aid to successful sales.
A large photo in web design is already an established norm, but our designers understand that photos alone are not enough for a winning result. More importantly, the rest of the elements are harmoniously arranged. So, for example, in the background you can see an image of a tooth (as a picture) — this is a small reference to the theme of the site.
The color scheme is selected in accordance with the ready-made logo provided to us. Turquoise often appears in the list of trending colors for web design, and this color has proven itself in the psychology of the influence of color on website conversion — it works effectively when selling specialized services, especially in the medical and aesthetic fields.
When developing the clinic's website, it was important to focus on the service of total prosthetics «Full Total», because. this is a flagship service that not all competitors can boast of. This is a complete smile rehabilitation and replacement of lost/extracted teeth. The service is mentioned on the main page of the site several times along with the cost in order to attract the attention of the client and gain his trust.
We also used creative motion design as one of the important components of UX. Animation creates the feeling that the action is being completed faster than usual, and this makes the site even more modern, showing the user that their time, even spent on the site, is valued here. All moving elements not only attract attention, but also make visible the conceptual connection between page elements.
All micro-interactions are short and purposeful. We moved away from robotic linear animation from point A to point B and used more interesting transitions.
Adaptability
It seems that a site with an abundance of large elements is difficult to adapt to devices with a small screen. But it is the enlargement that plays into the hands of the mobile version of the site — these are both large buttons and a readable font. We also saved animation and all the most important sections of the site for smartphone users.
SEO optimization
The «Semantic Team» of Webnauts optimized the site for search engines: we assembled the semantic core and thought out the site structure taking into account SEO queries, prescribed the necessary headings, loaded the XML map for proper indexing. We also made all the necessary indexing settings in the robots.txt file in order to “tell” search engines which pages to crawl.
We are sure that in the conditions of low regional competition, the performed optimization actions will ensure that the site gets into the TOP-10 for a number of queries. And without significant investments in SEO. The effect of the described actions is expected in a few months - we will definitely share it with you in future cases.
Other features
Useful articles
We have added a blog to the site structure to post useful articles on dental topics for additional SEO optimization. Also, the articles on the site are additional «weights» on the scale of decision-making in favor of treatment or diagnosis.
Unobtrusive interface
We decided not to use pop-up contact forms, leaving the decision on the appointment to the user. For communication, we have implemented the «Free ONLINE consultation» button at the top of the screen.
At the bottom of the site, we added a simple «Contact Us» form with three fields and one button — it turned out to be as simple and unobtrusive as possible.
The team
In the «About us» section and on the main page of the site, you can find a photo and description of the clinic team with full name. We didn’t use stock photos of dentists with a Hollywood «cold» smile, but real photos of the clinic team — simple and not staged, in a working atmosphere. All this gives the brand a human face, which is characterized by such features as sincerity, self-irony, frankness and others.
Certificates
We decided not to hide the merits of each individual member of the Avocado Clinic team, but to bring awards and documents to a prominent place. Such decisions are made not to boast, but to form additional trust and loyalty of the client. «We operate transparently and legally. You have nothing to fear. Professionals are with you» — this is what the «Certificates» block is about.
Summary
We got a concise, not overloaded with unnecessary information, well micro-animated site with high-quality typography and thought-out composition. The color scheme, transparent price list and unobtrusiveness complete the formation of a pleasant impression of the site.
All our work was aimed at making the user feel trustful, safe and clean, and for them to understand that they are on a site with premium and expensive dental services.
[post_title] => Dental Clinic Website Development [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => dental-clinic-website [to_ping] => [pinged] => [post_modified] => 2023-09-14 17:02:22 [post_modified_gmt] => 2023-09-14 14:02:22 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=9124 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [7] => WP_Post Object ( [ID] => 16567 [post_author] => 10 [post_date] => 2022-08-26 09:49:16 [post_date_gmt] => 2022-08-26 06:49:16 [post_content] =>About the project and task
Fixers is a Ukrainian team of fixers and military journalists who are engaged not only in creating news stories, but also in organizing the most comfortable work of foreign press teams in Ukraine: from meeting at the airport to organizing filming in the hottest spots.
To tell about their activities, the team lacked a minimalistic, presentable and budget-friendly website / landing page in English. Webnauts is always open and ready to give organizations and brands what they want. Especially if you have to deal with such serious, respectable and special projects as Fixers.
Technological solution
CMS WordPress
For a one-page site, the WordPress CMS is the best — one of the most popular platforms due to its security, ease of use and unlimited possibilities. Convenient setup, search engine optimization, integration with payment services are just some of the advantages that make us choose WordPress. Moreover, the platform is used by such giants as The New Yorker, Reuters, TechCrunch, Fortune and many other major media outlets. We are sure that this will be a good sign for the Fixers team, especially in the near peaceful future.
But it is not only about symbolism: the Webnauts team did a good job to get an impressive result. After all, WordPress is not always about creating a template site without code, especially if the customer has a ready-made unique design. Therefore, when developing the site, we used languages such as HTML, CSS, JS and PHP.
Website design and navigation
As you already understood, the site was developed in full compliance with the design provided by the client. The minimalistic design of the interface looks like a page of an authoritative magazine: only high-quality photos, contrasting headlines and text about the main thing presented as columns. The site palette is dominated by white and black colors, including animation: all effects are limited to changing colors when hovering over buttons. With all this, the design of the site does not look simple, but rather bold in its simplicity.
First screen
The first screen greets visitors with a professional photograph of a reporter in front of explosions, which emphasizes the theme of the site and is especially touching with its caption: «photo provided by Max Levin», a Ukrainian journalist who died in the war.
An unusually large letter logo and a slightly smaller slogan reinforce the main photo and serve as the beginning of an intriguing story. Finally, the visitor needs to pay attention to the miniature menu of three sections: «Services», «Team», «Contacts».
Contrast in typography
As you can see, the interface design is dominated by size contrast: photos and headlines, along with other elements, are not at all shy about their massiveness and are even proud of their importance.
When it comes to typography, there is also the contrast of weights: bold text stands out against the background of text with a thinner font of the same style. This technique eliminates any need to «smear» content across multiple sections. Everything is already very clear: on the left is the history of the team, on the right is the list of services, and at the bottom is the conversion button:
For the headings, a stylish Chakra Petch square font with rounded corners was used. The font choice was symbolic, as it is great for digital and print media. In addition, it is associated with masculinity and stamina. Body text has a thinner, easier-to-read sans-serif font.
Our clients
This block turned out to be super concise and laconic, although it is not inferior in importance to other sections of the site and naturally continues the history of the team, confirming its professionalism. It's just that the names of the world's famous media, with which Fixers cooperate, do not need to be introduced. They are comfortably and with no extra words placed along the screen in two horizontal lines:
In addition, the photos of the next section, which can be seen here, make the user understand that there is still content further — realistic, natural, and therefore even more interesting.
Authentic introduction to the team
The site block introducing us to the team turned out to be stylish and authentic. Three photos of fixers, placed in full screen, not only attract attention, but also inspire confidence. After all, the pictures were taken in real war conditions in the performance of professional duties of each of the team members:
In addition, a casual form of acquaintance in the form of a simple greeting and a name is captivating. In a smaller font, in just a few words, we learn about the specialization of team members. And as soon as our gaze drops down at the smaller gray text, the unreasonable modesty of the fixers reaches its climax. Because here we are not just getting acquainted with the list of world-famous media, but we can also follow active links to specific articles, the appearance of which became possible thanks to the cooperation of these media with the Fixers team.
Without a doubt, such an acquaintance has every chance of turning into a sincere and strong relationship with the audience.
Contacts
All ways to contact the fixers are given in the footer of the site, visually divided into two parts: the yellow one contains contacts, and the black one invites the user to leave their email to subscribe to company news:
Adaptability
All blocks and elements of the site automatically adjust to the display of absolutely any size. That is why the site looks great on all devices: computers, laptops, tablets and smartphones.
Site functionality
Admin panel
The WordPress admin panel is a treat of its own: it fits on one screen, and content management is not only pleasant, but also ridiculously easy. All fields of the admin panel are quickly and conveniently edited. Take a look for yourself:
01
/ 02
Plugins
These are WordPress tools that can enhance the site's capabilities depending on the specific needs of the company. By the way, some of them became the reason for the super convenient admin panel, which we praised above. So, in this project we used the following plugins:
- Contact Form 7 (CF7) — to provide feedback to site visitors.
- SVG Support — for integrating SVG images on the site.
- WP File Manager — for quick access to files from the admin menu.
- Advanced Custom Fields (ACF) — for quickly editing site content in one simple menu.
Summary
The Fixers project is the clearest example of how a simple and serious site can bring truly aesthetic pleasure and undoubted trust. The modesty and rigor of the design brings Its Majesty the content to the forefront — authentic photos, well-aimed headlines, well known names and real facts. This is how design layouts, sprinkled with the sweat of our developers, turned into a tangible, stylish and adaptive landing page for media fixer services in Ukraine.
[post_title] => Landing page for a Foreign Media in Ukraine [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => website-landing-of-fixers-for-foreign-media-in-ukraine [to_ping] => [pinged] => [post_modified] => 2023-09-14 16:58:04 [post_modified_gmt] => 2023-09-14 13:58:04 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=16567 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [8] => WP_Post Object ( [ID] => 19054 [post_author] => 14 [post_date] => 2023-03-10 12:45:51 [post_date_gmt] => 2023-03-10 09:45:51 [post_content] =>- About the project
- The Task: Expectation and Reality
- Online store navigation
- Website functionality: WordPress + WooCommerce
- Writing articles for the blog
- The result
About the project
OKO is an online store of a network of optics salons, which, in addition to a wide range of products, offers vision diagnostics and the manufacture of glasses. Initially, the client turned to us for complex Internet marketing, an indispensable condition of which is a well-prepared site. But over the 30 years of its existence, the company's website has become outdated and in need of updating, not only for promotion, but also for design and security updates.
The Task: Expectation and Reality
The initial task was to completely update the site, namely the WordPress and PHP versions, as well as the theme and plugins. The client also wanted to increase the speed of the site and implement the ability to set clear parameters in the product card, which is extremely important when choosing contact and optical lenses.
In fact, we came across an outdated WordPress theme that has not been supported by developers for a long time. And if the plugins could be easily updated, the theme itself could not be updated.
During the first attempts to update the site, we found a lot of outdated code and functions that do not work in the new version of the PHP, JavaScript and Jq programming languages.
Thus, the labor costs for correcting errors were comparable to the creation of a new online store, but even this did not guarantee its normal operation. As a result, after numerous attempts to revive the site, we faced a new task - to develop an online optics store on WordPress / Woocommerce from scratch.
Online store navigation
Main page
The main page is a familiar shortened version of the entire site. The first screen consists of the logo, menu, product categories, search navigation, CTA button, and shopping cart. For customers of the online store there is a personal account. A slider with banners introduces site visitors to current promotions and great deals.
Scrolling down, we will see blocks with the main and popular categories of goods, which in turn are divided into subcategories "Hot Deals", "Top Sellers" and "Promotional Products". The next block is dedicated to a separate group of products — frames:
01
/ 03
If the user did not have time to turn to the catalog and scrolled the page to this point, then it's time to appeal to the trust of users and talk about the advantages of an online store:
The next block invites visitors to familiarize themselves with the range of sunglasses. Further, the main page is supplemented by a “Blog” with useful articles and a block with Instagram publications. And the final chord of the page is the footer with the main button, main services, latest news and company contacts:
01
/ 03
Catalog with product filtering
All sections of the catalog combine such parameters as "Price", "Brand" and "Country of origin":
Each section of the catalog is equipped with additional filters depending on the type of product. So, contact lenses can be sorted by "ADD power", "Term of use", "Cylinder" and "Sphere". Spectacle lenses can be selected by the parameters "Cylinder", "Sphere", "Coating", "Diameter" and "Lens Type", and sorting products by "Material" and "Type" will help you quickly find the right frame:
For the category of sunglasses, you can set additional filtering by "Type of protection", and products for contact lenses are filtered by "Volume":
Product card with the function of selection and combination of characteristics
One of the most important pages of the site looks neat and at the same time meaningful. Thanks to the convenient selection function, the buyer can set clear parameters for lenses for the right and left eyes and quickly place an order:
In addition to the description of the product in the product card, it is also possible to share a link to the product on the social network Facebook.
The card is also complemented by the "Similar Products" block, which not only increases the likelihood of a purchase, but also the position of the page in the search:
Optical Blog
Another great tool for SEO promotion, because useful and informative articles increase website traffic, and hence its visibility in search results. In addition, the blog increases the level of competence of the company, helps users find answers to questions and is able to turn ordinary site visitors into buyers:
About the company
The page that tells about the company looks simple and practical. Well-structured text is complemented by high-quality photos, company numbers, and burgundy call-to-action buttons:
Network of opticians on the map
The OkO company is represented not only on the Internet, but also in two Ukrainian cities. We marked the network of salons on the Google map, divided them into cities and equipped them with a convenient switch:
Site functionality: WordPress + WooCommerce
WooCommerce
As the basis of the site, we used the popular and familiar WordPress platform for the client, the WooCommerce e-commerce plugin and the WoodMart theme with a ready-made design and a wide range of functions for launching an online store:
01
/ 03
Despite the ready-made solution from WordPress, we customised the site according to the client's requests. In addition to launching an online store and setting up the functions that come out of the box, we additionally installed several plugins:
- WR All Export Pro — for mass export of data from the 1C program.
- All Import — for importing from the provided 1C database.
- Yoast SEO — for search engine optimization of the site.
- Payment gateway for LiqPay for Woocommerce — for paying for goods through the LiqPay service.
- Contact Form 7 — for managing contact forms.
- Markup by Attribute for WooCommerce — for adjusting prices on the site.
- Facebook for WooCommerce — to synchronize the site with the Facebook page.
- JetElements Plugin for Elementor — for implementing an interactive Google map.
Admin panel of the website
Choosing the development of the site on WordPress, the client receives a simple and easy-to-use admin panel. With such an admin panel, even the most complex online store will be easy to manage. Thanks to an intuitive interface, administrators and content managers can easily and quickly edit service descriptions and product characteristics, adjust prices and add photos to the site:
01
/ 03
Combination of lenses by parameters
For the optics website visitors with visual impairments, the function of choosing contact lenses with different parameters for each eye is very important.
In the cards of the "Contact Lenses" catalog, we implemented the ability to select two products at once by setting the parameters of the sphere and the basic curvature for the left and right eyes.
With the product category “Toric Lenses”, everything is a little more complicated: separately set properties for each eye included more than 5 thousand combinations, which in total came out to 10 thousand combinations per card. This affected the loading of the page, the speed of which reached as much as 15 seconds. As a result, it was decided to abandon the combination of toric lenses in terms of parameters. Instead, we set a task for the future — to develop our own plugin for WooCommerce, designed to solve such problems without compromising site performance.
Multilingualism
Before Webnauts, the OKO website functioned in Russian. And since on July 16, 2022 the law on the state language affected all Internet resources, it was important for our client to implement the site in two languages. The new law implies that all sites representing Ukrainian business must have a Ukrainian version and be loaded by default for all users of Ukraine.
Said and done: we have carried out automatic translation of the site using the GTranslate plugin, and now the start page is loaded in the state language.
Download speed
This is not only an important requirement of the client, but also a necessary condition for the normal operation of any online store, because modern users are not ready to wait more than 4 seconds for page loading . Despite the fact that the theme of the online store is already focused on performance, we further optimized the speed of the site by disabling unnecessary features from the WoodMart box.
Writing articles for the blog
Any site needs optimization, and a new one even more so. One effective way to gradually increase traffic is to fill the site with content that meets all SEO requirements: usefulness, literacy, uniqueness, moderate use of occurrences and keywords. It is this kind of articles that we have prepared for the blog of the OkO chain of optics stores. Despite the fact that the blog is informational in nature, each article focuses on the products of the online store and helps to convert visitors into customers.
You can easily share an article you like on Facebook — this feature contributes to the growth of site traffic even better:
The Result
To be in tune with the times means to be in tune with the technology. In this case, we encountered a problem when updating a site on Wordpress is completely unjustified and equates to the development of a new product. As a result, we created a modern and fast online store of the Optics network with WooCommerce, filled its pages with high-quality content and equipped product cards with a convenient function for selecting and combining parameters.
[post_title] => Online Optical Store Wordpress Website [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => optics-online-store [to_ping] => [pinged] => [post_modified] => 2023-09-18 10:16:28 [post_modified_gmt] => 2023-09-18 07:16:28 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=19054 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [9] => WP_Post Object ( [ID] => 19256 [post_author] => 14 [post_date] => 2023-03-12 12:10:59 [post_date_gmt] => 2023-03-12 09:10:59 [post_content] =>About the project and task
Sketchbar is an American online store for art supplies and drawing supplies: markers, liners, brush pens, sketchbooks and sketchers. Sketchbar attracts artists not only with shopping, but also with the presence of a real art community where you can learn and share your work.
The online store got this look after the Webnauts team’s work, namely:
- integration of payment and delivery systems;
- implementation of the system for using promotional codes;
- introduction of accounting programs and automatic calculation of taxes;
- integration with a marketing platform for collaboration with influencers;
- setting up trigger emails, etc.
We developed an online store on Laravel, taking into account the specifics of the American market and current legislation. How exactly, we tell in more detail in the new case.
Interface layout
The front-end part of the online store is made using Twig, a flexible, fast and secure template engine for PHP. In combination with the jQuery JavaScript library, we got a convenient interactive interface with sliders, feedback forms and other elements:
The product catalog page displays 20 compact cards at once, providing the user with a complete overview of the range and experience without unnecessary movements:
When making a product card, we focused on functionality, a compact composition of elements, a comprehensive description (in particular, about promotions and discounts), and page adaptability for various devices:
Site functionality
Laravel is a powerful PHP framework that has gathered a whole department of fans in Webnauts. The development of non-standard and high-load projects with complex functions and service integrations is not complete without this technology.
Our clients who ordered development on Laravel also appreciated the convenience of site management. Laravel Nova's intuitive personalized admin panel makes it easy to edit content and manage online store sales:
System integration
For the full operation of the online store on Laravel, we have implemented several integrations with international and American services. First of all, we started with three main systems: payment, delivery and taxation systems. Without them, any online order in the United States is impossible.
Payment system
The first integration implemented was the Braintree service, which provides secure and fast online payments through several systems: PayPal, Google Pay, Apple Pay, etc. During the integration process, we used a PHP library and a JavaScript module to correctly and reliably transfer payment information.
01
/ 03
Delivery system
Okay, the goods are paid. It's time to implement the delivery feature. To do this, we integrated the online store with the ShipStation system, which allows:
- arrange delivery through popular services DHL, UPS and USPS;
- calculate the exact cost of delivery to different parts of the United States;
- track the location of the parcel;
- print barcodes of mail items, etc.
01
/ 03
ShipStation has a better designed API than other applications (notably the Shipworks service, which didn't pass our test).
Taxation system
The taxation system in the United States involves the presence of Sales Tax — a consumer tax on certain goods in the form of a small percentage. With this in mind, we have integrated the online store with the Avalara tax automation service. This program helps to automatically calculate the tax depending on the type of product and the location of the buyer, because tax rates differ at the state, city, district and even county level.
Order page
The difference between Ukrainian and American taxation systems affects the interface and functionality of the checkout page. We wrote it using the jQuery JavaScript library and AJAX technology. In addition, we have created a small Single-page application (SPA) that interacts with all existing integrations and allows users to conveniently select a delivery service, instantly find out the tax amount and securely pay for the purchase:
Accounting software
When we put the online store on the track, there was the question of accounting for goods and sales. Our client already had experience using the QuickBooks program, and not the web version, but the desktop application. It was not easy, but we integrated the online store with the desktop version of the goods accounting system familiar to the client.
In addition, the service had a rather outdated information exchange technology - SOAP (Simple Object Access Protocol), which uses XML documents and exchanges between the server and client on request. As a result of the integration, we have created such an information exchange system that checks the site every hour for new orders and provides information about all goods in stock. Everything happens automatically or at the request of the user, who at any time can press a button in the QuickBooks application and start synchronization.
Automatic emailing
To track the activities of site visitors and create automatic e-mailing, we have integrated an online store of art supplies with the Klaviyo service. In particular, we set up custom events that not only serve as triggers for auto-sending emails, but also help to better understand the interests of users. So, almost every movement on the site is monitored by Klaviyo: the web application sends information about various events, such as placing an order, visiting certain pages of the site, adding goods to the basket or deleting it, etc.
Implementation of the coupon system
The practice of using promocodes and coupons is an effective way to increase customer loyalty and online store sales.
Implementation of the coupon system
The practice of using promocodes and coupons is an effective way to increase customer loyalty and online store sales.
As with all e-commerce sites, you can apply a Sketchbar coupon at checkout: just enter the code in a separate field and instantly find out the new purchase price.
And now we will tell you how it works from the inside.
You can create a coupon on the site in 3 ways:
- Manually. To do this, we have developed a filter menu with several parameters: the duration of the promotion (start and end date), the number of goods (group or one copy), the number of people who can use the coupon. Discount coupon code in the form of 1 word can only be used once.
- Automatically. We couldn’t do without the beforementioned Klaviyo service. On the website of the online store, we created a rule for automatic code generation with the same filters as in the manual method. As soon as the user fills out the form and creates a request in Klaviyo, the coupon is generated and automatically sent to the specified email. One-time use of the coupon from one account is provided.
- Coupon code in the popup window. A form appears on the website, after filling it, a coupon is generated and automatically sent to the specified e-mail. It can be used immediately in the basket, but it is also one-time and has an expiration date. In the future, according to the received coupon, we plan to send a digital product in the form of a pdf file to the email address. It can be a catalogue, an e-book or a drawing guide.
Integration of a system to control statistics and pay for advertising from bloggers
To promote an online store of art goods, the owner of Sketchbar decided to involve bloggers. To make it easier to monitor ad performance and automate the process of rewarding influencers, we have integrated our online store with our affiliate marketing platform ShareASale. Thus, partners of the online store will automatically receive a commission for referrals — people who came to the site from a blogger using a link generated by the ShareASale service.
First of all, we set up a JavaScript library that, after placing an order, receives a certain data set from PHP and sends it to ShareASale, where purchase statistics are generated based on influencer recommendations. Then we set up the promo codes functionality, according to which each blogger receives their own unique code, which entitles “their” customers to receive a discount on the site.
Of course, there are other ways to get a promocode: newsletter subscription, holiday promotions, registration, etc. To do this, we have set up appropriate unique events on the site, the number of which will only grow in the future. Automatic email distribution is still carried out using the built-in Klaviyo service. So, when a certain event is triggered on the site, we send a Klaviyo event with a code and user data attached to it. Then the site visitor receives by mail a promo code for an instant discount in the online store.
Coupons can be customized by the term and frequency of use, the number of products or the type of discount (in percentage or dollars). In the future, we plan to expand the functionality of this module, which will allow users to receive gifts, free shipping and other goodies.
Summary
Minimalistic and adaptive, with a powerful Laravel stuffing and a lot of integrated services — this is exactly what the American art goods online store turned out to be, which was developed by our company. Fast and secure payment, automatic calculation of shipping and Sales Tax, accounting program, coupon system and affiliate program with bloggers are just some of the implemented functions of the online store. Sketchbar has become a true center of attraction for artists who can learn, communicate and share the work created using the materials purchased from the online store: pens, markers, liners, inks, sketchbooks and other goods.
- About the project and task
- Unique design
- WordPress development
- Multilinguality
- Payment system integration
- Text content
- Summary
About the project and task
It is a great pleasure for us to be involved in the development of websites for charitable organizations and foundations. The Kryvyi Rih charitable organization Charitable Foundation "TIME OF CLEAN ENVIRONMENT" has gathered a large team consisting of a project manager, designer, developer and copywriter. That all is in order to create a user-friendly minimalistic site that inspires public confidence, with multilingual and payment functions.
Unique Design
A graphic designer and a web designer were involved in the project, and they were simultaneously engaged in the development of a logo and website design.
Logo
Logo redesign is a necessary decision, which projects not only a graphic image of the organization, but also the whole versatility of its activities. Since the charitable foundation covers several areas (including health, community development, social and humanitarian programs), we embodied this in the form of a four-petal flower.
The green color of the logo emphasizes the name of the charitable foundation and is associated with nature, vitality and prosperity. Rounded corners and a smooth gradient from light to dark green give the logo volume, softness and harmony.
UI/UX design
While creating UI/UX design for the charitable organization, we chose minimalism. The soft nature of the site is manifested in the roundness of not only the elements (buttons, photos and cards), but also in the letters of the Comfortaa font. Thanks to the structured and balanced functional blocks, the entire array of content is easily perceived, and each element on the site is provided with sufficient visual space. Smooth micro-animation adds life and dynamics to the site, and a calm range of colors, led by juicy green, further emphasizes the environmental friendliness, care and kindness of the organization.
WordPress development
Interactive interface
The charity website development is implemented with the world's most popular WordPress platform. Although, it is dressed in an original design concept from our UI / UX team. So, the developer turned design layouts into a tangible interactive product thanks to the following tools:
- Grid and Flexbox are CSS layouts that provide a competent website coding that adapts to the screen size of any device.
- Swiper is a mobile touch slider.
- Locomotive Scroll is a library that provides smooth scrolling of website elements with a parallax effect. Additionally, we applied custom functions for splitting text into lines and thus dispensed with a paid plugin from the GSAP JavaScript library.
Admin panel
In the development of the software and administrative part of the site, we used several important plugins.
- ACF (Advanced Custom Fields) — for creating fields for WordPress edit screens.
- CF7 (Contact Form 7) — to manage contact forms:
01
/ 02
- reCaptcha 3 is an anti-spam technology that we have enabled through integration with the CF7 plugin:
- WP Mail SMTP by WPForms — for submitting forms via the SMTP (Simple Mail Transfer Protocol) email forwarding standard:
- Smush — to optimize images on the site:
In addition, on the "Contacts" page, we have implemented the ability to add an interactive Google map in two ways: through the iframe code and through the Google Maps API.
https://wnauts.com/wp-content/uploads/2025/10/wordpress-development.-interactive-google-map.mp4As a result, we have a convenient admin panel that allows the client to easily and quickly manage the site: edit texts, upload photos, add content in different languages, etc.
Speaking of languages...
Multilinguality
The site has 3 language versions: Ukrainian, Polish and English. This decision is quite understandable: the larger the audience covered by the charitable foundation, the more donations it will be able to raise.
https://wnauts.com/wp-content/uploads/2025/10/website-management-on-wordpress-multilingualism.mp4In this project, we have abandoned automatic translation. Yes, it costs extra money for professional translation of content, but when it comes to creating a positive image of an organization that evokes a sense of trust, reliability and involvement in a good deed, any compromises are discarded. Especially if the main tool for interacting with society is the content displayed on the site.
Technically, the multilingual feature was implemented through the Polylang plugin:
Automatic translation is carried out only within the administrative panel, invisible to users. To do this, we used another Loco Translate plugin, which is responsible for translating strings inside the WordPress admin area:
01
/ 02
Payment system integration
To integrate the site with the LiqPay payment system, we wrote a custom function and added ACF fields for entering keys (private, public) to the site admin panel:
In addition, we have implemented the ability to select a donation for a custom amount directly in the payment form:
Text content
The only thing that speaks better than design is text. Thus, the Webnauts copywriter had the task to briefly and at the same time meaningfully tell the history of the organization, reveal its mission and main activities. In a word, to convey information in such a way that a sense of trust and reliability is transmitted through the text, in particular, how all members of the organization and volunteers of the charitable foundation are devoted to their work.
Summary
Designed on WordPress, kept in the best traditions of minimalism and filled with only the information that is important to the user, the website of the charitable organization conveys absolute confidence and reliability. The integrated payment system LiqPay with a thoughtful and concise form of payment on the first screen greatly simplifies the collection of donations. The multilingual function also significantly expands the reach of charity far beyond the borders of Ukraine, in particular, to Polish and English-speaking users.
[post_title] => Charitable Organization Website [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => charitable-organization-website [to_ping] => [pinged] => [post_modified] => 2025-10-09 13:23:56 [post_modified_gmt] => 2025-10-09 10:23:56 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=19414 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [11] => 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 ) [13] => 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
-
Freelancer Income Accounting Service
-
Team:
4
-
Cases:
0
-
Reviews:
0
-
-
Promo Site for Recruitment and Outstaffing Services
-
Team:
3
-
Cases:
0
-
Reviews:
0
-
-
Mobile iOS Application for Bloggers’ Platform
-
Team:
4
-
Cases:
0
-
Reviews:
0
-
-
SEO Promotion for the Rental of Special Equipment
-
Team:
5
-
Cases:
0
-
Reviews:
0
-
-
Website for Quest Rooms on WordPress with Booking
-
Team:
3
-
Cases:
0
-
Reviews:
0
-
-
Dental Clinic Website Development
-
Team:
7
-
Cases:
0
-
Reviews:
0
-
-
Landing page for a Foreign Media in Ukraine
-
Team:
3
-
Cases:
0
-
Reviews:
0
-
-
Online Optical Store WordPress Website
-
Team:
2
-
Cases:
0
-
Reviews:
0
-
-
Online Store for Art Supplies on Laravel (USA)
-
Team:
3
-
Cases:
0
-
Reviews:
0
-
-
Charitable Organization Website
-
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
-
