Beautyled — интернет-магазин декоративного освещения

Beautyled — один из крупнейших магазинов светотехнической продукции в России.

Компания Beautyled занимается изготовлением светодиодных систем декоративного освещения, праздничным световым оформлением объектов любой сложности, а также поставкой и продажей светодиодных гирлянд, комплектующих и другой светотехнической продукции.

Цель проекта

  • Сделать редизайн старого сайта.

Инструменты

Язык разметки HTML
CSS — каскадные таблицы стилей
Язык программирования Ruby
Фреймворк Ruby on Rails
Поисковая система ElasticSearch
Библиотека React
PostgreSQL — объектно-реляционная СУБД
Система сборки WebPack
Библиотека MobX
СУБД Redis
Axure RP
Figma
Adobe Photoshop
Язык программирования JavaScript
Библиотека MobX State Tree
SASS

Адаптивный дизайн

Иконки категорий каталога

Главная страница

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

Каталог

По просьбе заказчика для страницы каталога под каждую категорию была создана индивидуальная иконка. Все товары в калоге можно отфильтровать по ряду характеристик (цена, количество светодиодов, цвет и так далее).

Карточка товара

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

Корзина

Оформление заказа разбито на два шага, на первом шаге пользователь видит список всех добавленных в корзину товаров. Если в корзине все верно, он переходит к следующему. Здесь же важно напомнить покупателю о товарах в избранном, и, возможно, он добавит их в корзину.

На втором шаге пользователь может моментально заполнить поля данными из профиля, выбрать способ доставки и уже после этого завершить оформление заказа.

Личный кабинет

В личном кабинете хранятся данные о пользователе — его имя и адрес доставки. Если адрес доставки не один, это не проблема, потому что всегда можно добавить дополнительный. Кроме того, пользователь может просматривать историю заказов и менять пароль от личного кабинета.

История заказов

Активные заказы расположены вверху страницы, а завершенные — внизу в свернутом виде.

Страница оформленного заказа

Оформив заказ, пользователь видит эту страницу — все по канонам юзабилити: здесь представлены сообщение об успешном оформлении, а также список всех товаров, которые были заказаны.

Калькулятор гирлянд

На сайте есть очень удобный калькулятор для расчета количества гирлянд. Стоит отметить, что в зависимости от способа украшения ели метраж существенно меняется, и в калькуляторе это учтено.