Case Study:

Le biscuit _

VTEX IO Migration

Posted in:
09/08/2021

About Le biscuit_

With a diversified and resilient business model based on multi-channel, the company, which has a large and modern store network, launched its first e-commerce project in 2020, amidst the pandemic.

The retailer has 141 stores, 136 of which are owned and five franchises, with approximately 140 thousand square meters of sales area.

They are distributed in 14 states, in the North, Northeast, Midwest, and Southeast regions, in 74 municipalities.

The project_

The core scope of the project mainly involved the store's migration to VTEX IO.

ACCT is recognized by VTEX as the absolute leader in IO technology implementations.

With over 20 highly performing projects delivered to some of the biggest global retail brands such as Electrolux, Carrefour, and Samsung. That's why clients with more complex projects look to ACCT.

Numbers of the project_

  • 67% increase in conversion rate;
  • 60.5% increase in average time on page;
  • 15% increase in the average order ticket;
  • 7% decrease in bounce rate.

4 months Go Live

+32 Native features

+22 Customizations

The problem_

After closing the physical stores, the company's management decided on an extremely urgent project, and due to the need for speed, some important steps in structuring a complex e-commerce project were neglected. When the company contacted ACCT, its first website (developed by the competition) had a very low performance, mainly in the following areas:

  • Charging time
  • Navigation
  • Main menu

Website architecture: One of the biggest barriers to the evolution of the old website into CMS was the architecture, the last company couldn't get them to have a single page that pulls all the pages of the brand's advantage club products. The entire operation of this club was complicated and manual, thus emerging a need in the project, the automation of processes.

The solution_

The go-live of this project took place on April 14, 2021, thus totaling three months of migration until the launch of the new store.

The customer was already using the VTEX CMS platform and decided to migrate to VTEX IO, for that, it was decided that the first delivery would be an MVP (Minimum Viable Product) so that the most relevant features would be up and running as quickly as possible and incremental evolutions were carried out on top of that MVP.

Desktop layout_

In the desktop version, in addition to reflecting the color choices and organization of the information hierarchy, we added a container so that the content is inside a comfort area for better viewing. It also helps to prevent components from breaking into the main breakpoints of this device.

As we have a greater flow of users accessing at 1366 pixels resolution, it is important to avoid full width to browse their devices smoothly.

VTEX CMS

VTEX IO

Mobile Layout_

The layout, which is an MVP, was designed to bring lightness to e-commerce. We use white space to balance the components, bringing the feeling of section organization.

The red color has been reduced to aesthetic details and points of importance, such as the logo, menu, search, and vantage ruler elements.

The layout was developed from the perspective of mobile-first, as the store has approximately 83% of new users browsing this service.

Customizations_

Customization of my main: One of the client's biggest needs in this project was the complete evolution of the main menu.

The previous menu, which was created by an agency, had poor performance and poor usability, according to satisfaction surveys carried out.

Dropdown Menu_

Today, the customer's menu has a drop-down menu with different categories and four levels of navigation, following the best practices of the international market.

For a website that offers a wide variety of categories and products, multi-level yet intuitive menu navigation is very important.

VTEX CMS

VTEX IO

Filter_

VTEX IO has natively brought the side menu, indicated if there is a high number of filters available in the product list.

In this way, the exposure of the content to the user and the number of filters in the grouping of products presented was facilitated.

Psycholinguistic research shows that visual searching a list is more efficient if the list is vertical than if it is horizontal. This goes for the department menu as well.

VTEX CMS

VTEX IO

Product Review_

VTEX IO also natively brought the review tool for the products. A super important feature for decision making when purchasing products.

With this implementation, it is possible to see and evaluate Le Biscuit products.

Search V2_

The resources includes:

  • Main searches.
  • Search history.
  • Product suggestions.
  • Suggested terms.
  • Did you mean.
    A possible spelling correction for the current query.
  • Search suggestion.
    A list of search terms similar to the query.
  • Search banner.
    A banner that can be configured by consultation.

Empty search_

As a quick and low-cost solution for MVP, the department homepage component has been replicated to display an alternative exploration path, so browsing doesn't die in trying to find the product.

Account creation_

Now Le Biscuit has just three steps to start a new VTEX IO account.

A/B test comparisons_

Motivators

  • Decrease in the number of requests;
  • Decrease image size;
  • Lazyload application;
  • Good development practices;
  • Removal of CML price loading request for product specification.

Experience Design_

The UX and UI professional spends a lot of time researching, discovering user needs, and creating design solutions that follow fundamental psychological principles.

He is responsible for carrying out all the research necessary for the development of the project, creating and delivering navigable prototypes that make the solutions tangible, as well as conducting tests with our customers, partners, and stakeholders.

The layout change proposed by ACCT together with a client made some changes to the website design. Although these changes seem simple to the common user, they generate a considerable improvement in the experience inside the site, when compared to the CMS. New colors were used, buttons were repositioned, as well as product page positioning.

Advantage Club_

The company has a shopping club where it offers the best discounts on the site. Therefore, the performance of this exclusive advantage club was bringing little result, and one of the conclusions was the user's navigation difficulty, as well as a very complicated process for the registration of segmentation of these products by e-commerce analysts.

In each product that the user has access to on the website, he finds the normal price and the price of the advantage club, if the product is registered in the club's catalog. However, in the previous format, there was no page only with the club's products, due to architectural error and lack of planning in the implementation.

Solution_

To solve this problem within the VTEX environment, you need a structure within the VTEX to group products. As these products belonged to several categories, it was very complicated to add products to the club.

API First_

ACCT created an integration system via API where it is possible to create an endpoint that will feed on a price list and shipped products, enabling the entire process to become automated and the curation of products with special conditions becomes automatic.

Dual Track_

During this project, ACCT implemented a methodology called Dual Track, which is an agile framework where the Experience Design and Development teams work a lot together. An example is that every time a design creates a screen, feature, or button, this collaborator has to validate with the software development team if that is something feasible and ideal, thus streamlining the process and avoiding rework, in addition to generating knowledge for both areas.

Customization in IO_

  • Landing page Meu Clube Minha Le
  • Clube Minha Le seal on the product shelf
  • Product Specifications
  • Bring more options for installments on the product page
  • Improvements in the communication of Clube Minha Le
  • Vertical department menu
  • Eleven custom department pages
  • Filters with images on category pages
  • Rotating banner with product spot
  • Institutional pages migration
  • Color and Size Selectors

Performance_

The customizations made by the ACCT team together with a more fluid and lightweight architecture, made this migration to VTEX IO surprisingly improved the website's performance.

With a more responsive menu, a more reliable code, in addition to more modern technology, the customer's e-commerce now has performance indicators far superior to those of the previous website, mainly in the following criteria:

  • Conversion rate
  • Charging time
  • Bounce rate
  • Time on page

Testimonial_

The feeling of mission accomplished remains, the learning of how important it is to plan, everyone involved is to be congratulated, the team had an excellent vision of the project and everyone was committed to doing the best for the project regardless of the complexity, we were able to apply the best practices maintaining a high level of quality in deliveries and following all the premises for a grandiose project.

Ricardo Carvalho

Ecommerce Manager at Lojas Le biscuit S/A

    Request a contact from us: