Coffee LikeИнтернет-магазин кофейных зерен и аксессуаров
Запустили MVP интернет-магазина Coffee Like с доставкой по России и странам СНГ. Главная страница с товарным и рекламным промо-блоком, каталог с фильтром, карточка товара, корзина, оформление заказа. Интеграция со СДЭК и ПСКБ-банк.
Заказчик
Coffee Like — известная федеральная компания, занимающаяся производством и продажей кофе и сопутствующих аксессуаров. Имеет широкую франшизную сети кофеен с напитками навынос — свыше 660 штук в 140+ городах и 7 странах.
В 2015 году компания вошла в десятку лучших стартапов малого предпринимательства по мнению Forbes и, согласно исследованиям рынка, в своем сегменте являются лидерами по России.
665+
кофе-баров
142
города в сети CL
27
стаканчиков кофе готовят каждую минуту
Ситуация
До начала нашей работы продажа кофейных зерен Coffee Like и сопутствующих аксессуаров (кружек, кофемолок и пр.) велась только в точках франчайзи.
В конце лета 2019 года руководители компании решили, что нужно запускать ecommerce.
Задача
Создать инструмент онлайн-продаж для розничных покупателей. За 2,5 месяца запустить MVP, чтобы уже осенью случилась первая продажа с сайта.
Необходимо было решить следующие задачи
— Автоматизировать процесс продажи. Вмешательство менеджера должно быть минимальным.
— Сделать так, чтобы нужный товар смог найти и тот, кто хорошо разбирается в кофе, и тот кто мало знает о характеристиках продукта.
— Нужно, чтобы сайт мог работать при высокой посещаемости (план — более 100 тысяч заходов в сутки).
— Обеспечить оплату на сайте, доставку по России и странам СНГ.
Проектирование
Чтобы ускорить согласование первых этапов работы над сайтом — аналитику, проектирование и дизайн, — заказчик сам прилетел в Барнаул и неделю работал в нашем офисе совместно с аналитиком, руководителем проекта и дизайнером.
Coffee Like
Кирилл Николаев
С учётом того, что сроки выката MVP в прод были чуть менее, чем 90 суток, решили, что разработка ТЗ будет продуктивнее вместе с командой, для чего десантировались в Барнаул на неделю.
Всё было гладко, из запоминающихся вещей — внезапная грыжа спинного отдела позвоночника и 4 часа без обезболивающих на рейсе в Москву, но задачу мы выполнили — написали, согласовали, сделали.
На этом этапе мы выяснили:
— Какую информацию должен увидеть пользователь в превью товара, чтобы принять решение о покупке.
— По каким характеристикам человек ищет подходящий кофе. Опираясь на эту информацию, спроектировали фильтр в списке товаров.
— Какие дополнительные блоки разместить на странице, чтобы ответить на все вопросы покупателя
— Какие способы совершения допродажи мы реализуем на первом этапе, чтобы не сильно повлиять при этом на общий срок разработки.
В исследованиях опирались на информацию от отдела маркетинга клиента, анализировали сайты конкурентов, читали форумы и соцсети, чтобы выяснить, какие параметры важны при выборе кофе. В результате описание и фильтры для кофе получились исчерпывающими — и для гиков, которые в этом разбираются, и для тех, кто просто зашел купить кофе.
Особенность фильтра: все его параметры регулируются из админки. Можно задавать новые свойства и назначать их товарам — таким образом тестировать гипотезы.
Дизайн
Работу над дизайном мы начали с составления визуального брифа.
Дизайнер
Станислав Хромушин
Было предложено несколько направлений, определили самое подходящее и двинулись к дизайн-концепции главной страницы. В процессе ее разработки опирались на пользовательский опыт: делали так, чтобы каждый элемент был понятным пользователю и находился на своем месте. Старались сделать максимально удобный интерфейс, при этом сопроводить его качественным и уместным креативом. Благодаря такому подходу нам удалось попасть в цель.
На первом экране разместили слайд с товаром. Он помогает пользователю сразу сориентироваться, куда он попал. Акцентирует внимание на топовом товаре. Это позволяет совершить продажу в первые секунды, которые пользователь проводит на сайте.
Инфографика «Путь кофе» рассказывает о процессе производства кофе: выращивание зерен, сборка, обжарка.
На превью товара выведены все важные характеристики, которые нужны покупателю для принятия решения. В том числе рейтинг — интуитивно понятный ориентир.
Благодаря тому, что заказчик был активно включен в работу, у нас получилось нарисовать и согласовать дизайн всех страниц за 1,5 недели, почти без правок.
Технологии
Сайт реализован, опираясь на подход API Based: с RESTfull backend и административной панелью на Symfony Framework.
Технический директор
Павел Бондарович
При разработке мы применили подход API Based: параллельно с версткой макетов мы разработали API, а затем интегрировали с ним клиентскую часть — фронтенд веб-приложения. Благодаря этому проект будет легче поддерживать и развивать.
Гибкая админка позволяет оперативно реагировать на покупательский спрос и тестировать различные гипотезы.
— Редактируются фото товаров, основное и дополнительное описание, порядок выдачи, размещение в промо-блоках. Присваиваются характеристики: «Популярный», «Быстрая доставка».
— Гибко настраиваются фильтры: можно задавать товарам новые свойства и выводить их в списке товаров. Так происходит тестирование разных сценариев выбора кофе.
— Происходит привязка сопутствующих товаров: «С этим покупают» и «Похожие товары». На основе анализа статистики продаж сопутствующих товаров можно изменять привязки и таким образом управлять эффективностью допродаж.
Фронтент-разработчик
Андрей Ведин
Интерфейс сайта плавный и легкий. Для прелоадеров в списке товаров и корзине мы использовали Skeleton Screens.
Оформление заказа
Перед нами стояла задача сделать так, чтобы заказ оформлялся с минимальным вмешательством менеджера. Для этого мы упростили и автоматизировали все процессы.
Чтобы оформить заказ, не требуется дожидаться подтверждающего звонка. Покупатель собирает заказ, оплачивает его онлайн. После этого заявка автоматически уходит в транспортную компанию. Сервис доставки отправляет в систему трек-номер заказа.
Через сервис SendPulse покупателю уходит письмо с информацией о доставке. Таким же образом отправляются оповещения о смене статуса.
Таким образом, менеджер Coffee Like поключается только в том случае, если требуется ручное вмешательство. Например, если покупатель передумал и хочет отменить заказ или изменить состав.
На сайте реализована интеграция с платежной системой ПСКБ-Банк и службой доставки СДЭК. Для отправки сообщений о статусе заказа подключен сервис SendPulse.
Результат
У нас получилось собрать и запустить MVP менее чем за 90 суток. Это стало возможным благодаря слаженной работе с клиентом и отстроенным процессам.
Выделенная команда разработки
С самого начала на проект собрали команду под руководством менеджера и тимлида. Все работы четко планируются, ежедневно происходят стендапы, команда работает слаженно и быстро.
Параллельные процессы
За счет того, что мы разделили работы по frontend и backend, они могут вестись одновременно. Так, например, разработка административной панели началась еще до того, как были нарисованы все макеты.
Синхронизация с клиентом
Благодаря тому, что менеджер со стороны заказчика работал над важными первыми этапами в нашем офисе, очень быстро решались все вопросы, которые обычно требуют долгого обсуждения. В нашем случае структуру проекта и концепцию дизайна согласовали максимально оперативно и практически без правок.
Coffee Like
Кирилл Николаев
Боль любого владельца технологического продукта — контроль сроков, бюджета и качества разработки. С ребятами эти вопросы абсолютно всегда протекают планово и без неожиданностей, вообще без исключений. Это ли не счастье?
Отпускать такого разработчика — большой грех, так что планируем еще минимум 5-6 итераций на 2 года точно.
Что в итоге?
Мы достигли главную цель — запустили интернет-магазин в срок. 15 ноября 2019 года сайт открылся для посетителей.
Заказчик высоко оценивает сотрудничество с нами. В настоящий момент планируем состав работ на следующие итерации.
Проект получил серебро Премии Тэглайн в номинации «Лучший сайт ритейла».
Свяжусь с вами в течение дня, чтобы уточнить детали проекта и сориентировать по стоимости разработки. После этого обсудим цели проекта, требования к нему и начнём работу.
Свяжусь с вами в течение дня, чтобы уточнить детали проекта и сориентировать по стоимости разработки. После этого обсудим цели проекта, требования к нему и начнём работу.