Оптовый сайт Tasty Coffee за 3 месяца

Tasty Coffee — крупнейший производитель и поставщик свежеобжаренного кофе в сегменте HoReCa. Они начали с одной кофейни, а сегодня их продукцию знают по всей России — бренд активно открывает новые точки; в Ижевске недавно открылась первая кофейня с собственной выпечкой. Бренд экспериментирует с обжаркой, упаковкой и подачей, уделяет внимание качеству и экологии.

В 2023 году компания обновила свою айдентику: новый логотип, упаковка и дизайн. Следующим шагом было обновление оптового сайта tastycoffee.ru, чтобы он соответствовал новой айдентике и подчеркивал ценности компании.

Дизайн разработала Студия Артемия Лебедева, а верстку и сборку сайта доверили нам, диджитал продакшну Nutnet. Старый сайт уже не соответствовал новой айдентике, поэтому требовалось полностью переработать его концепцию, логику и внешний вид.

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

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

Также был бэкенд на стороне клиента и дизайнеры в студии Лебедева. В сумме над проектом работали три стороны.

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

В рамках поддержки и развития клиента:

1. Разработать интерактивную карту кофеен — партнёры и клиенты должны видеть точки, где подают свежий кофе от Tasty Coffee.

2. Запустить англоязычную версию сайта для выхода на международные рынки.

Перед тем как приступить к коду, мы детально разобрали проектные риски. Какие были вызовы:

— Объем и сложность. Около 1 500 часов работы на команду из 5 человек за 3 месяца.

— Стороны проекта. Участвовали мы (Nutnet), Студия Лебедева (дизайн), Tasty Coffee (клиент) и бэкенд-команда на стороне заказчика.

— Технологический сдвиг. До старта клиент принял решение перейти с React на Vue, что для фронтенда означало адаптацию стека.

— Требовательный клиент. Tasty Coffee уделяет внимание мелочам. Множество правок и доработок было ожидаемо, нужно было выстроить процесс так, чтобы не потеряться в потоке задач и замечаний.

Мы использовали SCRUM. Разбили работу на итерации, чтобы видеть прогресс и при необходимости менять приоритеты. Ввели три потока задач:

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

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

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

Спланировали регулярные точки контроля:

— Ежедневные созвоны для команды: что сделано, что планируем, где возникли проблемы?

— Еженедельные демо для команды: показывали прогресс, сверялись с планом на следующую неделю.

— Раз в 2 недели показ клиенту: обновляли демо-стенд, демонстрировали результаты и получали обратную связь.

— Раз в месяц подводили итоги, смотрели на экономику проекта и корректировали стратегию.

Мы заранее определили, что должно быть к сроку обязательно (MVP), а что можно доделать после запуска. Если появлялась новая задача или срочная правка, мы понимали, как не сорвать дедлайн. Так мы смогли контролировать риски и быстро реагировать на любые изменения.

Сначала мы изучили, как выглядел старый сайт, который уже не соответствовал новой айдентике:

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

Почему анимации?

Отвечает Александр Мирешкин, руководитель проектного офиса:

«Анимация с зернами была придумана, чтобы стандартную страницу в духе „Мы 10 лет на рынке“ превратить в красивое и залипательное повествование, наглядно представляющее развитие Tasty. Анимация оживляет контент, делая сайт визуально привлекательнее и даёт ощущение wow-эффекта. Даже презентация нового визуального стиля для сайта была в виде видео. Это было классно — поэтому мы приняли решение так делать весь проект».

Как мы действовали:

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

2. Выбрали инструменты. Использовали Vue.js и Nuxt.js для фронтенда, а для анимаций — специальные библиотеки. Например, nuxt-aos (для появления элементов) и параллакс-библиотеки (для движения объектов при прокрутке).

3. Реализовали падение кофейных зерен. Сначала зерна падали слишком быстро, потом хаотично… Четыре раза меняли логику, пока не получили плавный и понятный визуальный эффект.

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

Оптимизировали изображения и код. Сжали картинки, перевели их в WebP, настроили lazy loading. Минифицировали CSS и JS, удалили лишний код.

Проверили на разных устройствах. Сайт не тормозит даже при обилии анимации.

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

Благодаря этому удалось сохранить значок «Задизайнено в Студии Лебедева». Если бы дизайн реализовали не так, как задумывала студия, этот логотип могли бы убрать.

Разработали две игры для сайта Tasty Coffee, чтобы сделать его интерактивным и вовлечь пользователей. Игры развлекают и показывают, как мы производим кофе: от выбора зерна до обжарки.

Технологически игры реализованы с помощью Vue.js/Nuxt.js, что обеспечивает стабильную работу на разных устройствах и браузерах.

Первая игра — «Игра вкуса»

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

Вторая игра — «Колорсортер» 

Демонстрирует, как Tasty Coffee сортирует зерна по качеству. Пользователям предлагается найти дефектные зёрна среди качественных, сортируя их как настоящий колорсортер. В конце игры — промокод.

Почему именно игра, а не статья или видео?

Отвечает Александр Мирешкин, руководитель проектного офиса:

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

Интегрировали сайт с CRM

У Tasty Coffee была своя CRM. Нужно было «подружить» её с новым сайтом:

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

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

— Обновление динамических элементов (новости, товары, акции) без сбоев и задержек.

Согласовали форматы данных, способы передачи и проверили всё совместно с инхаус-командой заказчика.

Оптимизировали и ускорили загрузку

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

— Сжали изображения, перевели их в WebP, устранили лишние области.

— Включили Lazy loading для медиа (изображения, видео, слайдеры).

— Минифицировали CSS и JS, удалили лишний код, включили gzip-сжатие.

— Проверили на слабых устройствах, доработали анимации.

Результат — быстрая загрузка и высокие показатели Lighthouse и SEO, без ущерба дизайну.

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

Англоязычная версия

— Статичные страницы перевели вручную, чтобы сохранить фирменный стиль.

— Динамические данные (новости, товары) подключили к Google Translate API, а затем клиент скорректировал автоматический перевод.

— Убрали блоки, актуальные только для российского рынка (например, карту кофеен), сделав англоязычную версию компактной и понятной.

Создали карту кофеен

Это интерактивная карта на базе API Яндекс Карт, которая показывает, где можно попробовать свежий кофе Tasty Coffee:

Как работает карта:

— Автоматическое управление точками. Если партнёр перестаёт закупать кофе или срок обжарки зерна истекает, точка исчезает.

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

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

Что даёт карта бизнесу? Зачем она нужна?

Отвечает Иван Лощёнов, операционный директор Nutnet:

«Внутренняя команда Tasty Coffee — кладезь изобретательных идей. Мне очень нравится карта кофеен с бизнесовой точки зрения, потому что она оказывает полезное действие сразу на три сегмента:

Любители кофе — они могут найти хороший кофе рядом, даже если находятся в новом месте: в путешествии или командировке.

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

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

Все признаки работоспособной системы соблюдены, а значит — это будет работать долгие годы»

Обилие правок от клиента.

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

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

Авторский надзор студии Лебедева.

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

Постоянный диалог и компромиссы помогли сохранить логотип «Задизайнено в Студии Лебедева» в футере.

Уложились в 2,5 месяца вместо 3 заявленных. Передали сайт клиенту за 1,5 недели до дедлайна, сохранили бюджет и выполнили задачи, даже те, что считались рискованными.

Что получил клиент:

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

— Связь с офлайном. Визуал сайта транслирует идею бренда Tasty Coffee как в реале, так и в онлайне.

— Удобство для партнёров. Игры помогают выбирать сорт кофе, дополнительно выдаются промокоды.

— Разноплановая аудитория. Подходит как новичкам, так и «продвинутым» кофейням.

— Скорость и стабильность. Быстрая загрузка несмотря на объём анимаций.

— Возможность масштабирования. Добавлять фичи (аналогично карте, англоязычной версии) без переделки ядра сайта.

Что это дало Tasty Coffee

— Больше внимания и вовлечённости. Люди дольше остаются на сайте, играют в игры, изучают ассортимент, смотрят контент, получают промокоды.

— Рост доверия клиентов. Интерактивные элементы, обновляющиеся в реальном времени, доказывают, что компания следит за качеством.

— Гибкость для будущих изменений. Проект легко дорабатывать и расширять.

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

Статистика в Яндекс Метрике подтверждает эффективность:

— Показатель отказов снизился почти на 39%.

— Глубина просмотра выросла на 1124%.

— Время на сайте тоже увеличилось.

— Количество визитов и посетителей выросло в 10 раз (сравниваем показатели за ноябрь 2023 и ноябрь 2024).

— Время до отрисовки контента сократилось на 54%, а время на редиректы — на 68%.