vici

• Роль. Единственный дизайнер в команде, отвечал за весь дизайн сайта.

• Срок. 4 месяца.

• Старт. Редизайн после ребрендинга: прежний сайт не приводил людей к покупке продукции бренда.

• Что сделал. Исследование, информационную архитектуру, макеты для всех устройств, дизайн-систему и схему связей рецептов с товарами.

• Итог. Сайт на новом дизайн-коде бренда под все устройства и готовая схема связей контента для разработки.

Разработать минималистичный дизайн сайта на базе нового дизайн-кода бренда и адаптировать его под все устройства.

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

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

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

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

Контекст. С сайтом часто сверяются с телефона, стоя у полки. Вывод: мобильная версия должна быть удобной одной рукой.

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

А — красивый каталог. Обновить витрину по новому дизайн-коду. Сайт станет современнее, но тупики останутся.

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

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

Выбрал В: только он одновременно растит время на сайте и превращает его в покупку на полке. Риск — для производителя это смена роли сайта, из витрины в журнал; это я защищал перед клиентом.

Рецепт, который никуда не вёл. В первой версии макетов я сосредоточился на новом дизайн-коде и сохранил структуру старого сайта: продукция и рецепты жили отдельно. Когда я собрал прототип и прошёл по нему сценарий покупателя «ищу идею ужина → понимаю, что купить», путь обрывался в конце рецепта — от блюда нельзя было перейти к товару, а из карточки товара — к идее, что с ним приготовить.

Так появилась двусторонняя связка каталога и рецептов и рекомендации в конце рецепта — главное решение проекта.

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

Показал клиенту путь от поведения покупателей к решениям.

Как сайт без корзины продаёт. Главный вопрос клиента — как понять, что сайт работает на офлайн-продажи. Аргумент: измеряем скрытую конверсию — переходы из рецептов в карточки товаров, глубину просмотра, время на сайте и повторные визиты с телефона. Рецепты в центре, а не каталог. Люди приходят за идеей ужина, и именно она приводит их к полке.

Макеты передал системно: экраны и состояния собраны на Auto Layout и привязаны к UI-киту, анимации прокомментированы. Вместе с макетами разработчики получили схему связей контента — какие рецепты к каким товарам ведут.

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

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

Продуктовые — как работает продукт и как с ним взаимодействуют

• Петля «товар ↔ рецепт» вместо тупиков: из любого рецепта можно перейти к товару и обратно. Рассчитано на скрытую конверсию — переходы из рецептов в карточки товаров.

• Рекомендации в конце рецепта: сессия не обрывается на одной странице. Рассчитано на глубину просмотра и время на сайте.

• Теги по сценариям: «быстро», «на завтрак», «из морепродуктов». Рассчитано на снижение отказов.

• Лёгкая мобильная версия для магазина: одной рукой, быстро грузится по слабому интернету. Рассчитано на повторные визиты с телефона.

Коммуникационные — как продукт доносит ценность до аудитории

• Бренд продаёт блюдо, а не продукт: сайт говорит языком кулинарного журнала — идеи ужина, завтраки, праздничный стол.

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

• Новый образ бренда: воздушный минималистичный UI и эстетика еды рассчитаны на то, чтобы уйти от ассоциаций с «дешёвой заморозкой» и стать ближе молодой аудитории.

• Читаемость: после правки голубого тексты и ссылки уверенно читаются на любом экране.