Vladyslav Chesnokov

Vladyslav Chesnokov

Content manager

There is no such thing as an accident. What we call by that name is the effect of some cause which we do not see.

Project experience

Avtostart(startdrive.online)is a driver training platform with online and offline classes drawing up terms of reference, developing the structure of the site, adding text and visual content, work with the administrative panel of WordPress.

No excuses(no excuses.ru) – is the website for the fitness club developing the structure of the web pages, adding text and visual content with Elementor, work with the administrative panel of WordPress.

Bilka(bilka.com.ua) – is an online store of mobile accessories writing a lot of voluminous articles, creating reviews on mobile technology, assisting in SEO promotion.

Webnauts.pro (webnauts.pro) – case writing, editing and translation of texts into Ukrainian and English.

Stack

  • HTML 5

    HTML 5

  • CSS

    CSS

		Array
(
    [0] => WP_Post Object
        (
            [ID] => 9124
            [post_author] => 10
            [post_date] => 2021-11-30 07:44:34
            [post_date_gmt] => 2021-11-30 04:44:34
            [post_content] => 

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.mp4

The 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.

Banner

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.

Banner

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.

Banner

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.

Banner

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.

Banner

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.

Banner

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.

Banner

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.

Banner

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.

Banner

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.

Banner

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 ) [1] => WP_Post Object ( [ID] => 16524 [post_author] => 10 [post_date] => 2022-08-26 14:04:19 [post_date_gmt] => 2022-08-26 11:04:19 [post_content] =>

The objective

Meet another Webnauts project — IOD (Intellectual Outstaffing & Development), which provides outstaffing and outsourcing services. And which badly needed a modern and user friendly platform.

  • What for? To sell the services of IT specialists.
  • Who for? For Western companies that want to quickly hire the right specialist and make the right choice.

By answering these questions, we managed to create a convenient and practical website that qualitatively presents (and therefore sells) the IT team and solves the problems of customers.

How did we do it? More details in our case.

Banner

Interface design

The main treasure of an outstaffing company is its team, and if the team comes from Ukraine, this is the dream of any Western client. It's no secret that Ukrainian IT specialists are one of the most sought-after specialists due to their high professionalism and low level of claims for payment, which cannot be said about their colleagues from the USA and Europe. Due to Russian aggression, the Ukrainian IT sector found itself in difficult conditions, but it has not ceased to arouse interest and attract even more attention from the world. Therefore, the main task of the designers was to introduce the site's guests to the team of potential performers from the first screen: IT professionals from Ukraine.

Call to Action (CTA)

Another important advantage of outstaffing is saving the client's time in finding the perfect employee. On the site, the slogan speaks about this, the button shouts and the gallery with candidates calls for viewing, and it all from the first screen. At the same time, the design is not overloaded at all: there is a lot of air here and everything is clear even for those who do not understand anything about outstaff and outsourcing.

Banner

Mega menu for navigation

The second screen offers more opportunities for searching for an employee both by a separate direction («Profession»), and by a specific technology («Technology»). And all thanks to clear search navigation in the form of a mega menu with two sections. So, we presented a block with IT areas in the form of a small plate of 4 points, each of which is tied to a gallery of specialists.

The list of technologies is much wider, so we abandoned a bulky vertical list and placed the categories line by line, adding the «See more» button. This technique is much more efficient in terms of appearance and ease of navigation:

Banner

Site search filter

Clicking on the «See all» button or on any of the technologies takes the user to the «Specialists» page, where the possibilities of finding an employee are even wider due to additional filters, such as «Specialization», «Experience», «English level» and «Available» in slider:

Banner

Drop-down list

The next block introduces site visitors to the company's services. We designed it in the form of a concise drop-down list with preview arrows. This technique simplifies the interface, focusing on the important, but if desired, allows you to easily access information and reveal additional information in one click:

Banner

Company page

The «About us» block allows you to learn more about IOD. Here the text is supported by a photograph and large numbers in the best traditions of Swiss typography. The big button encourages you to get to know the company even closer and takes the user to a separate page of the same name:

Banner

It is not only about UX

The next screen is more about UI, not UX, and is a bright and logical continuation of the «About us» block. If earlier the white color played the main role on the site, forming «air» between the elements, and blue only gave an accent, here the blue color sets the tone for the entire composition. It is associated with reliability, safety and trust, which perfectly characterizes the company. In addition, for a clear reason, the blue color is dear to every member of the team, and together with the «Glory to Ukraine» ticker, once again emphasizes the company’s belonging to Ukraine:

Banner

List in a table

The «Outstaffing benefits» block in the form of a concise table reveals the benefits of outstaffing using the example of cooperation with IOD:

Banner

Applying for a team

The following block offers clients to hire a ready-made team for a project: be it a website, a mobile application, an individual design or a comprehensive promotion. The client can get a proven team in just one click:

Banner

Grid in design

The site design is based on a non-standard 16-column grid with two guides, according to which all blocks and interface elements are located. All content is divided into 2 halves (on the left is the heading, and on the right is the main text), making it much easier to perceive information. The composition also has a rhythm due to the alternation of headings (either on the left or in the center), which gives the interface a kind of dynamics:

Banner

This is how the designers brought clarity to the outstaffing model with the help of a visual language and reduced a rather complex form of labor relations to a simple and attractive service.

Text content of the site

Having talked about the visual language, we cannot but mention the textual content. After all, if the task of good design is to convince the user to stay on the site, then the task of high-quality content is to convince them to buy. Anyway, a potential client will eventually move from scanning the site to studying it.

Webnauts copywriters tried to make the site of the outstaffing company not only easy to use, but also understandable. Getting acquainted with the platform, the user can first pay attention to well-aimed headings and thus understand the navigation, and then move on to concise and simple texts.

The accessible content of each page allows the user to quickly understand the subject of the site, easily understand the conditions and benefits, increase confidence in the company and use outstaffing services.

Interface coding

Where design ends, front-end development begins.

HTML, CSS and JavaScript are the three pillars of the front-end on which the user interface stands. With the help of these languages, we have turned design layouts into a tangible web product.

In order to simplify and structure the code, we used a kind of CSS extension — the Sass preprocessor scripting language and its SCSS syntax. And to insure the code from errors and make the site work properly, we were helped by the Git (Global Information Tracker) version control system.

However, this is not all. The front-end development was based on the Vue.js JavaScript framework, as well as the Nuxt.js Vue.js framework. These technologies allow you to create powerful web applications for Vue.js, including Alibaba, GitLab, 9Gag, and now the IOD website.

In addition, in the development of the client part of the platform, we used such libraries as:

  • Vuex — for managing the state and storing site data.
  • Vue router — to sync the site URL with the rendered web page.
  • vuejs-paginate — for paginating the site.
  • vue-click-outside — to respond to clicks outside the interface element (in our case, this is a dialog box with an application form):
Banner
  • nuxt/i18n — to adapt the application to the user's language.
  • cookie-universal-nuxt — for setting, receiving and deleting cookies.
  • nuxtjs/svg-sprite — for uploading SVG files to site pages on Nuxt.js.
  • nuxt-ssr-screen-size — to control the screen size between responsive and desktop versions.
  • v-scroll-lock — to block the scrolling of the site page when the modal window is open:
Banner
  • Swiper — to implement a touch slider.

Thanks to the Nuxt Sitemap module, we have created a sitemap, an important document in terms of SEO. It contains a list of all web pages and helps search bots crawl the site.

Animation

Animation continues to be one of the top trends in web development. In our works we use unobtrusive effects, but in this project we have relied on a special dimensionality.

The minimalistic cursor and the smooth appearance of each element when scrolling slowly guides the user through the pages to properly introduce the team, conditions and benefits. Such animation, as if grabbing the sleeve, allows the client to avoid mistakes and make the right choice, thereby arousing interest and trust. In addition, the use of animation confirms the innovativeness of the service and the fact that the visitor is dealing with an IT company.

To create animations, we used the GSAP (GreenSock Animation Platform) JavaScript library, in particular, and for the smooth appearance of blocks and lines separating content:

Banner

Animation Cursor

The sliding decorative cursor in the form of an outline circle enlarges and changes color when hovering over links. This effect was implemented using JavaScript and a linear interpolation function:

Banner

Animation on hover

The color change effect on hover increases user engagement and allows them to focus on the content inside the cards:

Banner Banner

Slider effect

When you hover over a photo, a slider effect appears and calls up a card with brief information about the specialist, and when clicking on it, the user goes to a separate page with a detailed resume. We implemented this effect using CSS:

Banner

Ticker effect

We have already talked about this graphic technique that has been attracting the attention of users since the good old 90s. And again, the ticker broke not only into web design trends, but also into our new IOD project. We implemented the ticker effect using the vue-marquee-text-component library and thus increased the interactivity of the site:

Banner

Responsiveness

We have completely taken control of the design and adapted the layouts so that the site looks organic on the screen of any type of device. Sometimes adaptivity requires simplification or even cutting off secondary blocks or animations. However, in this project, we managed to keep all the elements and animation effects.

As a result, we rebuilt the blocks in such a way as to correctly convey the meaning and not violate the logic of the site. In addition, each item is large and clickable, and along with the competent placement of elements, it allows you to effortlessly switch between items and conveniently explore all the content, whatever the size of the display.

A harmonious design responsive to mobile devices is a must have for any commercial site, because more than half of the world's users access web services from smartphones.

Banner

Site functionality

Each block and element on the site must obey the user and properly perform its function. Our back-end developer worked hard on this task.

Website admin panel

The admin panel of the site is provided by Laravel Nova from Laravel developers. It has an attractive and understandable panel with convenient content management due to customization:

01

/ 03

Laravel Nova Packages

Laravel Nova has a huge number of plugins that extend its functionality. So, in this project we used the following packages:

  • laravel/telescope — for debugging the Laravel framework and monitoring site performance.
  • protonemedia/laravel-cross-eloquent-search — for searching across multiple site models.
  • classic-o/nova-media-library — to manage media files.
  • digitalcloud/multilingual-nova — to switch the site language.
  • dillingham/nova-attach-many — for easy editing of linked models.
    eminiarts/nova-tabs - for grouping parts and relationships into tabs.
  • optimistdigital/nova-multiselect-field — to add multiselect to the arsenal of Nova fields.
  • optimistdigital/nova-sortable — for reordering models using drag and drop.
  • whitecube/nova-flexible-content — for flexible generation of content blocks.
  • wehaa/inline-boolean-field-update — for filling and updating checkbox fields online.
    waynestate/nova-ckeditor4-field - for editing text areas.

Database

After installing all the plugins, we started creating a complex client-server site architecture - a database and the modules necessary for the site:

  • Catalog of specialists with filters. In order for the client to see not only a beautiful, but also a fast-working search filter, we have done serious work and competently structured a huge database with a variety of types of relationships (one-to-many and many-to-many). The most difficult was the implementation of the links «specialist — specialization», «specialist — experience» and «specialist — technology» (many to many). As a result, the site's admin panel now has the ability to easily and quickly create new pages, manage specialists' data, and associate a specialist with a profession, specialization, experience, technology, and English level.
  • Static pages. We have created the About us, Contacts and Teams pages, as well as set up content management through the site admin panel.
  • Teams. In the admin panel of the site, you can create and manage teams, in particular, add and combine specialists into groups.
  • The main page is implemented with a dynamic display of specialists, a mini-catalog and a block with IT teams.
  • SEO module. We added SEO data to all pages of the site and implemented an SEO page generator for the catalog with filters. All filter combinations in the directory have unique automatically generated SEO data: slug, title and description.
  • Forms. We have implemented a simple and convenient form submission, as a result of which the reception of data from forms is carried out in one form, which can be easily accessed through the admin panel.

Summary

Competent design, high-quality content, modern animation and high functionality — this is the result we expected. Such a site of an outstaffing company is able to impress not only with its design, content and speed, but also with its efficiency.

[post_title] => Custom Software Platform Developed for a Company Based in Ukraine [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => website-for-an-outstaffing-company [to_ping] => [pinged] => [post_modified] => 2023-09-13 16:51:17 [post_modified_gmt] => 2023-09-13 13:51:17 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=16524 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [2] => WP_Post Object ( [ID] => 17916 [post_author] => 14 [post_date] => 2023-03-17 17:13:48 [post_date_gmt] => 2023-03-17 14:13:48 [post_content] =>

SEO-promotion of an online store of mobile equipment in 4 months

SEO optimization of an online store is a common task for the Webnauts team, moreover, we have already worked in the mobile technology niche.

Also read:

E-Commerce SEO Promotion in Ukraine

This time, the SMS online store got into our hands. The trouble spots were a lot of technical bugs, an incorrectly implemented language version and incorrect URL generation. In 4 months, we managed to correct the situation and get a tangible boost in traffic only due to competent internal website optimization. We will tell you more about how we did it in our new case.

Banner

Work on technical errors

Site indexing and nofollow links

After analyzing the main page, one of the most critical errors was found which prevented the correct indexing of the site — all links in the site menu were wrapped with a nofollow tag.

Banner

As a result, the Google bot did not follow the links of the main menu, did not crawl or index internal pages as it should.

As soon as we removed nofollow from menu links, site pages gradually began to be indexed.

The indexing of the site pages went up:

Banner

The next step was to analyze and work out the website URL. Since most of the site's URLs were formed incorrectly, contained Russian characters and parameters, this also prevented normal indexing. A number of works were carried out with the regeneration of new URLs for pages of products and site categories (with the correct setting of 301 redirects to new pages).

Banner

Another key issue on the site was the incorrectly implemented language version. The index included only the pages of the Ukrainian version of the site, while the Russian-language pages were not included in the search results. The language implementation entailed a lot of local errors. After editing the language versions, critical errors were fixed:

Banner

The reward for our efforts was a noticeable increase in the site's visibility in the very near future: the site's pages, including Russian-language ones, began to be actively indexed and started to influence the overall result.

Increasing the visibility of the site in the Google search engine:

Banner Banner

On-Page SEO, or internal site optimization

At the very start of the project promotion, the sections Smartphones, Mobile phones and Tablets were designated as a priority. We have paid more attention to these sections.

After analyzing the TOP results, it was decided to move not through category pages, but through product pages. It is much more difficult to overtake the giants of the market by high-frequency and competitive requests than by medium- and low-frequency requests for a product card. And this strategy worked.

With a bit of magic, the pages of the site received not only visibility in the Google search engine, but also transitions and conversions:

Banner

It is costly to move up by category queries due to the fact that you have to compete with market giants who can afford to build a huge link mass to category pages. And our approach is more budgetary and no less effective — in the shortest possible time, you can bring the first sales from Google search!

Product cards are actively fixed in the TOP-10, bringing traffic and conversions after 4 months of work. The positions of products «lagging behind» from the TOP-10 are also growing and, obviously, some of them are guaranteed to fall into the desired top ten.


Traffic growth:

Banner Banner

Now track the traffic from the start to the end of active SEO work.

Traffic for 28 days (BEFORE and AFTER the work on the site)

The number of clicks from the search per month (at the start of the project):

Banner

Monthly search clicks (after optimization):

Banner

Such indicators were achieved solely due to the internal optimization of the site, moreover, by low-frequency requests for specific products - models of mobile phones, smartphones and tablets.

 

Summary

Despite the fact that not much time has passed since the SEO-optimization of the mobile equipment online store, we have already seen significant results. The beauty of search promotion is its cumulative effect, because in the future the site will only grow and occupy more advantageous positions.

After 4 months, the client was not only satisfied with the results of website promotion, but also expressed a desire to continue cooperation. So, in the near future, we plan to strengthen the position of the site for high- and medium-frequency queries with the help of external SEO promotion, namely, by increasing the link mass — the number of external links that will lead to an increase in the position and more traffic.

[post_title] => Promotion of an online store of mobile equipment [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => promotion-of-an-online-store-of-mobile-equipment [to_ping] => [pinged] => [post_modified] => 2023-09-17 16:01:38 [post_modified_gmt] => 2023-09-17 13:01:38 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=17916 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) )