После разработки первого проекта многие заказчики приходят к нам за вторым и третьим. Так было и в этот раз. В 2017 году мы разработали сайт для бренда деревянных пазлов DaVICI, а в конце 2020-го сделали его редизайн. Заказчик пришел к нам за еще одним сайтом для своей группы компаний, в это раз — для кондитерской фабрики.

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

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

При этом было важно запустить сайт не как MVP (минимальный жизнеспособный продукт), а как MLP (минимальный привлекательный продукт). Так что упор был на юзабилити и дизайн страниц, которые шли в работу на каждом этапе.

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

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

Чтобы усилить эффект — проиллюстрировали начинки параллаксом. Их много, и при добавлении новой конфеты их можно легко выбирать из админ-панели. В сайт «зашито» 17 (семнадцать!) вкусов:

Плюс к каждой начинке можно добавить шоколад или использовать шоколад отдельно.

Чтобы согласовать, как будут выглядеть конфеты на сайте, нам потребовалось несколько итераций. Мы хотели сделать акцент на натуральность: в первой версии дизайна показывали текстуру конфет, пористость, раскрошенный шоколад. У заказчика в голове, напротив, была идеально отфотошопленная картинка: «Фотографии должны быть лучше. Без мятых упаковок, а в разрезе — без поломанного шоколада. Именно от этого визуала зависит „съедобность“ конфетки».

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

Даже рисовали на бумаге: как выставить угол камеры, как поставить на штатив и в какое место нужно класть конфетку.

Готовые фотографии дополнительно обрабатывали, чтобы все фото на сайте были в едином стиле.

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

Когда мы рисовали дизайн, у нас была идея: при наведении на карточку товара показывать конфеты в развёрнутом виде. Чтобы ее воплотить, заказчик сфотографировал весь ассортимент конфет в двух состояниях: в фантике и развернутые: разрезанные пополам, чтобы показать начинку. На этапе верстки мы сохранили эти фотографии в формат png и с помощью CSS свойства (filter: drop-shadow ();) сделали тени. За счет этого тени вышли максимально однотипными, а ретушь фотографий получилось значительно упростить.

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

Товары должны были как-то появиться на сайте. Заказчик не успел привести в порядок 1С, она находилась в процессе настройки. Сайт надо было запускать без интеграции, а интеграцию с ERP оставить на второй этап.

Вариант ручного ведения каталога через админ-панель откинули как излишне трудоемкий для заказчика (выделенного сотрудника для этой задачи не было). Нам пришлось экстренно подбирать решение, которое автоматически загрузит каталог на сайт, без усилий контент-менеджера. В итоге решили сделать загрузку товаров в каталог из файла с помощью модуля Битрикса «Экспорт/Импорт товаров в Excel».

Для первичной загрузки каталога мы подготовили таблицу в Excel со всеми свойствами всех товаров. Сладости могут быть в разной фасовке (кому-то 200 грамм уже много, а кому-то — мало и пары килограмм) — это тоже учли. Загрузка прошла успешно.