In the middle of difficulty lies opportunity.
Stas has worked on:
kupimtoner.com — Website development on Worpdress, HTML, PHP, JS, theme customization and refinement. Working with the WP bakery builder. Import and export of goods, setting up automatic shipment of the database of goods to a remote server. Implementation of custom payment methods and mail distribution for WooCommerce. Setting up and finalizing the Ajax Search Form plugin. Implementation of regional SEO website promotion. Adding a lot of additional fields for the convenience of site administration by the Advanced Custom Fields plugin.
startdrive.online — development of a site on Worpdress, HTML, PHP, setting up and finalizing the theme. Working with the constructor Custom setting of Contact Form 7 plugin.
bilka.com.ua — redesign and customization of the site on Webasyst, SMARTY, JS. Work with the database of goods. Setting up plugins for searching and sorting products. Implementation of search engine optimization, creation of micro-markup and regional promotion.
ctepan.ru — setting up and redesigning a site on Worpdress, HTML, PHP, JS Working with the Yoast seo plugin, creating microdata. Working with the Redirection plugin. Adding a lot of additional fields for the convenience of site administration by the Advanced Custom Fields plugin.
inter-present.kz — Website setup on Worpdress, HTML, PHP, JS. Import and export of goods. Work with the database of goods. Implementation of regional SEO website promotion. Creation of microdata. Site optimization. Implementation of custom payment methods for WooCommerce.
rpolitik.com — website customization and redesign on Worpdress, HTML, PHP, JS. WooCommerce plugin customization, WooCommerce memberships, WooCommerce PayPal Payments, MC4WP: Mailchimp for WordPress.
Stack
-
HTML 5
-
CSS
-
Sass
-
JavaScript
-
Git
-
Gulp
-
Webpack
Worked on
-
Redesign of eCommerce on WordPress / Woocommerce
-
05.06.2022
-
0
Reviews
-
-
Redesign of e-Commerce on Shop Script
-
05.06.2022
-
0
Reviews
-
- What the client's business is. What kind of product or service, what the specific is.
- About the task set before us (website development, SMM, video, etc.).
- About the method of implementation. What we did, what features were introduced, how long it took.
At the end of each project, there is a brief introduction: a link to the site, terms and cost of development, technologies used. All elements of the portfolio are provided with screenshots, which clearly show the result — even without reading the text, clients receive comprehensive information about the project.
We optimize each post in the portfolio for a specific cluster of requests, corresponding projects. Unsurprisingly, portfolio pages are the most visited on the Webnauts site.
Posting Reviews
The Webnauts website only publishes reviews from our customers. All of these reviews come from real people for whom we have performed various tasks. Under the text of the review there is a link to the project or case in the portfolio, so anyone can evaluate the results of our work.
We always ask customers to be as honest as possible in their reviews. And we work out all the arising objections already at the stage of cooperation. The block with reviews is displayed on the main page of the site.
Blogging
A blog is one of the main tools for SEO promotion of a marketing agency or an IT company. When we created the blog, we set ourselves the goal of «telling simply about complex things»: we want to share our knowledge and experience, and the company’s blog suits best for this purpose.
For our blog we:
- Defined the target audience. Our materials are primarily for clients interested in Internet marketing services, website development, business promotion. However, digital specialists can also draw useful information from them.
- Created headings. There are three of them: cases, news and articles. Each section is designed for a specific format of publications. We update them regularly.
- Established uniform layout standards. Content makers publish materials in compliance with these rules. Each blog page has a promo button for one of our services, a capture block, links to categories, and recent posts.
- Developed a content plan. We regularly discuss which cases are worth sharing, which topics may be of interest. As a result, we determine what and how we will write about.
We talk about new blog posts on the Webnauts Facebook page.
Our cases
Case studies are one of the most powerful internet marketing tools. Our cases define the task, reveal the solutions and communicate the final result we have arrived at. We illustrate all actions with screenshots of reports and data from analytics programs.
Case value:
- Demonstrate knowledge and understanding of the task;
- Show that we have experience with a specific task;
- They serve as proof of the effectiveness of the chosen solution.
The difference with the Portfolio is that case studies do not show the whole project, but a specific problem. They describe how we got from point A to point B and what we did along the way. Case studies are not only useful for business owners — they can be adopted by other marketers.
Our cases are made up of several parts. First, we identify the problem, describe the solutions, demonstrate the result and draw a conclusion. The final figures are highlighted in large print so that they are more noticeable.
News from the digital world
The digital sphere is constantly changing, so any specialist needs to follow trends. Even at the stage of discussing the concept of our blog, we chose the news format and decided that such a section would definitely be on our website.
The blog mainly publishes news in the following areas:
- Updates, new functions and features of social networks;
- Developments, services, functionality and new search engine algorithms;
- New popular messengers;
- Interesting events in the digital sphere.
All news are provided with thematic illustrations, screenshots or videos.
Useful articles
Information materials are not published in our blog very often. We carefully approach the choice of topic and try to share our practical experience. So we created the guide «How to write a technical task for a landing page», the article «5 Things Good Internet Marketers Won't Tell You» and many other materials.
In each article, we try to correctly combine:
- SEO tools. Keywords, meta tags, subheadings, lists, sidebars, linking and other components of the right SEO text.
- Design and dynamic elements. We follow the style of the site and add animation. We grab the attention of the reader, do not let them get bored.
- Text for the people. We try to talk with the reader, to advise, not to teach. We do not have water in our articles and give maximum benefit.
- Honesty. We do not write about what we do not know or have not experienced.
The result of complex work
If you want to promote the site of an IT agency / digital company in search engines the way we did at Webnauts, you need to use all available marketing channels. This is a long systematic work, which in the end will pay off and will definitely bring customers.
Here the results of keyword visibility rising:
Here the results of organic traffic:
About the project
3Form is a Ukrainian company providing 3D modeling and 3D printing services. Its products are applicable in the field of architecture, medicine, automotive production and jewelry. At the same time, the company produces not only piece copies, but also entire batches of samples for production.
We were tasked with creating a business card site that would effectively present the company's services. At the request of the client, the main focus should be on design and visual storytelling. The development of the site was carried out on a turnkey basis: we were responsible for creating a corporate identity, filling the site with content and conducting basic SEO.
Unique corporate identity
In accordance with the client's request, we did not use ready-made WordPress templates, but developed a custom design from scratch. Since the company offers 3D printing services, volume has become a key idea in the design: in addition to 3D illustrations, shadows and layering of elements on top of each other are actively used in the interface. This technique creates a sense of space, combining depth and plane.
01
/ 04
But the matter was not limited only to volume: thanks to the skillful use of animations, our designers managed to make the site «alive». Interactive interface elements are designed taking into account the response to the movement of the mouse cursor. Such a light background animation does not distract from the content, while creating a tangible effect of presence.
The only exception was the main page, where a demonstration of the 3D printing process immediately grabs all the attention.
The logo, also created by our designer, also refers to the 3D printing process. The letter «O» seems to come out from under the extruder, fixed on the axis of the 3D printer.
Filling the site with content
The 3Form website consists of only 4 pages: main, «3D printing», «3D modeling», «Contacts». On the service pages, we have placed the most important information that will help convince visitors to contact our client.
- Description of the technologies used. Assists in the selection of the appropriate printing technology, determining the pricing policy for a specific order.
- Work examples. A clear demonstration of the level of professionalism.
- Stages of work. Building the right expectations from cooperation with the company.
- Detailed price. Informs about current prices depending on the material and accuracy of the product.
Thus, each semantic block responds to the specific needs of the user, prompting them to place an order.
See also:
Website content filling services
01
/ 03
Online application for calculation
Often a convenient solution for service sites is a built-in online calculator that allows you to calculate the exact cost of services in advance. This feature increases user confidence by making pricing more transparent. It also saves a lot of time when placing an order.
We had already developed such solutions for other clients, but this situation was an exception - it is simply impossible to determine the exact cost of 3D printing in advance. The price of a product depends not only on its size and materials used, but also on the complexity of execution, which can only be determined from a photograph or drawing.
However, to save time for the client and the manager, we have developed an advanced online order for calculating the cost of 3D printing. It is completed in 3 steps:
- Uploading a 3D model or a photo (you can leave a link to the layout in the cloud).
- Specifying the parameters of the model and the required quantity.
- Specifying the client's contact information.
01
/ 03
The 3D modeling service involves only uploading a layout and its description, so the calculation request form looks simpler and takes only one screen.
Adaptability
The 3Form website looks great not only on desktops, but also on mobile devices. The work of the main animations and contact forms has been preserved; in the case of long lists, horizontal scrolling is used; and the contents of all blocks are rebuilt in accordance with the screen resolution. The site loads quickly on a smartphone and does not feel «heavyweight» during navigation.
The summary
The Webnauts team has developed a spectacular, stylish and selling business card site for the company. The unique design produces a wow effect, informative content encourages an order, and the introduction of online applications for calculation saves time for both parties. As a result, we have a simple and at the same time powerful tool for attracting customers.
About the project
Our company Webnauts.Pro has been operating for a long time with the customer Caviar de Beluga, starting from the creation of an English-language website. Subsequently, it was necessary to redesign the online store and it was decided to «pump» the site — take several months for basic optimization of the project for the English-speaking audience, as well as SEO-promotion of the online store in Europe in order to «combine» the site from the point of view of search engines and give it an impulse for development in search engines.
2 months of SEO promotion
Despite the fact that initially the customer ordered 2 months of SEO (which is usually not enough to get bright results), the project showed a noticeable increase - during the promotion period and after its completion. This is easy to see in the attached charts.
The promotion was carried out immediately after the redesign of the online store, and at that time the traffic decreased a little due to technical work. However, once the redesign was implemented, October and November SEO work has been done.
In December nothing more was done with the site, but the results of the previous work were already the following:
- we managed to compensate for the traffic that significantly decreased after the redesign,
- …and reach a steady growth of traffic.
Growth continues to this day
Positions still continue to grow, we share the results below:
United Kingdom
Great Britain in general and specifically England and London are the «native» region for the company. Here is its main office and one of the retail stores. It was most important to achieve noticeable results here despite fierce competition.
Before:
After:
France
France is another key region for the company's presence. The second retail boutique is located here, and sales are historically even higher than in the UK.
Before:
After:
The problem of regionality
The client wanted to cover the whole Europe with their online store, however, in order to most effectively build promotion in different countries, it was necessary to create separate sites with the regional domain of a particular country, which the client was notified about in advance. Unfortunately, this proposal of ours did not find support from the business owner.
The domain zone of the site did not imply a regional affiliation to a particular country (com), it brought the first problem with SEO-promotion of an online store in Europe. Google could not assign a specific region to a web resource. As a result, a significant share of search traffic came from non-target countries — the USA, India, Iran, Thailand, China, etc.
Solving the problem of regional affiliation
Our task was to promote in two countries where the client's physical stores were located: Great Britain and France. In accordance with this, the site had a version in English and French, as well as multi-currency — the display of prices in pounds sterling and euros.
To resolve the issue of regionality, we manually assigned the region of England to the site in Google Search Console. To strengthen the position of the English-language site in the selected region, we also made a small purchase of links, which allowed us to reduce the number of clicks from the US and increase the share of British search traffic. We also placed links in special directories, registered and optimized our company in Bing.
Among other things, company registration in Google My Business with a unique description and photo, allowed the company to take an advantageous position in the local Google search results and achieve excellent ranking in the local search results.
Implementation of microdata
An important part of the strategy for SEO promotion of the caviar online store website in Europe was the development of snippets — the announcement and description of the site in Google. To make the information about Caviar de Beluga look neat and attractive in the search engine, we have implemented Product and Review microdata. This made the snippet more visible and informative, and therefore more clickable.
Getting feedback from buyers
Among other things, we needed to get more feedback from customers so that they interact with the company's Google account, leave reviews, and organically promote the products of the online store in their region.
We suggested to the customer to create the so-called «thanks» — flyers, which should be added to each order and ask the buyer to share their impressions of the purchase. It was planned to place a generated QR code on each leaflet, which automatically redirects Caviar de Beluga customers to Google Business to write a review.
Thanks to the QR code, the likelihood of a client refusing to interact was minimized with a company Google account. This solution is good because buyers do not have to make any effort to fulfill the seller's request. It is enough just to scan the code from a funny flyer and spend a couple of seconds on a review. In matters of local promotion, this is a very effective and inexpensive way of promotion.
Internal SEO-optimization of the online store
The internal optimization plan included a fairly standard set of activities that allows you to make the site as clear and transparent as possible for search engines:
- Filling in meta tags;
- Elimination of duplicates and garbage pages, incl. 404 errors;
- Carrying out technical refinement of the site to improve performance in search results;
- Speeding up the loading of the site and moving to a new hosting, which made it possible to ensure high-quality and well-coordinated work of the resource.
In the direction of English-language SEO optimization, the following block of activities was carried out in semantic design:
- a complete semantic core has been assembled with search hints and a focus on voice search;
- junk requests have been cleaned up ;
- clustering of requests for landing pages has been completed;
- content for the main pages of the site has been prepared and posted with filling in unique meta tags.
Results of SEO promotion in Europe
After a set of works carried out to assign the region, improve visibility in search engines, the site became more promising in terms of further SEO promotion. Also, despite the limited period, our team managed to achieve tangible results from the work done on internal optimization and basic SEO-promotion of the site in the English-speaking region.
Prospects for further work
The prospects for SEO-promotion of an online store in Europe are currently very wide, as well as the potential of the site as a whole. The most important areas today are:
- Reviews in google maps
- Store and blog content
- Finding quality backlink sites
- Find local bloggers to post physical store reviews and feedback
A few words about the project
The online store of modern accessories for electronics has been our regular customer since 2014. Over the years, we have developed a warm and trusting relationship with the customer, so we are happy to tell everyone about how we carry out a comprehensive promotion of this site, paying attention to several areas at once, among which we can note: SEO, crowd marketing, SMM, site speed optimization , content, usability improvement.
This online store has been maintaining its leading positions in many highly competitive queries in Ukraine for a long time and continues to strengthen its positions in search engines. All this is thanks to the well-coordinated work of our «Webnauts» team, from designers to copywriters.
How to achieve good results in search promotion for the Ukrainian region, how to promote an online store website, how much it costs and much more: all these you will learn from this case.
Features of promoting an online store in the region "Ukraine"
The key to the success of any online store lies in its comprehensive promotion, which we successfully demonstrated using the example of Bilka. Over several years of fruitful cooperation, we tried many different ways of promotion, but the main efforts and budget were eventually directed to long-term «slow» methods, the results of which were gradually displayed in increasing the traffic of the resource from organic search.
This method is the most time-consuming and costly, but also more reliable, because in this case the site confidently takes its positions and will not lose them even if the development of the project is suspended.
The peculiarity of promoting the site of an online store in the region «Ukraine» is that after the deterioration of the political situation and the ban on the use of many Russian resources and services (primarily this applies to the Yandex search engine), Ukrainian users prefer to look for answers to their questions in Google, therefore, the main emphasis in the promotion of the online catalog of accessories for mobile devices «Bilka» was placed precisely on this search engine.
It's no secret that Yandex and Google have different algorithms for the distribution of resource positions for a particular request, so the promotion of this online store is aimed at meeting Google's requirements in the first place. After blocking in Yandex (May 2017), the share of visitors from this service decreased to 5% of the total, although the popularity of the Russian service used to be very high in Ukraine (see chart).
A comprehensive approach to promoting an online store
Our SEOs and copywriters from Webnauts are constantly working to increase the attractiveness of the site not only for search engines, but also for visitors. We are regularly engaged in the creation of high-quality materials; in our list of priority work, SEO-optimization of the site occupies the first position. Among the most important procedures, the following is worth noting:
- creating SEO texts and meta tags in all sections of the site;
- filling out cards for new and existing products;
writing competent SEO texts for static pages; - creating a sitemap;
- creation and regular updating of the «News» section with relevant thematic materials;
- setting up the fastest indexing of new pages;
- integration with monitoring and optimization services of Google;
- adding an online store to all major business directories;
- optimization of code and images to speed up loading speed.
Features of filling the online store
An important factor in ranking an online store in search engines, including Google, is the quality content of the site. First of all, you need to pay attention to the main sections, resource categories, static pages, optimize not only meta tags, but also other textual information on each page.
Most online stores in Ukraine have filters in their product catalogs that help you quickly find the right product, compare and buy it. It is very important to organize SEO-optimization of these filters so that a potential buyer can find what they want in just one click from organic search.
Link building, link profile
One of the most important factors for the successful promotion of an online store in Ukraine is link building. And it should be good quality and natural. Since no one promotes online stores exclusively with natural links, we also used some tricks, among which crowd marketing is one of the most successful and effective methods of obtaining targeted visitors and natural links.
There are several people among the Webnauts staff who develop and maintain profiles on specialized forums on various topics. Depending on the tasks set, they make hidden advertising, describe the positive aspects of a particular site, store, advise, share their opinions and recommendations. Promotion through crowd marketing has proven itself in absolutely all areas, including electronics, accessories for which are successfully sold on the website bilka.com.ua
Article promotion also does a great job of building backlinks. This method has always been and remains one of the most effective, because you can choose which pages of the promoted site will have links, in which text (you can write it yourself), on which specific site they will be placed. It all depends primarily on the size of the budget, but even inexpensive links from articles will have a very positive effect on the attitude of search engines to the site.
Natural links speak for themselves, they are indirectly related to promotion, because they are an indicator of the quality of the site and its relevance in the selected category. In other words, if the online store is good, the site is fast and convenient for buyers, they will talk about it, reviews will scatter over the Internet, thereby increasing the number of natural backlinks. This is a nice bonus that every high-quality and optimized site receives. This factor increases the motivation to create a good online store, such as, for example, bilka.com.ua.
Social media also have a big influence on positions in search engines, so we pay a lot of attention to the development of store profiles in popular networks. Backlinks in this case serve as a source primarily of the target audience, which has a positive effect on the overall picture of the behavioral factors of the online store
Responsiveness, usability
Effective promotion of an online store today cannot do without adaptive layout and universal design. More than half of potential customers access search engines through their mobile devices (see statistics on the image), so the site should work correctly on absolutely all known display resolutions. We solved this problem successfully and bilka.com.ua looks great on any gadget, as evidenced not only by satisfied customer reviews, but also by screenshots next to this text.
Since behavioral factors are very important in the promotion of any Internet resource, we also tried our best in the case of Bilka — our designers have developed an excellent interface, which we regularly refine and make better, taking into account customer reviews.
Summary
Online store «Bilka» has been one of the best regular customers of «Webnauts» for several years, because it allows from the very beginning of our cooperation to use as many ways in promoting the resource as possible, which greatly facilitates achieving results. Over the years, we have done a lot of important and useful work, we continue to modernize and improve this online store. And even if the cost of such promotion is much higher, an integrated approach gives reason not to doubt the results, which are reflected in the growth of profits and increase in the growth of visitors (see the chart below)
The price of our services is justified by such results and we hope that SEO promotion of an online store in Ukraine will be of interest to many business owners and they will turn to real professionals in their field.
About the project
We were approached by the company «Avtostart» — an online driving school from Moscow, which provides services of preparing for the exams of traffic police in the category «B». In addition to online learning of traffic theory, the school offers:
- private lessons with a driving instructor;
- safe driving courses to prepare for situations that are inevitable in the complex Moscow traffic;
- assistance in preparing the necessary documents for the traffic police;
- supervision of the student until the acquisition of the driver's license.
We love interesting and useful for society projects, so we gladly agreed to work with the company «Avtostart».
https://wnauts.com/wp-content/uploads/2021/11/startdrive-video.mp4Task
Before meeting the Webnauts team, the company «Avtostart» took care of advertising its services on Instagram and on the platform Yandex.Dzen. They contacted us because of their desire to create a presentable business card website, which would contain not only all the necessary information about the school, but also the ability to enroll in courses.
In the future it is planned to expand the functionality of the site: the addition of a personal account of the student and instructor, a system of tests, training materials, etc.
Solution
Taking into account all the source data and the need to further expand the website, we offered the client the development on WordPress.
WordPress is one of the most popular CMS. WP can be used to create websites of any type, today up to 30% of all existing websites are powered by it. And if we talk only about the websites that work with the CMS, WP makes up to 60%, which clearly confirms the global leadership position. WordPress is a free «engine» that helps save budgets, especially when developing websites for small businesses.
Information gathering
In order not to get into the familiar situation with «vague technical requirements», we prepared a brief for the client to understand how their business works. This helped to achieve the ideal result of our work.
The key to the success of any development is not only the qualification of the executors, but also the quick feedback from the client. This was exactly the case when we received all the necessary information: school information, tariffs, work schedule, instructors, etc.
Prototype development
Before we started developing the website, we created a text layout, in the structure of which we envisaged 4 sections: «Home», «About us», «Courses» and «Frequently asked questions». While discussing the layout, we added three more sections: «Instructors», «Reviews» and «Contacts».
After the discussion with the client, we expanded the template on the test layout and filled all the required pages with content, including SEO optimized texts.
After that, the web developer customized the template according to our wishes: translated all the English buttons and forms into Russian, hid the additional elements, formatted texts.
Contact points
We created several contact points, including the «Request a call» button and the contact form to submit the application, which was placed directly on the main banner of the website.
The бContacts» section includes not only the main contact information and a map of the site, but also another «Send Message» form where you can ask a question and use the promo code.
Color scheme
The color palette included some of the most successful color pairs: blue + yellow.
Blue is the color of sympathy and trust, for that reason it's so often used in web design, logo creation, and even social media. To make blue not look so distant, it is best diluted with a contrasting color, in this case yellow.
Yellow is the color of positivity, optimism and creativity. It is the color of smiley and gold, and in our context, it is also the yellow color of traffic lights — «Attention!».
We used one of the most tested combinations in marketing strategies, taking into account market trends and target groups.
Confidence strategy
The problem of many companies with their websites is «facelessness». Often there is no photo of the staff on the website, but the texts scream about the fact that there is a «friendly team» working in the company. We took care of creating a trusting atmosphere in the chain «instructor-applicant» and suggested putting information about driving regulations teachers on the main page of the website and in a separate tab.
01
/ 02
Testing
We tested the finished website for performance and errors, of course. In particular, it was checked whether the requests from site visitors come to the email, how all the buttons work, whether the site is adaptable to all types of devices, etc.
Results
The Webnauts team has completed the task according to the set goal and is ready to add the necessary pages, forms, widgets and features to the website as the online school evolves.
As you can see, WordPress is a convenient engine for solving such problems, which has repeatedly proven itself with distinction as our web development tool.
Website for online driving school — a clear example of «turnkey» development, where we need from you only the basic information, and we provide all the stages of development, including SEO and logo design.
[post_title] => Online Driving School Website on WordPress [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => online-driving-school-website-on-wordpress [to_ping] => [pinged] => [post_modified] => 2023-04-17 15:06:59 [post_modified_gmt] => 2023-04-17 12:06:59 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=9095 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [5] => WP_Post Object ( [ID] => 15979 [post_author] => 10 [post_date] => 2022-07-24 16:30:05 [post_date_gmt] => 2022-07-24 13:30:05 [post_content] =>Today, most web resources are developed on the basis of the flexible and multifunctional WordPress platform. However, not all developers at the initial stages provide for further SEO promotion, which is an integral part of a successful business on the Internet.
Our specialists foresee and take it into account at the very first stages of work. With this approach in developing the structure of commercial projects, further promotion in search engines becomes more efficient and effective. We used this approach in our work with a new client of our company Fluidbusiness group. Thus, our task was to develop an online store for the US market with SEO preparation (website optimization for search engines) already at the stage of its creation.
https://wnauts.com/wp-content/uploads/2022/07/fluidbuissenvideo.mp4About the customer
The main field of activity of the Fluidbusiness group is the selection, supply and maintenance of pumping equipment from leading world companies. In this area, the specifics of sales are that it is not guaranteed that the final cost will be the same as the preliminary announcement of the cost of a particular item in the catalog, since pumping equipment must be selected taking into account many factors.
Therefore, the main need for the client was to create a product catalog with a price request and a feedback form, through which the managers of the online store could contact the customer to clarify the details of the order and calculate the cost.
Project implementation
Technical side of the project
As mentioned above, we took the WordPress platform to create a classic online store with a product catalog. The main advantages of the platform are clear logic and a wide range of functions for creating a commercial project.
We decided to divide our web resource into semantic blocks-pages so that site visitors can quickly and efficiently find the necessary information.
Online store includes:
- Catalog of production of leading world manufacturers.
- Services.
- Information about the company.
- Sales niches.
- Questionnaire for clients.
- Company contacts.
To list products in the catalog, we used WooCommerce, one of the best e-commerce plugins.
Why this particular plugin?
Here are a few reasons why we use it in our commercial projects:
- it allows you to customize the design with a visual designer or through code;
- it has more than 400 extensions to improve the appearance and functionality of the online store;
- it provides access to the REST API for management and integration from product cards to orders;
- it allows you to post ratings and reviews of products for SEO promotion;
- there are no restrictions on products, images and galleries;
- advanced sorting and filtering of goods is available;
- there are customizable checkout areas.
This is what the page with product cards on the site looks like:
Development of an individual questionnaire
In a separate block on the site, an individual questionnaire form was written for more than 50 fields to meet all the necessary specifics to the goods. This was done so that managers could provide more detailed advice to a potential client when they call back.
https://wnauts.com/wp-content/uploads/2022/07/fluidbussins-video.mp4We also made it possible to store all completed forms on the server using the Flamingo Address Book plugin. This tool in WordPress saves absolutely all messages that have been sent through contact forms. They are collected exclusively on Flamingo and are always available. With this plugin available, you no longer have to worry about losing important messages due to incorrect mail settings or mail server errors. The plugin is a fairly reliable platform tool.
Performance
Our team pays special attention to such a criterion of a web resource as its loading speed. For a WordPress online store with a WooCommerce module, this is especially true, because CMS sites with a large number of plugins often turn out to be quite slow. We managed to achieve fast loading of the pages of the online store with the help of the correct layout and the optimal use of all available tools. In our case, we ensured that the site was in the green zone on desktop devices, and on mobile devices it provided the yellow zone of performance.
Competent construction of the structure of the product catalog on the site
Previously, our specialists thought out and built the directory structure immediately for SEO promotion:
- Categories and subcategories of goods were designed. A clear structure gives the visitor an understanding of what they will find in the online store and guides them through the logical chain to the necessary product card. In addition, logical structuring increases the position of the resource in search engines.
- Correct URL structure was built. The structure of the site addresses should be as simple and understandable as possible, which will make it more convenient for the eyes of visitors. The main points that we paid special attention to are: organization not by identifiers consisting of many numbers, but by ordinary words; using punctuation marks in URLs; using the correct case of the URL; using "/" at the end of the address.
- We thought out sections in which informative articles for search promotion will be placed. These are not only categories, but also niches in which products are used — Markets.
The result
The result of creating an online store for pumps on Wordpress / Woocommerce was a web platform with the following important features:
- initial SEO optimization already at the development stage will ensure a quick start of the project in Google;
- the speed of loading pages of the store is well perceived by search engines and site visitors;
- a detailed block questionnaire helps to accurately formulate the needs of the client and offer the best solution;
- all customer information is securely stored and structured.
At this stage, we are confident that the FLUIDBUSINESS GROUP (USA) online store, created on WordPress with an eye to SEO promotion, has very good sales prospects even for relatively niche, highly specialized equipment.
[post_title] => E-Commerce of Pumping Equipment (USA) [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => online-store-of-pumping-equipment-usa [to_ping] => [pinged] => [post_modified] => 2023-04-17 15:06:21 [post_modified_gmt] => 2023-04-17 12:06:21 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=15979 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [6] => WP_Post Object ( [ID] => 15789 [post_author] => 10 [post_date] => 2022-07-24 16:25:54 [post_date_gmt] => 2022-07-24 13:25:54 [post_content] => [post_title] => Investment Company Landing Page [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => investment-company-landing-page [to_ping] => [pinged] => [post_modified] => 2023-04-17 15:06:22 [post_modified_gmt] => 2023-04-17 12:06:22 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=15789 [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-04-17 15:06:21 [post_modified_gmt] => 2023-04-17 12:06:21 [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] => 16983 [post_author] => 13 [post_date] => 2022-09-28 12:13:45 [post_date_gmt] => 2022-09-28 09:13:45 [post_content] =>Recently, we have been working on another interesting real estate project — SEZAVI PROPERTY. The main wish of the client was to create an attractive, simple and fast website for a real estate agency in the UAE. And the main technical task was the integration of the resource with the CRM system to control incoming leads.
https://wnauts.com/wp-content/uploads/2022/09/sezavi-property.-main-page.mp4About the client
SEZAVI PROPERTY provides a wide range of property management services in Dubai, short and long term rental of villas, providing professional service and peace of mind to clients at any time. The agency is based in Dubai Marina, but the rental properties can be located both in Dubai and outside of it. In addition, Sezavi Property takes on the responsibility of managing portfolios of all sizes — from managing a few properties to over a hundred.
WordPress development
The proposed site should not be very capacious and bulky, so it was decided to make it on the WordPress platform.
WordPress is one of the most popular CMS today. The main advantages of the engine are fully consistent with the wishes of the client, and the main one is that WordPress has the simplest, most convenient and very functional administrative panel. It takes a couple of hours to master it.
It is also important that the platform is free and at the same time, with a large number of free updates and additions, which is also suitable for customers who plan to manage the site themselves in the future.
We used Elementor as the visual editor. This is a WordPress site builder. Elementor is a feature rich page builder. It is used for coding large websites, landing pages, long reads, articles, etc. Coding takes place using ready-made elements, which are selected by simple drag and drop and making the necessary settings through a convenient admin panel.
Design
As our practice shows, a beautiful and harmonious design is very important for such sites. The further behavior of the user directly depends on its appearance.
Therefore, our design specialists decided to focus on high-quality photographic materials and images.
Simple navigation on the first screen immediately allows the visitor to go to real estate rental offers or fill out a form and get feedback on any issue.
To ensure communication with site guests, we used the Contact Form 7 tool.
Contact Form 7 is one of the most popular plugins for creating contact forms on the site. The plugin allows you to create forms of any kind, is very flexible and easy to set up, has been developing for many years and contains a lot of improvements. The plugin can manage numerous contact forms, where you can flexibly customize the content of forms and mail with fairly simple markup. Forms have built-in support for Ajax submission, CAPTCHA, Akismet's spam filter, and more.
The search function offers the visitor in a few clicks to select suitable options for renting a villa, apartment or penthouse. For popup cards on the site, we used the visual editor Popup Builder.
Popup Builder is a tool that will help you increase your conversion rate. It is a responsive WordPress tool with many different features: customization options, different types of popups, popup scheduling, animation effects, integrations and plugins supported by 3rd party developers.
Cards of offers for rent are placed as colorful photo gallery. From the photo you can immediately go to a detailed description.
Each card contains a maximum of high-quality photos and information about the object offered for rent. The reserve button is also on the card page.
Filling with content
All content on the site was written by our company's copywriters and posted by content managers.
Each offer for rent contains a maximum of high-quality photos, a description and a list of pleasant bonuses.
We paid special attention to the description of real estate objects, because the conversion on the cards of specific objects largely depends on their informativeness and persuasiveness.
Integration with CRM system
CRM is a system that simplifies the control of incoming leads. Instead of complex tables, instant messengers and other sources, one single service remains. It minimizes the resources spent and makes it possible to quickly respond to all requests from the site.
The advantages of using such a system:
- A single customer database that stores all collected data.
- Transparency and control of work.
- Accounting and analysis of leads.
After integrating the CRM system with the site, our customer can independently process the list of users, segmenting them according to the required parameters. The entire list of resource visitors who left their data can be placed in CRM, processed and analyzed. The functionality of the system will also help to organize and analyze data on contacts, orders placed and deals.
Summary
After the work on design, content filling and improvement of technical characteristics, we received a high-quality Internet product with good performance indicators. Now the website of the real estate agency SEZAVI PROPERTY (UAE) contains a complete system for choosing housing for rent, and also provides a wide range of property management services in Dubai with simple and understandable information administration.
Refinement and improvement of the functionality of Internet resources is a task that we face quite often. If you think that improving and expanding the functionality of the site will help your business develop, then our team of specialists will be happy to advise and take on the solution of even the most difficult task.
About the project and task
Webnauts Academy is an educational project of our company aimed at training and improving the skills of beginners and novice IT specialists.
Webnauts has long been engaged in internal training of employees, as it feels a constant staff shortage. And an attempt to bring the training center to the outside was successful and showed the unprecedented relevance of IT education among the residents of our industrial city.
Having organized the educational process in many areas and convinced of the usefulness and importance of the project, we decided to create a modern IT course website with a minimalistic interface, clear navigation and adjusted for a large amount of content: training programs, video reviews, teachers and graduate cards.
Design
Visual analysis
Before we started designing layouts, we started visual analysis, highlighting more than 10 exemplary sites in the field of IT education. After evaluating the basic design principles of such projects (grids, shapes, colors, fonts and media), we managed to create our own unique design concept.
Website prototyping
Based on the results of visual analysis, the designers carefully thought out the structure of the IT academy website, namely: what will the main screen look like, what blocks will be used to appeal to users' trust, and how to talk about the benefits of educational products? This stage is the creation of a black and white sketch of the site, in which designers focus on UX (User Experience) as much as possible, that is how the interface will work and whether it will be user-friendly.
As you can see, the work of UI/UX designers is not only a creative, but also an analytical process, during which the user experience is carefully studied. This research allowed us to create an effective digital product that turns views into training applications.
Grid in web design
Even though the site contains a lot of information, it looks neat, intuitive, and visually appealing. This effect is created by the grid - the basics of the basics when creating a prototype of any site. But in our case, this is not just an invisible skeleton of the site, but an integral part of the design, and together with large typography, arrows and other signs, it evokes His Majesty the Swiss style.
We can see how thin gray lines permeate all pages, artfully structuring and separating content. Thus, all text, photos, forms and widgets are neatly inscribed in rectangles with clearly defined borders. Thanks to the block structure, we have created an organized and user-friendly interface:
https://wnauts.com/wp-content/uploads/2022/10/webnauts-academy.-grid-in-web-design-1.mp4-1.mp4Brand colors and hover animation
At the initial design stage, the designers already had a logo in the Bauhaus color style: white, black and muted red for accents.
https://wnauts.com/wp-content/uploads/2022/09/webnauts-academy.-brand-colors-and-logotype.mp4So, the design of the site was made in accordance with the existing corporate colors. We used white as the background color: it gives the interface a sufficient amount of space, and at the same time, contrast for other important elements. These are black buttons and drop-down list icons that change their color to red when hovered over. Headings and text boxes with important information are also highlighted in accent red, completely capturing the user's attention:
https://wnauts.com/wp-content/uploads/2022/10/webnauts-academy-hover-animation.mp4.mp4Layout and navigation
As soon as the design concept is ready, the project moves on to the next stage — the actual development of the educational courses website. The front-ender starts first: he codes layouts using HTML, JS, and CSS (SCSS/Sass) languages, and sets the site in motion by animating widgets using GSAP (GreenSock Animation Platform) technology. Let's break down the site and see what we got.
Website first screen
The first screen forms the user's first impression. It is important to remember that it only takes a few seconds to form it, but at the same time, you should not overload the main section with content. Based on these considerations, we placed the most important on the first screen:
- a large and understandable title that fully reflects the theme of the site;
- a horizontal version of the logo with a concise menu in the header;
- a dynamic video telling the user about the main advantage and location of the training center: «Study at the best IT company in Krivoy Rog»;
- a banner with a current offer and a button «All promotions of the academy»;
- main conversion button «Choose a course»:
Block «About us»
It plays an important role in building customer loyalty and trust. But this does not mean at all that it should take up a lot of space or even a separate page. We did without a lot of text full of victories, and limited ourselves to a photograph and really important information that fit in just a couple of sentences:
We are sure that users will appreciate the saving of their precious time, and in the meantime we will try to strengthen their confidence in the reliability of the company with the help of other important blocks and pages.
Educational Products
The main product of the company is a course, and there are no less than 17 of them. We have combined them into 7 categories for individual IT areas and presented them in the form of a drop-down list.
Each course leads to a separate page and introduces more detailed information:
- title, brief content and the beginning of classes with the «Register» button,
- photo gallery showing the educational process,
- the benefits of learning with the button «Full course program»,
- information about the teacher with a photo,
- learning conditions,
- application form with conversion button.
The page is easy to navigate, and all the important and necessary information is at a glance:
https://wnauts.com/wp-content/uploads/2022/10/webnauts-academy-educational-services.mp4.mp4It is worth noting that thanks to the use of the grid, not only the design has become more beautiful, but also the code, in the literal sense of the word. And translated from the language of developers, beautiful means working, structured and readable.
Communication methods
We thought of many different options for the user to contact the company, and even dedicated a separate screen of the main page to this. The goal is obvious to absolutely everyone, but what a presentation! The section captivates with an original individual approach. So, introverts are invited to write, extroverts — to call, and those who doubt — to attend any class of their choice for free:
Company advantages
This section reinforces the «About us» block of the site and is a concise list of 4 points, neatly placed in a table:
Reviews
Video reviews of graduates, or to be more precise, of employed graduates, reinforces the previous text block and inspires even more user confidence. The media section is designed as a circular gallery with black and white photos, numbering and arrows. When you hover over the photo, the photo comes to life, and when you click on it, the full video from Youtube is played.
This block was one of the most interesting and challenging in terms of development, and the result met our expectations. Here is an example of how a fairly minimalistic interface can create a truly unique user experience:
https://wnauts.com/wp-content/uploads/2022/10/webnauts-academy.-block-reviews.mp4.mp4Catalog of graduates
This is another advantage of the company, embodied in a separate landing page. It is dedicated to graduates who have successfully completed their studies and are ready to start new IT projects. The page is a catalog with cards of young professionals. In turn, the card contains a photo of the graduate, brief information and a link to the portfolio, contacts for communication and a button with a resume. The page also has a simple navigation in the form of a horizontal list of 3 lines and allows you to filter candidates by specialization:
https://wnauts.com/wp-content/uploads/2022/10/webnauts-academy.-catalog-of-graduates.mp4.mp4The graduates section can be accessed from the main page block or from the menu item in the site header «About Us — Graduates».
As for the development, we are ready to sing the praises of the grid layout again, because thanks to its horizontal and vertical lines, the coding of the cards was faster, eliminating such a programming phenomenon as «code duplication».
Photo gallery
The importance of photos on the site is difficult to overestimate: real informative photos arouse interest and describe services instead of a thousand words. We designed the photo in the form of a compact ring gallery, which perfectly reflects the educational process in the creative atmosphere of a modern IT company:
https://wnauts.com/wp-content/uploads/2022/10/webnauts-academy.-circular-photo-gallery.mp4.mp4FAQ
The Frequently Asked Questions block is designed to cover common customer objections, thereby reducing the load on managers. In our case, the visitor closes the question of interest, revealing the desired answer. And yes, the drop-down list is still relevant today due to its compactness and ease of use:
https://wnauts.com/wp-content/uploads/2022/10/webnauts-academy.-faq-dropdown-list.mp4.mp4Form and contacts
The application form is as simple as possible and includes only one field for entering a mobile number. A funny large button that changes its color on hover and sends the request for processing adds to the mood.
Users who are used to taking the initiative in their own hands can contact the company at any contact listed in the footer of the site:
https://wnauts.com/wp-content/uploads/2022/10/webnauts-academy.-form-and-contacts.mp4.mp4Responsiveness
In addition to the desktop version of the site, Webnauts designers have worked hard to create layouts for tablets and mobile devices. All blocks and widgets automatically adjust to any screen size, and as a result, the site is convenient to use both on a smartphone and on a desktop computer.
Site functionality
«Not only external, but also internal beauty is important», said the back-end developer and masterfully set up the software-server part of the IT course site on WordPress, in particular:
- custom fields using the ACF plugin (Advanced Custom Fields);
- custom record types Graduates and Courses;
- Ajax forms that allow you to exchange browser data with a web server in the background;
- graduates page with Ajax filters and pagination.
The developer also installed the Loco Translate plugin on the site, which makes it possible to translate all strings wrapped in code, and then converted static strings using the __() function, which can return the original text in the absence of translation or loading of the text domain.
All these complex manipulations made it possible to set up the most convenient and understandable admin panel of the site, in which it is easy to manage the appearance and content of pages without the help of a developer:
The result
The effectiveness of any site is measured by a first-class user experience, and the creation of such a site requires effective interaction between designers and developers. Thanks to the well-coordinated work of the team at every stage — from visual analysis to setting up the system control panel — we managed to implement a convenient and attractive IT course website, both inside and out.
[post_title] => Website for IT courses on WordPress [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => website-for-it-courses-on-wordpress [to_ping] => [pinged] => [post_modified] => 2023-04-17 15:05:41 [post_modified_gmt] => 2023-04-17 12:05:41 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=17010 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [10] => 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-04-17 15:05:39 [post_modified_gmt] => 2023-04-17 12:05:39 [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 ) )Worked on
-
SEO Case Study: Digital Agency Website Promotion
-
Team:
6
-
Cases:
0
-
Reviews:
0
-
-
3D Printing Service Website
-
Team:
4
-
Cases:
0
-
Reviews:
0
-
-
SEO-Promotion of e-Commerce in Europe
-
Team:
3
-
Cases:
0
-
Reviews:
0
-
-
E-Commerce SEO Promotion in Ukraine
-
Team:
6
-
Cases:
0
-
Reviews:
0
-
-
Online Driving School Website on WordPress
-
Team:
2
-
Cases:
0
-
Reviews:
1
-
-
E-Commerce of Pumping Equipment (USA)
-
Team:
4
-
Cases:
0
-
Reviews:
0
-
-
Investment Company Landing Page
-
Team:
4
-
Cases:
0
-
Reviews:
0
-
-
Landing page for a Foreign Media in Ukraine
-
Team:
3
-
Cases:
0
-
Reviews:
0
-
-
Website of a Real Estate Agency in the UAE
-
Team:
3
-
Cases:
0
-
Reviews:
0
-
-
Website for IT courses on WordPress
-
Team:
6
-
Cases:
0
-
Reviews:
0
-
-
Online Optical Store WordPress Website
-
Team:
2
-
Cases:
0
-
Reviews:
0
-
