Обновление сайта Стройлон
Стройлон (ранее - Технодом) - один из самых опытных интернет-магазинов в Брянске. Он успешно существует уже 10 лет. Но время не стоит на месте технологии развиваются, тенденции меняются. Лидеры интернет торговли успешно идут с ними в ногу. Компания Стройлон не исключение. Было решено переработать, обновить сайт. Применить при этом новые технологии. Например: технологию Single Page Application (SPA)- на этой технологии работает Сбербанк, Альфа-банк, Озон, Wildreries, Ламода, Детский мир, Петрович и т.д.
Итак, перед нами стояли задачи:
1. Обновление дизайна. Требовалось создать современный дизайи, проработать вопросы удобства пользовательских сценариев, .
2. Сделать работу сайта более “гладкой”, комфортной, без полных перезагрузок страниц.
3. Упростить регистрацию покупателей. Переработать корзину и заказ. Сделать корзину с товарами бессрочной, а авторизацию вечной.
4. Избавиться от наследства в программном коде. Все что работает на старых технологиях и мешает развиваться
5. Увеличить «жизненный цикл» этой версии дизайна за счёт использования самых современных технологий.
6. Разработать фундамент в виде серверного API для будущего мобильного приложения.
Процесс
Мы пошли далеко вперед и применили передовые технологии, используемые крупными игроками рынка. Это связка платформы сайта 1С-Битрикс и фронтенд технологии React. 1C-Битрикс обеспечил надежную систему управления сайтом, интеграцию с 1С, поддержку работы пользователей, каталога товаров, цен и покупок. Благодаря React был создан современный интерфейс пользователя, близкий к качеству работы десктопных или мобильных приложений. Эта технология была разработана и применена Facebook и является лидером современного стека технологий. Все вместе это позволило нам значительно ускорить работу сайта, сделать работу пользователя с сайтом комфортной. Информация на страницах меняется быстро, не происходит полной перезагрузки страниц, обновляются только те части сайта, в которых меняется содержимое.Результат
Главная страница. Сайт Стройлон посещает большое количество разных пользователей нашей задачей было позаботиться обо всех и сделать переход от старого дизайна к новому плавным. Поэтому мы оставили привычное пользователям левое меню с категориями товара, верхнее меню, баннер. Основной новый элемент на главной страницы сайта- мини-«витрины» товаров. Эти витрины с карточками могут быть произвольными, создаваться и наполняться под сезон, акции, наиболее популярные товара. Витрины имеют большой маркетинговый потенциал. Иными словами позволяют сразу при посещении сайта показывать пользователю тот товар, продажа которого наиболее приоритетна для магазина. А для пользователя это прекрасная возможность быстро посмотреть предложения, быстро добавить в корзину, быстро купить.
Поиск и фильтры товара. Поиск был, пожалуй, основной проблемой старого сайта. Глобально поработали над алгоритмом и технологиями поиска. Обновились “мозги” поиска: теперь он быстро выдает точные результаты по введенному запросу. Страница с результатами поиска превратилась в настоящий каталог - с быстрыми фильтрами и облаком тегов. Теперь покупатель сразу может фильтровать товар по любой его характеристике , цене, категории.
Корзина и заказ - важные с точки зрения влияния на конверсию элементы. В результате предпроектных исследований была выработана концепция дизайна и функционирования корзины и заказа, которая должна была сделать процесс покупки понятным и логичным. Новая корзина разделена с оформлением товара, теперь товар в ней можно хранить бессрочно. Оформление товара из нагроможденных друг на друга пунктов в меню превратилось в 4 понятных этапа покупки: выбор способа получения заказа, информация о покупателе, Выбор способа оплаты, отслеживание состояния заказа.
Фишки
На новом сайте мы постарались учесть лучшие практики популярных интернет магазинов, сделали конкурентный анализ, постарались учесть опыт работы с существующими пользователями. Искали что могло бы усовершенствовать и упростить пользовательские сценарии работы с сайтом. Выявили несколько позитивных изменений, сосредоточились над деталями внедрения.
Реализована регистрация и авторизация по номеру телефона . Теперь пользователю не нужно помнить свой логин и пароль, достаточно указать номер телефона и подтвердить номер кодом из смс.
Кроме того, добавлена возможность авторизации на сайте по ссылкам из писем и SMS-сообщений с уведомлениями о новом заказе или изменении статуса заказа..
Сделана “вечная авторизация”. Пользователю достаточно один раз авторизоваться, в дальнейшем сайт помнит и знает покупателя и не попросить его ввести свои логин\пароль при последующих входах на сайт.
Если у покупателя была ранее заведена дисконтная карта магазина на тот же номер, который он указал при регистрации/авторизации, то информация с неё автоматически переносится в личный кабинет пользователя. После этого цены в магазине будут отображаться с учётом этой информации.
Помимо уже классической оплаты картой на сайте добавлена возможность оформления покупки в кредит за счет интеграции с сервисом “Покупай со Сбербанком”.
Используемые технические решения
React.js - интерфейс пользователя, фронтенд. Реализует архитектуру SPA (Single Page Application) использующей единственный HTML-документ как оболочку для всех веб-страниц и организующий взаимодействие с пользователем через динамически подгружаемые. Позволяет ускорить работу пользователя с сайтом, делает сайт более надежным и легко конвертируемым под разные устройства, а передачу данных безопасной.
Elastic Search - поисковый движок, на нем реализован поиска по каталогу, работа фильтров.
MongoDB - база данных для хранения нереляционных данных - комбинации фильтров, цены, остатки товаров.
