Обновление сайта Стройлон

Брянск, 14 Сентября 2021

Стройлон (ранее - Технодом) - один из самых опытных интернет-магазинов в Брянске. Он успешно существует уже 10 лет. Но время не стоит на месте технологии развиваются, тенденции меняются. Лидеры интернет торговли успешно идут с ними в ногу. Компания Стройлон не исключение. Было решено переработать, обновить сайт. Применить при этом новые технологии. Например: технологию Single Page Application (SPA)- на этой технологии работает Сбербанк, Альфа-банк, Озон, Wildreries, Ламода, Детский мир, Петрович и т.д.

Итак, перед нами стояли задачи:

1. Обновление дизайна. Требовалось создать современный дизайи, проработать вопросы удобства пользовательских сценариев, .
2. Сделать работу сайта более “гладкой”, комфортной, без полных перезагрузок страниц. 

3. Упростить регистрацию покупателей. Переработать корзину и заказ. Сделать корзину с товарами бессрочной, а авторизацию вечной. 

4. Избавиться от наследства в программном коде. Все что работает на старых технологиях и мешает развиваться

5. Увеличить «жизненный цикл» этой версии дизайна за счёт использования самых современных технологий.

6. Разработать фундамент в виде серверного API для будущего мобильного приложения.


Процесс

Мы пошли далеко вперед и применили передовые технологии, используемые крупными игроками рынка. Это связка платформы сайта 1С-Битрикс и фронтенд технологии React. 1C-Битрикс обеспечил надежную систему управления сайтом, интеграцию с 1С, поддержку работы пользователей, каталога товаров, цен и покупок. Благодаря React был создан современный интерфейс пользователя, близкий к качеству работы десктопных или мобильных приложений. Эта технология была разработана и применена Facebook и является лидером современного стека технологий.  Все вместе это позволило нам значительно ускорить работу сайта, сделать работу пользователя с сайтом комфортной. Информация на страницах меняется быстро, не происходит полной перезагрузки страниц, обновляются только те части сайта, в которых меняется содержимое.

Результат

Главная страница. Сайт Стройлон посещает большое количество разных пользователей нашей задачей было позаботиться обо всех и сделать переход от старого дизайна к новому плавным. Поэтому мы оставили привычное пользователям левое меню с категориями товара, верхнее меню, баннер. Основной новый элемент на главной страницы сайта- мини-«витрины» товаров. Эти витрины с карточками могут быть произвольными, создаваться и наполняться под сезон, акции, наиболее популярные товара. Витрины имеют большой маркетинговый потенциал. Иными словами позволяют сразу при посещении сайта показывать пользователю тот товар, продажа которого наиболее приоритетна для магазина. А для пользователя это прекрасная возможность быстро посмотреть предложения, быстро добавить в корзину, быстро купить. 

Поиск и фильтры товара. Поиск был, пожалуй, основной проблемой старого сайта. Глобально поработали над алгоритмом и технологиями поиска. Обновились “мозги” поиска: теперь он быстро выдает точные результаты по введенному запросу. Страница с результатами поиска превратилась в настоящий каталог - с быстрыми фильтрами и облаком тегов. Теперь покупатель сразу может  фильтровать товар по любой его характеристике , цене, категории. 


Корзина и заказ - важные с точки зрения влияния на конверсию элементы. В результате предпроектных исследований была выработана концепция дизайна и функционирования корзины и заказа, которая должна была сделать процесс покупки понятным и логичным. Новая корзина разделена с оформлением товара, теперь товар в ней можно хранить бессрочно. Оформление товара из нагроможденных друг на друга пунктов в меню превратилось в 4 понятных этапа покупки:  выбор способа получения заказа, информация о покупателе, Выбор способа оплаты, отслеживание состояния заказа. 



Фишки

На новом сайте мы постарались учесть лучшие практики популярных интернет магазинов, сделали конкурентный анализ, постарались учесть опыт работы с существующими пользователями. Искали что могло бы усовершенствовать и упростить пользовательские сценарии работы с сайтом. Выявили несколько позитивных изменений, сосредоточились над деталями внедрения.

Реализована регистрация и авторизация по номеру телефона . Теперь пользователю не нужно помнить свой логин и пароль, достаточно указать номер телефона и подтвердить номер кодом из смс.

Кроме того, добавлена возможность авторизации на сайте по ссылкам из писем и SMS-сообщений с уведомлениями о новом заказе или изменении статуса заказа..

Сделана “вечная авторизация”. Пользователю достаточно один раз авторизоваться, в дальнейшем сайт помнит и знает покупателя и не попросить его ввести свои логин\пароль при последующих входах на сайт. 

Если у покупателя была ранее заведена дисконтная карта магазина на тот же номер, который он указал при регистрации/авторизации, то информация с неё автоматически переносится в личный кабинет пользователя. После этого цены в магазине будут отображаться с учётом этой информации. 

Помимо уже классической оплаты картой на сайте добавлена возможность оформления покупки в кредит за счет интеграции с сервисом “Покупай со Сбербанком”.


Используемые технические решения

1С-Битрикс - серверная часть, API, система администрирования контента, обмен с 1С, интеграция с платежным шлюзом Сбербанк, сервисом кредитования “Покупай со Сбербанком”.

React.js - интерфейс пользователя, фронтенд. Реализует архитектуру SPA (Single Page Application)  использующей единственный HTML-документ как оболочку для всех веб-страниц и организующий взаимодействие с пользователем через динамически подгружаемые. Позволяет ускорить работу пользователя с сайтом, делает сайт более надежным и легко конвертируемым  под разные устройства, а передачу данных безопасной.

Elastic Search - поисковый движок, на нем реализован поиска по каталогу, работа фильтров.

MongoDB  - база данных для хранения нереляционных данных - комбинации фильтров, цены, остатки товаров. 




comments
Заказатьаудит сайта
x