MyFairTrade Blog

How we helped an online health store to create a blog with e-commerce site integration and improved search

Client

MyFairTrade is an online store of healthy food and high-quality nutritional supplements. They have a large selection of products as well as pharmacies and households.

Сhallenge

The client wanted to create a health blog with the products — nutritional supplements — from the main e-commerce site embedded into its pages.

There was a need to make search autocomplete more informative. The search hints had to display not only articles, but also relevant products.

Solution

Using Algolia solutions we have integrated products into the blog site and improved search. We have placed the lines with matching products on the Landing and Category pages in the articles and search results.

We made search autocomplete display similar words, categories, articles and nutritional supplements.

Main project features

Designing the blog from scratch, we implemented the best UX solutions to increase the sales of supplements. Thinking about the user, we included useful information about health which would help him to choose the right products and improve health.

Integration with the online store

The main goal of the project was to increase sales of goods. It was important to find a simple way to integrate the sites. This would allow to display the needed products in different articles within the same blog.

Displaying relevant products

We have displayed the products in the similar style as on the main e-commerce site. When the user goes there to make a purchase, everything seems familiar and convenient.

Separate pages for each tag

We have created separate pages for each tag so that we could add meta titles and meta descriptions to each tag. This is a useful solution in terms of SEO optimization, as it increases the site’s visibility in search, provides more entry points to the site and boosts the traffic.

Client Panel Screens

We have developed an intuitive and simple dashboard interface. All its pages have a single structure, which allows users to learn how to use the system faster and have a smooth and consistent experience.

Improved search

We’ve created a section with articles based on the search results. They are easy to navigate. Search autocomplete displays similar words, categories, articles and products. If the results relevant to the user’s request are not found, the site displays tips and the “Contact Us” form to help the user find what he needs.

Search results

In addition to the articles, the search results contain products that are relevant to the user’s request. The article cards in the search output are different from the standard ones located on other pages. They contain more descriptions and tags.

Autocomplete

Autocomplete reflects preview articles and, most importantly, products from the e-commerce site. We’ve dispayed not only the products’ names, but also the pictures. The words and phrases that match the request are highlighted.

No results found

The page with “‎not found” results shows search tips that can help the user correct or refine his request. We have also placed the customer contact form to give the users all the possible ways to find what they are looking for.

One article page

We’ve explored the best practices to create the user-friendly article page. We’ve added clickable chapters that are always anchored on the left side of the screen for easy navigation. We’ve added the article’s reading time and short information about the author.

We worked through the styles and hierarchy in article typography, numbered / bulleted lists, tables, links, pictures and comments.

Design of Landing and Blog pages

While working on the project, we created the Landing blog page that creates an introduction to the theme. We also made the Categories, Subcategories, Tag pages, a page about authors and the 404 page.

Fully adapted for mobile devices

We have fully adapted all pages for mobile devices. More and more visitors are using mobile devices to visit websites. Our design has to be easy to view on a mobile device, otherwise, the client may lose future visitors. Also, websites with an adaptive design get better results in search.

Stylistics & UI Kit

At the client’s request, we followed the style of their main site. Since there was no ready-made style guide, we created our own. We have laid down the indentations system and nesting on the article page. The elements’ size and the distance between them are very important for the correct perception of the content. We’ve created a separate page guide where we showed all the indents between text blocks, elements and article chapters.

Results

The client wanted to create a health blog that would display their products and increase the sales. By placing the products on all pages, including the search results, autocomplete and article pages, we have achieved the goals.

Deliverables

Integration with the client’s main site — the online store of nutritional supplements
Displaying products matching specific articles
Improved search with autocomplete and search suggestions
Responsive search with the ability to display products from the online store
Separate pages for each tag with customized meta title and meta description

Project in figures (impact created)

People

350

Hours

Design layouts

Tools Used

Figma, Algolia, WordPress, JS, jQuery, PHP, Ajax, Apache, MySQL, scss, Grunt