Как мы сделали оптовый сайт Tasty Coffee за 3 месяца

Заказчик

Tasty Coffee — российский производитель свежеобжаренного кофе и поставщик для сегмента HoReCa.

Задача

Нужно было реализовать новый оптовый сайт по дизайну Студии Лебедева, интегрировать его с CRM и запустить за 3 месяца.

Клиент

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

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

Дизайн нового сайта разработала Студия Артемия Лебедева.

Задача

Перед нами стояла задача реализовать новый оптовый сайт tastycoffee.ru на основе дизайна студии Лебедева. При этом важно было не просто свстать страницы, а собрать полноценный рабочий продукт, который будет удобен для партнеров компании и при этом сохранит весь визуальный замысел дизайнеров.

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

Контекст проекта

Проект выполнялся сразу тремя командами. За дизайн отвечала Студия Артемия Лебедева, за фронтенд-разработку — команда Nutnet, а backend-часть разрабатывала внутренняя команда Tasty Coffee.

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

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

Как строилась работа над проектом

В разработке участвовали тимлид, два frontend-разработчика, тестировщик и менеджер проекта. Со стороны клиента работала backend-команда.

Общий объём разработки составил примерно 1500 часов.

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

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

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

Реализация дизайна и анимаций

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

Фронтенд сайта мы реализовали на Vue.js и Nuxt.js. Для анимаций использовали дополнительные библиотеки, которые позволили контролировать появление элементов при прокрутке страницы и создавать плавные переходы между блоками.

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

Также на сайте были реализованы слайдеры с видео и эффекты параллакса. Чтобы все это работало стабильно, мы дополнительно оптимизировали изображения, настроили отложенную загрузку контента и минимизировали CSS и JavaScript.

Карта кофеен

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

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

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

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

Игровые механики

Чтобы сделать сайт более интерактивным, на нем были реализованы две игры.

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

Вторая игра называется «Колорсортер». Она демонстрирует процесс сортировки кофейных зерен по качеству. Пользователю предлагается найти дефектные зерна среди хороших.

Обе игры были реализованы на Vue.js и протестированы на разных устройствах и браузерах.

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

Для выхода на международный рынок была реализована английская версия сайта.

Статические страницы перевели вручную, чтобы сохранить качество текста. Динамические данные подключили к системе автоматического перевода, после чего клиент отредактировал их.

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

Интеграция с CRM

Сайт был интегрирован с CRM клиента. Это позволило синхронизировать данные между системой и сайтом.

Личные кабинеты B2B-клиентов получили доступ к информации о заказах и товарах, а карта кофеен начала автоматически получать данные о партнерах и поставках кофе.

Таким образом сайт стал частью общей цифровой экосистемы компании.

Оптимизация производительности

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

Мы провели дополнительную оптимизацию. Изображения были сжаты и переведены в формат WebP, настроена отложенная загрузка изображений и видео, а код был минимизирован. Также мы включили gzip-сжатие.

После этих доработок сайт начал показывать хорошие результаты по скорости загрузки.

Сложности проекта

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

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

Чтобы сохранить сроки проекта, мы систематизировали правки, расставляли приоритеты и обрабатывали изменения отдельным потоком задач.

Результат

Проект был реализован примерно за 2,5 месяца — на полторы недели раньше запланированного срока.

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

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

Перейти на сайт