Разработка маркетплейса полудрагоценных камней с аукционом stonehearts.ru

Перед нами стояла задача разработать сайт с нуля и создать онлайн-представительство бренда 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 говорит не только «у нас можно купить камень». Он показывает, что за каждым камнем есть происхождение, сертификат, мастер, поставщик и история. А за счет аукционного функционала покупка превращается не в обычное добавление товара в корзину, а в более вовлекающий сценарий выбора уникального лота.