Bristol. Website

Highload fault-tolerant website with Click&Collect function for order collection both in the mobile app and on the website without losing the selected positions

8

team members

Client

Bristol is a Russian chain of convenience stores. In 2018, the chain was included in the rating of the 50 fastest growing companies according to RBC, taking fourth place in it with an average annual positive revenue trend. Now Bristol has more than 4,000 stores throughout Russia.

Previously, for the Bristol chain of stores, the Friflex team developed a mobile application with a variety of functions: from a store map and product catalog to a loyalty program and a customer support system.
The Bristol mobile app was launched by the Friflex team in April 2021. In addition to the main sections familiar to the user of the retailer's app, Bristol has an interesting feature – a dynamic loyalty card. It is a DataMatrix code that is generated by a special algorithm to provide protection against forgery. We also made a map of stores, an administrative panel and a photo database. Read more about this case on this page.
Task

Now we had a task to develop a website. The main emphasis in it was placed on the principle of omnichannel. It was necessary to develop a website that would seamlessly integrate with a mobile application during the ordering process. It was also required to implement the Click & Collect function so that the buyer could pick up the order collected for him as soon as possible. Additionally, it was required to introduce the acceptance of payments through the FPS.
Solution

Perfect Integration

The task of Friflex was to make sure that the site and mobile application were a single mechanism. It was necessary to ensure that the user could move from one site to another without noticing it, and without encountering difficulties with the purchase.

In the decision that we implemented, this was taken into account. Thanks to this, in the final services, the user has access to both the mobile application and the website:
- unified user ID
- unified personal account and settings
- identical authorization methods
- unified cart
- unified prices and discounts in the cart (including discounts on a discount card)
In other words, if users choose to buy on the site and are temporarily forced to postpone it, when they open the application, they will see that their goods are in the cart. And then they can add something or just check the order and place it.
"We understood how important it was to find a solution that would make the transition between the site and the mobile application seamless for the user. This is essential for the convenience of buying, to increase user loyalty. It was a great advantage that Bristol is a client for whom we have already made a mobile application. This allowed us to quickly complete the new task of creating a website and choose the most appropriate technologies. Comprehensive cooperation with the client always gives a synergistic effect"

Petr Chernyshev

CEO of Friflex
The site is cross-platform, that is, it adapts to desktops and to any screen sizes of mobile devices. This is implemented using the Vue js and Nuxt 2 frameworks.
Click&Collect

According to experts, the Click&Collect format is becoming increasingly popular with online buyers under the influence of marketplaces. It allows users to place an order and pick it up at a convenient location without overpaying for delivery.

To do this, the buyer needs to choose a store that is suitable for the location, by analogy with the point of issue of the order, as is the case with marketplaces. And then place an order, focusing on the availability of products in the store. The order arrives at the store, where it is quickly collected, and the user has to pick up and pay for it at a convenient time. To receive the goods, the buyer shows a personal QR code, which can be easily found both in the mobile application and in the personal account on the website.
"Where to buy?" function

One of the problems of customers when ordering, which Bristol observed, was the lack of the right product in the selected store. If users see that the desired position is not in the usual store, their behavior model is to view it manually in the neighboring ones, repeating the search query each time. To remove unnecessary actions from the user and speed up the process, the "Where to buy?" function was implemented.

With this function, the product that was not found is tracked at other points, which are displayed to the user in the form of marks on the map or list. The current price is also indicated immediately. The Bristol website keeps up-to-date product data in 5,000 chain stores across the country.
Implement the FPS

We have significantly reduced the time it takes for the buyer to place an order, search and select goods, so we drew the client's attention to the possibilities to speed up the payment process itself. One of them is payment through the fast payment system (FPS).

To pay through the fast payment system, the user must show the QR code from the profile when approaching the checkout. Next comes a push notification with a request for payment. After that, the buyer taps "Pay through FPS", confirms the purchase amount and selects the bank application to complete the payment. Everything takes a few seconds.
To sum up, we can say that we managed to integrate a whole list of popular functions that customers need into the Bristol website. At the same time, the website loads quickly, using a minimum of resources.