Задача
Разработать e-commerce сайт для компании Labrilliante, специализирующейся на продаже ювелирных изделий с выращенными бриллиантами. Проект должен быть адаптивным, с полноценной мобильной версией, высокой скоростью загрузки и интуитивным интерфейсом.
Особое внимание заказчик уделяет системе подбора бриллиантов с визуальными фильтрами, расширенной карточке товара и личному кабинету с возможностью резервирования камней. В дальнейшем планируется масштабирование и развитие конструктора изделий.
Подход
Мы начали с глубокой проработки отрасли: изучили UX лучших игроков B2C и B2B сегмента — от Brilliant Earth до Grown Diamond Corp. На основании их сильных решений сформулировали ядро пользовательского пути.
Чтобы ускорить старт разработки, взяли адаптивный HTML-шаблон с ThemeForest как техническую базу, но кардинально переработали его структуру и стили. Все пользовательские сценарии, включая фильтрацию, карточки товаров, регистрацию и личный кабинет, были реализованы с нуля и адаптированы под будущую интеграцию с CRM и внешними базами.
Ключевая часть работ велась вокруг модуля подбора камней — его логика, интерфейс и производительность были спроектированы как основа конкурентного преимущества платформы.
Что реализовано
Модуль подбора бриллиантов
Разработан кастомный фильтр с визуализацией, аналогичный интерфейсу Brilliant Earth, но с расширенной логикой.
Поддержка мгновенного предпросмотра (shape preview) по ключевым характеристикам.
Интерактивные ползунки и чекбоксы для огранки, размера, чистоты, цвета, насыщенности.
Отдельный режим выбора цветных камней, где можно выбрать сразу несколько оттенков и их насыщенность (цветовые чекбоксы).
Таблица результатов с возможностью сортировки, видео-просмотра и 3D-поворота камней прямо в таблице.
Интерактивное сравнение: пользователь может отмечать интересующие камни и сравнивать их между собой.
Гибкая логика отображения — если данных (например, сертификата или видео) нет, элементы автоматически скрываются.
Высокая производительность фильтра при больших объемах данных (оптимизация под тысячи записей).
Карточка товара
Страница с характеристиками бриллианта:
Фото, визуализация формы, шкала размера.
Автоматическое скрытие неактуальных блоков (например, при отсутствии видео или сертификата).
Раздел происхождения, раздел похожих камней.
Опциональный блок с примеркой на руке (прототип реализован).
Кнопка "Add to ring" скрыта до запуска конструктора изделий.
Личный кабинет
Подключение к отдельной БД для хранения внутренних данных камней:
Интерфейс таблицы с фильтрами аналогичен публичному, дополнен фильтрацией по статусу камня (доступен, зарезервирован и т.д.).
Система бронирования с проверкой лимита (до 20 камней), подтверждением через email и уведомлением в мессенджер.
Таблица автоматически обновляется при изменении статуса камней, обеспечивает быстрый отклик и масштабируемость.
Интерфейс и макеты проекта
Результат
-
Полностью адаптивный сайт с загрузкой страниц до 2 секунд.
-
Один из самых продвинутых фильтров подбора бриллиантов среди конкурентов.
-
Детализированная карточка товара с мультимедийным контентом и автоматическим управлением блоками.
-
Личный кабинет с фильтрацией, резервированием и системой уведомлений.
-
Структура сайта готова к масштабированию: можно добавлять разделы, фильтры, конструктор изделий без переработки архитектуры.
Другие проекты
