Маркетплейс полудрагоценных камней с онлайн-аукционом

Проект: Stone Heart
Сайт: stoneheart.topman.site
Тематика: маркетплейс полудрагоценных камней
CMS: 1С-Битрикс
Формат: разработка сайта с нуля

Задача

Перед нами стояла задача разработать сайт с нуля и создать онлайн-представительство бренда Stone Heart.

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

• представить бренд Stone Heart в сети;
• показать ценность природных полудрагоценных камней;
• сделать удобный каталог товаров с фильтрами;
• реализовать карточку товара с большим количеством характеристик;
• дать пользователю возможность добавлять товары в избранное и корзину;
• предоставить удобный личный кабинет;
• дать возможность приобрести камень на аукционе;
• позволить пользователю удобно отслеживать статусы через уведомления и почтовые шаблоны;
• быть удобным для мобильных устройств;
• иметь универсальную структуру сайта под дальнейшее развитие.

Отдельная сложность была в том, что аудитория проекта достаточно разная.

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

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

Решение

Мы разработали сайт на базе 1C-Битрикс с каталогом, личным кабинетом, корзиной, избранным, страницами контента и отдельным функционалом аукциона.

В рамках проекта были выполнены следующие работы:

Разработали техническое задание и структуру сайта

На этапе подготовки описали требования к сайту, ролям пользователей, каталогу, аукциону, личному кабинету, корзине, оформлению заказа, почтовым шаблонам, адаптивности и безопасности. В ТЗ были зафиксированы требования к адаптивной верстке, кроссбраузерности, бэкапированию, защите от SQL-инъекций, SEO-настройкам URL, Title, метатегов и структуры заголовков.

Спроектировали структуру сайта

В структуру вошли главная страница, каталог, карточка товара, статьи, корзина, избранное, личный кабинет, аукцион, контакты, 404-страница и служебные страницы.

Отрисовали дизайн ключевых страниц

Были подготовлены макеты главной, каталога, категории, подкатегории, карточки товара, карточки аукциона, личного кабинета, корзины, оформления заказа, статей, новостей, контактов, 404 и других страниц.

Разработали каталог товаров

Каталог сделали с категориями, подкатегориями, фильтрами, сортировкой, карточками товаров, избранным и выводом характеристик.

Разработали детальную карточку товара

Карточка товара должна была подробно раскрывать камень: фото, характеристики, цену, наличие, описание, поставщика, огранщика, происхождение, похожие камни и недавно просмотренные товары.

Реализовали функционал аукциона

Аукцион был одной из ключевых частей проекта. Нужно было предусмотреть прямой аукцион с повышением ставок и обратный аукцион с понижением стоимости товара. Логика строилась на базе модуля tarakud.auction, а товары для аукциона должны были наполняться отдельно от основного каталога.

Разработали личный кабинет

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

Настроили корзину и оформление заказа

Использовали стандартные компоненты 1C-Битрикс. В оформлении заказа предусмотрели доставку, оплату, данные покупателя, юридические лица, промокоды и разные сценарии покупки.

Подготовили почтовые шаблоны

Были предусмотрены письма для регистрации, оформления заказа, отгрузки, самовывоза, подтверждения ставки, перебитой ставки, победы в аукционе и завершения аукциона для проигравших участников.

Сделали адаптивную версию

Отдельно проработали мобильное отображение главной, каталога, фильтров, карточки товара и аукциона.

Погружение в проект и разработка технического задания

Начали с того, что разобрали саму идею проекта.

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

Поэтому на этапе ТЗ нужно было зафиксировать не только стандартный функционал магазина, но и особенности именно этой тематики. В техническом задании описали:

• общие требования к сайту;
• требования к безопасности;
• роли пользователей;
• работу с каталогом;
• импорт товаров из 1С;
• SEO-требования;
• структуру страниц;
• функциональные требования к каталогу;
• личный кабинет;
• корзину и оформление заказа;
• аукцион;
• почтовые шаблоны;
• служебные и контентные страницы.

Отдельно были заложены требования к SEO-базе: ЧПУ-адреса, возможность редактировать Title и другие метатеги, корректная структура заголовков, единообразные URL и автоматическая конвертация изображений в webp. Это важно, потому что даже на этапе разработки сайта нужно думать не только о внешнем виде, но и о том, как сайт будет жить дальше в поиске.  

Проектирование структуры

Следующим шагом была структура.

На схеме сайт строился вокруг главной страницы, от которой расходились основные разделы:

• о компании;
• каталог товаров;
• статьи;
• корзина;
• избранное;
• сравнение;
• личный кабинет;
• 404;
• контакты.

У каталога была предусмотрена карточка товара, у статей — детальная страница статьи, а у личного кабинета — отдельные подразделы: личные данные, текущие заказы, история заказов и аукцион.

Здесь было важно сразу заложить понятную логику: пользователь может прийти на сайт с разной задачей. Один хочет посмотреть каталог, второй — участвовать в аукционе, третий — изучить компанию, четвертый — вернуться в личный кабинет и посмотреть свои заказы.

Поэтому структура должна была быть не просто полной, а удобной для разных сценариев поведения.

Дизайн главной страницы

Главная страница должна была представить проект и сразу показать его характер.

Stone Heart — это про природные камни, визуальность, доверие и ощущение редкости. Поэтому дизайн нельзя было делать слишком «магазинным» или перегруженным. Важно было сохранить ощущение премиальности, но при этом не потерять удобство. На главной предусмотрели:

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

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

Разработка каталога товаров

Каталог — одна из самых важных частей проекта.

Для покупателя камня важны не только цена и фото. Ему нужны характеристики: вид камня, вес, огранка, цвет, происхождение, качество огранки, чистота, облагораживание и другие параметры.

Поэтому каталог должен был позволять быстро сузить выбор и найти подходящий камень. На страницах каталога предусмотрели:

• категории и подкатегории;
• карточки товаров;
• фильтр по параметрам;
• сортировку;
• избранное;
• отображение цены, скидки и веса;
• адаптивную версию.

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

Проработка карточки товара

Карточка товара в этом проекте должна была работать как полноценная презентация конкретного камня.

Для обычного товара иногда достаточно фото, цены и кнопки «купить». Но здесь так не получится. Камень — это уникальный объект. Пользователь должен иметь возможность рассмотреть его, изучить параметры и понять, почему он стоит именно столько. В карточке товара предусмотрели:

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

Важный момент — карточка должна была быть удобной и на десктопе, и на мобильных устройствах. Потому что в такой тематике пользователь может сначала просто «залипнуть» в каталог с телефона, сохранить понравившиеся позиции, а уже позже вернуться к покупке.

Реализация аукциона

Аукцион — ключевой функциональный блок проекта.

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

По заданию товару устанавливается признак «аукцион», задаются минимальный и максимальный шаг ставки, а также время проведения. Пользователь видит лот и может сделать ставку, но только после авторизации. Каждая следующая ставка перебивает предыдущую, а после окончания аукциона победитель получает уведомление.

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

Это правильный подход для дорогих и уникальных товаров. Менеджер сохраняет контроль над финальным этапом сделки, может уточнить детали, подтвердить условия и только после этого отправить оплату. На сайте были предусмотрены:

• список аукционных товаров;
• карточка аукциона;
• состояние карточки без авторизации;
• состояние карточки для авторизованного пользователя;
• сохраненные аукционы в личном кабинете;
• история ставок;
• уведомления по ставкам;
• уведомления о победе и завершении аукциона.

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

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

• личные данные;
• избранное;
• историю заказов;
• текущие заказы;
• сохраненные аукционы;
• восстановление пароля;
• регистрацию и авторизацию.

Для пользователя это важная точка возврата на сайт. Особенно если он участвует в аукционе или выбирает камень не сразу, а возвращается к сохраненным позициям.

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

Корзина, оформление заказа и интеграционная логика

Для покупки товаров использовали стандартную логику 1C-Битрикс. В корзине предусмотрели:

• список товаров;
• фото;
• название;
• цену;
• скидку;
• характеристики;
• итоговую сумму;
• возможность удалить товар;
• переход к оформлению заказа.

На этапе оформления заказа учитывались разные сценарии: физические лица, юридические лица, доставка, самовывоз, онлайн-оплата, счет для юрлиц, промокоды.

Отдельно по ТЗ предусматривался обмен с 1С: каталог товаров загружается из 1С, а дальше по расписанию обновляются цены, остатки и заказы. Наполнение карточек товаров выполняется на стороне 1С.

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

Почтовые шаблоны и уведомления

Для проекта были важны уведомления, потому что пользователь взаимодействует с сайтом не только в момент покупки.

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

• успешная регистрация;
• заказ оформлен;
• заказ отгружен;
• заказ ожидает в шоуруме;
• ставка принята;
• ставка перебита;
• пользователь победил в аукционе;
• аукцион завершился для проигравших участников.

Для всех шаблонов должен был использоваться единый визуальный стиль письма: общая шапка, подвал и индивидуальное тело письма под конкретное событие.

Это важная часть пользовательского опыта. Особенно в аукционе, где человеку нужно быстро понимать, что происходит с его ставкой.

Адаптивная версия

Отдельное внимание уделили мобильной версии.

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

• шапку;
• меню;
• каталог;
• фильтры;
• карточки товаров;
• карточку товара;
• карточку аукциона;
• личный кабинет.

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

Результат

Основная часть проекта была разделена на три этапа:

• Задание 1 — разработка технического задания и дизайн сайта
  Срок: 30 рабочих дней
• Задание 2 — верстка и программирование макетов
  Срок: 47 рабочих дней
• Задание 3 — тестирование, внесение правок от заказчика, перенос на хостинг заказчика
  Срок: 15 рабочих дней

По трудозатратам проект получился достаточно объемным:

• прототипирование — 9 часов;
• дизайн — 95,25 часа + 10,2 часа по дополнительному соглашению;
• верстка и адаптив — 80,2 часа + 21,09 часа + 8 часов по дополнительному соглашению;
• программирование — 96,75 часа + 11 часов по дополнительному соглашению;
• наполнение — через 1С.

Итого: 302,29 часа + 29,2 часа по дополнительному соглашению.

В результате был разработан сайт Stone Heart — интернет-платформа для продажи природных полудрагоценных камней с каталогом, личным кабинетом, корзиной, избранным и функционалом аукциона. Что получилось реализовать:

• сайт с нуля на 1C-Битрикс;
• адаптивный дизайн;
• каталог товаров с фильтрами и сортировкой;
• детальные карточки товаров;
• отдельный раздел аукциона;
• прямую и обратную логику аукционных продаж;
• личный кабинет пользователя;
• сохраненные аукционы;
• избранное;
• корзину и оформление заказа;
• страницы статей и новостей;
• контакты;
• 404-страницу;
• контентные страницы;
• cookie-уведомление;
• всплывающую форму заявки;
• favicon и картинку репоста;
• почтовые шаблоны;
• базовые SEO-требования;
• интеграционную логику с 1С по каталогу, ценам, остаткам и заказам.

Самое важное — сайт получился не просто витриной камней, а полноценной площадкой, которая отражает идею бренда.

Stone Heart говорит не только «у нас можно купить камень». Он показывает, что за каждым камнем есть происхождение, сертификат, мастер, поставщик и история. А за счет аукционного функционала покупка превращается не в обычное добавление товара в корзину, а в более вовлекающий сценарий выбора уникального лота.