Как мы сделали оптовый сайт Tasty Coffee за 3 месяца — и причем здесь управление рисками

Посмотреть детально можно по ссылке

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

Немного о Nutnet

Nutnet занимается заказной разработкой. Более 15 лет делаем сайты, сервисы и личные кабинеты для бизнеса. В команде Nutnet 40+ специалистов, среди них фронтенд-разработчики, бэкенд-разработчики, тестировщики, тимлиды, менеджеры проектов. Берем задачи любого уровня сложности.

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

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

Что нужно было сделать

1. Обновить оптовый сайт с новым дизайном, который создала Студия Артемия Лебедева. При этом не менять CMS, чтобы не усложнять работу команды клиента.
2. Разработать интерактивную карту кофеен. Она нужна для партнеров и клиентов, чтобы они могли находить точки, где подают свежий кофе от Tasty Coffee.
3. Запустить англоязычную версию сайта для выхода на международные рынки.

Что мы делали, чтобы достичь результата

1. Управляли рисками с самого старта

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

• Объем и сложность. Около 1 500 часов работы на команду из 5 человек за 3 месяца.
• Стороны проекта. Участвовали мы (Nutnet), Студия Лебедева (дизайн), Tasty Coffee (клиент), а также бэкенд-команда на стороне заказчика.
• Технологический сдвиг. До старта клиент принял решение перейти с React на Vue, что для фронтенда означало адаптацию стека.
• Требовательный клиент. Tasty Coffee уделяет внимание мелочам. Множество правок и доработок были ожидаемы, нужно было выстроить процесс так, чтобы не потеряться в потоке задач и замечаний.

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

1. Понятные задачи. Сначала брались за то, что уже ясно: верстка простых страниц, настройка окружения, подключение библиотек. Это позволяло сразу показать клиенту первые результаты.
2. Сложные задачи. Прежде чем начать их кодить, мы изучали требования. Тимлид поднимал одну сложную задачу, разбирался в ней, потом описывал подзадачи для команды. Так мы не тратили время впустую и не запутывались.
3. Правки и изменения. Мы не смешивали их с новыми функциями. Все правки собирали в отдельном документе, договаривались с клиентом о приоритетах и разбирали их порциями. Это помогло не перегрузить разработчиков и идти по плану.

Вели регулярные точки контроля:

• Ежедневные созвоны для команды: что сделано, что планируем, где возникли проблемы?
• Еженедельные демо для команды: показывали прогресс, сверялись с планом на следующую неделю.
• Раз в 2 недели показ клиенту: обновляли демо-стенд, демонстрировали достигнутые результаты и собирали обратную связь.
• Раз в месяц подводили итоги, смотрели на экономику проекта и корректировали стратегию.

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

2. Верстали сложный дизайн и анимации

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

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

• Изучили макеты детально. Посмотрели, где присутствуют анимации, в каких блоках зерна должны падать, как двигаются картинки при прокрутке. Выяснили, что на странице «История» есть зерна, которые меняют положение при скролле. На странице с отзывами — слайдер с видео, который должен плавно переключаться. На главной — анимированные переходы между блоками.
• Выбрали инструменты. Мы использовали Vue.js и Nuxt.js для сборки фронтенда, а для анимаций подключили специальные библиотеки. Например, nuxt-aos помогает запускать анимации при появлении элемента на экране. Мы применили библиотеку для параллакса, чтобы некоторые элементы двигались при прокрутке. Сочетание Vue, Nuxt и анимационных библиотек дало возможность контролировать логику и последовательность эффектов.
• Падение кофейных зерен. С зернами был свой челлендж. Изначально не было точного понимания, как они должны двигаться. Мы пробовали разные варианты. Сначала зерна падали слишком быстро, потом слишком хаотично... Четыре раза меняли логику, пока не получили плавный и понятный визуальный эффект. Теперь при скролле зерно «падает» ровно так, как планировали дизайнеры и клиент!

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

• Оптимизация изображений и кода. Много анимаций нагружают систему. Мы сжали изображения, использовали форматы типа WebP, настроили lazy loading, чтобы картинки грузились при прокрутке. Минифицировали CSS и JS, удалили лишний код. Благодаря этому сайт не тормозит даже при интенсивной анимации.
• Проверка в разных условиях. Тестировали сайт на смартфонах, планшетах, больших и маленьких экранах, в разных браузерах. Смотрели, как выглядят анимации и переходы. Если находили проблемы, меняли настройки. Добились того, чтобы анимация зерен, слайдеры с отзывами и другие эффекты работали одинаково хорошо на разных устройствах.

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

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

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

Карта на сайте Tasty Coffee показывает, где можно попробовать свежий кофе бренда. Мы реализовали ее на базе API Яндекс Карт и настроили кастомный стиль, чтобы она гармонично вписалась в общий дизайн сайта.

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

1. Автоматическое управление точками. Каждая кофейня на карте обновляется автоматически. Если партнёр перестаёт закупать кофе или срок обжарки зерна истекает, точка исчезает. Это поддерживает репутацию бренда и подчёркивает, что Tasty Coffee — это всегда про свежесть.
2. Интеграция с бэкендом. Мы настроили связь с CRM-системой клиента, которая передаёт данные о поставках. Карта получает информацию о дате обжарки и статусе кофейни в реальном времени.
3. Быстрая и плавная работа. Чтобы карта оставалась удобной даже с большим числом точек, мы применили кластеризацию. Близкие друг к другу кофейни объединяются в группы, которые распадаются при увеличении масштаба.

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

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

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

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

4. Разработали игры

Чтобы сделать сайт интерактивным и вовлечь пользователей, мы разработали две игры. Они не только развлекают, но и рассказывают о продуктах и процессе производства Tasty Coffee.

• «Игра вкуса»

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

Разработали игру с использованием Vue.js и Nuxt.js. Это сделало её удобной для работы на любых устройствах.

• «Колорсортер»

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

Здесь мы использовали Nuxt.js и анимационную библиотеку nuxt-aos для создания плавных визуальных эффектов.

Обе игры протестировали на разных устройствах и браузерах, чтобы они работали стабильно. Теперь они стали частью сайта, которая привлекает внимание и вызывает желание узнать больше о Tasty Coffee.

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

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

5. Создали англоязычную версию

Для существования на международном рынке Tasty Coffee потребовалась англоязычная версия сайта. Мы реализовали её следующим образом:

1. Статичные страницы перевели вручную, чтобы сохранить высокое качество текста.
2. Динамические данные (новости, товары) подключили к Google Translate API. Клиент отредактировал автоматический перевод, чтобы он звучал естественно.
3. Убрали блоки, которые актуальны только для российского рынка, например, карту кофеен. Это сделало англоязычную версию компактной и понятной для зарубежных пользователей.

Так Tasty Coffee получили двуязычный сайт без затрат на переводчиков.

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

У Tasty Coffee уже была готовая CRM, с которой нужно было связать новый сайт. Эта задача потребовала взаимодействия с инхаус-командой клиента. Мы проработали интеграцию так, чтобы:

1. Личные кабинеты B2B-клиентов синхронизировались с CRM. Это позволило партнерам легко управлять заказами и данными через сайт.
2. Данные о кофейнях попадали на карту. Настроили систему, которая автоматически скрывает кофейни, если там давно не обновлялся кофе.
3. Динамические элементы обновлялись без сбоев. Например, новости, товары и промоакции теперь синхронизируются с CRM в режиме реального времени.

В процессе мы сотрудничали с внутренней командой клиента. Вместе согласовали формат данных, способы их передачи и проверили работу всех функций. Сайт стал частью общей экосистемы Tasty Coffee.

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

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

1. Поработали с изображениями.
   — Вручную сжимали изображения, чтобы сохранить баланс между качеством и размером файла.
   — Изменяли картинки под нужные размеры, исключая лишние области.
   — Перевели большинство изображений в формат WebP (файлы «весят» меньше без потери качества).
2. Реализовали Lazy loading. Настроили отложенную загрузку изображений, видео и слайдеров. Теперь эти элементы подгружаются, когда пользователь доходит до них на странице.
3. Оптимизировали код.
   — Минифицировали CSS и JavaScript, удалили лишний код.
   — Включили сжатие текста с помощью gzip, что дополнительно уменьшает время загрузки.
4. Проверили и доработали. Протестировали сайт на слабых устройствах и в разных браузерах. Обнаружили слабые места и доработали их. Оптимизировали работу анимаций, чтобы они были плавными даже на устаревших устройствах.

Все это позволило добиться быстрой загрузки и хороших показателей Lighthouse и SEO. И это без ущерба для дизайна!

С какими сложностями столкнулись и как их решили

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

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

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

Благодаря постоянному общению и компромиссам мы выполнили все требования. Логотип студии остался на сайте.

Что получилось в итоге

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

Сайт, который получил клиент:

1. Отражает ценности бренда. Сайт показывает, что Tasty Coffee заботится о качестве, людях и экологии. Все элементы дизайна и анимации подчеркивают эти принципы.
2. Напрямую связан с офлайном. Сайт по визуалу транслирует мэтч бренда онлайн и офлайн.
3. Позволяет партнерам узнавать о продукции. Клиенты могут выбирать вкус кофе через интерактивные игры и получать промокоды.
4. Удовлетворяет сразу несколько сегментов аудитории: кофейни-новички, прошаренные кофейни, а также пользователей / еще не пользователей Tasty. Все они получают на сайте нужную информацию.
5. Показывает карту кофеен. Пользователи видят, где доступен свежий кофе Tasty Coffee. Карта показывает только те кофейни, у которых есть свежие зёрна, что укрепляет доверие к бренду.
6. Работает быстро и стабильно. Сайт загружается быстро, даже с учетом сложных анимаций.
7. Имеет англоязычную версию. Все тексты переведены, интерфейс адаптирован.

Вот так выглядит в итоге главная страница оптового сайта Tasty Coffee:

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

1. Больше внимания и вовлеченности. Люди задерживаются на сайте Tasty Coffee дольше. Они играют в игры, изучают ассортимент, смотрят карту кофеен и получают промокоды. Это помогает лучше познакомиться с продукцией и повышает вероятность покупки.
2. Доверие клиентов. Карта показывает кофейни, где есть только свежий кофе. Это доказывает, что компания следит за качеством и держит обещания. Новый сайт сделал бренд заметнее и усилил его репутацию.
3. Гибкость для будущих изменений. Сайт построен так, чтобы в дальнейшем можно было легко вносить новые фичи, обновлять контент и добавлять интеграции.
4. Выход на международный рынок. Теперь бренд готов работать с зарубежными покупателями. Английская версия сайта помогает компаниям и партнёрам за границей узнать о Tasty Coffee.

Статистика в Яндекс Метрике говорит сама за себя — показатель отказов на сайте снизился почти в два раза, а глубина просмотра немного, но увеличилась:

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

Своих разработчиков нет, но мы их и не искали — мы за то, чтобы каждый занимался своим делом. Работа с IT-проектами внутри компании выстроена так, чтобы ее можно было масштабировать и вести сразу несколько проектов даже на одной платформе. Для этого мы работаем одновременно с несколькими подрядчиками. Мы рады, что одним из основных партнеров стали вы.

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

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

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

Итог работы — быстрая и качественная реализация нескольких важных для нас проектов: верстки дизайна нового оптового сайта компании и карты партнерских кофеен».

Михаил Шаров, директор Tasty Coffee

Больше о работе диджитал продакшна, заказной разработке, управлении рисками и многом другом — в нашем Telegram-канале «Nutnet про цифровые продукты». Делимся кейсами, знаниями о разработке, дизайне и управлении проектами в IT. Рассказываем о внутренней кухне и накопленном опыте.

Совет для командной работы

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

1. понятное: сразу ставили в план,
2. непонятное: возвращали на дискавери-фазу, детализировали и пересогласовывали,
3. изменения: дефекты и правки — приоритизировали и вторым треком ставили в план.