Как про­из­во­ди­телю рыбы пере­стро­ить сайт под опто­вых кли­ен­тов

О клиенте

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

С чем к нам пришли

Главные деньги компании приносят оптовые клиенты, а сайт разговаривал с ними на языке розничного магазина. На первом экране — красивое фото сёмги с соусом и надпись «Собственное производство», ниже — пара пельменей в блоке «Новинки». Владельцу кафе или закупщику сети было непонятно, работают ли здесь с бизнесом, на каких условиях и куда обращаться.

Были и другие проблемы:

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

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

Как мы работали

1. Разобрались, кто и что ищет

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

Ещё посмотрели сайты конкурентов из Ярославля и крупных федеральных поставщиков рыбы: какие блоки у них есть, что пишут оптовикам, как показывают документы. Лучшие идеи взяли в работу.

2. Перестроили главную страницу под оптовиков

Новый первый экран сразу говорит, чем компания полезна бизнесу: «Рыба и морепродукты для вашего бизнеса», две кнопки — «Получить оптовый прайс» и «Позвонить», и три коротких факта: работаем с 2002 года, собственный цех, документы «Меркурий» и ХАССП. Ниже — блок «Кому поставляем» с карточками для кафе, магазинов и интернет-магазинов, витрина товаров с живыми ценами из каталога, документы для закупщиков и отдельный блок про розничный магазин в Ростове Великом.

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

3. Сделали отдельные страницы для каждого типа клиентов

У ресторана, сети магазинов и интернет-магазина разные вопросы. Ресторану важны стабильный размер стейка, нарезка под меню и отсрочка платежа. Магазину — ходовой ассортимент, фасовка под витрину и наценка. Интернет-магазину — фотографии и характеристики для карточек, работа без собственного склада. Поэтому вместо одной страницы «Оптовикам» появился раздел «Клиентам» и четыре страницы: для кафе и ресторанов, розничных магазинов, интернет-магазинов и частных покупателей.

На каждой странице — свои условия и подборка товаров, блок «Честная рыба — никаких подмен» (не продаём минтай под видом трески), календарь сезонности, рассказ о производстве и ответы на частые вопросы. Чтобы страницы запоминались, на первом экране у каждой «живёт» своя рыба: сёмга виляет хвостом, треска шевелит плавником, кальмар покачивает щупальцами, креветка перебирает лапками. Анимация лёгкая и отключается, если в настройках телефона выбран режим без движения.

4. Собрали каталог на одной странице

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

5. Навели порядок в мелочах

Убрали плашку «Сайт на стадии разработки», растянули сайт на всю ширину экрана, упростили шапку и главное меню: пункты «Рыба», «Полуфабрикаты» и «Морепродукты» стали кликабельными, «Оптовикам» ведёт на страницы для бизнеса. Добавили «хлебные крошки», чтобы посетитель понимал, где находится. Нашли и передали клиенту список противоречий на сайте: цены в названиях товаров, ссылку баннера на несуществующий раздел, два счётчика Метрики, которые считали одно и то же.

6. Проверили на всех экранах

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

Чем мы занимались

• Доработка и редизайн сайта
• Технический аудит и анализ спроса
• Анализ конкурентов
• Подготовка текстов и изображений

Что получилось

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

С какими сложностями столкнулись

Фотографии рыбы

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

Единый стиль фотографий каталога

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

Планшеты

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

Весь новый сайт собран на тестовом стенде: клиент смотрит и согласовывает каждую страницу до того, как её увидят покупатели. Следующий шаг — перенос на основной адрес и запуск рекламы на страницы для оптовиков.